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';
function DBCall(): JSX.Element {
const { servicename } = useParams<IServiceName>();
const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
const { queries } = useResourceAttribute();

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -15,7 +15,11 @@ function TopOperation(): JSX.Element {
const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
(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[]) || [],

View File

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

View File

@ -26,7 +26,9 @@ function TopOperationsTable({
isLoading,
}: TopOperationsTableProps): JSX.Element {
const searchInput = useRef<InputRef>(null);
const { servicename } = useParams<IServiceName>();
const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
(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,

View File

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

View File

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

View File

@ -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();

View File

@ -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,