Merge pull request #104 from pyrra-dev/ui-graph-handle-nodata

ui: Correctly handle no data returned by setting graphs data to undefined
pyrra-dev · Feb 4, 2022 · 25d86c3 · 25d86c3
2 parents 6b0aef7 + b233d99
commit 25d86c3
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/ui/src/components/graphs/ErrorBudgetGraph.tsx b/ui/src/components/graphs/ErrorBudgetGraph.tsx
@@ -56,6 +56,11 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
         setStart(start)
         setEnd(end)
       })
+      .catch(() => {
+        setSamples(undefined)
+        setStart(start)
+        setEnd(end)
+      })
       .finally(() => setLoading(false))
   }, [api, labels, grouping, timeRange])
 

diff --git a/ui/src/components/graphs/ErrorsGraph.tsx b/ui/src/components/graphs/ErrorsGraph.tsx
@@ -58,7 +58,13 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
         setErrors([x, ...ys])
         setStart(start)
         setEnd(end)
-      }).finally(() => setErrorsLoading(false))
+      })
+      .catch(() => {
+        setErrors(undefined)
+        setStart(start)
+        setEnd(end)
+      })
+      .finally(() => setErrorsLoading(false))
 
   }, [api, labels, grouping, timeRange])
 
@@ -121,7 +127,10 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
             width: width,
             height: 150,
             series: [{}, {}],
-            scales: { x: {}, y: { min: 0, max: 1 } }
+            scales: {
+              x: { min: start, max: end },
+              y: { min: 0, max: 1 }
+            }
           }} data={[[], []]}/>
         )}
       </div>

diff --git a/ui/src/components/graphs/RequestsGraph.tsx b/ui/src/components/graphs/RequestsGraph.tsx
@@ -56,7 +56,13 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
         setRequests(data)
         setStart(start)
         setEnd(end)
-      }).finally(() => setRequestsLoading(false))
+      })
+      .catch(() => {
+        setRequests(undefined)
+        setStart(start)
+        setEnd(end)
+      })
+      .finally(() => setRequestsLoading(false))
   }, [api, labels, grouping, timeRange])
 
   // small state used while picking colors to reuse as little as possible
@@ -122,7 +128,10 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
             width: width,
             height: 150,
             series: [{}, {}],
-            scales: { x: {}, y: { min: 0, max: 1 } }
+            scales: {
+              x: { min: start, max: end },
+              y: { min: 0, max: 1 }
+            }
           }} data={[[], []]}/>
         )}
       </div>