mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-12 10:29:11 +08:00
fix: resolve typescript issues in metrics explorer (#7878)
This commit is contained in:
Amlan Kumar Nandy
GitHub
parent
39f07e7477
commit
27830742f9
@ -1,6 +1,10 @@
|
||||
# Ignore artifacts:
|
||||
build
|
||||
coverage
|
||||
public/
|
||||
|
||||
# Ignore all MD files:
|
||||
**/*.md
|
||||
**/*.md
|
||||
|
||||
# Ignore all JSON files:
|
||||
**/*.json
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
.dropdown-button {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dropdown-button--dark {
|
||||
color: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dropdown-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
.learn-more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 18px; /* 128.571% */
|
||||
letter-spacing: -0.07px;
|
||||
&,&:hover {
|
||||
color: var(--bg-robin-400) !important;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0;
|
||||
font-family: Inter;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 18px; /* 128.571% */
|
||||
letter-spacing: -0.07px;
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--bg-robin-400) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
.label-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.label-column--tag {
|
||||
white-space: normal;
|
||||
margin: 0.2rem 0.2rem;
|
||||
}
|
||||
.label-column--tag {
|
||||
white-space: normal;
|
||||
margin: 0.2rem 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.overlay--text-wrap {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@ -35,13 +35,13 @@
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
padding: 8px 17px;
|
||||
|
||||
|
||||
&.primary {
|
||||
background: var(--bg-robin-500);
|
||||
border: none;
|
||||
color: var(--bg-vanilla-100);
|
||||
}
|
||||
|
||||
|
||||
&.secondary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -45,4 +45,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.download-button {
|
||||
display: flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,55 +1,54 @@
|
||||
.explorer-option-droppable-container {
|
||||
position: fixed;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: -webkit-fill-available;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
|
||||
// backdrop-filter: blur(20px);
|
||||
width: -webkit-fill-available;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
// box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
|
||||
// backdrop-filter: blur(20px);
|
||||
|
||||
.explorer-actions-btn {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-right: 8px;
|
||||
.explorer-actions-btn {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-right: 8px;
|
||||
|
||||
.action-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
height: 24px !important;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.action-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
height: 24px !important;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.explorer-show-btn {
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
background: rgba(22, 24, 29, 0.40);
|
||||
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
|
||||
backdrop-filter: blur(20px);
|
||||
align-self: center;
|
||||
padding: 8px 12px;
|
||||
height: 24px !important;
|
||||
.explorer-show-btn {
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
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;
|
||||
padding: 8px 12px;
|
||||
height: 24px !important;
|
||||
|
||||
.menu-bar {
|
||||
border-radius: 50px;
|
||||
background: var(--bg-slate-200);
|
||||
height: 4px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
.menu-bar {
|
||||
border-radius: 50px;
|
||||
background: var(--bg-slate-200);
|
||||
height: 4px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightMode {
|
||||
.explorer-option-droppable-container {
|
||||
|
||||
.explorer-show-btn {
|
||||
background: var(--bg-vanilla-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
.explorer-option-droppable-container {
|
||||
.explorer-show-btn {
|
||||
background: var(--bg-vanilla-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,31 +1,31 @@
|
||||
.context-log-renderer {
|
||||
.virtuoso-list {
|
||||
overflow-y: hidden !important;
|
||||
.virtuoso-list {
|
||||
overflow-y: hidden !important;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.3rem;
|
||||
height: 0.3rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
|
||||
.ant-row {
|
||||
width: fit-content;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
|
||||
.ant-row {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
&__item {
|
||||
width: 100%;
|
||||
.raw-log-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
&__item {
|
||||
width: 100%;
|
||||
.raw-log-content {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
.log-context-container {
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
flex: 1;
|
||||
position: relative;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.3rem;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 0.3rem;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--bg-slate-300);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--bg-slate-200);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,34 @@
|
||||
.empty-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.infra-metrics-container {
|
||||
.views-tabs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.views-tabs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.infra-metrics-card {
|
||||
margin: 1rem 0;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
margin: 1rem 0;
|
||||
height: 300px;
|
||||
padding: 10px;
|
||||
|
||||
.ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-card-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.no-data-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.no-data-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.log-context-container {
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
}
|
||||
border: 1px solid var(--bg-slate-400);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
const nextOp = idx < queryFields.length ? queryFields[idx+1]: undefined;
|
||||
if (!ValidTypeSequence(lastOp?.type, q?.type, nextOp?.type)) 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;
|
||||
|
||||
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) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.graph-controls-panel {
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
display: none;
|
||||
width: 110px;
|
||||
@ -22,4 +22,4 @@
|
||||
.ant-btn-link:hover {
|
||||
color: var(--bg-vanilla-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.top-operation {
|
||||
position: relative;
|
||||
.top-operation--download {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
.top-operation--download {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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],
|
||||
);
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@
|
||||
.pipeline-filter-input-preview-container {
|
||||
margin-top: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
|
||||
.processor-form-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.processor-field-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0rem;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.compact-processor-field-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0rem;
|
||||
min-width: 40%;
|
||||
flex-grow: 1;
|
||||
margin-left: 2.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
padding: 0rem;
|
||||
min-width: 40%;
|
||||
flex-grow: 1;
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
.logs-filter-preview-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.logs-filter-preview-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(253, 253, 253, 0.12);
|
||||
width: 100%;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.pipeline-simulation-error {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
.pipeline-preview-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.4rem;
|
||||
margin: 1.2rem 0 0.4rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.4rem;
|
||||
margin: 1.2rem 0 0.4rem 0;
|
||||
}
|
||||
|
||||
.pipeline-preview-logs-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(253, 253, 253, 0.12);
|
||||
width: 100%;
|
||||
height: 12em;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
.logs-preview-list-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0.25rem 0.5rem;
|
||||
box-sizing: border-box;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.logs-preview-list-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 2rem;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-height: 2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.logs-preview-list-item:not(:first-child) {
|
||||
border-top: 1px solid rgba(253, 253, 253, 0.12);
|
||||
border-top: 1px solid rgba(253, 253, 253, 0.12);
|
||||
}
|
||||
|
||||
.logs-preview-list-item-timestamp {
|
||||
margin-right: 0.75rem;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logs-preview-list-item-body {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.logs-preview-list-item-expand{
|
||||
margin-left: 0.75rem;
|
||||
color: #1677ff;
|
||||
padding: 0.25rem 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
.logs-preview-list-item-expand {
|
||||
margin-left: 0.75rem;
|
||||
color: #1677ff;
|
||||
padding: 0.25rem 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.logs-filter-preview-matched-logs-count {
|
||||
margin-right: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.logs-filter-preview-time-interval-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.sample-logs-notice-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
.logs-pipelines-empty-state-centered-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.logs-pipelines-empty-state-video-iframe {
|
||||
width: min(90vw, 640px);
|
||||
height: min(68vw, 480px);
|
||||
margin-bottom: 1em;
|
||||
width: min(90vw, 640px);
|
||||
height: min(68vw, 480px);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.additinal-filters-container {
|
||||
.action-btn {
|
||||
background: #4E74F8;
|
||||
background: #4e74f8;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
@ -12,4 +12,4 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,4 +14,4 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.logs-col-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user