Merge pull request #2613 from SigNoz/release/v0.18.2

Release/v0.18.2

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -137,7 +137,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.18.1
+    image: signoz/query-service:0.18.2
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
     #   - "6060:6060"     # pprof port
@@ -166,7 +166,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:0.18.1
+    image: signoz/frontend:0.18.2
     deploy:
       restart_policy:
         condition: on-failure

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -153,7 +153,7 @@ services:
 # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.18.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.18.2}
     container_name: query-service
     command: ["-config=/root/config/prometheus.yml"]
     # ports:
@@ -181,7 +181,7 @@ services:
     <<: *clickhouse-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.18.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.18.2}
     container_name: frontend
     restart: on-failure
     depends_on:

frontend/src/container/LogsSearchFilter/SearchFields/ActionBar.tsx

@@ -1,23 +1,15 @@
 import { Button, Row } from 'antd';
 import React from 'react';
 
-import { QueryFields } from './utils';
-
 interface SearchFieldsActionBarProps {
-	fieldsQuery: QueryFields[][];
+	applyUpdate: VoidFunction;
-	applyUpdate: () => void;
+	clearFilters: VoidFunction;
-	clearFilters: () => void;
 }
 
 export function SearchFieldsActionBar({
-	fieldsQuery,
 	applyUpdate,
 	clearFilters,
 }: SearchFieldsActionBarProps): JSX.Element | null {
-	if (fieldsQuery.length === 0) {
-		return null;
-	}
-
 	return (
 		<Row style={{ justifyContent: 'flex-end', paddingRight: '2.4rem' }}>
 			<Button

frontend/src/container/LogsSearchFilter/SearchFields/index.tsx

@@ -1,4 +1,5 @@
 import { useNotifications } from 'hooks/useNotifications';
+import { reverseParser } from 'lib/logql';
 import { flatten } from 'lodash-es';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -18,13 +19,13 @@ import {
 } from './utils';
 
 export interface SearchFieldsProps {
-	updateParsedQuery: (query: QueryFields[]) => void;
 	onDropDownToggleHandler: (value: boolean) => VoidFunction;
+	updateQueryString: (value: string) => void;
 }
 
 function SearchFields({
-	updateParsedQuery,
 	onDropDownToggleHandler,
+	updateQueryString,
 }: SearchFieldsProps): JSX.Element {
 	const {
 		searchFilter: { parsedQuery },
@@ -90,15 +91,15 @@ function SearchFields({
 		}
 
 		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
-		updateParsedQuery(flatParsedQuery);
+		updateQueryString(reverseParser(flatParsedQuery));
 		onDropDownToggleHandler(false)();
-	}, [onDropDownToggleHandler, fieldsQuery, updateParsedQuery, notifications]);
+	}, [fieldsQuery, notifications, onDropDownToggleHandler, updateQueryString]);
 
 	const clearFilters = useCallback((): void => {
 		keyPrefixRef.current = hashCode(JSON.stringify([]));
-		updateParsedQuery([]);
+		setFieldsQuery([]);
-		onDropDownToggleHandler(false)();
+		updateQueryString('');
-	}, [onDropDownToggleHandler, updateParsedQuery]);
+	}, [updateQueryString]);
 
 	return (
 		<>
@@ -113,7 +114,6 @@ function SearchFields({
 			<SearchFieldsActionBar
 				applyUpdate={applyUpdate}
 				clearFilters={clearFilters}
-				fieldsQuery={fieldsQuery}
 			/>
 			<Suggestions applySuggestion={addSuggestedField} />
 		</>

frontend/src/container/LogsSearchFilter/index.tsx

@@ -36,11 +36,7 @@ function SearchFilter({
 	getLogsAggregate,
 	getLogsFields,
 }: SearchFilterProps): JSX.Element {
-	const {
+	const { updateQueryString, queryString } = useSearchParser();
-		updateParsedQuery,
-		updateQueryString,
-		queryString,
-	} = useSearchParser();
 	const [searchText, setSearchText] = useState(queryString);
 	const [showDropDown, setShowDropDown] = useState(false);
 	const searchRef = useRef<InputRef>(null);
@@ -187,8 +183,8 @@ function SearchFilter({
 				content={
 					<DropDownContainer>
 						<SearchFields
+							updateQueryString={updateQueryString}
 							onDropDownToggleHandler={onDropDownToggleHandler}
-							updateParsedQuery={updateParsedQuery as never}
 						/>
 					</DropDownContainer>
 				}

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,8 +1,7 @@
 import { getMinMax } from 'container/TopNav/AutoRefresh/config';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
-import { parseQuery, reverseParser } from 'lib/logql';
+import { parseQuery } from 'lib/logql';
-import { ILogQLParsedQueryItem } from 'lib/logql/types';
 import isEqual from 'lodash-es/isEqual';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -21,7 +20,6 @@ import { getGlobalTime } from './utils';
 export function useSearchParser(): {
 	queryString: string;
 	parsedQuery: unknown;
-	updateParsedQuery: (arg0: ILogQLParsedQueryItem[]) => void;
 	updateQueryString: (arg0: string) => void;
 } {
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -75,32 +73,9 @@ export function useSearchParser(): {
 		}
 	}, [queryString, updateQueryString, parsedFilters]);
 
-	const updateParsedQuery = useCallback(
-		(updatedParsedPayload: ILogQLParsedQueryItem[]) => {
-			dispatch({
-				type: SET_SEARCH_QUERY_PARSED_PAYLOAD,
-				payload: updatedParsedPayload,
-			});
-			const reversedParsedQuery = reverseParser(updatedParsedPayload);
-			if (
-				!isEqual(queryString, reversedParsedQuery) ||
-				(queryString === '' && reversedParsedQuery === '')
-			) {
-				dispatch({
-					type: SET_SEARCH_QUERY_STRING,
-					payload: {
-						searchQueryString: reversedParsedQuery,
-					},
-				});
-			}
-		},
-		[dispatch, queryString],
-	);
-
 	return {
 		queryString,
 		parsedQuery,
-		updateParsedQuery,
 		updateQueryString,
 	};
 }

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx

@@ -129,7 +129,8 @@ function VariableItem({
 
 	useEffect(() => {
 		getOptions();
-	}, [getOptions]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
 
 	const handleChange = (value: string | string[]): void => {
 		if (

frontend/src/container/TopNav/CustomDateTimeModal/CustomDateTimeModal.test.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import CustomDateTimeModal from './index';
+
+describe('CustomDateTimeModal', () => {
+	const handleCreate = jest.fn();
+	const handleCancel = jest.fn();
+
+	beforeEach(() => {
+		render(
+			<CustomDateTimeModal
+				visible
+				onCreate={handleCreate}
+				onCancel={handleCancel}
+			/>,
+		);
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('renders the modal with title and buttons', () => {
+		expect(screen.getByText('Chose date and time range')).toBeInTheDocument();
+		expect(screen.getByText('Apply')).toBeInTheDocument();
+		expect(screen.getByText('Cancel')).toBeInTheDocument();
+	});
+
+	it('donot calls onCreate when the Apply button is clicked without selecting dates', () => {
+		fireEvent.click(screen.getByText('Apply'));
+
+		expect(handleCreate).toHaveBeenCalledTimes(0);
+		expect(handleCreate).not.toHaveBeenCalledWith(undefined);
+	});
+
+	it('calls onCancel when Cancel button is clicked', () => {
+		fireEvent.click(screen.getByText('Cancel'));
+
+		expect(handleCancel).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/container/TopNav/CustomDateTimeModal/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-no-bind */
 import { DatePicker, Modal } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
@@ -12,18 +11,21 @@ function CustomDateTimeModal({
 	onCreate,
 	onCancel,
 }: CustomDateTimeModalProps): JSX.Element {
-	const [customDateTimeRange, setCustomDateTimeRange] = useState();
+	const [selectedDate, setDateTime] = useState<DateTimeRangeType>();
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const onModalOkHandler = (date_time: any): void => {
-	function handleRangePickerOk(date_time: any): void {
+		onCreate(date_time);
-		setCustomDateTimeRange(date_time);
+		setDateTime(date_time);
-	}
+	};
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const disabledDate = (current: Dayjs): boolean => {
-	function disabledDate(current: any): boolean {
 		const currentDay = dayjs(current);
 		return currentDay.isAfter(dayjs());
-	}
+	};
+
+	const onOk = (): void => {
+		if (selectedDate) onCreate(selectedDate);
+	};
 
 	return (
 		<Modal
@@ -32,13 +34,14 @@ function CustomDateTimeModal({
 			okText="Apply"
 			cancelText="Cancel"
 			onCancel={onCancel}
-			style={{ position: 'absolute', top: 60, right: 40 }}
+			onOk={onOk}
-			onOk={(): void => onCreate(customDateTimeRange || null)}
 		>
 			<RangePicker
 				disabledDate={disabledDate}
-				onOk={handleRangePickerOk}
+				allowClear
+				onOk={onModalOkHandler}
 				showTime
+				onCalendarChange={onModalOkHandler}
 			/>
 		</Modal>
 	);