feat: added value graph and global filter logic

SigNoz · Jan 26, 2025 · e784fba · e784fba
1 parent a0e059e
commit e784fba
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 23 deletions.
diff --git 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 (
 		<div className="celery-task-filters">
 			<div className="celery-filters">
+				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
+					Task Name
+				</Typography.Text>
 				<Select
 					placeholder="Task Name"
 					showSearch

diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { ViewMenuAction } from 'container/GridCardLayout/config';
@@ -7,14 +8,18 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
+import {
+	applyCeleryFilterOnWidgetData,
+	getFiltersFromQueryParams,
+} from '../CeleryUtils';
 import { celeryTimeSeriesTablesWidgetData } from './CeleryTaskGraphUtils';
 
 function CeleryTaskGraph({
@@ -26,6 +31,7 @@ function CeleryTaskGraph({
 	panelType,
 	openTracesButton,
 	onOpenTraceBtnClick,
+	applyCeleryTaskFilter,
 }: {
 	widgetData: Widgets;
 	onClick?: (task: CaptureDataProps) => void;
@@ -35,13 +41,29 @@ function CeleryTaskGraph({
 	panelType?: PANEL_TYPES;
 	openTracesButton?: boolean;
 	onOpenTraceBtnClick?: (record: RowData) => void;
+	applyCeleryTaskFilter?: boolean;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
 	const isDarkMode = useIsDarkMode();
 
+	const selectedFilters = useMemo(
+		() =>
+			getFiltersFromQueryParams(
+				QueryParams.taskName,
+				urlQuery,
+				'celery.task_name',
+			),
+		[urlQuery],
+	);
+
+	const updatedWidgetData = useMemo(
+		() => applyCeleryFilterOnWidgetData(selectedFilters || [], widgetData),
+		[selectedFilters, widgetData],
+	);
+
 	const onDragSelect = useCallback(
 		(start: number, end: number) => {
 			const startTimestamp = Math.trunc(start);
@@ -66,7 +88,7 @@ function CeleryTaskGraph({
 			className="celery-task-graph"
 		>
 			<GridCard
-				widget={widgetData}
+				widget={applyCeleryTaskFilter ? updatedWidgetData : widgetData}
 				headerMenuList={[...ViewMenuAction]}
 				onDragSelect={onDragSelect}
 				onClickHandler={(xValue, _yValue, _mouseX, _mouseY, data): void => {
@@ -93,6 +115,7 @@ function CeleryTaskGraph({
 				isQueryEnabled={queryEnabled}
 				openTracesButton={openTracesButton}
 				onOpenTraceBtnClick={onOpenTraceBtnClick}
+				version={ENTITY_VERSION_V4}
 			/>
 		</Card>
 	);
@@ -105,6 +128,7 @@ CeleryTaskGraph.defaultProps = {
 	panelType: PANEL_TYPES.TIME_SERIES,
 	openTracesButton: false,
 	onOpenTraceBtnClick: undefined,
+	applyCeleryTaskFilter: false,
 };
 
 export default CeleryTaskGraph;
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx
@@ -57,6 +57,7 @@ export default function CeleryTaskGraphGrid({
 						onClick={onClick}
 						queryEnabled={queryEnabled}
 						rightPanelTitle={rightPanelTitle[index]}
+						applyCeleryTaskFilter
 					/>
 				))}
 			</div>

diff --git 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
@@ -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({
 			<div className="celery-task-graph-grid-content">
 				{graphState === CeleryTaskGraphState.P99 && (
 					<GridCard
-						widget={celeryTaskLatencyWidgetData(graphState)}
+						widget={updatedWidgetData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						onClickHandler={onGraphClick}
@@ -141,7 +164,7 @@ function CeleryTaskLatencyGraph({
 
 				{graphState === CeleryTaskGraphState.P95 && (
 					<GridCard
-						widget={celeryTaskLatencyWidgetData(graphState)}
+						widget={updatedWidgetData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						onClickHandler={onGraphClick}
@@ -150,7 +173,7 @@ function CeleryTaskLatencyGraph({
 				)}
 				{graphState === CeleryTaskGraphState.P90 && (
 					<GridCard
-						widget={celeryTaskLatencyWidgetData(graphState)}
+						widget={updatedWidgetData}
 						headerMenuList={[...ViewMenuAction]}
 						onDragSelect={onDragSelect}
 						onClickHandler={onGraphClick}

diff --git a/frontend/src/components/CeleryTask/CeleryUtils.ts b/frontend/src/components/CeleryTask/CeleryUtils.ts
@@ -1,5 +1,9 @@
 import { QueryParams } from 'constants/query';
 import { History, Location } from 'history';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { v4 as uuidv4 } from 'uuid';
 
 export function getValuesFromQueryParams(
 	queryParams: QueryParams,
@@ -20,3 +24,52 @@ export function setQueryParamsFromOptions(
 	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
 	history.replace(generatedUrl);
 }
+
+export function getFiltersFromQueryParams(
+	queryParams: QueryParams,
+	urlQuery: URLSearchParams,
+	key: string,
+): TagFilterItem[] {
+	const value = urlQuery.get(queryParams);
+	const filters = value ? value.split(',') : [];
+	return filters.map((value) => ({
+		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,
+				),
+			},
+		},
+	};
+}