diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
index 5088f9ea5f..ebb514c40a 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
@@ -1,7 +1,7 @@
import './CeleryTaskConfigOptions.styles.scss';
import { Color } from '@signozhq/design-tokens';
-import { Button, Select, Spin, Tooltip } from 'antd';
+import { Button, Select, Spin, Tooltip, Typography } from 'antd';
import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
import { QueryParams } from 'constants/query';
import useUrlQuery from 'hooks/useUrlQuery';
@@ -31,6 +31,9 @@ function CeleryTaskConfigOptions(): JSX.Element {
return (
+
+ Task Name
+
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
index 23d4ba7e8c..165ab41504 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
@@ -449,17 +449,18 @@ export const celeryWorkerOnlineWidgetData = getWidgetQueryBuilder(
getWidgetQuery({
title: 'Worker Online',
description: 'Represents the number of workers online.',
+ panelTypes: PANEL_TYPES.VALUE,
queryData: [
{
aggregateAttribute: {
dataType: DataTypes.Float64,
- id: 'flower_worker_online--float64--Gauge--true',
+ id: 'flower_task_runtime_seconds_sum--float64--Sum--true',
isColumn: true,
isJSON: false,
- key: 'flower_worker_online',
- type: 'Gauge',
+ key: 'flower_task_runtime_seconds_sum',
+ type: 'Sum',
},
- aggregateOperator: 'avg',
+ aggregateOperator: 'rate',
dataSource: DataSource.METRICS,
disabled: false,
expression: 'A',
@@ -468,25 +469,16 @@ export const celeryWorkerOnlineWidgetData = getWidgetQueryBuilder(
op: 'AND',
},
functions: [],
- groupBy: [
- {
- dataType: DataTypes.String,
- id: 'worker--string--tag--false',
- isColumn: false,
- isJSON: false,
- key: 'worker',
- type: 'tag',
- },
- ],
+ groupBy: [],
having: [],
legend: '',
limit: null,
orderBy: [],
queryName: 'A',
reduceTo: 'avg',
- spaceAggregation: 'max',
+ spaceAggregation: 'sum',
stepInterval: 60,
- timeAggregation: 'avg',
+ timeAggregation: 'rate',
},
],
}),
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
index e135a1cfff..2cd638e170 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
@@ -9,12 +9,16 @@ import { Card } from 'container/GridCardLayout/styles';
import { useIsDarkMode } from 'hooks/useDarkMode';
import useUrlQuery from 'hooks/useUrlQuery';
import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useHistory, useLocation } from 'react-router-dom';
import { UpdateTimeInterval } from 'store/actions';
import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
+import {
+ applyCeleryFilterOnWidgetData,
+ getFiltersFromQueryParams,
+} from '../CeleryUtils';
import {
celeryTaskLatencyWidgetData,
celeryTimeSeriesTablesWidgetData,
@@ -75,6 +79,25 @@ function CeleryTaskLatencyGraph({
[dispatch, history, pathname, urlQuery],
);
+ const selectedFilters = useMemo(
+ () =>
+ getFiltersFromQueryParams(
+ QueryParams.taskName,
+ urlQuery,
+ 'celery.task_name',
+ ),
+ [urlQuery],
+ );
+
+ const updatedWidgetData = useMemo(
+ () =>
+ applyCeleryFilterOnWidgetData(
+ selectedFilters || [],
+ celeryTaskLatencyWidgetData(graphState),
+ ),
+ [graphState, selectedFilters],
+ );
+
const onGraphClick = (
xValue: number,
_yValue: number,
@@ -131,7 +154,7 @@ function CeleryTaskLatencyGraph({
{graphState === CeleryTaskGraphState.P99 && (
({
+ id: uuidv4(),
+ key: {
+ key,
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: false,
+ isJSON: false,
+ id: `${key}--string--tag--false`,
+ },
+ op: '=',
+ value: value.toString(),
+ }));
+}
+
+export function applyCeleryFilterOnWidgetData(
+ filters: TagFilterItem[],
+ widgetData: Widgets,
+): Widgets {
+ console.log(filters, widgetData);
+ return {
+ ...widgetData,
+ query: {
+ ...widgetData.query,
+ builder: {
+ ...widgetData.query.builder,
+ queryData: widgetData.query.builder.queryData.map((queryItem, index) =>
+ index === 0
+ ? {
+ ...queryItem,
+ filters: {
+ ...queryItem.filters,
+ items: [...queryItem.filters.items, ...filters],
+ },
+ }
+ : queryItem,
+ ),
+ },
+ },
+ };
+}