diff --git a/app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx b/app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx index e30f9488d5..872040a683 100644 --- a/app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx +++ b/app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx @@ -69,16 +69,13 @@ const GraphView: FC = ({ const tempTimes: number[] = []; const tempValues: {[key: string]: number[]} = {}; const tempLegend: LegendItem[] = []; - const tempSeries: uPlotSeries[] = []; + const tempSeries: uPlotSeries[] = [{}]; data?.forEach((d) => { const seriesItem = getSeriesItem(d, hideSeries, alias); tempSeries.push(seriesItem); tempLegend.push(getLegendItem(seriesItem, d.group)); - let tmpValues = tempValues[d.group]; - if (!tmpValues) { - tmpValues = []; - } + const tmpValues = tempValues[d.group] || []; for (const v of d.values) { tempTimes.push(v[0]); tmpValues.push(promValueToNumber(v[1])); @@ -87,14 +84,15 @@ const GraphView: FC = ({ }); const timeSeries = getTimeSeries(tempTimes, currentStep, period); - setDataChart([timeSeries, ...data.map(d => { + const timeDataSeries = data.map(d => { const results = []; const values = d.values; + const length = values.length; let j = 0; for (const t of timeSeries) { - while (j < values.length && values[j][0] < t) j++; + while (j < length && values[j][0] < t) j++; let v = null; - if (j < values.length && values[j][0] == t) { + if (j < length && values[j][0] == t) { v = promValueToNumber(values[j][1]); if (!Number.isFinite(v)) { // Treat special values as nulls in order to satisfy uPlot. @@ -105,25 +103,24 @@ const GraphView: FC = ({ results.push(v); } return results; - })] as uPlotData); - setLimitsYaxis(tempValues); + }); + timeDataSeries.unshift(timeSeries); - const newSeries = [{}, ...tempSeries]; - if (JSON.stringify(newSeries) !== JSON.stringify(series)) { - setSeries(newSeries); - setLegend(tempLegend); - } + setLimitsYaxis(tempValues); + setDataChart(timeDataSeries as uPlotData); + setSeries(tempSeries); + setLegend(tempLegend); }, [data]); useEffect(() => { const tempLegend: LegendItem[] = []; - const tempSeries: uPlotSeries[] = []; + const tempSeries: uPlotSeries[] = [{}]; data?.forEach(d => { const seriesItem = getSeriesItem(d, hideSeries, alias); tempSeries.push(seriesItem); tempLegend.push(getLegendItem(seriesItem, d.group)); }); - setSeries([{}, ...tempSeries]); + setSeries(tempSeries); setLegend(tempLegend); }, [hideSeries]); diff --git a/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts b/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts index b61caecfbe..a578f489db 100644 --- a/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts +++ b/app/vmui/packages/vmui/src/hooks/useFetchQuery.ts @@ -48,38 +48,43 @@ export const useFetchQuery = ({predefinedQuery, visible, display, customStep}: F const fetchData = async (fetchUrl: string[], fetchQueue: AbortController[], displayType: DisplayType, query: string[]) => { const controller = new AbortController(); setFetchQueue([...fetchQueue, controller]); - const isDisplayChart = displayType === "chart"; try { - const responses = await Promise.all(fetchUrl.map(url => fetch(url, {signal: controller.signal}))); + const isDisplayChart = displayType === "chart"; + const seriesLimit = MAX_SERIES[displayType]; const tempData: MetricBase[] = []; const tempTraces: Trace[] = []; let counter = 1; + let totalLength = 0; - for await (const response of responses) { + for await (const url of fetchUrl) { + const response = await fetch(url, {signal: controller.signal}); const resp = await response.json(); + if (response.ok) { setError(undefined); + if (resp.trace) { - const trace = new Trace(resp.trace, query[counter-1]); + const trace = new Trace(resp.trace, query[counter - 1]); tempTraces.push(trace); } - resp.data.result.forEach((d: MetricBase) => { + + const freeTempSize = seriesLimit - tempData.length; + resp.data.result.slice(0, freeTempSize).forEach((d: MetricBase) => { d.group = counter; tempData.push(d); }); + + totalLength += resp.data.result.length; counter++; } else { setError(`${resp.errorType}\r\n${resp?.error}`); } } - const length = tempData.length; - const seriesLimit = MAX_SERIES[displayType]; - const result = tempData.slice(0, seriesLimit); - const limitText = `Showing ${seriesLimit} series out of ${length} series due to performance reasons. Please narrow down the query, so it returns less series`; - setWarning(length > seriesLimit ? limitText : ""); + const limitText = `Showing ${seriesLimit} series out of ${totalLength} series due to performance reasons. Please narrow down the query, so it returns less series`; + setWarning(totalLength > seriesLimit ? limitText : ""); - isDisplayChart ? setGraphData(result as MetricResult[]) : setLiveData(result as InstantMetricResult[]); + isDisplayChart ? setGraphData(tempData as MetricResult[]) : setLiveData(tempData as InstantMetricResult[]); setTraces(tempTraces); } catch (e) { if (e instanceof Error && e.name !== "AbortError") {