Merge branch 'develop' into release/v0.11.0

Makefile

@@ -13,6 +13,8 @@ FRONTEND_DIRECTORY ?= frontend
 QUERY_SERVICE_DIRECTORY ?= pkg/query-service
 STANDALONE_DIRECTORY ?= deploy/docker/clickhouse-setup
 SWARM_DIRECTORY ?= deploy/docker-swarm/clickhouse-setup
+LOCAL_GOOS ?= $(shell go env GOOS)
+LOCAL_GOARCH ?= $(shell go env GOARCH)
 
 REPONAME ?= signoz
 DOCKER_TAG ?= latest
@@ -79,11 +81,25 @@ dev-setup:
 	@echo "--> Local Setup completed"
 	@echo "------------------"
 
+run-local:
+	@LOCAL_GOOS=$(LOCAL_GOOS) LOCAL_GOARCH=$(LOCAL_GOARCH) docker-compose -f \
+	$(STANDALONE_DIRECTORY)/docker-compose-core.yaml -f $(STANDALONE_DIRECTORY)/docker-compose-local.yaml \
+	up --build -d
+
+down-local:
+	@docker-compose -f \
+	$(STANDALONE_DIRECTORY)/docker-compose-core.yaml -f $(STANDALONE_DIRECTORY)/docker-compose-local.yaml \
+	down -v
+
 run-x86:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml up -d
+	@docker-compose -f \
+	$(STANDALONE_DIRECTORY)/docker-compose-core.yaml -f $(STANDALONE_DIRECTORY)/docker-compose-prod.yaml \
+	up --build -d
 
 down-x86:
-	@docker-compose -f $(STANDALONE_DIRECTORY)/docker-compose.yaml down -v
+	@docker-compose -f \
+	$(STANDALONE_DIRECTORY)/docker-compose-core.yaml -f $(STANDALONE_DIRECTORY)/docker-compose-prod.yaml \
+	down -v
 
 clear-standalone-data:
 	@docker run --rm -v "$(PWD)/$(STANDALONE_DIRECTORY)/data:/pwd" busybox \

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

@@ -0,0 +1,109 @@
+version: "2.4"
+
+services:
+  clickhouse:
+    image: clickhouse/clickhouse-server:22.4.5-alpine
+    container_name: clickhouse
+    # ports:
+    # - "9000:9000"
+    # - "8123:8123"
+    tty: true
+    volumes:
+      - ./clickhouse-config.xml:/etc/clickhouse-server/config.xml
+      - ./clickhouse-users.xml:/etc/clickhouse-server/users.xml
+      # - ./clickhouse-storage.xml:/etc/clickhouse-server/config.d/storage.xml
+      - ./data/clickhouse/:/var/lib/clickhouse/
+    restart: on-failure
+    logging:
+      options:
+        max-size: 50m
+        max-file: "3"
+    healthcheck:
+      # "clickhouse", "client", "-u ${CLICKHOUSE_USER}", "--password ${CLICKHOUSE_PASSWORD}", "-q 'SELECT 1'"
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8123/ping"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+  alertmanager:
+    container_name: alertmanager
+    image: signoz/alertmanager:0.23.0-0.2
+    volumes:
+      - ./data/alertmanager:/data
+    depends_on:
+      query-service:
+        condition: service_healthy
+    restart: on-failure
+    command:
+      - --queryService.url=http://query-service:8085
+      - --storage.path=/data
+
+  # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
+  otel-collector:
+    container_name: otel-collector
+    image: signoz/signoz-otel-collector:0.55.0-rc.3
+    command: ["--config=/etc/otel-collector-config.yaml"]
+    # user: root # required for reading docker container logs
+    volumes:
+      - ./otel-collector-config.yaml:/etc/otel-collector-config.yaml
+    environment:
+      - OTEL_RESOURCE_ATTRIBUTES=host.name=signoz-host,os.type=linux
+    ports:
+      # - "1777:1777"     # pprof extension
+      - "4317:4317"     # OTLP gRPC receiver
+      - "4318:4318"     # OTLP HTTP receiver
+      # - "8888:8888"     # OtelCollector internal metrics
+      # - "8889:8889"     # signoz spanmetrics exposed by the agent
+      # - "9411:9411"     # Zipkin port
+      # - "13133:13133"   # health check extension
+      # - "14250:14250"   # Jaeger gRPC
+      # - "14268:14268"   # Jaeger thrift HTTP
+      # - "55678:55678"   # OpenCensus receiver
+      # - "55679:55679"   # zPages extension
+    mem_limit: 2000m
+    restart: on-failure
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+
+  otel-collector-metrics:
+    container_name: otel-collector-metrics
+    image: signoz/signoz-otel-collector:0.55.0-rc.3
+    command: ["--config=/etc/otel-collector-metrics-config.yaml"]
+    volumes:
+      - ./otel-collector-metrics-config.yaml:/etc/otel-collector-metrics-config.yaml
+    # ports:
+    #   - "1777:1777"     # pprof extension
+    #   - "8888:8888"     # OtelCollector internal metrics
+    #   - "13133:13133"   # Health check extension
+    #   - "55679:55679"   # zPages extension
+    restart: on-failure
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+
+  hotrod:
+    image: jaegertracing/example-hotrod:1.30
+    container_name: hotrod
+    logging:
+      options:
+        max-size: 50m
+        max-file: "3"
+    command: ["all"]
+    environment:
+      - JAEGER_ENDPOINT=http://otel-collector:14268/api/traces
+
+  load-hotrod:
+    image: "grubykarol/locust:1.2.3-python3.9-alpine3.12"
+    container_name: load-hotrod
+    hostname: load-hotrod
+    environment:
+      ATTACKED_HOST: http://hotrod:8080
+      LOCUST_MODE: standalone
+      NO_PROXY: standalone
+      TASK_DELAY_FROM: 5
+      TASK_DELAY_TO: 30
+      QUIET_MODE: "${QUIET_MODE:-false}"
+      LOCUST_OPTS: "--headless -u 10 -r 1"
+    volumes:
+      - ../common/locust-scripts:/locust

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

@@ -0,0 +1,51 @@
+version: "2.4"
+
+services:
+  query-service:
+    hostname: query-service
+    build:
+      context: "../../../pkg/query-service"
+      dockerfile: "./Dockerfile"
+      args:
+        LDFLAGS: ""
+        TARGETPLATFORM: "${LOCAL_GOOS}/${LOCAL_GOARCH}"
+    container_name: query-service
+    environment:
+      - ClickHouseUrl=tcp://clickhouse:9000
+      - STORAGE=clickhouse
+      - SIGNOZ_LOCAL_DB_PATH=/root/signoz.db
+    volumes:
+      - ./prometheus.yml:/root/config/prometheus.yml
+      - ../dashboards:/root/config/dashboards
+    command: ["-config=/root/config/prometheus.yml"]
+    ports:
+      - "6060:6060"
+      - "8080:8080"
+    restart: on-failure
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+
+  frontend:
+    build:
+      context: "../../../frontend"
+      dockerfile: "./Dockerfile"
+      args:
+        TARGETOS: "${LOCAL_GOOS}"
+        TARGETPLATFORM: "${LOCAL_GOARCH}"
+    container_name: frontend
+    environment:
+      - FRONTEND_API_ENDPOINT=http://query-service:8080
+    restart: on-failure
+    depends_on:
+      - alertmanager
+      - query-service
+    ports:
+      - "3301:3301"
+    volumes:
+      - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf

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

@@ -0,0 +1,41 @@
+version: "2.4"
+
+services:
+  query-service:
+    image: signoz/query-service:0.10.2
+    container_name: query-service
+    command: ["-config=/root/config/prometheus.yml"]
+    # ports:
+    #   - "6060:6060"     # pprof port
+    #   - "8080:8080"     # query-service port
+    volumes:
+      - ./prometheus.yml:/root/config/prometheus.yml
+      - ../dashboards:/root/config/dashboards
+      - ./data/signoz/:/var/lib/signoz/
+    environment:
+      - ClickHouseUrl=tcp://clickhouse:9000/?database=signoz_traces
+      - STORAGE=clickhouse
+      - GODEBUG=netdns=go
+      - TELEMETRY_ENABLED=true
+      - DEPLOYMENT_TYPE=docker-standalone-amd
+    restart: on-failure
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "localhost:8080/api/v1/version"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+
+  frontend:
+    image: signoz/frontend:0.10.2
+    container_name: frontend
+    restart: on-failure
+    depends_on:
+      - alertmanager
+      - query-service
+    ports:
+      - "3301:3301"
+    volumes:
+      - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf

frontend/package.json

@@ -56,7 +56,7 @@
 		"d3-tip": "^0.9.1",
 		"dayjs": "^1.10.7",
 		"dotenv": "8.2.0",
-		"eventsource": "^2.0.2",
+		"event-source-polyfill": "1.0.31",
 		"file-loader": "6.1.1",
 		"flat": "^5.0.2",
 		"history": "4.10.1",
@@ -126,6 +126,8 @@
 		"@types/copy-webpack-plugin": "^8.0.1",
 		"@types/d3": "^6.2.0",
 		"@types/d3-tip": "^3.5.5",
+		"@types/event-source-polyfill": "^1.0.0",
+		"@types/flat": "^5.0.2",
 		"@types/jest": "^27.5.1",
 		"@types/lodash-es": "^4.17.4",
 		"@types/mini-css-extract-plugin": "^2.5.1",

frontend/src/api/logs/livetail.ts

@@ -1,18 +1,17 @@
-import 'eventsource/example/eventsource-polyfill';
-
 import apiV1 from 'api/apiV1';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import { ENVIRONMENT } from 'constants/env';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { EventSourcePolyfill } from 'event-source-polyfill';
 
-export const LiveTail = (queryParams) => {
+export const LiveTail = (queryParams: string): EventSourcePolyfill => {
 	const dict = {
 		headers: {
 			Authorization: `Bearer ${getLocalStorageKey(LOCALSTORAGE.AUTH_TOKEN)}`,
 		},
 	};
 	return new EventSourcePolyfill(
-		`${ENVIRONMENT.baseURL}${apiV1}/logs/tail?${queryParams}`,
+		`${ENVIRONMENT.baseURL}${apiV1}logs/tail?${queryParams}`,
 		dict,
 	);
 };

frontend/src/components/Logs/AddToQueryHOC.tsx

@@ -1,4 +1,4 @@
-import { Button, Popover, Tag, Tooltip } from 'antd';
+import { Button, Popover } from 'antd';
 import getStep from 'lib/getStep';
 import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -11,15 +11,24 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { SET_SEARCH_QUERY_STRING, TOGGLE_LIVE_TAIL } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
+interface AddToQueryHOCProps {
+	fieldKey: string;
+	fieldValue: string;
+	children: React.ReactNode;
+	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => ReturnType<typeof getLogsAggregate>;
+}
 function AddToQueryHOC({
 	fieldKey,
 	fieldValue,
 	children,
 	getLogs,
 	getLogsAggregate,
-}) {
+}: AddToQueryHOCProps): JSX.Element {
 	const {
 		searchFilter: { queryString },
 		logLinesPerPage,
@@ -72,9 +81,7 @@ function AddToQueryHOC({
 				...(idStart ? { idGt: idStart } : {}),
 				...(idEnd ? { idLt: idEnd } : {}),
 			});
-		}
+		} else if (liveTail === 'PLAYING') {
-
-		else if (liveTail === 'PLAYING') {
 			dispatch({
 				type: TOGGLE_LIVE_TAIL,
 				payload: 'PAUSED',
@@ -88,6 +95,7 @@ function AddToQueryHOC({
 				0,
 			);
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		dispatch,
 		generatedQuery,
@@ -121,8 +129,12 @@ function AddToQueryHOC({
 }
 
 interface DispatchProps {
-	getLogs: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogs: (
-	getLogsAggregate: () => (dispatch: Dispatch<AppActions>) => void;
+		props: Parameters<typeof getLogs>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

frontend/src/components/Logs/CopyClipboardHOC.tsx

@@ -1,19 +1,28 @@
-import { Button, Popover, Tooltip } from 'antd';
+import { Popover } from 'antd';
 import React from 'react';
 import { useCopyToClipboard } from 'react-use';
 
-function CopyClipboardHOC({ textToCopy, children }) {
+interface CopyClipboardHOCProps {
-	const [_state, setCopy] = useCopyToClipboard();
+	textToCopy: string;
+	children: React.ReactNode;
+}
+function CopyClipboardHOC({
+	textToCopy,
+	children,
+}: CopyClipboardHOCProps): JSX.Element {
+	const [, setCopy] = useCopyToClipboard();
 
 	return (
 		<span
 			style={{
 				margin: 0,
 				padding: 0,
-				cursor: 'pointer'
+				cursor: 'pointer',
 			}}
-			onClick={() => setCopy(textToCopy)}
+			onClick={(): void => setCopy(textToCopy)}
+			onKeyDown={(): void => setCopy(textToCopy)}
 			role="button"
+			tabIndex={0}
 		>
 			<Popover
 				placement="top"

frontend/src/components/Logs/LogItem/index.tsx

@@ -1,21 +1,26 @@
 import { blue, grey, orange } from '@ant-design/colors';
-import { CopyFilled, CopyrightCircleFilled, ExpandAltOutlined } from '@ant-design/icons';
+import { CopyFilled, ExpandAltOutlined } from '@ant-design/icons';
-import { Button, Card, Divider, Row, Typography } from 'antd';
+import { Button, Divider, Row, Typography } from 'antd';
 import { map } from 'd3';
+import dayjs from 'dayjs';
 import { FlatLogData } from 'lib/logs/flatLogData';
-import { flatMap, flatMapDeep } from 'lodash-es';
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useCopyToClipboard } from 'react-use';
 import { AppState } from 'store/reducers';
 import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
-import ILogsReducer from 'types/reducer/logs';
+import { ILog } from 'types/api/logs/log';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import AddToQueryHOC from '../AddToQueryHOC';
 import CopyClipboardHOC from '../CopyClipboardHOC';
 import { Container } from './styles';
 
-function LogGeneralField({ fieldKey, fieldValue }) {
+interface LogFieldProps {
+	fieldKey: string;
+	fieldValue: string;
+}
+function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
 	return (
 		<div
 			style={{
@@ -34,8 +39,10 @@ function LogGeneralField({ fieldKey, fieldValue }) {
 		</div>
 	);
 }
-
+function LogSelectedField({
-function LogSelectedField({ fieldKey = '', fieldValue = '' }) {
+	fieldKey = '',
+	fieldValue = '',
+}: LogFieldProps): JSX.Element {
 	return (
 		<div
 			style={{
@@ -65,13 +72,16 @@ function LogSelectedField({ fieldKey = '', fieldValue = '' }) {
 	);
 }
 
-function LogItem({ logData }) {
+interface LogItemProps {
+	logData: ILog;
+}
+function LogItem({ logData }: LogItemProps): JSX.Element {
 	const {
 		fields: { selected },
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 	const dispatch = useDispatch();
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
-	const [_state, setCopy] = useCopyToClipboard();
+	const [, setCopy] = useCopyToClipboard();
 
 	const handleDetailedView = useCallback(() => {
 		dispatch({
@@ -80,22 +90,28 @@ function LogItem({ logData }) {
 		});
 	}, [dispatch, logData]);
 
-	const handleCopyJSON = () => {
+	const handleCopyJSON = (): void => {
-		setCopy(JSON.stringify(logData, null, 2))
+		setCopy(JSON.stringify(logData, null, 2));
-	}
+	};
 	return (
 		<Container>
 			<div style={{ maxWidth: '100%' }}>
 				<div>
 					{'{'}
 					<div style={{ marginLeft: '0.5rem' }}>
-						<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
+						<LogGeneralField
+							fieldKey="log"
+							fieldValue={flattenLogData.body as never}
+						/>
 						{flattenLogData.stream && (
-							<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
+							<LogGeneralField
+								fieldKey="stream"
+								fieldValue={flattenLogData.stream as never}
+							/>
 						)}
 						<LogGeneralField
 							fieldKey="timestamp"
-							fieldValue={flattenLogData.timestamp}
+							fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
 						/>
 					</div>
 					{'}'}
@@ -106,7 +122,7 @@ function LogItem({ logData }) {
 							<LogSelectedField
 								key={field.name}
 								fieldKey={field.name}
-								fieldValue={flattenLogData[field.name]}
+								fieldValue={flattenLogData[field.name] as never}
 							/>
 						) : null;
 					})}

frontend/src/constants/dashboard.ts

@@ -30,4 +30,5 @@ export const QueryBuilderQueryTemplate = {
 export const QueryBuilderFormulaTemplate = {
 	expression: '',
 	disabled: false,
+	legend: '',
 };

frontend/src/container/FormAlertRules/QuerySection.tsx

@@ -68,15 +68,20 @@ function QuerySection({
 	const handleFormulaChange = ({
 		formulaIndex,
 		expression,
+		legend,
 		toggleDisable,
 		toggleDelete,
 	}: IQueryBuilderFormulaHandleChange): void => {
 		const allFormulas = formulaQueries;
 		const current = allFormulas[formulaIndex];
-		if (expression) {
+		if (expression !== undefined) {
 			current.expression = expression;
 		}
 
+		if (legend !== undefined) {
+			current.legend = legend;
+		}
+
 		if (toggleDisable) {
 			current.disabled = !current.disabled;
 		}
@@ -179,6 +184,7 @@ function QuerySection({
 			formulaOnly: true,
 			expression: 'A',
 			disabled: false,
+			legend: '',
 		};
 
 		setFormulaQueries({ ...formulas });

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 import { LoadingOutlined } from '@ant-design/icons';
 import {
 	Button,

frontend/src/container/GeneralSettings/Retention.tsx

@@ -87,7 +87,7 @@ function Retention({
 				<Col span={12} style={{ display: 'flex' }}>
 					<RetentionFieldLabel>{text}</RetentionFieldLabel>
 				</Col>
-				<Row span={12} justify="end">
+				<Row justify="end">
 					<RetentionFieldInputContainer>
 						<Input
 							value={selectedValue && selectedValue >= 0 ? selectedValue : ''}

frontend/src/container/LogControls/index.tsx

@@ -1,5 +1,4 @@
 import {
-	ArrowLeftOutlined,
 	FastBackwardOutlined,
 	LeftOutlined,
 	RightOutlined,
@@ -19,7 +18,7 @@ import {
 	SET_LOG_LINES_PER_PAGE,
 } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import { Container } from './styles';
 
@@ -27,7 +26,10 @@ const { Option } = Select;
 
 const ITEMS_PER_PAGE_OPTIONS = [25, 50, 100, 200];
 
-function LogControls({ getLogs }) {
+interface LogControlsProps {
+	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
+}
+function LogControls({ getLogs }: LogControlsProps): JSX.Element | null {
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -40,14 +42,14 @@ function LogControls({ getLogs }) {
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 	const dispatch = useDispatch();
 
-	const handleLogLinesPerPageChange = (e: number) => {
+	const handleLogLinesPerPageChange = (e: number): void => {
 		dispatch({
 			type: SET_LOG_LINES_PER_PAGE,
 			payload: e,
 		});
 	};
 
-	const handleGoToLatest = () => {
+	const handleGoToLatest = (): void => {
 		dispatch({
 			type: RESET_ID_START_AND_END,
 		});
@@ -65,12 +67,12 @@ function LogControls({ getLogs }) {
 			});
 	};
 
-	const handleNavigatePrevious = () => {
+	const handleNavigatePrevious = (): void => {
 		dispatch({
 			type: GET_PREVIOUS_LOG_LINES,
 		});
 	};
-	const handleNavigateNext = () => {
+	const handleNavigateNext = (): void => {
 		dispatch({
 			type: GET_NEXT_LOG_LINES,
 		});
@@ -105,7 +107,9 @@ function LogControls({ getLogs }) {
 }
 
 interface DispatchProps {
-	getLogs: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogs: (
+		props: Parameters<typeof getLogs>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

frontend/src/container/LogDetailedView/ActionItem.tsx

@@ -2,7 +2,7 @@ import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { Button, Col, Popover } from 'antd';
 import getStep from 'lib/getStep';
 import { generateFilterQuery } from 'lib/logs/generateFilterQuery';
-import React, { Dispatch, memo, useCallback, useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -12,9 +12,9 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { SET_SEARCH_QUERY_STRING, TOGGLE_LIVE_TAIL } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
-const removeJSONStringifyQuotes = (s: string) => {
+const removeJSONStringifyQuotes = (s: string): string => {
 	if (!s || !s.length) {
 		return s;
 	}
@@ -24,7 +24,21 @@ const removeJSONStringifyQuotes = (s: string) => {
 	}
 	return s;
 };
-function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
+
+interface ActionItemProps {
+	fieldKey: string;
+	fieldValue: string;
+	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => ReturnType<typeof getLogsAggregate>;
+}
+function ActionItem({
+	fieldKey,
+	fieldValue,
+	getLogs,
+	getLogsAggregate,
+}: ActionItemProps): JSX.Element | unknown {
 	const {
 		searchFilter: { queryString },
 		logLinesPerPage,
@@ -38,7 +52,7 @@ function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
 		(state) => state.globalTime,
 	);
 
-	const handleQueryAdd = (newQueryString) => {
+	const handleQueryAdd = (newQueryString: string): void => {
 		let updatedQueryString = queryString || '';
 
 		if (updatedQueryString.length === 0) {
@@ -94,7 +108,7 @@ function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
 				<Button
 					type="text"
 					size="small"
-					onClick={() =>
+					onClick={(): void =>
 						handleQueryAdd(
 							generateFilterQuery({
 								fieldKey,
@@ -110,7 +124,7 @@ function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
 				<Button
 					type="text"
 					size="small"
-					onClick={() =>
+					onClick={(): void =>
 						handleQueryAdd(
 							generateFilterQuery({
 								fieldKey,
@@ -124,7 +138,8 @@ function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
 				</Button>
 			</Col>
 		),
-		[],
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[fieldKey, validatedFieldValue],
 	);
 	return (
 		<Popover placement="bottomLeft" content={PopOverMenuContent} trigger="click">
@@ -134,10 +149,11 @@ function ActionItem({ fieldKey, fieldValue, getLogs, getLogsAggregate }) {
 		</Popover>
 	);
 }
-
 interface DispatchProps {
-	getLogs: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogs: (props: Parameters<typeof getLogs>[0]) => (dispatch: never) => void;
-	getLogsAggregate: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => (dispatch: never) => void;
 }
 
 const mapDispatchToProps = (
@@ -147,4 +163,5 @@ const mapDispatchToProps = (
 	getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch),
 });
 
-export default connect(null, mapDispatchToProps)(memo(ActionItem));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default connect(null, mapDispatchToProps)(memo(ActionItem as any));

frontend/src/container/LogDetailedView/JsonView.tsx

@@ -4,9 +4,13 @@ import { Button, Row } from 'antd';
 import Editor from 'components/Editor';
 import React, { useMemo } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { ILog } from 'types/api/logs/log';
 
-function JSONView({ logData }) {
+interface JSONViewProps {
-    const [_state, copyToClipboard] = useCopyToClipboard();
+	logData: ILog;
+}
+function JSONView({ logData }: JSONViewProps): JSX.Element {
+	const [, copyToClipboard] = useCopyToClipboard();
 	const LogJsonData = useMemo(() => JSON.stringify(logData, null, 2), [logData]);
 	return (
 		<div>
@@ -25,7 +29,13 @@ function JSONView({ logData }) {
 				</Button>
 			</Row>
 			<div style={{ marginTop: '0.5rem' }}>
-                <Editor value={LogJsonData} language="json" height="70vh" readOnly />
+				<Editor
+					value={LogJsonData}
+					language="json"
+					height="70vh"
+					readOnly
+					onChange={(): void => {}}
+				/>
 			</div>
 		</div>
 	);

frontend/src/container/LogDetailedView/TableView.tsx

@@ -1,30 +1,34 @@
 import { blue, orange } from '@ant-design/colors';
-import {
+import { Input, Table } from 'antd';
-	MenuFoldOutlined,
-	MinusCircleOutlined,
-	PlusCircleFilled,
-	PlusCircleOutlined,
-} from '@ant-design/icons';
-import { Button, Col, Input, Popover, Table, Typography } from 'antd';
 import AddToQueryHOC from 'components/Logs/AddToQueryHOC';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
 import flatten from 'flat';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import React, { useMemo, useState } from 'react';
+import { ILog } from 'types/api/logs/log';
 
 import ActionItem from './ActionItem';
 
-function TableView({ logData }) {
+// Fields which should be restricted from adding it to query
+const RESTRICTED_FIELDS = ['timestamp'];
+
+interface TableViewProps {
+	logData: ILog;
+}
+function TableView({ logData }: TableViewProps): JSX.Element | null {
 	const [fieldSearchInput, setFieldSearchInput] = useState<string>('');
 
-	const flattenLogData = useMemo(() => (logData ? flatten(logData) : null), [
+	const flattenLogData: Record<string, never> | null = useMemo(
-		logData,
+		() => (logData ? flatten(logData) : null),
-	]);
+		[logData],
+	);
 	if (logData === null) {
 		return null;
 	}
 
-	const dataSource = Object.keys(flattenLogData)
+	const dataSource =
+		flattenLogData !== null &&
+		Object.keys(flattenLogData)
 			.filter((field) => fieldSearchFilter(field, fieldSearchInput))
 			.map((key) => {
 				return {
@@ -34,38 +38,48 @@ function TableView({ logData }) {
 				};
 			});
 
+	if (!dataSource) {
+		return null;
+	}
+
 	const columns = [
 		{
 			title: 'Action',
 			width: 75,
-			render: (fieldData) => (
+			render: (fieldData: Record<string, string>): JSX.Element | null => {
-				<ActionItem
+				const fieldKey = fieldData.field.split('.').slice(-1);
-					fieldKey={fieldData.field.split('.').slice(-1)}
+				if (!RESTRICTED_FIELDS.includes(fieldKey[0])) {
-					fieldValue={fieldData.value}
+					return <ActionItem fieldKey={fieldKey} fieldValue={fieldData.value} />;
-				/>
+				}
-			),
+				return null;
+			},
 		},
 		{
 			title: 'Field',
 			dataIndex: 'field',
 			key: 'field',
 			width: '35%',
-			render: (field: string) => (
+			render: (field: string): JSX.Element => {
-				<AddToQueryHOC
+				const fieldKey = field.split('.').slice(-1);
-					fieldKey={field.split('.').slice(-1)}
+				const renderedField = <span style={{ color: blue[4] }}>{field}</span>;
-					fieldValue={flattenLogData[field]}
+
-				>
+				if (!RESTRICTED_FIELDS.includes(fieldKey[0])) {
+					return (
+						<AddToQueryHOC fieldKey={fieldKey[0]} fieldValue={flattenLogData[field]}>
 							{' '}
-					<span style={{ color: blue[4] }}>{field}</span>
+							{renderedField}
 						</AddToQueryHOC>
-			),
+					);
+				}
+				return renderedField;
+			},
 		},
 		{
 			title: 'Value',
 			dataIndex: 'value',
 			key: 'value',
 			ellipsis: false,
-			render: (field) => (
+			render: (field: never): JSX.Element => (
 				<CopyClipboardHOC textToCopy={field}>
 					<span style={{ color: orange[6] }}>{field}</span>
 				</CopyClipboardHOC>
@@ -79,13 +93,13 @@ function TableView({ logData }) {
 				placeholder="Search field names"
 				size="large"
 				value={fieldSearchInput}
-				onChange={(e) => setFieldSearchInput(e.target.value)}
+				onChange={(e): void => setFieldSearchInput(e.target.value)}
 			/>
 			<Table
 				// scroll={{ x: true }}
-				tableLayout='fixed'
+				tableLayout="fixed"
 				dataSource={dataSource}
-				columns={columns}
+				columns={columns as never}
 				pagination={false}
 			/>
 		</div>

frontend/src/container/LogDetailedView/index.tsx

@@ -3,19 +3,19 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { SET_DETAILED_LOG_DATA } from 'types/actions/logs';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import JSONView from './JsonView';
 import TableView from './TableView';
 
 const { TabPane } = Tabs;
 
-function LogDetailedView() {
+function LogDetailedView(): JSX.Element {
 	const { detailedLog } = useSelector<AppState, ILogsReducer>(
 		(state) => state.logs,
 	);
 	const dispatch = useDispatch();
-    const onDrawerClose = () => {
+	const onDrawerClose = (): void => {
 		dispatch({
 			type: SET_DETAILED_LOG_DATA,
 			payload: null,
@@ -35,6 +35,7 @@ function LogDetailedView() {
 				getContainer={false}
 				style={{ overscrollBehavior: 'contain' }}
 			>
+				{detailedLog && (
 					<Tabs defaultActiveKey="1">
 						<TabPane tab="Table" key="1">
 							<TableView logData={detailedLog} />
@@ -43,6 +44,7 @@ function LogDetailedView() {
 							<JSONView logData={detailedLog} />
 						</TabPane>
 					</Tabs>
+				)}
 			</Drawer>
 		</div>
 	);

frontend/src/container/LogLiveTail/OptionIcon.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 
-function OptionIcon({ isDarkMode }) {
+interface OptionIconProps {
+	isDarkMode: boolean;
+}
+function OptionIcon({ isDarkMode }: OptionIconProps): JSX.Element {
 	return (
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -10,7 +13,7 @@ function OptionIcon({ isDarkMode }) {
 			height="1rem"
 			viewBox="0 0 52 52"
 			enableBackground="new 0 0 52 52"
-            fill={isDarkMode ? "#eee" : '#222'}
+			fill={isDarkMode ? '#eee' : '#222'}
 		>
 			<path
 				d="M20,44c0-3.3,2.7-6,6-6s6,2.7,6,6s-2.7,6-6,6S20,47.3,20,44z M20,26c0-3.3,2.7-6,6-6s6,2.7,6,6s-2.7,6-6,6

frontend/src/container/LogLiveTail/index.tsx

@@ -1,27 +1,11 @@
-import { green, red } from '@ant-design/colors';
+/* eslint-disable react-hooks/exhaustive-deps */
-import {
+import { green } from '@ant-design/colors';
-	ArrowRightOutlined,
+import { PauseOutlined, PlayCircleOutlined } from '@ant-design/icons';
-	IeSquareFilled,
+import { Button, Popover, Row, Select } from 'antd';
-	PauseOutlined,
-	PlayCircleOutlined,
-	PlaySquareFilled,
-	ReloadOutlined,
-	StopFilled,
-} from '@ant-design/icons';
-import { fetchEventSource } from '@microsoft/fetch-event-source';
-import { Button, Card, Popover, Row, Select, Typography } from 'antd';
-import getLocalStorageKey from 'api/browser/localstorage/get';
 import { LiveTail } from 'api/logs/livetail';
-import { LOCALSTORAGE } from 'constants/localStorage';
 import dayjs from 'dayjs';
-import { debounce, throttle } from 'lodash-es';
+import { throttle } from 'lodash-es';
-import React, {
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import {
@@ -32,7 +16,7 @@ import {
 } from 'types/actions/logs';
 import { TLogsLiveTailState } from 'types/api/logs/liveTail';
 import AppReducer from 'types/reducer/app';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import OptionIcon from './OptionIcon';
 import { TimePickerCard, TimePickerSelect } from './styles';
@@ -66,7 +50,7 @@ const TIME_PICKER_OPTIONS = [
 	},
 ];
 
-function LogLiveTail() {
+function LogLiveTail(): JSX.Element {
 	const {
 		liveTail,
 		searchFilter: { queryString },
@@ -75,15 +59,16 @@ function LogLiveTail() {
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	const dispatch = useDispatch();
-	const handleLiveTail = (toggleState: TLogsLiveTailState) => {
+	const handleLiveTail = (toggleState: TLogsLiveTailState): void => {
 		dispatch({
 			type: TOGGLE_LIVE_TAIL,
 			payload: toggleState,
 		});
 	};
 
-	const batchedEventsRef = useRef([]);
+	const batchedEventsRef = useRef<Record<string, unknown>[]>([]);
 
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const pushLiveLog = useCallback(
 		throttle(() => {
 			dispatch({
@@ -96,21 +81,21 @@ function LogLiveTail() {
 		[],
 	);
 
-	const batchLiveLog = (e) => {
+	const batchLiveLog = (e: { data: string }): void => {
 		// console.log('EVENT BATCHED');
-		batchedEventsRef.current.push(JSON.parse(e.data));
+		batchedEventsRef.current.push(JSON.parse(e.data as string) as never);
 		pushLiveLog();
 	};
 
 	// This ref depicts thats whether the live tail is played from paused state or not.
-	const liveTailSourceRef = useRef(null);
+	const liveTailSourceRef = useRef<EventSource | null>(null);
 	useEffect(() => {
 		if (liveTail === 'PLAYING') {
 			// console.log('Starting Live Tail', logs.length);
 			const timeStamp = dayjs().subtract(liveTailStartRange, 'minute').valueOf();
 			const queryParams = new URLSearchParams({
 				...(queryString ? { q: queryString } : {}),
-				timestampStart: timeStamp,
+				timestampStart: (timeStamp * 1e6) as never,
 				...(liveTailSourceRef.current && logs.length > 0
 					? {
 							idGt: logs[0].id,
@@ -119,23 +104,19 @@ function LogLiveTail() {
 			});
 			const source = LiveTail(queryParams.toString());
 			liveTailSourceRef.current = source;
-			source.onmessage = function (e) {
+			source.onmessage = function connectionMessage(e): void {
-				// pushLiveLog(e)
 				batchLiveLog(e);
 			};
-			source.onopen = function (event) {
+			// source.onopen = function connectionOpen(): void { };
-				// console.log('open event');
+			source.onerror = function connectionError(event: unknown): void {
-				// console.log(event);
+				console.error(event);
-			};
-			source.onerror = function (event) {
-				// console.log(event);
 				source.close();
 				dispatch({
 					type: TOGGLE_LIVE_TAIL,
 					payload: false,
 				});
 			};
-		} else if (liveTailSourceRef.current) {
+		} else if (liveTailSourceRef.current && liveTailSourceRef.current.close) {
 			liveTailSourceRef.current?.close();
 		}
 
@@ -144,7 +125,7 @@ function LogLiveTail() {
 		}
 	}, [liveTail]);
 
-	const handleLiveTailStart = () => {
+	const handleLiveTailStart = (): void => {
 		handleLiveTail('PLAYING');
 		if (!liveTailSourceRef.current) {
 			dispatch({
@@ -158,7 +139,7 @@ function LogLiveTail() {
 			<TimePickerSelect
 				disabled={liveTail === 'PLAYING'}
 				value={liveTailStartRange}
-				onChange={(value) => {
+				onChange={(value): void => {
 					dispatch({
 						type: SET_LIVE_TAIL_START_TIME,
 						payload: value,
@@ -183,7 +164,7 @@ function LogLiveTail() {
 					{liveTail === 'PLAYING' ? (
 						<Button
 							type="primary"
-							onClick={() => handleLiveTail('PAUSED')}
+							onClick={(): void => handleLiveTail('PAUSED')}
 							title="Pause live tail"
 							style={{ background: green[6] }}
 						>
@@ -201,7 +182,7 @@ function LogLiveTail() {
 					{liveTail !== 'STOPPED' && (
 						<Button
 							type="dashed"
-							onClick={() => handleLiveTail('STOPPED')}
+							onClick={(): void => handleLiveTail('STOPPED')}
 							title="Exit live tail"
 						>
 							<div

frontend/src/container/Logs/index.tsx

@@ -15,7 +15,10 @@ import { GetLogsFields } from 'store/actions/logs/getFields';
 import AppActions from 'types/actions';
 import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs';
 
-function Logs({ getLogsFields }) {
+interface LogsProps {
+	getLogsFields: VoidFunction;
+}
+function Logs({ getLogsFields }: LogsProps): JSX.Element {
 	const { search } = useLocation();
 
 	const urlQuery = useMemo(() => {
@@ -29,7 +32,7 @@ function Logs({ getLogsFields }) {
 			type: SET_SEARCH_QUERY_STRING,
 			payload: urlQuery.get('q'),
 		});
-	}, [dispatch]);
+	}, [dispatch, urlQuery]);
 
 	useEffect(() => {
 		getLogsFields();
@@ -39,16 +42,16 @@ function Logs({ getLogsFields }) {
 		<div style={{ position: 'relative' }}>
 			<Row style={{ justifyContent: 'center', alignItems: 'center' }}>
 				<SearchFilter />
-				<Divider type='vertical' style={{ height: '2rem' }} />
+				<Divider type="vertical" style={{ height: '2rem' }} />
 				<LogLiveTail />
 			</Row>
 			<LogsAggregate />
 			<LogControls />
 			<Divider style={{ margin: 0 }} />
 			<Row gutter={20} style={{ flexWrap: 'nowrap' }}>
-				<LogsFilters flex="450px" />
+				<LogsFilters />
 				<Divider type="vertical" style={{ height: '100%', margin: 0 }} />
-				<LogsTable flex="auto" />
+				<LogsTable />
 			</Row>
 			<LogDetailedView />
 		</div>

frontend/src/container/LogsAggregate/index.tsx

@@ -1,42 +1,41 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { blue } from '@ant-design/colors';
 import Graph from 'components/Graph';
 import Spinner from 'components/Spinner';
 import dayjs from 'dayjs';
 import getStep from 'lib/getStep';
 import React, { memo, useEffect, useRef } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import { Container } from './styles';
 
-function LogsAggregate({ getLogsAggregate }) {
+interface LogsAggregateProps {
+	getLogsAggregate: (arg0: Parameters<typeof getLogsAggregate>[0]) => void;
+}
+function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element {
 	const {
 		searchFilter: { queryString },
-		logs,
-		logLinesPerPage,
 		idEnd,
 		idStart,
-		isLoading,
 		isLoadingAggregate,
 		logsAggregate,
 		liveTail,
 		liveTailStartRange,
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 
-	const dispatch = useDispatch();
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
 
-	const reFetchIntervalRef = useRef(null);
+	const reFetchIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 	useEffect(() => {
-		// console.log('LIVE TAIL LOG AGG', liveTail)
 		switch (liveTail) {
 			case 'STOPPED': {
 				if (reFetchIntervalRef.current) {
@@ -59,7 +58,7 @@ function LogsAggregate({ getLogsAggregate }) {
 			}
 
 			case 'PLAYING': {
-				const aggregateCall = () => {
+				const aggregateCall = (): void => {
 					const startTime =
 						dayjs().subtract(liveTailStartRange, 'minute').valueOf() * 1e6;
 					const endTime = dayjs().valueOf() * 1e6;
@@ -72,17 +71,15 @@ function LogsAggregate({ getLogsAggregate }) {
 							inputFormat: 'ns',
 						}),
 						q: queryString,
-						...(idStart ? {idGt:  idStart } : {}),
+						...(idStart ? { idGt: idStart } : {}),
 						...(idEnd ? { idLt: idEnd } : {}),
 					});
 				};
 				aggregateCall();
 				reFetchIntervalRef.current = setInterval(aggregateCall, 60000);
-				// console.log('LA Play', reFetchIntervalRef.current);
 				break;
 			}
 			case 'PAUSED': {
-				// console.log('LA Pause', reFetchIntervalRef.current);
 				if (reFetchIntervalRef.current) {
 					clearInterval(reFetchIntervalRef.current);
 				}
@@ -98,7 +95,6 @@ function LogsAggregate({ getLogsAggregate }) {
 		labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)),
 		datasets: [
 			{
-				// label: 'Span Count',
 				data: logsAggregate.map((s) => s.value),
 				backgroundColor: blue[4],
 			},
@@ -123,7 +119,9 @@ function LogsAggregate({ getLogsAggregate }) {
 }
 
 interface DispatchProps {
-	getLogsAggregate: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

frontend/src/container/LogsFilters/FieldItem.tsx

@@ -1,18 +1,21 @@
-import {
+import { LoadingOutlined } from '@ant-design/icons';
-	CloseCircleFilled,
-	CloseOutlined,
-	LoadingOutlined,
-} from '@ant-design/icons';
 import { Button, Popover, Spin } from 'antd';
-import Spinner from 'components/Spinner';
+import React, { useState } from 'react';
-import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHover, useHoverDirty } from 'react-use';
 import { AppState } from 'store/reducers';
 import AppReducer from 'types/reducer/app';
 
 import { Field } from './styles';
 
+interface FieldItemProps {
+	name: string;
+	buttonIcon: React.ReactNode;
+	buttonOnClick: (arg0: Record<string, unknown>) => void;
+	fieldData: Record<string, never>;
+	fieldIndex: number;
+	isLoading: boolean;
+	iconHoverText: string;
+}
 export function FieldItem({
 	name,
 	buttonIcon,
@@ -20,16 +23,16 @@ export function FieldItem({
 	fieldData,
 	fieldIndex,
 	isLoading,
-	iconHoverText
+	iconHoverText,
-}) {
+}: FieldItemProps): JSX.Element {
 	const [isHovered, setIsHovered] = useState(false);
 	const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
 	return (
 		<Field
-			onMouseEnter={() => {
+			onMouseEnter={(): void => {
 				setIsHovered(true);
 			}}
-			onMouseLeave={() => setIsHovered(false)}
+			onMouseLeave={(): void => setIsHovered(false)}
 			isDarkMode={isDarkMode}
 		>
 			<span>{name}</span>
@@ -43,7 +46,7 @@ export function FieldItem({
 							type="text"
 							size="small"
 							icon={buttonIcon}
-							onClick={() => buttonOnClick({ fieldData, fieldIndex })}
+							onClick={(): void => buttonOnClick({ fieldData, fieldIndex })}
 							style={{ color: 'inherit', padding: 0, height: '1rem', width: '1rem' }}
 						/>
 					</Popover>

frontend/src/container/LogsFilters/index.tsx

@@ -1,10 +1,6 @@
+/* eslint-disable react/no-array-index-key */
 import { red } from '@ant-design/colors';
-import {
+import { CloseOutlined, PlusCircleFilled } from '@ant-design/icons';
-	CloseCircleFilled,
-	CloseOutlined,
-	PlusCircleFilled,
-	PlusCircleOutlined,
-} from '@ant-design/icons';
 import { Input } from 'antd';
 import AddToSelectedFields from 'api/logs/AddToSelectedField';
 import RemoveSelectedField from 'api/logs/RemoveFromSelectedField';
@@ -17,34 +13,40 @@ import { ThunkDispatch } from 'redux-thunk';
 import { GetLogsFields } from 'store/actions/logs/getFields';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import ILogsReducer from 'types/reducer/logs';
+import { IInterestingFields, ISelectedFields } from 'types/api/logs/fields';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import { FieldItem } from './FieldItem';
-import {
+import { CategoryContainer, Container, FieldContainer } from './styles';
-	CategoryContainer,
-	Container,
-	ExtractField,
-	Field,
-	FieldContainer,
-} from './styles';
 
 const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id'];
 
-function LogsFilters({ getLogsFields }) {
+interface LogsFiltersProps {
+	getLogsFields: () => void;
+}
+function LogsFilters({ getLogsFields }: LogsFiltersProps): JSX.Element {
 	const {
 		fields: { interesting, selected },
 	} = useSelector<AppState, ILogsReducer>((state) => state.logs);
 
-	const [selectedFieldLoading, setSelectedFieldLoading] = useState([]);
+	const [selectedFieldLoading, setSelectedFieldLoading] = useState<number[]>([]);
-	const [interestingFieldLoading, setInterestingFieldLoading] = useState([]);
+	const [interestingFieldLoading, setInterestingFieldLoading] = useState<
+		number[]
+	>([]);
 
 	const [filterValuesInput, setFilterValuesInput] = useState('');
-	const handleSearch = (e) => {
+	const handleSearch = (e: React.ChangeEvent<HTMLInputElement>): void => {
-		setFilterValuesInput(e.target.value);
+		setFilterValuesInput((e.target as HTMLInputElement).value);
 	};
 
-	const handleAddInterestingToSelected = async ({ fieldData, fieldIndex }) => {
+	const handleAddInterestingToSelected = async ({
-		setInterestingFieldLoading((prevState) => {
+		fieldData,
+		fieldIndex,
+	}: {
+		fieldData: IInterestingFields;
+		fieldIndex: number;
+	}): Promise<void> => {
+		setInterestingFieldLoading((prevState: number[]) => {
 			prevState.push(fieldIndex);
 			return [...prevState];
 		});
@@ -59,7 +61,13 @@ function LogsFilters({ getLogsFields }) {
 			interestingFieldLoading.filter((e) => e !== fieldIndex),
 		);
 	};
-	const handleRemoveSelectedField = async ({ fieldData, fieldIndex }) => {
+	const handleRemoveSelectedField = async ({
+		fieldData,
+		fieldIndex,
+	}: {
+		fieldData: ISelectedFields;
+		fieldIndex: number;
+	}): Promise<void> => {
 		setSelectedFieldLoading((prevState) => {
 			prevState.push(fieldIndex);
 			return [...prevState];
@@ -77,7 +85,7 @@ function LogsFilters({ getLogsFields }) {
 		);
 	};
 	return (
-		<Container>
+		<Container flex="450px">
 			<Input
 				placeholder="Filter Values"
 				onInput={handleSearch}
@@ -93,14 +101,14 @@ function LogsFilters({ getLogsFields }) {
 						.filter((field) => fieldSearchFilter(field.name, filterValuesInput))
 						.map((field, idx) => (
 							<FieldItem
-								key={field + idx}
+								key={`${JSON.stringify(field)}-${idx}`}
 								name={field.name}
-								fieldData={field}
+								fieldData={field as never}
 								fieldIndex={idx}
 								buttonIcon={<CloseOutlined style={{ color: red[5] }} />}
 								buttonOnClick={
-									!RESTRICTED_SELECTED_FIELDS.includes(field.name) &&
+									(!RESTRICTED_SELECTED_FIELDS.includes(field.name) &&
-									handleRemoveSelectedField
+										handleRemoveSelectedField) as never
 								}
 								isLoading={selectedFieldLoading.includes(idx)}
 								iconHoverText="Remove from Selected Fields"
@@ -115,12 +123,12 @@ function LogsFilters({ getLogsFields }) {
 						.filter((field) => fieldSearchFilter(field.name, filterValuesInput))
 						.map((field, idx) => (
 							<FieldItem
-								key={field + idx}
+								key={`${JSON.stringify(field)}-${idx}`}
 								name={field.name}
-								fieldData={field}
+								fieldData={field as never}
 								fieldIndex={idx}
 								buttonIcon={<PlusCircleFilled />}
-								buttonOnClick={handleAddInterestingToSelected}
+								buttonOnClick={handleAddInterestingToSelected as never}
 								isLoading={interestingFieldLoading.includes(idx)}
 								iconHoverText="Add to Selected Fields"
 							/>

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

@@ -1,7 +1,12 @@
 import { Typography } from 'antd';
 import React from 'react';
 
-function FieldKey({ name, type }) {
+interface FieldKeyProps {
+	name: string;
+	type: string;
+}
+
+function FieldKey({ name, type }: FieldKeyProps): JSX.Element {
 	return (
 		<span style={{ margin: '0.25rem 0', display: 'flex', gap: '0.5rem' }}>
 			<Typography.Text>{name}</Typography.Text>

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

@@ -1,24 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-bitwise */
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable no-param-reassign */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react-hooks/exhaustive-deps */
 import { CloseOutlined } from '@ant-design/icons';
-import { Button, Input, Select, Typography } from 'antd';
+import { Button, Input, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,
 	QueryOperatorsMultiVal,
 	QueryOperatorsSingleVal,
-	QueryTypes,
 } from 'lib/logql/tokens';
-import { chunk, cloneDeep, debounce, flatten } from 'lodash-es';
+import { flatten } from 'lodash-es';
-import React, {
+import React, { useEffect, useMemo, useRef, useState } from 'react';
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
 import { useSelector } from 'react-redux';
-import { useHoverDirty, useLocation } from 'react-use';
 import { AppState } from 'store/reducers';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 import { v4 } from 'uuid';
 
 import FieldKey from '../FieldKey';
@@ -26,12 +24,24 @@ import { QueryConditionContainer, QueryFieldContainer } from '../styles';
 import { createParsedQueryStructure } from '../utils';
 
 const { Option } = Select;
-function QueryField({ query, queryIndex, onUpdate, onDelete }) {
+interface QueryFieldProps {
+	query: { value: string | string[]; type: string }[];
+	queryIndex: number;
+	onUpdate: (query: unknown, queryIndex: number) => void;
+	onDelete: (queryIndex: number) => void;
+}
+function QueryField({
+	query,
+	queryIndex,
+	onUpdate,
+	onDelete,
+}: QueryFieldProps): JSX.Element | null {
 	const {
 		fields: { selected },
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
 
-	const getFieldType = (inputKey) => {
+	const getFieldType = (inputKey: string): string => {
+		// eslint-disable-next-line no-restricted-syntax
 		for (const selectedField of selected) {
 			if (inputKey === selectedField.name) {
 				return selectedField.type;
@@ -39,11 +49,10 @@ function QueryField({ query, queryIndex, onUpdate, onDelete }) {
 		}
 		return '';
 	};
-	const fieldType = useMemo(() => getFieldType(query[0].value), [
+	const fieldType = useMemo(() => getFieldType(query[0].value as string), [
 		query,
-		selected,
 	]);
-	const handleChange = (qIdx, value) => {
+	const handleChange = (qIdx: number, value: string): void => {
 		query[qIdx].value = value || '';
 
 		if (qIdx === 1) {
@@ -51,16 +60,17 @@ function QueryField({ query, queryIndex, onUpdate, onDelete }) {
 				if (!Array.isArray(query[2].value)) {
 					query[2].value = [];
 				}
-			} else if (Object.values(QueryOperatorsSingleVal).includes(value)) {
+			} else if (
-				if (Array.isArray(query[2].value)) {
+				Object.values(QueryOperatorsSingleVal).includes(value) &&
+				Array.isArray(query[2].value)
+			) {
 				query[2].value = '';
 			}
 		}
-		}
 		onUpdate(query, queryIndex);
 	};
 
-	const handleClear = () => {
+	const handleClear = (): void => {
 		onDelete(queryIndex);
 	};
 	if (!Array.isArray(query)) {
@@ -72,39 +82,43 @@ function QueryField({ query, queryIndex, onUpdate, onDelete }) {
 			style={{ ...(queryIndex === 0 && { gridColumnStart: 2 }) }}
 		>
 			<div style={{ flex: 1, minWidth: 100 }}>
-				<FieldKey name={query[0] && query[0].value} type={fieldType} />
+				<FieldKey name={(query[0] && query[0].value) as string} type={fieldType} />
 			</div>
 			<Select
 				defaultActiveFirstOption={false}
 				placeholder="Select Operator"
 				defaultValue={
-					query[1] && query[1].value ? query[1].value.toUpperCase() : null
+					query[1] && query[1].value
+						? (query[1].value as string).toUpperCase()
+						: null
 				}
-				onChange={(e) => handleChange(1, e)}
+				onChange={(e): void => handleChange(1, e)}
 				style={{ minWidth: 150 }}
 			>
 				{Object.values({
 					...QueryOperatorsMultiVal,
 					...QueryOperatorsSingleVal,
 				}).map((cond) => (
-					<Option key={cond} value={cond} label={cond} />
+					<Option key={cond} value={cond} label={cond}>
+						{cond}
+					</Option>
 				))}
 			</Select>
 			<div style={{ flex: 2 }}>
 				{Array.isArray(query[2].value) ||
 				Object.values(QueryOperatorsMultiVal).some(
-						(op) => op.toUpperCase() === query[1].value?.toUpperCase(),
+					(op) => op.toUpperCase() === (query[1].value as string)?.toUpperCase(),
 				) ? (
 					<Select
 						mode="tags"
 						style={{ width: '100%' }}
-						onChange={(e) => handleChange(2, e)}
+						onChange={(e): void => handleChange(2, e as never)}
 						defaultValue={(query[2] && query[2].value) || []}
 						notFoundContent={null}
 					/>
 				) : (
 					<Input
-						onChange={(e) => handleChange(2, e.target.value)}
+						onChange={(e): void => handleChange(2, e.target.value)}
 						style={{ width: '100%' }}
 						defaultValue={query[2] && query[2].value}
 					/>
@@ -120,24 +134,39 @@ function QueryField({ query, queryIndex, onUpdate, onDelete }) {
 		</QueryFieldContainer>
 	);
 }
-function QueryConditionField({ query, queryIndex, onUpdate }) {
+
+interface QueryConditionFieldProps {
+	query: { value: string | string[]; type: string }[];
+	queryIndex: number;
+	onUpdate: (arg0: unknown, arg1: number) => void;
+}
+function QueryConditionField({
+	query,
+	queryIndex,
+	onUpdate,
+}: QueryConditionFieldProps): JSX.Element {
 	return (
 		<QueryConditionContainer>
 			<Select
-				defaultValue={query.value.toUpperCase()}
+				defaultValue={
-				onChange={(e) => {
+					(query as any).value &&
+					(((query as any)?.value as any) as string).toUpperCase()
+				}
+				onChange={(e): void => {
 					onUpdate({ ...query, value: e }, queryIndex);
 				}}
 				style={{ width: '100%' }}
 			>
 				{Object.values(ConditionalOperators).map((cond) => (
-					<Option key={cond} value={cond} label={cond} />
+					<Option key={cond} value={cond} label={cond}>
+						{cond}
+					</Option>
 				))}
 			</Select>
 		</QueryConditionContainer>
 	);
 }
-const hashCode = (s) => {
+const hashCode = (s: string): string => {
 	if (!s) {
 		return '0';
 	}
@@ -149,14 +178,20 @@ const hashCode = (s) => {
 	)}`;
 };
 
-function QueryBuilder({ updateParsedQuery }) {
+function QueryBuilder({
+	updateParsedQuery,
+}: {
+	updateParsedQuery: (arg0: unknown) => void;
+}): JSX.Element {
 	const {
 		searchFilter: { parsedQuery },
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);
 
 	const keyPrefixRef = useRef(hashCode(JSON.stringify(parsedQuery)));
 	const [keyPrefix, setKeyPrefix] = useState(keyPrefixRef.current);
-	const generatedQueryStructure = createParsedQueryStructure(parsedQuery);
+	const generatedQueryStructure = createParsedQueryStructure(
+		parsedQuery as never[],
+	);
 
 	useEffect(() => {
 		const incomingHashCode = hashCode(JSON.stringify(parsedQuery));
@@ -166,18 +201,19 @@ function QueryBuilder({ updateParsedQuery }) {
 		}
 	}, [parsedQuery]);
 
-
+	const handleUpdate = (
-
+		query: { value: string | string[]; type: string }[],
-	const handleUpdate = (query, queryIndex): void => {
+		queryIndex: number,
+	): void => {
 		const updatedParsedQuery = generatedQueryStructure;
-		updatedParsedQuery[queryIndex] = query;
+		updatedParsedQuery[queryIndex] = query as never;
 
 		const flatParsedQuery = flatten(updatedParsedQuery).filter((q) => q.value);
 		keyPrefixRef.current = hashCode(JSON.stringify(flatParsedQuery));
 		updateParsedQuery(flatParsedQuery);
 	};
 
-	const handleDelete = (queryIndex) => {
+	const handleDelete = (queryIndex: number): void => {
 		const updatedParsedQuery = generatedQueryStructure;
 		updatedParsedQuery.splice(queryIndex - 1, 2);
 
@@ -186,15 +222,15 @@ function QueryBuilder({ updateParsedQuery }) {
 		updateParsedQuery(flatParsedQuery);
 	};
 
-	const QueryUI = () =>
+	const QueryUI = (): JSX.Element | JSX.Element[] =>
 		generatedQueryStructure.map((query, idx) => {
 			if (Array.isArray(query))
 				return (
 					<QueryField
 						key={keyPrefix + idx}
-						query={query}
+						query={query as never}
 						queryIndex={idx}
-						onUpdate={handleUpdate}
+						onUpdate={handleUpdate as never}
 						onDelete={handleDelete}
 					/>
 				);
@@ -204,7 +240,7 @@ function QueryBuilder({ updateParsedQuery }) {
 					key={keyPrefix + idx}
 					query={query}
 					queryIndex={idx}
-					onUpdate={handleUpdate}
+					onUpdate={handleUpdate as never}
 				/>
 			);
 		});

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

@@ -1,18 +1,22 @@
-import { Button, Typography } from 'antd';
+import { Button } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { map } from 'lodash-es';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import { ADD_SEARCH_FIELD_QUERY_STRING } from 'types/actions/logs';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import FieldKey from './FieldKey';
 
-function SuggestedItem({ name, type }) {
+interface SuggestedItemProps {
+	name: string;
+	type: string;
+}
+function SuggestedItem({ name, type }: SuggestedItemProps): JSX.Element {
 	const dispatch = useDispatch();
 
-	const addSuggestedField = () => {
+	const addSuggestedField = (): void => {
 		dispatch({
 			type: ADD_SEARCH_FIELD_QUERY_STRING,
 			payload: name,
@@ -29,7 +33,7 @@ function SuggestedItem({ name, type }) {
 	);
 }
 
-function Suggestions() {
+function Suggestions(): JSX.Element {
 	const {
 		fields: { selected },
 	} = useSelector<AppState, ILogsReducer>((store) => store.logs);

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

@@ -1,9 +1,12 @@
 import React from 'react';
+
 import QueryBuilder from './QueryBuilder/QueryBuilder';
 import Suggestions from './Suggestions';
 
-function SearchFields({updateParsedQuery}): JSX.Element {
+interface SearchFieldsProps {
-
+	updateParsedQuery: () => void;
+}
+function SearchFields({ updateParsedQuery }: SearchFieldsProps): JSX.Element {
 	return (
 		<>
 			<QueryBuilder updateParsedQuery={updateParsedQuery} />

frontend/src/container/LogsSearchFilter/SearchFields/utils.ts

@@ -1,3 +1,7 @@
+/* eslint-disable  */
+// @ts-ignore
+// @ts-nocheck
+
 import { QueryTypes } from 'lib/logql/tokens';
 
 export const queryKOVPair = () => [
@@ -30,7 +34,7 @@ export const createParsedQueryStructure = (parsedQuery = []) => {
 			cond = null;
 			qCtr = -1;
 		}
-		let stagingArr = structuredArray[structuredArray.length - 1];
+		const stagingArr = structuredArray[structuredArray.length - 1];
 		const prevQuery =
 			Array.isArray(stagingArr) && qCtr >= 0 ? stagingArr[qCtr] : null;
 

frontend/src/container/LogsSearchFilter/index.tsx

@@ -1,23 +1,11 @@
-import {
+/* eslint-disable react-hooks/exhaustive-deps */
-	CloseCircleFilled,
+import { CloseSquareOutlined } from '@ant-design/icons';
-	CloseCircleOutlined,
-	CloseSquareOutlined,
-} from '@ant-design/icons';
 import { Button, Input } from 'antd';
 import useClickOutside from 'hooks/useClickOutside';
 import getStep from 'lib/getStep';
-import { debounce, throttle } from 'lodash-es';
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
-import React, {
-	memo,
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
 import { connect, useDispatch, useSelector } from 'react-redux';
-import { useClickAway, useLocation } from 'react-use';
+import { useLocation } from 'react-use';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { getLogs } from 'store/actions/logs/getLogs';
@@ -26,7 +14,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { TOGGLE_LIVE_TAIL } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import SearchFields from './SearchFields';
 import { DropDownContainer } from './styles';
@@ -34,7 +22,16 @@ import { useSearchParser } from './useSearchParser';
 
 const { Search } = Input;
 
-function SearchFilter({ getLogs, getLogsAggregate }) {
+interface SearchFilterProps {
+	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => ReturnType<typeof getLogsAggregate>;
+}
+function SearchFilter({
+	getLogs,
+	getLogsAggregate,
+}: SearchFilterProps): JSX.Element {
 	const {
 		queryString,
 		updateParsedQuery,
@@ -146,26 +143,29 @@ function SearchFilter({ getLogs, getLogsAggregate }) {
 					<DropDownContainer>
 						<Button
 							type="text"
-							onClick={() => setShowDropDown(false)}
+							onClick={(): void => setShowDropDown(false)}
 							style={{
 								position: 'absolute',
 								top: 0,
 								right: 0,
 							}}
 						>
-							<CloseSquareOutlined size="large" />
+							<CloseSquareOutlined />
 						</Button>
-						<SearchFields updateParsedQuery={updateParsedQuery} />
+						<SearchFields updateParsedQuery={updateParsedQuery as never} />
 					</DropDownContainer>
 				)}
 			</div>
 		</div>
 	);
 }
-
 interface DispatchProps {
-	getLogs: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogs: (
-	getLogsAggregate: () => (dispatch: Dispatch<AppActions>) => void;
+		props: Parameters<typeof getLogs>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
+	getLogsAggregate: (
+		props: Parameters<typeof getLogsAggregate>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

frontend/src/container/LogsSearchFilter/useSearchParser.ts

@@ -1,16 +1,21 @@
 import history from 'lib/history';
 import { parseQuery, reverseParser } from 'lib/logql';
 import { isEqual } from 'lodash-es';
-import { useCallback, useEffect, useReducer, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppState } from 'store/reducers';
 import {
 	SET_SEARCH_QUERY_PARSED_PAYLOAD,
 	SET_SEARCH_QUERY_STRING,
 } from 'types/actions/logs';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
-export function useSearchParser() {
+export function useSearchParser(): {
+	queryString: string;
+	parsedQuery: unknown;
+	updateParsedQuery: (arg0: unknown) => void;
+	updateQueryString: (arg0: unknown) => void;
+} {
 	const dispatch = useDispatch();
 	const {
 		searchFilter: { parsedQuery, queryString },

frontend/src/container/LogsTable/index.tsx

@@ -1,23 +1,24 @@
-import { fetchEventSource } from '@microsoft/fetch-event-source';
+/* eslint-disable no-nested-ternary */
-import { Card, Typography } from 'antd';
+import { Typography } from 'antd';
-import { LiveTail } from 'api/logs/livetail';
 import LogItem from 'components/Logs/LogItem';
 import Spinner from 'components/Spinner';
 import { map } from 'lodash-es';
-import React, { memo, useEffect, useRef } from 'react';
+import React, { memo, useEffect } from 'react';
-import { connect, useDispatch, useSelector } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
 import { getLogs } from 'store/actions/logs/getLogs';
 import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
-import { PUSH_LIVE_TAIL_EVENT } from 'types/actions/logs';
 import { GlobalReducer } from 'types/reducer/globalTime';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 import { Container, Heading } from './styles';
 
-function LogsTable({ getLogs }) {
+interface LogsTableProps {
+	getLogs: (props: Parameters<typeof getLogs>[0]) => ReturnType<typeof getLogs>;
+}
+function LogsTable({ getLogs }: LogsTableProps): JSX.Element {
 	const {
 		searchFilter: { queryString },
 		logs,
@@ -51,7 +52,7 @@ function LogsTable({ getLogs }) {
 		return <Spinner height={20} tip="Getting Logs" />;
 	}
 	return (
-		<Container>
+		<Container flex="auto">
 			<Heading>
 				<Typography.Text
 					style={{
@@ -74,7 +75,9 @@ function LogsTable({ getLogs }) {
 }
 
 interface DispatchProps {
-	getLogs: () => (dispatch: Dispatch<AppActions>) => void;
+	getLogs: (
+		props: Parameters<typeof getLogs>[0],
+	) => (dispatch: Dispatch<AppActions>) => void;
 }
 
 const mapDispatchToProps = (

frontend/src/container/LogsTable/styles.ts

@@ -1,4 +1,3 @@
-import { grey } from '@ant-design/colors';
 import { Card, Col } from 'antd';
 import styled from 'styled-components';
 
@@ -9,7 +8,6 @@ export const Container = styled(Col)`
 `;
 
 export const Heading = styled(Card)`
-	
 	margin-bottom: 0.1rem;
 	.ant-card-body {
 		padding: 0.3rem 0.5rem;

frontend/src/container/MetricsApplication/Tabs/Overview.tsx

@@ -49,7 +49,8 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
 
 		history.replace(
-			`${ROUTES.TRACE
+			`${
+				ROUTES.TRACE
 			}?${urlParams.toString()}&selected={"serviceName":["${servicename}"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&&isFilterExclude={"serviceName":false}&userSelectedFilter={"status":["error","ok"],"serviceName":["${servicename}"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
 		);
 	};
@@ -100,17 +101,12 @@ function Application({ getWidget }: DashboardProps): JSX.Element {
 		urlParams.set(METRICS_PAGE_QUERY_PARAM.endTime, tPlusOne.toString());
 
 		history.replace(
-			`${ROUTES.TRACE
+			`${
+				ROUTES.TRACE
 			}?${urlParams.toString()}?selected={"serviceName":["${servicename}"],"status":["error"]}&filterToFetchData=["duration","status","serviceName"]&spanAggregateCurrentPage=1&selectedTags=${selectedTraceTags}&isFilterExclude={"serviceName":false,"status":false}&userSelectedFilter={"serviceName":["${servicename}"],"status":["error"]}&spanAggregateCurrentPage=1&spanAggregateOrder=ascend`,
 		);
 	};
-	console.log(getWidget([
+
-		{
-			query: `max(sum(rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER", status_code="STATUS_CODE_ERROR"${resourceAttributePromQLQuery}}[5m]) OR rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER", http_status_code=~"5.."${resourceAttributePromQLQuery}}[5m]))*100/sum(rate(signoz_calls_total{service_name="${servicename}", span_kind="SPAN_KIND_SERVER"${resourceAttributePromQLQuery}}[5m]))) < 1000 OR vector(0)`,
-			legend: 'Error Percentage',
-		},
-	]))
-	debugger;
 	return (
 		<>
 			<Row gutter={24}>

frontend/src/container/MetricsTable/index.tsx

@@ -1,9 +1,13 @@
-import Table, { ColumnsType } from 'antd/lib/table';
+import { blue } from '@ant-design/colors';
+import { SearchOutlined } from '@ant-design/icons';
+import { Button, Input, Space, Table } from 'antd';
+import type { ColumnsType, ColumnType } from 'antd/es/table';
+import type { FilterConfirmProps } from 'antd/es/table/interface';
 import localStorageGet from 'api/browser/localstorage/get';
 import localStorageSet from 'api/browser/localstorage/set';
 import { SKIP_ONBOARDING } from 'constants/onboarding';
 import ROUTES from 'constants/routes';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
 import { AppState } from 'store/reducers';
@@ -27,6 +31,57 @@ function Metrics(): JSX.Element {
 		localStorageSet(SKIP_ONBOARDING, 'true');
 		setSkipOnboarding(true);
 	};
+	const handleSearch = (confirm: (param?: FilterConfirmProps) => void): void => {
+		confirm();
+	};
+
+	const FilterIcon = useCallback(
+		({ filtered }) => (
+			<SearchOutlined
+				style={{
+					color: filtered ? blue[6] : undefined,
+				}}
+			/>
+		),
+		[],
+	);
+
+	const filterDropdown = useCallback(
+		({ setSelectedKeys, selectedKeys, confirm }) => (
+			<div
+				style={{
+					padding: 8,
+				}}
+			>
+				<Input
+					placeholder="Search by service"
+					value={selectedKeys[0]}
+					onChange={(e): void =>
+						setSelectedKeys(e.target.value ? [e.target.value] : [])
+					}
+					allowClear
+					onPressEnter={(): void => handleSearch(confirm)}
+					style={{
+						marginBottom: 8,
+					}}
+				/>
+				<Space>
+					<Button
+						type="primary"
+						onClick={(): void => handleSearch(confirm)}
+						icon={<SearchOutlined />}
+						size="small"
+						style={{
+							width: 90,
+						}}
+					>
+						Search
+					</Button>
+				</Space>
+			</div>
+		),
+		[],
+	);
 
 	if (
 		services.length === 0 &&
@@ -37,21 +92,37 @@ function Metrics(): JSX.Element {
 		return <SkipBoardModal onContinueClick={onContinueClick} />;
 	}
 
-	const columns: ColumnsType<DataProps> = [
+	type DataIndex = keyof ServicesList;
-		{
+
-			title: 'Application',
+	const getColumnSearchProps = (
-			dataIndex: 'serviceName',
+		dataIndex: DataIndex,
-			key: 'serviceName',
+	): ColumnType<DataProps> => ({
+		filterDropdown,
+		filterIcon: FilterIcon,
+		onFilter: (value: string | number | boolean, record: DataProps): boolean =>
+			record[dataIndex]
+				.toString()
+				.toLowerCase()
+				.includes(value.toString().toLowerCase()),
 		render: (text: string): JSX.Element => (
 			<Link to={`${ROUTES.APPLICATION}/${text}${search}`}>
 				<Name>{text}</Name>
 			</Link>
 		),
+	});
+
+	const columns: ColumnsType<DataProps> = [
+		{
+			title: 'Application',
+			dataIndex: 'serviceName',
+			key: 'serviceName',
+			...getColumnSearchProps('serviceName'),
 		},
 		{
 			title: 'P99 latency (in ms)',
 			dataIndex: 'p99',
 			key: 'p99',
+			defaultSortOrder: 'descend',
 			sorter: (a: DataProps, b: DataProps): number => a.p99 - b.p99,
 			render: (value: number): string => (value / 1000000).toFixed(2),
 		},

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/formula.tsx

@@ -37,6 +37,14 @@ function MetricsBuilderFormula({
 				style={{ marginBottom: '0.5rem' }}
 				rows={2}
 			/>
+			<Input
+				onChange={(event): void => {
+					handleFormulaChange({ formulaIndex, legend: event.target.value });
+				}}
+				size="middle"
+				defaultValue={formulaData.legend}
+				addonBefore="Legend Format"
+			/>
 		</QueryHeader>
 	);
 }

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/index.tsx

@@ -85,6 +85,7 @@ function QueryBuilderQueryContainer({
 	const handleQueryBuilderFormulaChange = ({
 		formulaIndex,
 		expression,
+		legend,
 		toggleDisable,
 		toggleDelete,
 	}: IQueryBuilderFormulaHandleChange): void => {
@@ -94,9 +95,12 @@ function QueryBuilderQueryContainer({
 			];
 		const currentIndexFormula = allFormulas[formulaIndex as number];
 
-		if (expression) {
+		if (expression !== undefined) {
 			currentIndexFormula.expression = expression;
 		}
+		if (legend !== undefined) {
+			currentIndexFormula.legend = legend;
+		}
 
 		if (toggleDisable) {
 			currentIndexFormula.disabled = !currentIndexFormula.disabled;

frontend/src/container/NewWidget/LeftContainer/QuerySection/QueryBuilder/queryBuilder/types.ts

@@ -19,5 +19,6 @@ export interface IQueryBuilderFormulaHandleChange {
 	formulaIndex: number | string;
 	expression?: IMetricsBuilderFormula['expression'];
 	toggleDisable?: IMetricsBuilderFormula['disabled'];
+	legend?: IMetricsBuilderFormula['legend'];
 	toggleDelete?: boolean;
 }

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

@@ -18,7 +18,7 @@ const breadcrumbNameMap = {
 	[ROUTES.ERROR_DETAIL]: 'Errors',
 	[ROUTES.LIST_ALL_ALERT]: 'Alerts',
 	[ROUTES.ALL_DASHBOARD]: 'Dashboard',
-	[ROUTES.LOGS]: 'Logs'
+	[ROUTES.LOGS]: 'Logs',
 };
 
 function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {

frontend/src/lib/__fixtures__/logql.ts

@@ -1,3 +1,4 @@
+/* eslint-disable sonarjs/no-duplicate-string */
 /* eslint no-useless-escape: 0 */
 
 const logqlQueries = [

frontend/src/lib/__tests__/logql/reverseParser.test.ts

@@ -1,5 +1,5 @@
 import { logqlQueries } from 'lib/__fixtures__/logql';
-import reverseParser from 'lib/logql/reverseParser';
+import { reverseParser } from 'lib/logql/reverseParser';
 
 describe('lib/logql/reverseParser', () => {
 	test('reverse parse valid queries', () => {

frontend/src/lib/__tests__/logql/splitter.test.ts

@@ -1,5 +1,6 @@
-import splitter from 'lib/logql/splitter';
 import { logqlQueries } from 'lib/__fixtures__/logql';
+import { splitter } from 'lib/logql/splitter';
+
 describe('lib/logql/splitter', () => {
 	test('splitter valid quereies', () => {
 		logqlQueries.forEach((queryObject) => {

frontend/src/lib/logql/parser.ts

@@ -1,4 +1,11 @@
+/* eslint-disable  */
+// @ts-ignore
 // @ts-nocheck
+
+import {
+	ErrorConvertToFullText,
+	ErrorInvalidQueryPair,
+} from 'lib/logql/errors';
 import splitter from 'lib/logql/splitter';
 import {
 	ConditionalOperators,
@@ -6,10 +13,6 @@ import {
 	QueryOperatorsSingleVal,
 	QueryTypes,
 } from 'lib/logql/tokens';
-import {
-	ErrorConvertToFullText,
-	ErrorInvalidQueryPair,
-} from 'lib/logql/errors';
 
 const validateMultiValue = (queryToken: string): boolean => {
 	const queryValues = [];

frontend/src/lib/logql/reverseParser.ts

@@ -1,3 +1,5 @@
+/* eslint-disable  */
+// @ts-ignore
 // @ts-nocheck
 
 export const reverseParser = (

frontend/src/lib/logql/splitter.ts

@@ -1,7 +1,9 @@
+/* eslint-disable  */
+// @ts-ignore
 // @ts-nocheck
 
-export const splitter = (queryString) => {
+export const splitter = (queryString: string): string[] => {
-	const splittedParts = [];
+	const splittedParts: string[] = [];
 	let start = 0;
 	let isBracketStart = false;
 	let isQuoteStart = false;
@@ -13,10 +15,6 @@ export const splitter = (queryString) => {
 	for (let idx = 0; idx < queryString.length; idx += 1) {
 		const currentChar = queryString[idx];
 
-		// if (start === null) {
-		// 	start = idx;
-		// }
-
 		if (currentChar === ' ') {
 			if (!isBracketStart && !isQuoteStart) {
 				pushPart(idx);
@@ -48,7 +46,6 @@ export const splitter = (queryString) => {
 		pushPart(queryString.length);
 	}
 
-	// console.log(splittedParts.filter(Boolean));
 	return splittedParts.map((s) => String.raw`${s}`).filter(Boolean);
 };
 

frontend/src/lib/logql/tokens.ts

@@ -17,7 +17,6 @@ export const ConditionalOperators = {
 	OR: 'OR',
 };
 
-
 export const QueryTypes = {
 	QUERY_KEY: 'QUERY_KEY',
 	QUERY_OPERATOR: 'QUERY_OPERATOR',

frontend/src/lib/logs/fieldSearch.ts

@@ -1,4 +1,7 @@
-export const fieldSearchFilter = (searchSpace = '', currentValue = '') => {
+export const fieldSearchFilter = (
+	searchSpace = '',
+	currentValue = '',
+): boolean => {
 	if (!currentValue || !searchSpace) {
 		return true;
 	}

frontend/src/lib/logs/flatLogData.ts

@@ -1,14 +1,14 @@
 import { ILog } from 'types/api/logs/log';
 
-export function FlatLogData(log: ILog): Record<string, never> {
+export function FlatLogData(log: ILog): Record<string, unknown> {
-	let flattenLogObject: Record<string, never> = {};
+	const flattenLogObject: Record<string, unknown> = {};
 
-	Object.keys(log).forEach((key: string) => {
+	Object.keys(log).forEach((key: string): void => {
-		if (typeof log[key] !== 'object') {
+		if (typeof log[key as never] !== 'object') {
-			flattenLogObject[key] = log[key];
+			flattenLogObject[key] = log[key as never];
 		} else {
-			Object.keys(log[key]).forEach((childKey) => {
+			Object.keys(log[key as never]).forEach((childKey) => {
-				flattenLogObject[childKey] = log[key][childKey]
+				flattenLogObject[childKey] = log[key as never][childKey];
 			});
 		}
 	});

frontend/src/lib/logs/generateFilterQuery.ts

@@ -1,4 +1,18 @@
-export const generateFilterQuery = ({ fieldKey, fieldValue, type }) => {
+import { QueryOperatorsMultiVal } from 'lib/logql/tokens';
+
+type Keys = keyof typeof QueryOperatorsMultiVal;
+type Values = typeof QueryOperatorsMultiVal[Keys];
+
+interface GenerateFilterQueryParams {
+	fieldKey: string;
+	fieldValue: string;
+	type: Values;
+}
+export const generateFilterQuery = ({
+	fieldKey,
+	fieldValue,
+	type,
+}: GenerateFilterQueryParams): string => {
 	let generatedQueryString = `${fieldKey} ${type} `;
 	if (typeof fieldValue === 'number') {
 		generatedQueryString += `(${fieldValue})`;

frontend/src/pages/Logs/index.tsx

@@ -1,7 +1,7 @@
 import Logs from 'container/Logs';
 import React from 'react';
 
-function LogsHome() {
+function LogsHome(): JSX.Element {
 	return <Logs />;
 }
 

frontend/src/store/actions/dashboard/getQueryResults.ts

@@ -76,9 +76,11 @@ export async function GetMetricQueryRange({
 
 			queryData[WIDGET_QUERY_BUILDER_FORMULA_KEY_NAME].map((formula) => {
 				const generatedFormulaPayload = {};
+				legendMap[formula.name] = formula.legend || formula.name;
 				generatedFormulaPayload.queryName = formula.name;
 				generatedFormulaPayload.expression = formula.expression;
 				generatedFormulaPayload.disabled = formula.disabled;
+				generatedFormulaPayload.legend = formula.legend;
 				builderQueries[formula.name] = generatedFormulaPayload;
 			});
 			QueryPayload.compositeMetricQuery.builderQueries = builderQueries;

frontend/src/store/actions/logs/addToSelectedField.ts

@@ -1,13 +1,14 @@
 import GetSearchFields from 'api/logs/GetSearchFields';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
-import { GET_FIELDS, SET_FIELDS } from 'types/actions/logs';
+import { SET_FIELDS } from 'types/actions/logs';
-import { TraceReducer } from 'types/reducer/trace';
 
-export const AddToSelectedField = (): ((dispatch: Dispatch<AppActions>) => void) => {
+export const AddToSelectedField = (): ((
-	return async (dispatch): void => {
+	dispatch: Dispatch<AppActions>,
+) => void) => {
+	return async (dispatch): Promise<void> => {
 		const response = await GetSearchFields();
-
+		if (response.payload)
 			dispatch({
 				type: SET_FIELDS,
 				payload: response.payload,

frontend/src/store/actions/logs/getFields.ts

@@ -1,13 +1,12 @@
 import GetSearchFields from 'api/logs/GetSearchFields';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
-import { GET_FIELDS, SET_FIELDS } from 'types/actions/logs';
+import { SET_FIELDS } from 'types/actions/logs';
-import { TraceReducer } from 'types/reducer/trace';
 
 const IGNORED_SELECTED_FIELDS = ['timestamp'];
 
 export const GetLogsFields = (): ((dispatch: Dispatch<AppActions>) => void) => {
-	return async (dispatch): void => {
+	return async (dispatch): Promise<void> => {
 		const response = await GetSearchFields();
 		if (response.payload) {
 			dispatch({

frontend/src/store/actions/logs/getLogs.ts

@@ -2,9 +2,12 @@ import GetLogs from 'api/logs/GetLogs';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import { SET_LOADING, SET_LOGS } from 'types/actions/logs';
+import { Props } from 'types/api/logs/getLogs';
 
-export const getLogs = (props): ((dispatch: Dispatch<AppActions>) => void) => {
+export const getLogs = (
-	return async (dispatch): void => {
+	props: Props,
+): ((dispatch: Dispatch<AppActions>) => void) => {
+	return async (dispatch): Promise<void> => {
 		dispatch({
 			type: SET_LOADING,
 			payload: true,

frontend/src/store/actions/logs/getLogsAggregate.ts

@@ -1,19 +1,17 @@
-import GetLogs from 'api/logs/GetLogs';
 import GetLogsAggregate from 'api/logs/GetLogsAggregate';
 import { Dispatch } from 'redux';
 import AppActions from 'types/actions';
 import {
-	SET_LOADING,
 	SET_LOADING_AGGREGATE,
-	SET_LOGS,
 	SET_LOGS_AGGREGATE_SERIES,
 } from 'types/actions/logs';
+import { Props } from 'types/api/logs/getLogsAggregate';
 import { ILogsAggregate } from 'types/api/logs/logAggregate';
 
 export const getLogsAggregate = (
-	props,
+	props: Props,
 ): ((dispatch: Dispatch<AppActions>) => void) => {
-	return async (dispatch): void => {
+	return async (dispatch): Promise<void> => {
 		dispatch({
 			type: SET_LOADING_AGGREGATE,
 			payload: true,

frontend/src/store/reducers/index.ts

@@ -3,7 +3,7 @@ import { combineReducers } from 'redux';
 import appReducer from './app';
 import dashboardReducer from './dashboard';
 import globalTimeReducer from './global';
-import LogsReducer from './logs';
+import { LogsReducer } from './logs';
 import metricsReducers from './metric';
 import { ServiceMapReducer } from './serviceMap';
 import traceReducer from './trace';

frontend/src/store/reducers/logs.ts

@@ -21,7 +21,7 @@ import {
 	STOP_LIVE_TAIL,
 	TOGGLE_LIVE_TAIL,
 } from 'types/actions/logs';
-import ILogsReducer from 'types/reducer/logs';
+import { ILogsReducer } from 'types/reducer/logs';
 
 const initialState: ILogsReducer = {
 	fields: {
@@ -39,33 +39,10 @@ const initialState: ILogsReducer = {
 	isLoading: false,
 	isLoadingAggregate: false,
 	logsAggregate: [],
-	detailedLog: null,
 	liveTail: 'STOPPED',
 	liveTailStartRange: 15,
-	// detailedLog: {
+	selectedLogId: null,
-	// 	timestamp: 1659360016955270100,
+	detailedLog: null,
-	// 	id: '2CkBCauK8m3nkyKR19YhCw6WfvD',
-	// 	traceId: '',
-	// 	spanId: '',
-	// 	traceFlags: 0,
-	// 	severityText: '',
-	// 	severityNumber: 0,
-	// 	body:
-	// 		'49.207.215.17 - - [01/Aug/2022:13:20:16 +0000] "OPTIONS /api/v1/logs/fields HTTP/1.1" 200 23 "http://localhost:3301/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-"\n',
-	// 	resourcesString: {
-	// 		source: 'docker',
-	// 	},
-	// 	attributesString: {
-	// 		container_id:
-	// 			'b3c6808322609f7671c18a09515d9c84909c873471b560da65c1afe0dfd933ea',
-	// 		log_file_path:
-	// 			'/var/lib/docker/containers/b3c6808322609f7671c18a09515d9c84909c873471b560da65c1afe0dfd933ea/b3c6808322609f7671c18a09515d9c84909c873471b560da65c1afe0dfd933ea-json.log',
-	// 		stream: 'stdout',
-	// 		time: '2022-08-01T13:20:16.955270245Z',
-	// 	},
-	// 	attributesInt: {},
-	// 	attributesFloat: {},
-	// },
 };
 
 export const LogsReducer = (
@@ -123,9 +100,12 @@ export const LogsReducer = (
 
 		case ADD_SEARCH_FIELD_QUERY_STRING: {
 			const updatedQueryString =
-				state.searchFilter.queryString +
+				state.searchFilter.queryString ||
-				(state.searchFilter.queryString.length > 0 ? ' and ' : '') +
+				`${
-				action.payload;
+					state.searchFilter.queryString && state.searchFilter.queryString.length > 0
+						? ' and '
+						: ''
+				}${action.payload}`;
 
 			const updatedParsedQuery = parseQuery(updatedQueryString);
 			return {

frontend/src/types/actions/logs.ts

@@ -123,42 +123,6 @@ export interface SetLiveTailStartTime {
 	type: typeof SET_LIVE_TAIL_START_TIME;
 	payload: number;
 }
-// export interface GetServiceListLoading {
-// 	type:
-// 		| typeof GET_SERVICE_LIST_LOADING_START
-// 		| typeof GET_INITIAL_APPLICATION_LOADING;
-// }
-
-// export interface GetServiceListError {
-// 	type: typeof GET_SERVICE_LIST_ERROR | typeof GET_INITIAL_APPLICATION_ERROR;
-// 	payload: {
-// 		errorMessage: string;
-// 	};
-// }
-
-// export interface GetInitialApplicationData {
-// 	type: typeof GET_INTIAL_APPLICATION_DATA;
-// 	payload: {
-// 		topEndPoints: TopEndPoints[];
-// 		// dbOverView: DBOverView[];
-// 		// externalService: ExternalService[];
-// 		// externalAverageDuration: ExternalAverageDuration[];
-// 		// externalError: ExternalError[];
-// 		serviceOverview: ServiceOverview[];
-// 	};
-// }
-
-// export interface ResetInitialApplicationData {
-// 	type: typeof RESET_INITIAL_APPLICATION_DATA;
-// }
-
-// export interface SetResourceAttributeQueries {
-// 	type: typeof SET_RESOURCE_ATTRIBUTE_QUERIES;
-// 	payload: {
-// 		queries: IResourceAttributeQuery[];
-// 		promQLQuery: string;
-// 	};
-// }
 
 export type LogsActions =
 	| GetFields

frontend/src/types/api/alerts/compositeQuery.ts

@@ -30,8 +30,7 @@ export interface IBuilderQuery
 	extends Omit<
 		IMetricQuery,
 		'aggregateOperator' | 'legend' | 'metricName' | 'tagFilters'
-		>,
+	> {
-		Omit<IFormulaQuery, 'expression'> {
 	aggregateOperator: EAggregateOperator | undefined;
 	disabled: boolean;
 	name: string;

frontend/src/types/api/dashboard/getAll.ts

@@ -71,6 +71,7 @@ export interface IMetricsBuilderFormula {
 	expression: string;
 	disabled: boolean;
 	name: string;
+	legend: string;
 }
 export interface IMetricsBuilderQuery {
 	aggregateOperator: EAggregateOperator;

frontend/src/types/api/logs/getLogs.ts

@@ -6,4 +6,8 @@ export type Props = {
 	limit: number;
 	orderBy: string;
 	order: string;
+	idGt?: string;
+	idLt?: string;
+	timestampStart?: number;
+	timestampEnd?: number;
 };

frontend/src/types/api/logs/getLogsAggregate.ts

@@ -9,4 +9,7 @@ export type Props = {
 	timestampStart: number;
 	timestampEnd: number;
 	step: number;
+	q?: string;
+	idGt?: string;
+	idLt?: string;
 };

frontend/src/types/reducer/logs.ts

@@ -17,7 +17,7 @@ export interface ILogsReducer {
 	isLoading: boolean;
 	isLoadingAggregate: boolean;
 	logsAggregate: ILogsAggregate[];
-	selectedLogId: string;
+	selectedLogId: string | null;
 	detailedLog: null | ILog;
 	liveTail: TLogsLiveTailState;
 	liveTailStartRange: number; // time in minutes

pkg/query-service/app/clickhouseReader/reader.go

@@ -762,11 +762,16 @@ func (r *ClickHouseReader) GetServices(ctx context.Context, queryParams *model.G
 				args...,
 			).ScanStruct(&serviceItem)
 
+			if serviceItem.NumCalls == 0 {
+				return
+			}
+
 			if err != nil {
 				zap.S().Error("Error in processing sql query: ", err)
 				return
 			}
 
+			args, errStatus = buildQueryWithTagParams(ctx, queryParams.Tags, &errorQuery, args)
 			err = r.db.QueryRow(ctx, errorQuery, args...).Scan(&numErrors)
 			if err != nil {
 				zap.S().Error("Error in processing sql query: ", err)