fix: resolve typescript issues in metrics explorer (#7878)

frontend/.prettierignore

@@ -1,6 +1,10 @@
 # Ignore artifacts:
 build
 coverage
+public/
 
 # Ignore all MD files:
 **/*.md
+
+# Ignore all JSON files:
+**/*.json

frontend/src/components/LearnMore/LearnMore.styles.scss

@@ -8,7 +8,8 @@
 	font-weight: 500;
 	line-height: 18px; /* 128.571% */
 	letter-spacing: -0.07px;
-    &,&:hover {
+	&,
+	&:hover {
 		color: var(--bg-robin-400) !important;
 	}
 }

frontend/src/components/TableRenderer/LabelColumn.styles.scss

@@ -1,5 +1,4 @@
 .label-column {
-
 	display: flex;
 	flex-wrap: wrap;
 

frontend/src/container/CloudIntegrationPage/HeroSection/components/RemoveIntegrationAccount.scss

@@ -45,4 +45,3 @@
 		}
 	}
 }
-

frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss

@@ -29,7 +29,7 @@
 	.explorer-show-btn {
 		border-radius: 10px 10px 0px 0px;
 		border: 1px solid var(--bg-slate-400);
-        background: rgba(22, 24, 29, 0.40);
+		background: rgba(22, 24, 29, 0.4);
 		box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
 		backdrop-filter: blur(20px);
 		align-self: center;
@@ -47,7 +47,6 @@
 
 .lightMode {
 	.explorer-option-droppable-container {
-
 		.explorer-show-btn {
 			background: var(--bg-vanilla-200);
 		}

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

@@ -2,30 +2,33 @@
 // @ts-ignore
 // @ts-nocheck
 
-import { QueryTypes, ConditionalOperators, ValidTypeSequence, ValidTypeValue } from 'lib/logql/tokens';
+import {
+	QueryTypes,
+	ConditionalOperators,
+	ValidTypeSequence,
+	ValidTypeValue,
+} from 'lib/logql/tokens';
 
 export interface QueryFields {
 	type: keyof typeof QueryTypes;
 	value: string | string[];
 }
 
-
 export function fieldsQueryIsvalid(queryFields: QueryFields[]): boolean {
 	let lastOp: string;
 	let result = true;
-	queryFields.forEach((q, idx)=> {
+	queryFields.forEach((q, idx) => {
-		
 		if (!q.value || q.value === null || q.value === '') result = false;
 
-		if (Array.isArray(q.value) && q.value.length === 0 ) result = false;
+		if (Array.isArray(q.value) && q.value.length === 0) result = false;
 
-		const nextOp = idx < queryFields.length  ? queryFields[idx+1]: undefined;
+		const nextOp = idx < queryFields.length ? queryFields[idx + 1] : undefined;
-		if (!ValidTypeSequence(lastOp?.type, q?.type, nextOp?.type)) result = false
+		if (!ValidTypeSequence(lastOp?.type, q?.type, nextOp?.type)) result = false;
 
 		if (!ValidTypeValue(lastOp?.value, q.value)) result = false;
 		lastOp = q;
 	});
-	return result
+	return result;
 }
 
 export const queryKOVPair = (): QueryFields[] => [
@@ -43,7 +46,11 @@ export const queryKOVPair = (): QueryFields[] => [
 	},
 ];
 
-export const initQueryKOVPair = (name?: string = null, op?: string = null  , value?: string | string[] = null ): QueryFields[] => [
+export const initQueryKOVPair = (
+	name?: string = null,
+	op?: string = null,
+	value?: string | string[] = null,
+): QueryFields[] => [
 	{
 		type: QueryTypes.QUERY_KEY,
 		value: name,
@@ -58,12 +65,14 @@ export const initQueryKOVPair = (name?: string = null, op?: string = null  , val
 	},
 ];
 
-export const prepareConditionOperator = (op?: string = ConditionalOperators.AND): QueryFields => {
+export const prepareConditionOperator = (
+	op?: string = ConditionalOperators.AND,
+): QueryFields => {
 	return {
 		type: QueryTypes.CONDITIONAL_OPERATOR,
 		value: op,
-	}
+	};
-}
+};
 
 export const createParsedQueryStructure = (parsedQuery = []) => {
 	if (!parsedQuery.length) {

frontend/src/container/MetricsExplorer/MetricDetails/AllAttributes.tsx

@@ -5,11 +5,11 @@ import { DataType } from 'container/LogDetailedView/TableView';
 import { Search } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 
-import { AllAttributesProps } from './types';
-import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
-import { getMetricDetailsQuery } from './utils';
-import ROUTES from '../../../constants/routes';
 import { PANEL_TYPES } from '../../../constants/queryBuilder';
+import ROUTES from '../../../constants/routes';
+import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
+import { AllAttributesProps } from './types';
+import { getMetricDetailsQuery } from './utils';
 
 function AllAttributes({
 	metricName,

frontend/src/container/MetricsExplorer/MetricDetails/MetricDetails.tsx

@@ -16,6 +16,9 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { Compass, Crosshair, X } from 'lucide-react';
 import { useCallback, useMemo } from 'react';
 
+import { PANEL_TYPES } from '../../../constants/queryBuilder';
+import ROUTES from '../../../constants/routes';
+import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 import { isInspectEnabled } from '../Inspect/utils';
 import { formatNumberIntoHumanReadableFormat } from '../Summary/utils';
 import AllAttributes from './AllAttributes';
@@ -27,9 +30,6 @@ import {
 	formatTimestampToReadableDate,
 	getMetricDetailsQuery,
 } from './utils';
-import { PANEL_TYPES } from '../../../constants/queryBuilder';
-import ROUTES from '../../../constants/routes';
-import { useHandleExplorerTabChange } from '../../../hooks/useHandleExplorerTabChange';
 
 function MetricDetails({
 	onClose,

frontend/src/container/MetricsExplorer/MetricDetails/__tests__/AllAttributes.test.tsx

@@ -1,9 +1,9 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
 
-import AllAttributes from '../AllAttributes';
 import { MetricDetailsAttribute } from '../../../../api/metricsExplorer/getMetricDetails';
 import ROUTES from '../../../../constants/routes';
-import * as useHandleExplorerTabChange from 'hooks/useHandleExplorerTabChange';
+import AllAttributes from '../AllAttributes';
 
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -124,7 +124,7 @@ function Summary(): JSX.Element {
 	});
 
 	const isListViewError = useMemo(
-		() => isMetricsError || (metricsData && metricsData.statusCode !== 200),
+		() => isMetricsError || !!(metricsData && metricsData.statusCode !== 200),
 		[isMetricsError, metricsData],
 	);
 

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.json

@@ -4,11 +4,7 @@
 		"label": "Start with Demo Data in <5 minutes",
 		"tags": ["quickstart"],
 		"module": "apm",
-		"relatedSearchKeywords": [
+		"relatedSearchKeywords": ["send data", "demo", "quickstart"],
-		"send data",
-		"demo",
-		"quickstart"
-		],
 		"imgUrl": "/Logos/quickstart.svg",
 		"link": "https://signoz.io/docs/cloud/quickstart/"
 	},
@@ -17,10 +13,7 @@
 		"label": "From Datadog",
 		"tags": ["migrate to SigNoz"],
 		"module": "home",
-		"relatedSearchKeywords": [
+		"relatedSearchKeywords": ["datadog", "opentelemetry"],
-		"datadog",
-		"opentelemetry"
-		],
 		"imgUrl": "/Logos/datadog.svg",
 		"link": "https://signoz.io/docs/migration/migrate-from-datadog/"
 	},
@@ -1143,12 +1136,7 @@
 		"imgUrl": "/Logos/nginx.svg",
 		"tags": ["apm"],
 		"module": "apm",
-		"relatedSearchKeywords": [
+		"relatedSearchKeywords": ["tracing", "nginx server", "nginx proxy", "nginx"],
-		"tracing",
-		"nginx server",
-		"nginx proxy",
-		"nginx" 
-		],
 		"id": "nginx-tracing",
 		"link": "https://signoz.io/docs/instrumentation/opentelemetry-nginx/"
 	},
@@ -2017,7 +2005,7 @@
 	{
 		"dataSource": "sql-database-metrics",
 		"label": "Azure SQL Database Metrics",
-		"tags": ["Azure","database"],
+		"tags": ["Azure", "database"],
 		"module": "metrics",
 		"relatedSearchKeywords": [
 			"azure sql database metrics",
@@ -2697,12 +2685,7 @@
 		"label": "Redis",
 		"tags": ["integrations", "database"],
 		"module": "integrations",
-		"relatedSearchKeywords": [
+		"relatedSearchKeywords": ["redis", "redis logs", "redis metrics", "database"],
-		"redis",
-		"redis logs",
-		"redis metrics",
-		"database"
-		],
 		"imgUrl": "/Logos/redis.svg",
 		"link": "/integrations?integration=builtin-redis",
 		"internalRedirect": true
@@ -2727,12 +2710,7 @@
 		"label": "Nginx",
 		"tags": ["integrations"],
 		"module": "integrations",
-		"relatedSearchKeywords": [
+		"relatedSearchKeywords": ["nginx", "nginx logs", "nginx metrics", "proxy"],
-		"nginx",
-		"nginx logs",
-		"nginx metrics",
-		"proxy"
-		],
 		"imgUrl": "/Logos/nginx.svg",
 		"link": "/integrations?integration=builtin-nginx",
 		"internalRedirect": true

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/styles.scss

@@ -1,10 +1,9 @@
-
 .processor-form-container {
 	position: relative;
 	width: 100%;
 
 	display: flex;
-  flex-wrap: wrap
+	flex-wrap: wrap;
 }
 
 .processor-field-container {

frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/styles.scss

@@ -37,7 +37,7 @@
 	white-space: nowrap;
 }
 
-.logs-preview-list-item-expand{
+.logs-preview-list-item-expand {
 	margin-left: 0.75rem;
 	color: #1677ff;
 	padding: 0.25rem 0.375rem;

frontend/src/container/PipelinePage/PipelineListsView/styles.scss

@@ -5,7 +5,6 @@
 	align-items: center;
 }
 
-
 .logs-pipelines-empty-state-video-iframe {
 	width: min(90vw, 640px);
 	height: min(68vw, 480px);

frontend/src/container/QueryBuilder/components/AdditionalFiltersToggler/AdditionalFiltersToggler.styles.scss

@@ -4,7 +4,7 @@
 
 .additinal-filters-container {
 	.action-btn {
-		background: #4E74F8;
+		background: #4e74f8;
 		width: 16px;
 		height: 16px;
 		border-radius: 3px;

frontend/src/modules/Servicemap/utils.ts

@@ -1,7 +1,15 @@
 /*eslint-disable*/
 //@ts-nocheck
 
-import { cloneDeep, find, maxBy, uniq, uniqBy, groupBy, sumBy } from 'lodash-es';
+import {
+	cloneDeep,
+	find,
+	maxBy,
+	uniq,
+	uniqBy,
+	groupBy,
+	sumBy,
+} from 'lodash-es';
 import { graphDataType } from './ServiceMap';
 
 const MIN_WIDTH = 10;
@@ -25,7 +33,7 @@ export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
 			serviceName: e[0].child,
 			errorRate: sumBy(e, 'errorRate'),
 			callRate: sumBy(e, 'callRate'),
-		}
+		};
 	});
 	const highestCallCount = maxBy(items, (e) => e?.callCount)?.callCount;
 	const highestCallRate = maxBy(services, (e) => e?.callRate)?.callRate;
@@ -101,7 +109,7 @@ const getRound2DigitsAfterDecimal = (num: number) => {
 		return 0;
 	}
 	return num.toFixed(20).match(/^-?\d*\.?0*\d{0,2}/)[0];
-}
+};
 
 export const getTooltip = (link: {
 	p99: number;
@@ -112,7 +120,7 @@ export const getTooltip = (link: {
 	return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
 								<div class="keyval">
 									<div class="key">P99 latency:</div>
-									<div class="val">${getRound2DigitsAfterDecimal(link.p99/ 1000000)}ms</div>
+									<div class="val">${getRound2DigitsAfterDecimal(link.p99 / 1000000)}ms</div>
 								</div>
 								<div class="keyval">
 									<div class="key">Request:</div>