fix: [SIG-542]: handle special characters in servicename (#4649)

* fix: [SIG-542]: handle special characters in servicename

* feat: handle . operator in the URL

* chore: left files to update
This commit is contained in:
Vikrant Gupta 2024-03-08 00:08:12 +05:30 committed by GitHub
parent c842e68288
commit 7051831539
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 45 additions and 16 deletions

View File

@ -30,7 +30,9 @@ import {
} from './util'; } from './util';
function DBCall(): JSX.Element { function DBCall(): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0); const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { queries } = useResourceAttribute(); const { queries } = useResourceAttribute();

View File

@ -32,7 +32,9 @@ import {
function External(): JSX.Element { function External(): JSX.Element {
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0); const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { queries } = useResourceAttribute(); const { queries } = useResourceAttribute();
const tagFilterItems = useMemo( const tagFilterItems = useMemo(

View File

@ -52,7 +52,8 @@ function Application(): JSX.Element {
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>( const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime, (state) => state.globalTime,
); );
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0); const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { search, pathname } = useLocation(); const { search, pathname } = useLocation();
const { queries } = useResourceAttribute(); const { queries } = useResourceAttribute();

View File

@ -32,7 +32,8 @@ function ApDexMetrics({
topLevelOperationsRoute, topLevelOperationsRoute,
handleGraphClick, handleGraphClick,
}: ApDexMetricsProps): JSX.Element { }: ApDexMetricsProps): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const apDexMetricsWidget = useMemo( const apDexMetricsWidget = useMemo(
() => () =>

View File

@ -15,7 +15,9 @@ function ApDexMetricsApplication({
thresholdValue, thresholdValue,
topLevelOperationsRoute, topLevelOperationsRoute,
}: ApDexDataSwitcherProps): JSX.Element { }: ApDexDataSwitcherProps): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename); const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename);
useErrorNotification(error); useErrorNotification(error);

View File

@ -21,7 +21,8 @@ function ApDexTraces({
tagFilterItems, tagFilterItems,
thresholdValue, thresholdValue,
}: ApDexDataSwitcherProps): JSX.Element { }: ApDexDataSwitcherProps): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const apDexTracesWidget = useMemo( const apDexTracesWidget = useMemo(
() => () =>

View File

@ -15,7 +15,9 @@ function ApDexApplication({
topLevelOperationsRoute, topLevelOperationsRoute,
tagFilterItems, tagFilterItems,
}: ApDexApplicationProps): JSX.Element { }: ApDexApplicationProps): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { data, isLoading, error, isRefetching } = useGetApDexSettings( const { data, isLoading, error, isRefetching } = useGetApDexSettings(
servicename, servicename,
); );

View File

@ -30,7 +30,8 @@ function ServiceOverview({
topLevelOperationsRoute, topLevelOperationsRoute,
topLevelOperationsIsLoading, topLevelOperationsIsLoading,
}: ServiceOverviewProps): JSX.Element { }: ServiceOverviewProps): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS) const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
?.active; ?.active;

View File

@ -15,7 +15,11 @@ function TopOperation(): JSX.Element {
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>( const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime, (state) => state.globalTime,
); );
const { servicename } = useParams<{ servicename?: string }>(); const { servicename: encodedServiceName } = useParams<{
servicename?: string;
}>();
const servicename = decodeURIComponent(encodedServiceName || '');
const { queries } = useResourceAttribute(); const { queries } = useResourceAttribute();
const selectedTags = useMemo( const selectedTags = useMemo(
() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [], () => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],

View File

@ -24,7 +24,8 @@ import ColumnWithLink from './TableRenderer/ColumnWithLink';
import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer'; import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer';
function TopOperationMetrics(): JSX.Element { function TopOperationMetrics(): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { notifications } = useNotifications(); const { notifications } = useNotifications();

View File

@ -26,7 +26,9 @@ function TopOperationsTable({
isLoading, isLoading,
}: TopOperationsTableProps): JSX.Element { }: TopOperationsTableProps): JSX.Element {
const searchInput = useRef<InputRef>(null); const searchInput = useRef<InputRef>(null);
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>( const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(state) => state.globalTime, (state) => state.globalTime,
); );
@ -39,7 +41,8 @@ function TopOperationsTable({
const params = useParams<{ servicename: string }>(); const params = useParams<{ servicename: string }>();
const handleOnClick = (operation: string): void => { const handleOnClick = (operation: string): void => {
const { servicename } = params; const { servicename: encodedServiceName } = params;
const servicename = decodeURIComponent(encodedServiceName);
navigateToTrace({ navigateToTrace({
servicename, servicename,

View File

@ -22,7 +22,8 @@ export function QueryTable({
...props ...props
}: QueryTableProps): JSX.Element { }: QueryTableProps): JSX.Element {
const { isDownloadEnabled = false, fileName = '' } = downloadOption || {}; const { isDownloadEnabled = false, fileName = '' } = downloadOption || {};
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { loading } = props; const { loading } = props;
const { columns: newColumns, dataSource: newDataSource } = useMemo(() => { const { columns: newColumns, dataSource: newDataSource } = useMemo(() => {
if (columns && dataSource) { if (columns && dataSource) {

View File

@ -10,7 +10,9 @@ import { Button } from '../styles';
import ApDexSettings from './ApDexSettings'; import ApDexSettings from './ApDexSettings';
function ApDexApplication(): JSX.Element { function ApDexApplication(): JSX.Element {
const { servicename } = useParams<IServiceName>(); const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { const {
data, data,
isLoading, isLoading,

View File

@ -13,7 +13,11 @@ import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types';
import useMetricsApplicationTabKey from './useMetricsApplicationTabKey'; import useMetricsApplicationTabKey from './useMetricsApplicationTabKey';
function MetricsApplication(): JSX.Element { function MetricsApplication(): JSX.Element {
const { servicename } = useParams<{ servicename: string }>(); const { servicename: encodedServiceName } = useParams<{
servicename: string;
}>();
const servicename = decodeURIComponent(encodedServiceName);
const activeKey = useMetricsApplicationTabKey(); const activeKey = useMetricsApplicationTabKey();

View File

@ -67,7 +67,9 @@ const config = {
devtool: 'source-map', devtool: 'source-map',
entry: resolve(__dirname, './src/index.tsx'), entry: resolve(__dirname, './src/index.tsx'),
devServer: { devServer: {
historyApiFallback: true, historyApiFallback: {
disableDotRule: true,
},
open: true, open: true,
hot: true, hot: true,
liveReload: true, liveReload: true,