From 4dd809585e77da4ac0205a906b98143a2b2e5ed8 Mon Sep 17 00:00:00 2001
From: ml729 <85370083+ml729@users.noreply.github.com>
Date: Sat, 21 Jan 2023 12:24:15 -0500
Subject: [PATCH] handle error/loading case correctly in status page

---
 website/src/pages/admin/status/index.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/website/src/pages/admin/status/index.tsx b/website/src/pages/admin/status/index.tsx
index 8894888f..efb734b2 100644
--- a/website/src/pages/admin/status/index.tsx
+++ b/website/src/pages/admin/status/index.tsx
@@ -1,9 +1,8 @@
 import {
   Box,
   Card,
-  Button,
+  CardBody,
   CircularProgress,
-  Container,
   SimpleGrid,
   Text,
   Table,
@@ -14,7 +13,6 @@ import {
   Th,
   Thead,
   Tr,
-  View,
   useColorMode,
   useToast,
 } from "@chakra-ui/react";
@@ -81,9 +79,13 @@ const StatusIndex = ({ user }) => {
               /api/v1/tasks/availability
             </Text>
             <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
-              <pre>
-                {tasksAvailability ? JSON.stringify(tasksAvailability, null, 2) : <CircularProgress isIndeterminate />}
-              </pre>
+              {tasksAvailability ? (
+                <pre>{JSON.stringify(tasksAvailability, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
             </Box>
           </CardBody>
         </Card>
@@ -94,7 +96,13 @@ const StatusIndex = ({ user }) => {
               /api/v1/stats/
             </Text>
             <Box bg={dataBackgroundColor} borderRadius="xl" p="6" pt="4" pr="12">
-              <pre>{stats ? JSON.stringify(stats, null, 2) : <CircularProgress isIndeterminate />}</pre>
+              {stats ? (
+                <pre>{JSON.stringify(stats, null, 2)}</pre>
+              ) : errorStatus ? (
+                <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
+              ) : (
+                <CircularProgress isIndeterminate />
+              )}
             </Box>
           </CardBody>
         </Card>
@@ -149,6 +157,8 @@ const StatusIndex = ({ user }) => {
                 </Table>
               </TableContainer>
             </Box>
+          ) : errorStatus ? (
+            <pre>{JSON.stringify(errorStatus, null, 2)}</pre>
           ) : (
             <CircularProgress isIndeterminate />
           )}