Merge branch 'develop' into metrics-qb-change

frontend/jest.config.ts

@@ -24,7 +24,7 @@ const config: Config.InitialOptions = {
 		'^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': 'jest-preview/transforms/file',
 	},
 	transformIgnorePatterns: [
-		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|d3-interpolate|d3-color)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/src/assets/Dashboard/BarIcon.tsx

@@ -0,0 +1,41 @@
+import { CSSProperties } from 'react';
+
+function BarIcon({
+	fillColor,
+}: {
+	fillColor: CSSProperties['color'];
+}): JSX.Element {
+	return (
+		<svg
+			width="30"
+			height="30"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M8 2H6C4.89543 2 4 2.89543 4 4V16C4 17.1046 4.89543 18 6 18H8C9.10457 18 10 17.1046 10 16V4C10 2.89543 9.10457 2 8 2Z"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M18 9H16C14.8954 9 14 9.89543 14 11V16C14 17.1046 14.8954 18 16 18H18C19.1046 18 20 17.1046 20 16V11C20 9.89543 19.1046 9 18 9Z"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+			<path
+				d="M22 22H2"
+				stroke={fillColor}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+export default BarIcon;

frontend/src/constants/panelTypes.ts

@@ -14,6 +14,7 @@ export const PANEL_TYPES_COMPONENT_MAP = {
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.LIST]: LogsPanelComponent,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
+	[PANEL_TYPES.BAR]: Uplot,
 } as const;
 
 export const getComponentForPanelType = (
@@ -27,6 +28,7 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.TRACE]: null,
 		[PANEL_TYPES.LIST]:
 			dataSource === DataSource.LOGS ? LogsPanelComponent : TracesTableComponent,
+		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -284,6 +284,7 @@ export enum PANEL_TYPES {
 	TABLE = 'table',
 	LIST = 'list',
 	TRACE = 'trace',
+	BAR = 'bar',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -19,6 +19,8 @@ import { AlertDef } from 'types/api/alerts/def';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getGraphType } from 'utils/getGraphType';
+import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { ChartContainer, FailedMessageContainer } from './styles';
@@ -86,7 +88,7 @@ function ChartPreview({
 		{
 			query: query || initialQueriesMap.metrics,
 			globalSelectedInterval: selectedInterval,
-			graphType,
+			graphType: getGraphType(graphType),
 			selectedTime,
 			params: {
 				allowSelectedIntervalForStepGen,
@@ -114,6 +116,13 @@ function ChartPreview({
 		setMaxTimeScale(endTime);
 	}, [maxTime, minTime, globalSelectedInterval, queryResponse]);
 
+	if (queryResponse.data && graphType === PANEL_TYPES.BAR) {
+		const sortedSeriesData = getSortedSeriesData(
+			queryResponse.data?.payload.data.result,
+		);
+		queryResponse.data.payload.data.result = sortedSeriesData;
+	}
+
 	const chartData = getUPlotChartData(queryResponse?.data?.payload);
 
 	const containerDimensions = useResizeObserver(graphRef);
@@ -153,6 +162,7 @@ function ChartPreview({
 				],
 				softMax: null,
 				softMin: null,
+				panelType: graphType,
 			}),
 		[
 			yAxisUnit,
@@ -165,6 +175,7 @@ function ChartPreview({
 			t,
 			optionName,
 			alertDef?.condition.targetUnit,
+			graphType,
 		],
 	);
 

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -26,6 +26,7 @@ function QuerySection({
 	alertType,
 	runQuery,
 	alertDef,
+	panelType,
 }: QuerySectionProps): JSX.Element {
 	// init namespace for translations
 	const { t } = useTranslation('alerts');
@@ -48,7 +49,7 @@ function QuerySection({
 
 	const renderMetricUI = (): JSX.Element => (
 		<QueryBuilder
-			panelType={PANEL_TYPES.TIME_SERIES}
+			panelType={panelType}
 			config={{
 				queryVariant: 'static',
 				initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
@@ -215,6 +216,7 @@ interface QuerySectionProps {
 	alertType: AlertTypes;
 	runQuery: VoidFunction;
 	alertDef: AlertDef;
+	panelType: PANEL_TYPES;
 }
 
 export default QuerySection;

frontend/src/container/FormAlertRules/index.tsx

@@ -10,6 +10,7 @@ import {
 import saveAlertApi from 'api/alerts/save';
 import testAlertApi from 'api/alerts/testAlert';
 import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import QueryTypeTag from 'container/NewWidget/LeftContainer/QueryTypeTag';
@@ -20,6 +21,7 @@ import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { updateStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag';
 import { useNotifications } from 'hooks/useNotifications';
+import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
 import { mapQueryDataToApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataToApi';
@@ -68,14 +70,23 @@ function FormAlertRules({
 		GlobalReducer
 	>((state) => state.globalTime);
 
+	const urlQuery = useUrlQuery();
+
+	const panelType = urlQuery.get(QueryParams.panelTypes) as PANEL_TYPES | null;
+
 	const {
 		currentQuery,
-		panelType,
 		stagedQuery,
 		handleRunQuery,
+		handleSetConfig,
+		initialDataSource,
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
 
+	useEffect(() => {
+		handleSetConfig(panelType || PANEL_TYPES.TIME_SERIES, initialDataSource);
+	}, [handleSetConfig, initialDataSource, panelType]);
+
 	// use query client
 	const ruleCache = useQueryClient();
 
@@ -277,7 +288,7 @@ function FormAlertRules({
 					promQueries: mapQueryDataToApi(currentQuery.promql, 'name').data,
 					chQueries: mapQueryDataToApi(currentQuery.clickhouse_sql, 'name').data,
 					queryType: currentQuery.queryType,
-					panelType: initQuery.panelType,
+					panelType: panelType || initQuery.panelType,
 					unit: currentQuery.unit,
 				},
 			},
@@ -290,6 +301,7 @@ function FormAlertRules({
 		alertDef,
 		alertType,
 		initQuery,
+		panelType,
 	]);
 
 	const isAlertAvailable = useIsFeatureDisabled(
@@ -423,6 +435,7 @@ function FormAlertRules({
 			selectedInterval={globalSelectedInterval}
 			alertDef={alertDef}
 			yAxisUnit={yAxisUnit || ''}
+			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 		/>
 	);
 
@@ -439,6 +452,7 @@ function FormAlertRules({
 			alertDef={alertDef}
 			selectedInterval={globalSelectedInterval}
 			yAxisUnit={yAxisUnit || ''}
+			graphType={panelType || PANEL_TYPES.TIME_SERIES}
 		/>
 	);
 
@@ -496,6 +510,7 @@ function FormAlertRules({
 							alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
 							runQuery={handleRunQuery}
 							alertDef={alertDef}
+							panelType={panelType || PANEL_TYPES.TIME_SERIES}
 						/>
 
 						<RuleOptions

frontend/src/container/GridCardLayout/GridCard/FullView/contants.ts

@@ -25,5 +25,6 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 	TABLE: false,
 	LIST: false,
 	TRACE: false,
+	BAR: true,
 	EMPTY_WIDGET: false,
 };

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -25,12 +25,12 @@ import { useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import uPlot from 'uplot';
+import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import { getGraphVisibilityStateOnDataChange } from '../utils';
 import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
 import GraphManager from './GraphManager';
-// import GraphManager from './GraphManager';
 import { GraphContainer, TimeContainer } from './styles';
 import { FullViewProps } from './types';
 
@@ -107,6 +107,13 @@ function FullView({
 		panelTypeAndGraphManagerVisibility: PANEL_TYPES_VS_FULL_VIEW_TABLE,
 	});
 
+	if (response.data && widget.panelTypes === PANEL_TYPES.BAR) {
+		const sortedSeriesData = getSortedSeriesData(
+			response.data?.payload.data.result,
+		);
+		response.data.payload.data.result = sortedSeriesData;
+	}
+
 	const chartData = getUPlotChartData(response?.data?.payload, widget.fillSpans);
 
 	const isDarkMode = useIsDarkMode();
@@ -152,6 +159,7 @@ function FullView({
 				maxTimeScale,
 				softMax: widget.softMax === undefined ? null : widget.softMax,
 				softMin: widget.softMin === undefined ? null : widget.softMin,
+				panelType: widget.panelTypes,
 			});
 
 			setChartOptions(newChartOptions);

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -21,6 +21,8 @@ import { useLocation } from 'react-router-dom';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { getGraphType } from 'utils/getGraphType';
+import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 import { getTimeRange } from 'utils/getTimeRange';
 
 import EmptyWidget from '../EmptyWidget';
@@ -125,7 +127,7 @@ function GridCardGraph({
 	const queryResponse = useGetQueryRange(
 		{
 			selectedTime: widget?.timePreferance,
-			graphType: widget?.panelTypes,
+			graphType: getGraphType(widget.panelTypes),
 			query: updatedQuery,
 			globalSelectedInterval,
 			variables: getDashboardVariables(variables),
@@ -160,6 +162,13 @@ function GridCardGraph({
 		setMaxTimeScale(endTime);
 	}, [maxTime, minTime, globalSelectedInterval, queryResponse]);
 
+	if (queryResponse.data && widget.panelTypes === PANEL_TYPES.BAR) {
+		const sortedSeriesData = getSortedSeriesData(
+			queryResponse.data?.payload.data.result,
+		);
+		queryResponse.data.payload.data.result = sortedSeriesData;
+	}
+
 	const chartData = getUPlotChartData(queryResponse?.data?.payload, fillSpans);
 
 	const isDarkMode = useIsDarkMode();
@@ -191,6 +200,7 @@ function GridCardGraph({
 				softMin: widget.softMin === undefined ? null : widget.softMin,
 				graphsVisibilityStates: graphVisibility,
 				setGraphsVisibilityStates: setGraphVisibility,
+				panelType: widget.panelTypes,
 			}),
 		[
 			widget?.id,
@@ -207,6 +217,7 @@ function GridCardGraph({
 			maxTimeScale,
 			graphVisibility,
 			setGraphVisibility,
+			widget.panelTypes,
 		],
 	);
 

frontend/src/container/GridPanelSwitch/index.tsx

@@ -58,6 +58,11 @@ const GridPanelSwitch = forwardRef<
 								selectedTime,
 						  },
 				[PANEL_TYPES.TRACE]: null,
+				[PANEL_TYPES.BAR]: {
+					data,
+					options,
+					ref,
+				},
 				[PANEL_TYPES.EMPTY_WIDGET]: null,
 			};
 

frontend/src/container/GridPanelSwitch/types.ts

@@ -41,5 +41,8 @@ export type PropsTypePropsMap = {
 	[PANEL_TYPES.TABLE]: GridTableComponentProps;
 	[PANEL_TYPES.TRACE]: null;
 	[PANEL_TYPES.LIST]: LogsPanelComponentProps | TracesTableComponentProps;
+	[PANEL_TYPES.BAR]: UplotProps & {
+		ref: ForwardedRef<ToggleGraphProps | undefined>;
+	};
 	[PANEL_TYPES.EMPTY_WIDGET]: null;
 };

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -120,7 +120,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 				history.push(
 					`${ROUTES.EDIT_ALERTS}?ruleId=${record.id.toString()}&${
 						QueryParams.compositeQuery
-					}=${encodeURIComponent(JSON.stringify(compositeQuery))}`,
+					}=${encodeURIComponent(JSON.stringify(compositeQuery))}&panelTypes=${
+						record.condition.compositeQuery.panelType
+					}`,
 				);
 			})
 			.catch(handleError);

frontend/src/container/NewDashboard/ComponentsSlider/constants.ts

@@ -9,6 +9,7 @@ export const PANEL_TYPES_INITIAL_QUERY = {
 	[PANEL_TYPES.TABLE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.LIST]: initialQueriesMap.logs,
 	[PANEL_TYPES.TRACE]: initialQueriesMap.traces,
+	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };
 

frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphContainer.tsx

@@ -5,6 +5,8 @@ import { WidgetGraphProps } from 'container/NewWidget/types';
 import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { getGraphType } from 'utils/getGraphType';
+import { getSortedSeriesData } from 'utils/getSortedSeriesData';
 
 import { NotFoundContainer } from './styles';
 import WidgetGraph from './WidgetGraphs';
@@ -31,10 +33,17 @@ function WidgetGraphContainer({
 	const selectedWidget = widgets.find((e) => e.id === widgetId);
 
 	const getWidgetQueryRange = useGetWidgetQueryRange({
-		graphType: selectedGraph,
+		graphType: getGraphType(selectedGraph),
 		selectedTime: selectedTime.enum,
 	});
 
+	if (getWidgetQueryRange.data && selectedGraph === PANEL_TYPES.BAR) {
+		const sortedSeriesData = getSortedSeriesData(
+			getWidgetQueryRange.data?.payload.data.result,
+		);
+		getWidgetQueryRange.data.payload.data.result = sortedSeriesData;
+	}
+
 	if (selectedWidget === undefined) {
 		return <Card>Invalid widget</Card>;
 	}
@@ -83,6 +92,7 @@ function WidgetGraphContainer({
 			selectedLogFields={selectedLogFields}
 			selectedTracesFields={selectedTracesFields}
 			selectedTime={selectedTime}
+			selectedGraph={selectedGraph}
 		/>
 	);
 }