Rajat Dabade ec9dbb6853
Dashboard Clean up and list view improvement. (#4675)
* refactor: initial setup

* refactor: created panelWrapper to separate panel data

* fix: type error

* fix: the dimension issue for graphs

* refactor: done with table value uplot panels

* refactor: done with logs panel component

* refactor: updated props for log panel component

* fix: query range duplicate issue for logs

* refactor: trace list view done

* fix: full view support

* refactor: done with edit mode for panels

* refactor: type and props

* refactor: reduce an extra api call on edit for list view

* refactor: done with full graph visibility handler

* refactor: removed commented code

* refactor: removed commented code

* fix: build failure

* refactor: updated service layer graphs

* refactor: updated top level oparation query key

* refactor: added drag select

* refactor: done with drag select in chart

* refactor: code cleanup

* refactor: legend should not need stage and run query
2024-04-02 16:40:41 +05:30

64 lines
2.0 KiB
TypeScript

// This component is not been used in the application as we support only metrics for ApDex as of now.
// This component is been kept for future reference.
import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import { GraphTitle } from 'container/MetricsApplication/constant';
import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
import { apDexTracesQueryBuilderQueries } from 'container/MetricsApplication/MetricsPageQueries/OverviewQueries';
import { useMemo } from 'react';
import { useParams } from 'react-router-dom';
import { EQueryType } from 'types/common/dashboard';
import { v4 as uuid } from 'uuid';
import { IServiceName } from '../../types';
import { ApDexDataSwitcherProps } from './types';
function ApDexTraces({
handleGraphClick,
onDragSelect,
topLevelOperationsRoute,
tagFilterItems,
thresholdValue,
}: ApDexDataSwitcherProps): JSX.Element {
const { servicename: encodedServiceName } = useParams<IServiceName>();
const servicename = decodeURIComponent(encodedServiceName);
const apDexTracesWidget = useMemo(
() =>
getWidgetQueryBuilder({
query: {
queryType: EQueryType.QUERY_BUILDER,
promql: [],
builder: apDexTracesQueryBuilderQueries({
servicename,
tagFilterItems,
topLevelOperationsRoute,
threashold: thresholdValue || 0,
}),
clickhouse_sql: [],
id: uuid(),
},
title: GraphTitle.APDEX,
panelTypes: PANEL_TYPES.TIME_SERIES,
}),
[servicename, tagFilterItems, thresholdValue, topLevelOperationsRoute],
);
const isQueryEnabled =
topLevelOperationsRoute.length > 0 && thresholdValue !== undefined;
return (
<Graph
widget={apDexTracesWidget}
onDragSelect={onDragSelect}
onClickHandler={handleGraphClick('ApDex')}
threshold={thresholdValue}
isQueryEnabled={isQueryEnabled}
version={ENTITY_VERSION_V4}
/>
);
}
export default ApDexTraces;