github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2025-01-10 15:14:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: optimize memory (#3255)

Browse source 
* fix: change series limit logic

* fix: remove spread operators
This commit is contained in:
Yury Molodov 2022-10-24 19:51:24 +02:00 committed by GitHub
parent 59199a98dd
commit 274e235bf7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/vmui/packages/vmui/src/components/CustomPanel/Views/GraphView.tsx
View file

@ -69,16 +69,13 @@ const GraphView: FC<GraphViewProps> = ({
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<GraphViewProps> = ({
});
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<GraphViewProps> = ({
results.push(v);
}
return results;
})] as uPlotData);
setLimitsYaxis(tempValues);
});
timeDataSeries.unshift(timeSeries);
const newSeries = [{}, ...tempSeries];
if (JSON.stringify(newSeries) !== JSON.stringify(series)) {
setSeries(newSeries);
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]);

27
app/vmui/packages/vmui/src/hooks/useFetchQuery.ts
View file

@ -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") {