From 7051831539e2149b714e564cb50f8354d32ceb70 Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Fri, 8 Mar 2024 00:08:12 +0530 Subject: [PATCH] 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 --- frontend/src/container/MetricsApplication/Tabs/DBCall.tsx | 4 +++- .../src/container/MetricsApplication/Tabs/External.tsx | 4 +++- .../src/container/MetricsApplication/Tabs/Overview.tsx | 3 ++- .../Tabs/Overview/ApDex/ApDexMetrics.tsx | 3 ++- .../Tabs/Overview/ApDex/ApDexMetricsApplication.tsx | 4 +++- .../MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx | 3 ++- .../MetricsApplication/Tabs/Overview/ApDex/index.tsx | 4 +++- .../MetricsApplication/Tabs/Overview/ServiceOverview.tsx | 3 ++- .../MetricsApplication/Tabs/Overview/TopOperation.tsx | 6 +++++- .../Tabs/Overview/TopOperationMetrics.tsx | 3 ++- .../container/MetricsApplication/TopOperationsTable.tsx | 7 +++++-- frontend/src/container/QueryTable/QueryTable.tsx | 3 ++- .../pages/MetricsApplication/ApDex/ApDexApplication.tsx | 4 +++- frontend/src/pages/MetricsApplication/index.tsx | 6 +++++- frontend/webpack.config.js | 4 +++- 15 files changed, 45 insertions(+), 16 deletions(-) diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index ab88a8d7dc..0d84d45136 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx @@ -30,7 +30,9 @@ import { } from './util'; function DBCall(): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + + const servicename = decodeURIComponent(encodedServiceName); const [selectedTimeStamp, setSelectedTimeStamp] = useState(0); const { queries } = useResourceAttribute(); diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx index 48e4f24b4c..707675ec1d 100644 --- a/frontend/src/container/MetricsApplication/Tabs/External.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx @@ -32,7 +32,9 @@ import { function External(): JSX.Element { const [selectedTimeStamp, setSelectedTimeStamp] = useState(0); - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + + const servicename = decodeURIComponent(encodedServiceName); const { queries } = useResourceAttribute(); const tagFilterItems = useMemo( diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index 032c3c0cb8..1fde8d0919 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -52,7 +52,8 @@ function Application(): JSX.Element { const { maxTime, minTime } = useSelector( (state) => state.globalTime, ); - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const [selectedTimeStamp, setSelectedTimeStamp] = useState(0); const { search, pathname } = useLocation(); const { queries } = useResourceAttribute(); diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx index 77eb42d676..abfaf52d58 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx @@ -32,7 +32,8 @@ function ApDexMetrics({ topLevelOperationsRoute, handleGraphClick, }: ApDexMetricsProps): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const apDexMetricsWidget = useMemo( () => diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx index 3ee5fbf7d8..9241f82938 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx @@ -15,7 +15,9 @@ function ApDexMetricsApplication({ thresholdValue, topLevelOperationsRoute, }: ApDexDataSwitcherProps): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); + const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename); useErrorNotification(error); diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx index 294560b752..65ebe130a9 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx @@ -21,7 +21,8 @@ function ApDexTraces({ tagFilterItems, thresholdValue, }: ApDexDataSwitcherProps): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const apDexTracesWidget = useMemo( () => diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx index d5e33435d8..140b6d1409 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx @@ -15,7 +15,9 @@ function ApDexApplication({ topLevelOperationsRoute, tagFilterItems, }: ApDexApplicationProps): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); + const { data, isLoading, error, isRefetching } = useGetApDexSettings( servicename, ); diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx index 435d7b26b4..cbf4dacc58 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx @@ -30,7 +30,8 @@ function ServiceOverview({ topLevelOperationsRoute, topLevelOperationsIsLoading, }: ServiceOverviewProps): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS) ?.active; diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx index d2124a7a1f..1b11d199cd 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx @@ -15,7 +15,11 @@ function TopOperation(): JSX.Element { const { maxTime, minTime } = useSelector( (state) => state.globalTime, ); - const { servicename } = useParams<{ servicename?: string }>(); + const { servicename: encodedServiceName } = useParams<{ + servicename?: string; + }>(); + const servicename = decodeURIComponent(encodedServiceName || ''); + const { queries } = useResourceAttribute(); const selectedTags = useMemo( () => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [], diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx index 090d10e808..6b9ab4ee72 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx @@ -24,7 +24,8 @@ import ColumnWithLink from './TableRenderer/ColumnWithLink'; import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer'; function TopOperationMetrics(): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const { notifications } = useNotifications(); diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx index 107c9cb50b..3042db8958 100644 --- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx +++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx @@ -26,7 +26,9 @@ function TopOperationsTable({ isLoading, }: TopOperationsTableProps): JSX.Element { const searchInput = useRef(null); - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + + const servicename = decodeURIComponent(encodedServiceName); const { minTime, maxTime } = useSelector( (state) => state.globalTime, ); @@ -39,7 +41,8 @@ function TopOperationsTable({ const params = useParams<{ servicename: string }>(); const handleOnClick = (operation: string): void => { - const { servicename } = params; + const { servicename: encodedServiceName } = params; + const servicename = decodeURIComponent(encodedServiceName); navigateToTrace({ servicename, diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx index 34b146f6da..2fa1d05f65 100644 --- a/frontend/src/container/QueryTable/QueryTable.tsx +++ b/frontend/src/container/QueryTable/QueryTable.tsx @@ -22,7 +22,8 @@ export function QueryTable({ ...props }: QueryTableProps): JSX.Element { const { isDownloadEnabled = false, fileName = '' } = downloadOption || {}; - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); const { loading } = props; const { columns: newColumns, dataSource: newDataSource } = useMemo(() => { if (columns && dataSource) { diff --git a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx b/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx index 3f088a37a8..00b29c7809 100644 --- a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx +++ b/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx @@ -10,7 +10,9 @@ import { Button } from '../styles'; import ApDexSettings from './ApDexSettings'; function ApDexApplication(): JSX.Element { - const { servicename } = useParams(); + const { servicename: encodedServiceName } = useParams(); + const servicename = decodeURIComponent(encodedServiceName); + const { data, isLoading, diff --git a/frontend/src/pages/MetricsApplication/index.tsx b/frontend/src/pages/MetricsApplication/index.tsx index 94cbd5d99e..1b0229e5d1 100644 --- a/frontend/src/pages/MetricsApplication/index.tsx +++ b/frontend/src/pages/MetricsApplication/index.tsx @@ -13,7 +13,11 @@ import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types'; import useMetricsApplicationTabKey from './useMetricsApplicationTabKey'; function MetricsApplication(): JSX.Element { - const { servicename } = useParams<{ servicename: string }>(); + const { servicename: encodedServiceName } = useParams<{ + servicename: string; + }>(); + + const servicename = decodeURIComponent(encodedServiceName); const activeKey = useMetricsApplicationTabKey(); diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js index 281067ad47..65883594bb 100644 --- a/frontend/webpack.config.js +++ b/frontend/webpack.config.js @@ -67,7 +67,9 @@ const config = { devtool: 'source-map', entry: resolve(__dirname, './src/index.tsx'), devServer: { - historyApiFallback: true, + historyApiFallback: { + disableDotRule: true, + }, open: true, hot: true, liveReload: true,