feat: group by severity logs explorer page by default (#5772)

* feat: initial setup for group by severity logs explorer page

* chore: reduce the height of the histogram

* chore: pr cleanup

* chore: minor color update

* chore: clean the PR

* chore: clean the PR

* chore: better base handling

* fix: append query names to the legends  in case of multiple queries

* feat: make the changes only for list view and add back legends

frontend/src/components/Graph/utils.ts

@@ -139,6 +139,7 @@ export const getGraphOptions = (
 	},
 	scales: {
 		x: {
+			stacked: isStacked,
 			grid: {
 				display: true,
 				color: getGridColor(),
@@ -165,6 +166,7 @@ export const getGraphOptions = (
 			ticks: { color: getAxisLabelColor(currentTheme) },
 		},
 		y: {
+			stacked: isStacked,
 			display: true,
 			grid: {
 				display: true,
@@ -178,9 +180,6 @@ export const getGraphOptions = (
 				},
 			},
 		},
-		stacked: {
-			display: isStacked === undefined ? false : 'auto',
-		},
 	},
 	elements: {
 		line: {

frontend/src/container/LogsExplorerChart/LogsExplorerChart.interfaces.ts

@@ -3,6 +3,7 @@ import { QueryData } from 'types/api/widgets/getQuery';
 export type LogsExplorerChartProps = {
 	data: QueryData[];
 	isLoading: boolean;
+	isLogsExplorerViews?: boolean;
 	isLabelEnabled?: boolean;
 	className?: string;
 };

frontend/src/container/LogsExplorerChart/index.tsx

@@ -16,12 +16,14 @@ import { UpdateTimeInterval } from 'store/actions';
 
 import { LogsExplorerChartProps } from './LogsExplorerChart.interfaces';
 import { CardStyled } from './LogsExplorerChart.styled';
+import { getColorsForSeverityLabels } from './utils';
 
 function LogsExplorerChart({
 	data,
 	isLoading,
 	isLabelEnabled = true,
 	className,
+	isLogsExplorerViews = false,
 }: LogsExplorerChartProps): JSX.Element {
 	const dispatch = useDispatch();
 	const urlQuery = useUrlQuery();
@@ -29,15 +31,19 @@ function LogsExplorerChart({
 	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] = useCallback(
 		(element, index, allLabels) => ({
 			data: element,
-			backgroundColor: colors[index % colors.length] || themeColors.red,
+			backgroundColor: isLogsExplorerViews
-			borderColor: colors[index % colors.length] || themeColors.red,
+				? getColorsForSeverityLabels(allLabels[index], index)
+				: colors[index % colors.length] || themeColors.red,
+			borderColor: isLogsExplorerViews
+				? getColorsForSeverityLabels(allLabels[index], index)
+				: colors[index % colors.length] || themeColors.red,
 			...(isLabelEnabled
 				? {
 						label: allLabels[index],
 				  }
 				: {}),
 		}),
-		[isLabelEnabled],
+		[isLabelEnabled, isLogsExplorerViews],
 	);
 
 	const onDragSelect = useCallback(
@@ -112,6 +118,7 @@ function LogsExplorerChart({
 				<Graph
 					name="logsExplorerChart"
 					data={graphData.data}
+					isStacked={isLogsExplorerViews}
 					type="bar"
 					animate
 					onDragSelect={onDragSelect}

frontend/src/container/LogsExplorerChart/utils.ts

@@ -0,0 +1,36 @@
+import { Color } from '@signozhq/design-tokens';
+import { themeColors } from 'constants/theme';
+import { colors } from 'lib/getRandomColor';
+
+export function getColorsForSeverityLabels(
+	label: string,
+	index: number,
+): string {
+	const lowerCaseLabel = label.toLowerCase();
+
+	if (lowerCaseLabel.includes(`{severity_text="trace"}`)) {
+		return Color.BG_ROBIN_300;
+	}
+
+	if (lowerCaseLabel.includes(`{severity_text="debug"}`)) {
+		return Color.BG_FOREST_500;
+	}
+
+	if (lowerCaseLabel.includes(`{severity_text="info"}`)) {
+		return Color.BG_SLATE_400;
+	}
+
+	if (lowerCaseLabel.includes(`{severity_text="warn"}`)) {
+		return Color.BG_AMBER_500;
+	}
+
+	if (lowerCaseLabel.includes(`{severity_text="error"}`)) {
+		return Color.BG_CHERRY_500;
+	}
+
+	if (lowerCaseLabel.includes(`{severity_text="fatal"}`)) {
+		return Color.BG_SAKURA_500;
+	}
+
+	return colors[index % colors.length] || themeColors.red;
+}

frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss

@@ -147,6 +147,13 @@
 	}
 
 	.logs-histogram {
+		.ant-card-body {
+			height: 140px;
+			min-height: 140px;
+			padding: 0 16px 22px 16px;
+			font-family: 'Geist Mono';
+		}
+
 		margin-bottom: 0px;
 	}
 }

frontend/src/container/LogsExplorerViews/index.tsx

@@ -64,6 +64,7 @@ import { useHistory } from 'react-router-dom';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
 import { ILog } from 'types/api/logs/log';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
 	OrderByPayload,
@@ -188,6 +189,16 @@ function LogsExplorerViews({
 		const modifiedQueryData: IBuilderQuery = {
 			...listQuery,
 			aggregateOperator: LogsAggregatorOperator.COUNT,
+			groupBy: [
+				{
+					key: 'severity_text',
+					dataType: DataTypes.String,
+					type: '',
+					isColumn: true,
+					isJSON: false,
+					id: 'severity_text--string----true',
+				},
+			],
 		};
 
 		const modifiedQuery: Query = {
@@ -661,6 +672,7 @@ function LogsExplorerViews({
 					className="logs-histogram"
 					isLoading={isFetchingListChartData || isLoadingListChartData}
 					data={chartData}
+					isLogsExplorerViews={panelType === PANEL_TYPES.LIST}
 				/>
 			)}