Selaa lähdekoodia

Implemented loading for event drawer

jnfrati 4 vuotta sitten
vanhempi
sitoutus
cd2fe0490a

+ 20 - 13
dashboard/src/main/home/cluster-dashboard/dashboard/incidents/EventDrawer.tsx

@@ -1,3 +1,4 @@
+import Loading from "components/Loading";
 import React, { useContext, useEffect, useState } from "react";
 import React, { useContext, useEffect, useState } from "react";
 import api from "shared/api";
 import api from "shared/api";
 import { Context } from "shared/Context";
 import { Context } from "shared/Context";
@@ -36,21 +37,23 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
         }));
         }));
     });
     });
 
 
-    Promise.all(promises).then((data) => {
-      if (!isSubscribed) {
-        return;
-      }
+    Promise.all(promises)
+      .then((data) => {
+        if (!isSubscribed) {
+          return;
+        }
 
 
-      const tmpContainerLogs = data.reduce<{ [key: string]: string }>(
-        (acc, c) => {
-          acc[c.container_name] = c.contents;
-          return acc;
-        },
-        {}
-      );
+        const tmpContainerLogs = data.reduce<{ [key: string]: string }>(
+          (acc, c) => {
+            acc[c.container_name] = c.contents;
+            return acc;
+          },
+          {}
+        );
 
 
-      setContainerLogs(tmpContainerLogs);
-    });
+        setContainerLogs(tmpContainerLogs);
+      })
+      .catch(() => console.log("nope"));
 
 
     return () => {
     return () => {
       isSubscribed = false;
       isSubscribed = false;
@@ -61,6 +64,10 @@ const EventDrawer: React.FC<{ event: IncidentEvent }> = ({ event }) => {
     return null;
     return null;
   }
   }
 
 
+  if (!containerLogs) {
+    return <Loading />;
+  }
+
   return (
   return (
     <EventDrawerContainer>
     <EventDrawerContainer>
       <EventDrawerTitle>{event?.pod_name}</EventDrawerTitle>
       <EventDrawerTitle>{event?.pod_name}</EventDrawerTitle>

+ 1 - 1
dashboard/src/main/home/cluster-dashboard/dashboard/incidents/IncidentPage.tsx

@@ -66,10 +66,10 @@ const IncidentPage = () => {
           <BackButtonImg src={backArrow} />
           <BackButtonImg src={backArrow} />
         </BackButton>
         </BackButton>
         <TitleSection icon={nodePng}>{incident.incident_id}</TitleSection>
         <TitleSection icon={nodePng}>{incident.incident_id}</TitleSection>
+        <IncidentMessage>{incident.latest_message}</IncidentMessage>
         <IncidentStatus status={incident.latest_state}>
         <IncidentStatus status={incident.latest_state}>
           Status: <i>{incident.latest_state}</i>
           Status: <i>{incident.latest_state}</i>
         </IncidentStatus>
         </IncidentStatus>
-        <IncidentMessage>{incident.latest_message}</IncidentMessage>
       </HeaderWrapper>
       </HeaderWrapper>
       <LineBreak />
       <LineBreak />
       <BodyWrapper>
       <BodyWrapper>