feat: added APM to new trace filter redirection

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

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,

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,

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,

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 (
  <Row gutter={24}>
  <Col span={12}>
@@ -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

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 (
  <>
  <Row gutter={24}>
@@ -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

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 (
  <>
  <Row gutter={24}>
@@ -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
  </Button>

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 (
  <>
  <Button
@@ -79,6 +85,7 @@ function ServiceOverview({
  servicename,
  selectedTraceTags,
  timestamp: selectedTimeStamp,
+ apmToTraceQuery,
  })}
  >
  View Traces

frontend/src/container/MetricsApplication/Tabs/Overview/TableRenderer/ColumnWithLink.tsx

@@ -1,6 +1,10 @@
 import { Tooltip, Typography } from 'antd';
 import { navigateToTrace } from 'container/MetricsApplication/utils';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { v4 as uuid } from 'uuid';
+
+import { useGetAPMToTracesQueries } from '../../util';
 
 function ColumnWithLink({
  servicename,
@@ -11,13 +15,33 @@ function ColumnWithLink({
 }: LinkColumnProps): JSX.Element {
  const text = record.toString();
 
+ const apmToTraceQuery = useGetAPMToTracesQueries({
+ servicename,
+ filters: [
+ {
+ id: uuid().slice(0, 8),
+ key: {
+ key: 'name',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ },
+ op: 'in',
+ value: [text],
+ },
+ ],
+ });
+
  const handleOnClick = (operation: string) => (): void => {
  navigateToTrace({
  servicename,
  operation,
  minTime,
  maxTime,
  selectedTraceTags,
+ apmToTraceQuery,
  });
  };