Merge branch 'main' into feat/aws-integration

SigNoz · Jan 30, 2025 · c99f53b · c99f53b
2 parents cf45010 + 3849ca1
commit c99f53b
Show file tree

Hide file tree

Showing 13 changed files with 570 additions and 233 deletions.
diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
@@ -1,14 +1,10 @@
 import './CeleryTaskConfigOptions.styles.scss';
 
-import { Color } from '@signozhq/design-tokens';
-import { Button, Select, Spin, Tooltip, Typography } from 'antd';
+import { Select, Spin, Typography } from 'antd';
 import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
 import { QueryParams } from 'constants/query';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { Check, Share2 } from 'lucide-react';
-import { useState } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import { useCopyToClipboard } from 'react-use';
 
 import {
 	getValuesFromQueryParams,
@@ -23,11 +19,8 @@ function CeleryTaskConfigOptions(): JSX.Element {
 	const history = useHistory();
 	const location = useLocation();
 
-	const [isURLCopied, setIsURLCopied] = useState(false);
 	const urlQuery = useUrlQuery();
 
-	const [, handleCopyToClipboard] = useCopyToClipboard();
-
 	return (
 		<div className="celery-task-filters">
 			<div className="celery-filters">
@@ -66,25 +59,6 @@ function CeleryTaskConfigOptions(): JSX.Element {
 					}}
 				/>
 			</div>
-			<Tooltip title="Share this" arrow={false}>
-				<Button
-					className="periscope-btn copy-url-btn"
-					onClick={(): void => {
-						handleCopyToClipboard(window.location.href);
-						setIsURLCopied(true);
-						setTimeout(() => {
-							setIsURLCopied(false);
-						}, 1000);
-					}}
-					icon={
-						isURLCopied ? (
-							<Check size={14} color={Color.BG_FOREST_500} />
-						) : (
-							<Share2 size={14} />
-						)
-					}
-				/>
-			</Tooltip>
 		</div>
 	);
 }

diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
@@ -1,9 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DefaultOptionType } from 'antd/es/select';
 import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { DataSource } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 
 export interface Filters {
 	searchText: string;
@@ -31,8 +35,18 @@ export function useGetAllFilters(props: Filters): GetAllFiltersResponse {
 		tagType,
 	} = props;
 
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
 	const { data, isLoading } = useQuery(
-		['attributesValues', attributeKey, searchText],
+		[
+			REACT_QUERY_KEY.GET_ATTRIBUTE_VALUES,
+			attributeKey,
+			searchText,
+			minTime,
+			maxTime,
+		],
 		async () => {
 			const keys = Array.isArray(attributeKey) ? attributeKey : [attributeKey];
 

diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx
@@ -3,26 +3,23 @@ import './CeleryTaskGraph.style.scss';
 import { Color } from '@signozhq/design-tokens';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { themeColors } from 'constants/theme';
 import { ViewMenuAction } from 'container/GridCardLayout/config';
 import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
-import getLabelName from 'lib/getLabelName';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { isEmpty } from 'lodash-es';
 import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory, useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { Widgets } from 'types/api/dashboard/getAll';
-import { QueryData } from 'types/api/widgets/getQuery';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
 import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
-import { paths } from '../CeleryUtils';
+import { useGetGraphCustomSeries } from '../useGetGraphCustomSeries';
 import {
 	celeryAllStateWidgetData,
 	celeryFailedStateWidgetData,
@@ -114,58 +111,26 @@ function CeleryTaskBar({
 			string,
 		];
 
-		onClick?.({
-			entity,
-			value,
-			timeRange: [start, end],
-			widgetData,
-		});
+		if (!isEmpty(entity) || !isEmpty(value)) {
+			onClick?.({
+				entity,
+				value,
+				timeRange: [start, end],
+				widgetData,
+			});
+		}
 	};
 
-	const getGraphSeries = (color: string, label: string): any => ({
+	const { getCustomSeries } = useGetGraphCustomSeries({
+		isDarkMode,
 		drawStyle: 'bars',
-		paths,
-		lineInterpolation: 'spline',
-		show: true,
-		label,
-		fill: `${color}90`,
-		stroke: color,
-		width: 2,
-		spanGaps: true,
-		points: {
-			size: 5,
-			show: false,
-			stroke: color,
+		colorMapping: {
+			SUCCESS: Color.BG_FOREST_500,
+			FAILURE: Color.BG_CHERRY_500,
+			RETRY: Color.BG_AMBER_400,
 		},
 	});
 
-	const customSeries = (data: QueryData[]): uPlot.Series[] => {
-		const configurations: uPlot.Series[] = [
-			{ label: 'Timestamp', stroke: 'purple' },
-		];
-		for (let i = 0; i < data.length; i += 1) {
-			const { metric = {}, queryName = '', legend = '' } = data[i] || {};
-			const label = getLabelName(metric, queryName || '', legend || '');
-			let color = generateColor(
-				label,
-				isDarkMode ? themeColors.chartcolors : themeColors.lightModeColor,
-			);
-			if (label === 'SUCCESS') {
-				color = Color.BG_FOREST_500;
-			}
-			if (label === 'FAILURE') {
-				color = Color.BG_CHERRY_500;
-			}
-
-			if (label === 'RETRY') {
-				color = Color.BG_AMBER_400;
-			}
-			const series = getGraphSeries(color, label);
-			configurations.push(series);
-		}
-		return configurations;
-	};
-
 	return (
 		<Card
 			isDarkMode={isDarkMode}
@@ -183,7 +148,7 @@ function CeleryTaskBar({
 						onClickHandler={(...args): void =>
 							onGraphClick(celerySlowestTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 				{barState === CeleryTaskState.Failed && (
@@ -195,7 +160,7 @@ function CeleryTaskBar({
 						onClickHandler={(...args): void =>
 							onGraphClick(celeryFailedTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 				{barState === CeleryTaskState.Retry && (
@@ -207,7 +172,7 @@ function CeleryTaskBar({
 						onClickHandler={(...args): void =>
 							onGraphClick(celeryRetryTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 				{barState === CeleryTaskState.Successful && (
@@ -219,7 +184,7 @@ function CeleryTaskBar({
 						onClickHandler={(...args): void =>
 							onGraphClick(celerySuccessTasksTableWidgetData, ...args)
 						}
-						customSeries={customSeries}
+						customSeries={getCustomSeries}
 					/>
 				)}
 			</div>