fix: resolve unnecessary refetching of graphs on service details page

This commit is contained in:
Amlan Kumar Nandy 2024-12-10 12:00:55 +05:30 committed by GitHub
commit 81775c7d55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 61 additions and 49 deletions

View File

@ -145,41 +145,49 @@ function Application(): JSX.Element {
[servicename, topLevelOperations], [servicename, topLevelOperations],
); );
const operationPerSecWidget = getWidgetQueryBuilder({ const operationPerSecWidget = useMemo(
query: { () =>
queryType: EQueryType.QUERY_BUILDER, getWidgetQueryBuilder({
promql: [], query: {
builder: operationPerSec({ queryType: EQueryType.QUERY_BUILDER,
servicename, promql: [],
tagFilterItems, builder: operationPerSec({
topLevelOperations: topLevelOperationsRoute, servicename,
tagFilterItems,
topLevelOperations: topLevelOperationsRoute,
}),
clickhouse_sql: [],
id: uuid(),
},
title: GraphTitle.RATE_PER_OPS,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: 'ops',
id: SERVICE_CHART_ID.rps,
}), }),
clickhouse_sql: [], [servicename, tagFilterItems, topLevelOperationsRoute],
id: uuid(), );
},
title: GraphTitle.RATE_PER_OPS,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: 'ops',
id: SERVICE_CHART_ID.rps,
});
const errorPercentageWidget = getWidgetQueryBuilder({ const errorPercentageWidget = useMemo(
query: { () =>
queryType: EQueryType.QUERY_BUILDER, getWidgetQueryBuilder({
promql: [], query: {
builder: errorPercentage({ queryType: EQueryType.QUERY_BUILDER,
servicename, promql: [],
tagFilterItems, builder: errorPercentage({
topLevelOperations: topLevelOperationsRoute, servicename,
tagFilterItems,
topLevelOperations: topLevelOperationsRoute,
}),
clickhouse_sql: [],
id: uuid(),
},
title: GraphTitle.ERROR_PERCENTAGE,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: '%',
id: SERVICE_CHART_ID.errorPercentage,
}), }),
clickhouse_sql: [], [servicename, tagFilterItems, topLevelOperationsRoute],
id: uuid(), );
},
title: GraphTitle.ERROR_PERCENTAGE,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: '%',
id: SERVICE_CHART_ID.errorPercentage,
});
const stepInterval = useMemo( const stepInterval = useMemo(
() => () =>

View File

@ -53,24 +53,28 @@ function ServiceOverview({
[isSpanMetricEnable, queries], [isSpanMetricEnable, queries],
); );
const latencyWidget = getWidgetQueryBuilder({ const latencyWidget = useMemo(
query: { () =>
queryType: EQueryType.QUERY_BUILDER, getWidgetQueryBuilder({
promql: [], query: {
builder: latency({ queryType: EQueryType.QUERY_BUILDER,
servicename, promql: [],
tagFilterItems, builder: latency({
isSpanMetricEnable, servicename,
topLevelOperationsRoute, tagFilterItems,
isSpanMetricEnable,
topLevelOperationsRoute,
}),
clickhouse_sql: [],
id: uuid(),
},
title: GraphTitle.LATENCY,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: 'ns',
id: SERVICE_CHART_ID.latency,
}), }),
clickhouse_sql: [], [isSpanMetricEnable, servicename, tagFilterItems, topLevelOperationsRoute],
id: uuid(), );
},
title: GraphTitle.LATENCY,
panelTypes: PANEL_TYPES.TIME_SERIES,
yAxisUnit: 'ns',
id: SERVICE_CHART_ID.latency,
});
const isQueryEnabled = const isQueryEnabled =
!topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0; !topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0;