Bug 1804922: Improve monitoring dashboards performance

* Avoid stacked area charts when there are too many series * Reduce default samples to 20
openshift · Feb 29, 2020 · da2b347 · da2b347
1 parent 11fb1f5
commit da2b347
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/frontend/public/components/monitoring/dashboards/graph.tsx b/frontend/public/components/monitoring/dashboards/graph.tsx
@@ -21,7 +21,7 @@ const Graph_: React.FC<Props> = ({
 }) => (
   <div onMouseEnter={() => patchAllQueries(queries, patchQuery)}>
     <QueryBrowser
-      defaultSamples={30}
+      defaultSamples={20}
       formatLegendLabel={formatLegendLabel}
       hideControls
       isStack={isStack}

diff --git a/frontend/public/components/monitoring/query-browser.tsx b/frontend/public/components/monitoring/query-browser.tsx
@@ -376,6 +376,9 @@ const maxDataPointsHard = 10000;
 const minSamples = 10;
 const maxSamples = 300;
 
+// Fall back to a line chart for performance if there are too many series
+const maxStacks = 20;
+
 // We don't want to refresh all the graph data for just a small adjustment in the number of samples,
 // so don't update unless the number of samples would change by at least this proportion
 const samplesLeeway = 0.2;
@@ -505,6 +508,9 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
 
   const safeFetch = useSafeFetch();
 
+  const stack =
+    isStack && _.reduce(graphData, (total: number, { length }) => total + length, 0) <= maxStacks;
+
   // If provided, `timespan` overrides any existing span setting
   React.useEffect(() => {
     if (timespan) {
@@ -676,7 +682,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
                 allSeries={graphData}
                 disabledSeries={disabledSeries}
                 formatLegendLabel={formatLegendLabel}
-                isStack={isStack}
+                isStack={stack}
                 span={span}
                 xDomain={xDomain}
               />
@@ -685,7 +691,7 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
                 allSeries={graphData}
                 disabledSeries={disabledSeries}
                 formatLegendLabel={formatLegendLabel}
-                isStack={isStack}
+                isStack={stack}
                 onZoom={onZoom}
                 span={span}
                 xDomain={xDomain}