From b233d99925831dac228be860330f8ef3af537636 Mon Sep 17 00:00:00 2001
From: Matthias Loibl <mail@matthiasloibl.com>
Date: Fri, 4 Feb 2022 13:53:10 +0100
Subject: [PATCH] ui: Correctly handle no data returned by setting graphs data
 to undefined

---
 ui/src/components/graphs/ErrorBudgetGraph.tsx |  5 +++++
 ui/src/components/graphs/ErrorsGraph.tsx      | 13 +++++++++++--
 ui/src/components/graphs/RequestsGraph.tsx    | 13 +++++++++++--
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/graphs/ErrorBudgetGraph.tsx b/ui/src/components/graphs/ErrorBudgetGraph.tsx
index 9ccb21d48..c2573178a 100644
--- 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
index 039d71fac..9421507a6 100644
--- 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
index c5a62c2c3..c27724128 100644
--- 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>