Merge branch 'develop' into enable-new-search-bar-for-logs

.github/workflows/build.yaml

@@ -11,9 +11,9 @@ jobs:
   check-no-ee-references:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Run check
-      run: make check-no-ee-references
+      - uses: actions/checkout@v4
+      - name: Run check
+        run: make check-no-ee-references
 
   build-frontend:
     runs-on: ubuntu-latest
@@ -43,7 +43,6 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
       - name: Install dependencies
         run: cd frontend && yarn install
       - name: Run ESLint

.github/workflows/push.yaml

@@ -9,7 +9,6 @@ on:
       - v*
 
 jobs:
-
   image-build-and-push-query-service:
     runs-on: ubuntu-latest
     steps:
@@ -151,7 +150,6 @@ jobs:
         run: |
           echo 'INTERCOM_APP_ID="${{ secrets.INTERCOM_APP_ID }}"' > frontend/.env
           echo 'SEGMENT_ID="${{ secrets.SEGMENT_ID }}"' >> frontend/.env
-          echo 'CLARITY_PROJECT_ID="${{ secrets.CLARITY_PROJECT_ID }}"' >> frontend/.env
           echo 'SENTRY_AUTH_TOKEN="${{ secrets.SENTRY_AUTH_TOKEN }}"' >> frontend/.env
           echo 'SENTRY_ORG="${{ secrets.SENTRY_ORG }}"' >> frontend/.env
           echo 'SENTRY_PROJECT_ID="${{ secrets.SENTRY_PROJECT_ID }}"' >> frontend/.env

frontend/src/AppRoutes/index.tsx

@@ -137,7 +137,6 @@ function App(): JSX.Element {
 
 		window.analytics.identify(email, sanitizedIdentifyPayload);
 		window.analytics.group(domain, groupTraits);
-		window.clarity('identify', email, name);
 
 		posthog?.identify(email, {
 			email,

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/components/Logs/AddToQueryHOC.tsx

@@ -15,7 +15,7 @@ function AddToQueryHOC({
 }: AddToQueryHOCProps): JSX.Element {
 	const handleQueryAdd = (event: MouseEvent<HTMLDivElement>): void => {
 		event.stopPropagation();
-		onAddToQuery(fieldKey, fieldValue, OPERATORS.IN);
+		onAddToQuery(fieldKey, fieldValue, OPERATORS['=']);
 	};
 
 	const popOverContent = useMemo(() => <span>Add to query: {fieldKey}</span>, [

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -91,6 +91,7 @@ function DashboardsList(): JSX.Element {
 	const {
 		data: dashboardListResponse,
 		isLoading: isDashboardListLoading,
+		isRefetching: isDashboardListRefetching,
 		error: dashboardFetchError,
 		refetch: refetchDashboardList,
 	} = useGetAllDashboard();
@@ -703,7 +704,9 @@ function DashboardsList(): JSX.Element {
 					</Flex>
 				</div>
 
-				{isDashboardListLoading || isFilteringDashboards ? (
+				{isDashboardListLoading ||
+				isFilteringDashboards ||
+				isDashboardListRefetching ? (
 					<div className="loading-dashboard-details">
 						<Skeleton.Input active size="large" className="skeleton-1" />
 						<Skeleton.Input active size="large" className="skeleton-1" />
@@ -902,7 +905,11 @@ function DashboardsList(): JSX.Element {
 									columns={columns}
 									dataSource={data}
 									showSorterTooltip
-									loading={isDashboardListLoading || isFilteringDashboards}
+									loading={
+										isDashboardListLoading ||
+										isFilteringDashboards ||
+										isDashboardListRefetching
+									}
 									showHeader={false}
 									pagination={paginationConfig}
 								/>

frontend/src/container/LogDetailedView/TableView.tsx

@@ -122,10 +122,10 @@ function TableView({
 		fieldValue: string,
 	) => (): void => {
 		handleClick(operator, fieldKey, fieldValue);
-		if (operator === OPERATORS.IN) {
+		if (operator === OPERATORS['=']) {
 			setIsFilterInLoading(true);
 		}
-		if (operator === OPERATORS.NIN) {
+		if (operator === OPERATORS['!=']) {
 			setIsFilterOutLoading(true);
 		}
 	};

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -139,7 +139,7 @@ export function TableViewActions(
 									<ArrowDownToDot size={14} style={{ transform: 'rotate(90deg)' }} />
 								)
 							}
-							onClick={onClickHandler(OPERATORS.IN, fieldFilterKey, fieldData.value)}
+							onClick={onClickHandler(OPERATORS['='], fieldFilterKey, fieldData.value)}
 						/>
 					</Tooltip>
 					<Tooltip title="Filter out value">
@@ -152,7 +152,11 @@ export function TableViewActions(
 									<ArrowUpFromDot size={14} style={{ transform: 'rotate(90deg)' }} />
 								)
 							}
-							onClick={onClickHandler(OPERATORS.NIN, fieldFilterKey, fieldData.value)}
+							onClick={onClickHandler(
+								OPERATORS['!='],
+								fieldFilterKey,
+								fieldData.value,
+							)}
 						/>
 					</Tooltip>
 					{!isOldLogsExplorerOrLiveLogsPage && (

frontend/src/container/LogDetailedView/index.tsx

@@ -1,6 +1,7 @@
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ROUTES from 'constants/routes';
+import { getOldLogsOperatorFromNew } from 'hooks/logs/useActiveLog';
 import { getGeneratedFilterQueryString } from 'lib/getGeneratedFilterQueryString';
 import getStep from 'lib/getStep';
 import { getIdConditions } from 'pages/Logs/utils';
@@ -57,10 +58,11 @@ function LogDetailedView({
 
 	const handleAddToQuery = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string) => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);
 
@@ -71,10 +73,11 @@ function LogDetailedView({
 
 	const handleClickActionItem = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string): void => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);
 

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,28 +16,34 @@ 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();
 	const location = useLocation();
 	const handleCreateDatasets: Required<GetChartDataProps>['createDataset'] = useCallback(
 		(element, index, allLabels) => ({
 			data: element,
-			backgroundColor: colors[index % colors.length] || themeColors.red,
-			borderColor: colors[index % colors.length] || themeColors.red,
+			backgroundColor: isLogsExplorerViews
+				? 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}
 				/>
 			)}
 

frontend/src/hooks/logs/useActiveLog.ts

@@ -1,6 +1,6 @@
 import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { QueryBuilderKeys } from 'constants/queryBuilder';
+import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -24,6 +24,16 @@ import { v4 as uuid } from 'uuid';
 
 import { UseActiveLog } from './types';
 
+export function getOldLogsOperatorFromNew(operator: string): string {
+	switch (operator) {
+		case OPERATORS['=']:
+			return OPERATORS.IN;
+		case OPERATORS['!=']:
+			return OPERATORS.NIN;
+		default:
+			return operator;
+	}
+}
 export const useActiveLog = (): UseActiveLog => {
 	const dispatch = useDispatch();
 
@@ -178,10 +188,11 @@ export const useActiveLog = (): UseActiveLog => {
 	);
 	const onAddToQueryLogs = useCallback(
 		(fieldKey: string, fieldValue: string, operator: string) => {
+			const newOperator = getOldLogsOperatorFromNew(operator);
 			const updatedQueryString = getGeneratedFilterQueryString(
 				fieldKey,
 				fieldValue,
-				operator,
+				newOperator,
 				queryString,
 			);
 

frontend/src/index.html.ejs

@@ -114,25 +114,6 @@
 			})();
 		</script>
 
-		<script type="text/javascript">
-			//Set your CLARITY_PROJECT_ID
-			const CLARITY_PROJECT_ID =
-				'<%= htmlWebpackPlugin.options.CLARITY_PROJECT_ID %>';
-
-			(function (c, l, a, r, i, t, y) {
-				c[a] =
-					c[a] ||
-					function () {
-						(c[a].q = c[a].q || []).push(arguments);
-					};
-				t = l.createElement(r);
-				t.async = 1;
-				t.src = 'https://www.clarity.ms/tag/' + i;
-				y = l.getElementsByTagName(r)[0];
-				y.parentNode.insertBefore(t, y);
-			})(window, document, 'clarity', 'script', CLARITY_PROJECT_ID);
-		</script>
-
 		<script>
 			//Set your SEGMENT_ID
 			const SEGMENT_ID = '<%= htmlWebpackPlugin.options.SEGMENT_ID %>';

frontend/src/typings/window.ts

@@ -1,11 +1,8 @@
 import { compose, Store } from 'redux';
 
-type ClarityType<T> = (...args: string[]) => T;
-
 declare global {
 	interface Window {
 		store: Store;
-		clarity: ClarityType<string>;
 		Intercom: any;
 		analytics: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;