GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-25 07:04:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Nan filtering is added (#4000)

Browse Source 
* fix: handle nan in uplot

* feat: filter for nan is added for metrics

* feat: filter for nan is added for metrics

---------

Co-authored-by: Vishal Sharma <makeavish786@gmail.com>
This commit is contained in:
Palash Gupta 2023-11-21 15:27:06 +05:30 committed by GitHub
parent c0226ab584
commit 7e87df2d69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/container/GridCardLayout/GridCard/index.tsx
View File

@ -28,6 +28,7 @@ function GridCardGraph({
isQueryEnabled,
threshold,
variables,
filterNaN,
}: GridCardGraphProps): JSX.Element {
const dispatch = useDispatch();
const [errorMessage, setErrorMessage] = useState<string>();
@ -89,7 +90,11 @@ function GridCardGraph({
const containerDimensions = useResizeObserver(graphRef);
const chartData = getUPlotChartData(queryResponse?.data?.payload);
const chartData = getUPlotChartData(
queryResponse?.data?.payload,
undefined,
filterNaN,
);
const isDarkMode = useIsDarkMode();

1
frontend/src/container/GridCardLayout/GridCard/types.ts
View File

@ -39,6 +39,7 @@ export interface GridCardGraphProps {
headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
isQueryEnabled: boolean;
variables?: Dashboard['data']['variables'];
filterNaN?: boolean;
}
export interface GetGraphVisibilityStateOnLegendClickProps {

2
frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
View File

@ -107,6 +107,7 @@ function DBCall(): JSX.Element {
<Card data-testid="database_call_rps">
<GraphContainer>
<Graph
filterNaN
name="database_call_rps"
widget={databaseCallsRPSWidget}
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
@ -140,6 +141,7 @@ function DBCall(): JSX.Element {
<Card data-testid="database_call_avg_duration">
<GraphContainer>
<Graph
filterNaN
name="database_call_avg_duration"
widget={databaseCallsAverageDurationWidget}
headerMenuList={MENU_ITEMS}

4
frontend/src/container/MetricsApplication/Tabs/External.tsx
View File

@ -148,6 +148,7 @@ function External(): JSX.Element {
<Card data-testid="external_call_error_percentage">
<GraphContainer>
<Graph
filterNaN
headerMenuList={MENU_ITEMS}
name="external_call_error_percentage"
widget={externalCallErrorWidget}
@ -183,6 +184,7 @@ function External(): JSX.Element {
<Card data-testid="external_call_duration">
<GraphContainer>
<Graph
filterNaN
name="external_call_duration"
headerMenuList={MENU_ITEMS}
widget={externalCallDurationWidget}
@ -219,6 +221,7 @@ function External(): JSX.Element {
<Card data-testid="external_call_rps_by_address">
<GraphContainer>
<Graph
filterNaN
name="external_call_rps_by_address"
widget={externalCallRPSWidget}
headerMenuList={MENU_ITEMS}
@ -257,6 +260,7 @@ function External(): JSX.Element {
name="external_call_duration_by_address"
widget={externalCallDurationAddressWidget}
headerMenuList={MENU_ITEMS}
filterNaN
onClickHandler={(xValue, yValue, mouseX, mouseY): void => {
onGraphClickHandler(setSelectedTimeStamp)(
xValue,

1
frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
View File

@ -84,6 +84,7 @@ function ApDexMetrics({
return (
<Graph
name="apdex"
filterNaN
widget={apDexMetricsWidget}
onDragSelect={onDragSelect}
onClickHandler={handleGraphClick('ApDex')}

1
frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
View File

@ -88,6 +88,7 @@ function ServiceOverview({
widget={latencyWidget}
onClickHandler={handleGraphClick('Service')}
isQueryEnabled={isQueryEnabled}
filterNaN
/>
</GraphContainer>
</Card>

1
frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
View File

@ -27,6 +27,7 @@ function TopLevelOperation({
) : (
<GraphContainer>
<Graph
filterNaN
name={name}
widget={widget}
onClickHandler={handleGraphClick(opName)}

18
frontend/src/lib/uPlotLib/utils/getUplotChartData.ts
View File

@ -1,8 +1,17 @@
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
function filterIsNan(
value: [number, string],
isFilterNaNEnabled?: boolean,
): boolean {
const val = value[1];
return isFilterNaNEnabled ? val !== 'NaN' : true;
}
export const getUPlotChartData = (
apiResponse?: MetricRangePayloadProps,
fillSpans?: boolean,
filterNaN?: boolean,
): uPlot.AlignedData => {
const seriesList = apiResponse?.data?.result || [];
const uPlotData: uPlot.AlignedData = [];
@ -19,7 +28,9 @@ export const getUPlotChartData = (
seriesList[index]?.values?.sort((a, b) => a[0] - b[0]);
}
const timestampArr = xSeries?.values?.map((v) => v[0]);
const timestampArr = xSeries?.values
?.filter((response) => filterIsNan(response, filterNaN))
.map((v) => v[0]);
const uplotDataFormatArr = new Float64Array(timestampArr);
@ -30,7 +41,10 @@ export const getUPlotChartData = (
// for each series, push the values
seriesList.forEach((series) => {
const seriesData = series?.values?.map((v) => parseFloat(v[1])) || [];
const seriesData =
series?.values
?.filter((response) => filterIsNan(response, filterNaN))
.map((v) => parseFloat(v[1])) || [];
// fill rest of the value with zero
if (seriesData.length < numberOfTimestamps && fillSpans) {