mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-13 09:29:04 +08:00
fix: resolve typescript issues in metrics explorer (#7878)
This commit is contained in:
parent
39f07e7477
commit
27830742f9
@ -1,6 +1,10 @@
|
||||
# Ignore artifacts:
|
||||
build
|
||||
coverage
|
||||
public/
|
||||
|
||||
# Ignore all MD files:
|
||||
**/*.md
|
||||
|
||||
# Ignore all JSON files:
|
||||
**/*.json
|
||||
|
@ -8,7 +8,8 @@
|
||||
font-weight: 500;
|
||||
line-height: 18px; /* 128.571% */
|
||||
letter-spacing: -0.07px;
|
||||
&,&:hover {
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--bg-robin-400) !important;
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
.label-column {
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
@ -45,4 +45,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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) {
|
||||
|
@ -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,
|
||||
|
@ -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,
|
||||
|
@ -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'),
|
||||
|
@ -124,7 +124,7 @@ function Summary(): JSX.Element {
|
||||
});
|
||||
|
||||
const isListViewError = useMemo(
|
||||
() => isMetricsError || (metricsData && metricsData.statusCode !== 200),
|
||||
() => isMetricsError || !!(metricsData && metricsData.statusCode !== 200),
|
||||
[isMetricsError, metricsData],
|
||||
);
|
||||
|
||||
|
@ -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
|
||||
|
@ -1,10 +1,9 @@
|
||||
|
||||
.processor-form-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.processor-field-container {
|
||||
|
@ -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;
|
||||
|
@ -5,7 +5,6 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.logs-pipelines-empty-state-video-iframe {
|
||||
width: min(90vw, 640px);
|
||||
height: min(68vw, 480px);
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
.additinal-filters-container {
|
||||
.action-btn {
|
||||
background: #4E74F8;
|
||||
background: #4e74f8;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user