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

This commit is contained in:
Amlan Kumar Nandy 2025-05-09 20:25:43 +07:00 committed by GitHub
parent 39f07e7477
commit 27830742f9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
35 changed files with 1182 additions and 1187 deletions

View File

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

View File

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

View File

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

View File

@ -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);
}

View File

@ -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;
if (!ValidTypeSequence(lastOp?.type, q?.type, nextOp?.type)) result = false
const nextOp = idx < queryFields.length ? queryFields[idx + 1] : undefined;
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) {

View File

@ -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,

View File

@ -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,

View File

@ -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'),

View File

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

View File

@ -4,11 +4,7 @@
"label": "Start with Demo Data in <5 minutes",
"tags": ["quickstart"],
"module": "apm",
"relatedSearchKeywords": [
"send data",
"demo",
"quickstart"
],
"relatedSearchKeywords": ["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": [
"datadog",
"opentelemetry"
],
"relatedSearchKeywords": ["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": [
"tracing",
"nginx server",
"nginx proxy",
"nginx"
],
"relatedSearchKeywords": ["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": [
"redis",
"redis logs",
"redis metrics",
"database"
],
"relatedSearchKeywords": ["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": [
"nginx",
"nginx logs",
"nginx metrics",
"proxy"
],
"relatedSearchKeywords": ["nginx", "nginx logs", "nginx metrics", "proxy"],
"imgUrl": "/Logos/nginx.svg",
"link": "/integrations?integration=builtin-nginx",
"internalRedirect": true

View File

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

View File

@ -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;

View File

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

View File

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

View File

@ -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>