diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index 588fd498bc..3e2325f5be 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -255,7 +255,7 @@ function FormAlertRules({ if ( !currentQuery.builder.queryData || - currentQuery.builder.queryData.length === 0 + currentQuery.builder.queryData?.length === 0 ) { notifications.error({ message: 'Error', diff --git a/frontend/src/container/LiveLogs/constants.ts b/frontend/src/container/LiveLogs/constants.ts index 83df3759ee..79d3415517 100644 --- a/frontend/src/container/LiveLogs/constants.ts +++ b/frontend/src/container/LiveLogs/constants.ts @@ -30,8 +30,8 @@ export const constructCompositeQuery = ({ }: GetDefaultCompositeQueryParams): Query => ({ ...query, builder: { - ...query.builder, - queryData: query.builder.queryData.map((item) => ({ + ...query?.builder, + queryData: query?.builder?.queryData?.map((item) => ({ ...initialQueryData, ...item, ...customQueryData, diff --git a/frontend/src/container/LiveLogs/utils.ts b/frontend/src/container/LiveLogs/utils.ts index 8e41db49e3..a7b6ffe9db 100644 --- a/frontend/src/container/LiveLogs/utils.ts +++ b/frontend/src/container/LiveLogs/utils.ts @@ -42,7 +42,7 @@ export const prepareQueryByFilter = ( ...query, builder: { ...query.builder, - queryData: query.builder.queryData.map((item) => ({ + queryData: query.builder.queryData?.map((item) => ({ ...item, filters: value ? getFilter(item.filters, tagFilter, value) : item.filters, })), @@ -57,7 +57,7 @@ export const getQueryWithoutFilterId = (query: Query): Query => { ...query, builder: { ...query.builder, - queryData: query.builder.queryData.map((item) => ({ + queryData: query.builder.queryData?.map((item) => ({ ...item, filters: { ...item.filters, diff --git a/frontend/src/container/LogsContextList/utils.ts b/frontend/src/container/LogsContextList/utils.ts index 2b1b903fa9..8e06d64ecc 100644 --- a/frontend/src/container/LogsContextList/utils.ts +++ b/frontend/src/container/LogsContextList/utils.ts @@ -40,7 +40,7 @@ export const getRequestData = ({ ...query, builder: { ...query.builder, - queryData: query.builder.queryData.map((item) => ({ + queryData: query.builder.queryData?.map((item) => ({ ...item, ...paginateData, pageSize, diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx index 54c2115927..d45476b6f4 100644 --- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx @@ -27,6 +27,7 @@ import { handleNonInQueryRange, onGraphClickHandler, onViewTracePopupClick, + useGetAPMToTracesQueries, } from './util'; function DBCall(): JSX.Element { @@ -96,6 +97,11 @@ function DBCall(): JSX.Element { [servicename, tagFilterItems], ); + const apmToTraceQuery = useGetAPMToTracesQueries({ + servicename, + isDBCall: true, + }); + return ( @@ -107,6 +113,7 @@ function DBCall(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, + apmToTraceQuery, })} > View Traces @@ -139,6 +146,7 @@ function DBCall(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, + apmToTraceQuery, })} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx index 62ce71b6b4..ff0bc1f682 100644 --- a/frontend/src/container/MetricsApplication/Tabs/External.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx @@ -27,6 +27,7 @@ import { handleNonInQueryRange, onGraphClickHandler, onViewTracePopupClick, + useGetAPMToTracesQueries, } from './util'; function External(): JSX.Element { @@ -138,6 +139,11 @@ function External(): JSX.Element { [servicename, tagFilterItems], ); + const apmToTraceQuery = useGetAPMToTracesQueries({ + servicename, + isExternalCall: true, + }); + return ( <> @@ -150,7 +156,7 @@ function External(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, - isExternalCall: true, + apmToTraceQuery, })} > View Traces @@ -184,7 +190,7 @@ function External(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, - isExternalCall: true, + apmToTraceQuery, })} > View Traces @@ -221,7 +227,7 @@ function External(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, - isExternalCall: true, + apmToTraceQuery, })} > View Traces @@ -255,7 +261,7 @@ function External(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, - isExternalCall: true, + apmToTraceQuery, })} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx index cfaf339d2e..7410e4ccb3 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx @@ -22,6 +22,8 @@ import { useQuery } from 'react-query'; import { useDispatch } from 'react-redux'; import { useLocation, useParams } from 'react-router-dom'; import { UpdateTimeInterval } from 'store/actions'; +import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse'; +import { Query } from 'types/api/queryBuilder/queryBuilderData'; import { EQueryType } from 'types/common/dashboard'; import { v4 as uuid } from 'uuid'; @@ -43,6 +45,7 @@ import { handleNonInQueryRange, onGraphClickHandler, onViewTracePopupClick, + useGetAPMToTracesQueries, } from './util'; function Application(): JSX.Element { @@ -92,6 +95,8 @@ function Application(): JSX.Element { convertRawQueriesToTraceSelectedTags(queries) || [], ); + const apmToTraceQuery = useGetAPMToTracesQueries({ servicename }); + const tagFilterItems = useMemo( () => handleNonInQueryRange(resourceAttributesToTagFilterItems(queries)) || [], @@ -159,7 +164,10 @@ function Application(): JSX.Element { [dispatch, pathname, urlQuery], ); - const onErrorTrackHandler = (timestamp: number): (() => void) => (): void => { + const onErrorTrackHandler = ( + timestamp: number, + apmToTraceQuery: Query, + ): (() => void) => (): void => { const currentTime = timestamp; const tPlusOne = timestamp + 60 * 1000; @@ -170,15 +178,38 @@ function Application(): JSX.Element { const avialableParams = routeConfig[ROUTES.TRACE]; const queryString = getQueryString(avialableParams, urlParams); - history.replace( - `${ - ROUTES.TRACE - }?selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1&${queryString.join( - '', - )}`, + const JSONCompositeQuery = encodeURIComponent( + JSON.stringify(apmToTraceQuery), ); + + const newTraceExplorerPath = `${ + ROUTES.TRACES_EXPLORER + }?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&${ + QueryParams.compositeQuery + }=${JSONCompositeQuery}&${queryString.join('&')}`; + + history.push(newTraceExplorerPath); }; + const errorTrackQuery = useGetAPMToTracesQueries({ + servicename, + filters: [ + { + id: uuid().slice(0, 8), + key: { + key: 'hasError', + dataType: DataTypes.bool, + type: 'tag', + isColumn: true, + isJSON: false, + id: 'hasError--bool--tag--true', + }, + op: 'in', + value: ['true'], + }, + ], + }); + return ( <> @@ -202,6 +233,7 @@ function Application(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, + apmToTraceQuery, })} > View Traces @@ -229,6 +261,7 @@ function Application(): JSX.Element { servicename, selectedTraceTags, timestamp: selectedTimeStamp, + apmToTraceQuery, })} > View Traces @@ -245,7 +278,7 @@ function Application(): JSX.Element { type="default" size="small" id="Error_button" - onClick={onErrorTrackHandler(selectedTimeStamp)} + onClick={onErrorTrackHandler(selectedTimeStamp, errorTrackQuery)} > View Traces diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx index 4007c152ef..9651e16d3a 100644 --- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx +++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx @@ -21,7 +21,11 @@ import { v4 as uuid } from 'uuid'; import { Button } from '../styles'; import { IServiceName } from '../types'; -import { handleNonInQueryRange, onViewTracePopupClick } from '../util'; +import { + handleNonInQueryRange, + onViewTracePopupClick, + useGetAPMToTracesQueries, +} from '../util'; function ServiceOverview({ onDragSelect, @@ -69,6 +73,8 @@ function ServiceOverview({ const isQueryEnabled = !topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0; + const apmToTraceQuery = useGetAPMToTracesQueries({ servicename }); + return ( <>