fix: Update EventGrid and ServiceItem components (#2)

Author: Aloento

src/Components/Home/EventGrid.tsx

@@ -95,6 +95,7 @@ export function EventGrid() {
         const s = x.Latest.Status;
 
         const res =
+          !x.End &&
           s != EventStatus.Completed &&
           s != EventStatus.Resolved &&
           s != EventStatus.Cancelled

src/Components/Home/ServiceItem.tsx

@@ -30,12 +30,18 @@ export function ServiceItem({ RegionService }: IServiceItem) {
         Id: x.Id,
         Type: x.Type,
         Start: x.Start,
+        End: x.End,
         Status: orderBy([...x.Histories], y => y.Created, 'desc').at(0)?.Status
       }))
       .filter(x => {
+        if (x.Type !== EventType.Maintenance && x.End) {
+          return false;
+        }
+
         if (!x.Status) {
           return true;
         }
+
         return ![EventStatus.Completed, EventStatus.Resolved, EventStatus.Cancelled]
           .includes(x.Status);
       })
@@ -48,6 +54,11 @@ export function ServiceItem({ RegionService }: IServiceItem) {
       setFuture(dayjs(res.Start).isAfter(dayjs()));
       setId(res.Id);
     }
+    else {
+      setStatus(EventType.Operational);
+      setFuture(false);
+      setId(undefined);
+    }
   }, [DB, RegionService]);
 
   return (

src/Pages/Home.tsx

@@ -1,18 +1,21 @@
 import { ScaleNotification } from "@telekom/scale-components-react";
 import { useCreation } from "ahooks";
-import { chain } from "lodash";
+import { chain, orderBy } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import { Helmet } from "react-helmet";
 import { BehaviorSubject } from "rxjs";
-import { EventType } from "~/Components/Event/Enums";
+import { EventStatus, EventType } from "~/Components/Event/Enums";
 import { EventGrid } from "~/Components/Home/EventGrid";
 import "~/Components/Home/Home.css";
 import { Indicator } from "~/Components/Home/Indicator";
 import { RegionSelector } from "~/Components/Home/RegionSelector";
 import { StatusCard } from "~/Components/Home/StatusCard";
 import { Station } from "~/Helpers/Entities";
+import { Logger } from "~/Helpers/Logger";
 import { useStatus } from "~/Services/Status";
 
+const log = new Logger("Home");
+
 /**
  * @author Aloento
  * @since 1.0.0
@@ -46,11 +49,20 @@ export function Home() {
   const abnormalCount = useMemo(() => {
     const service = chain(DB.Events)
       .filter(e => !e.End)
+      .filter(e => e.Type !== EventType.Maintenance)
+      .filter(e => {
+        const status = orderBy(Array.from(e.Histories), y => y.Created, 'desc').at(0)?.Status;
+        if (!status) {
+          return true;
+        }
+        return ![EventStatus.Completed, EventStatus.Resolved, EventStatus.Cancelled].includes(status);
+      })
       .flatMap(e => [...e.RegionServices])
       .map(rs => rs.Service)
       .uniqBy(s => s.Id)
       .value();
 
+    log.debug(service);
     return service.length;
   }, [DB]);
 

src/Services/Status.Trans.ts

@@ -15,14 +15,13 @@ const log = new Logger("Service", "Status", "Transformer");
 export function Transformer(list: StatusEntity[]): IStatusContext {
   let id = 0;
   const db = EmptyDB();
-  const ng = process.env.SD_BACKEND_NG;
 
-  for (const item of list) {
-    if (ng) {
-      // @ts-expect-error
-      item.attributes = item.attrs;
-    }
+  if (!list?.length) {
+    log.warn("Empty List.");
+    return db;
+  }
 
+  for (const item of list) {
     if (item.attributes.length < 3) {
       log.debug("Skipped Hidden Item.", item);
       continue;
@@ -94,6 +93,10 @@ export function Transformer(list: StatusEntity[]): IStatusContext {
       db.RegionService.push(regionService);
     }
 
+    if (!item.incidents?.length) {
+      continue;
+    }
+
     for (const incident of item.incidents) {
       let dbEvent = db.Events.find((x) => x.Id === incident.id);
 
@@ -124,55 +127,57 @@ export function Transformer(list: StatusEntity[]): IStatusContext {
           dbEvent.End = dayjs(incident.end_date).toDate();
         }
 
-        for (const update of incident.updates) {
-          const status = (() => {
-            switch (update.status) {
-              case StatusEnum.System:
-                return incident.end_date
-                  ? EventStatus.Cancelled
-                  : EventStatus.Investigating;
-
-              case StatusEnum.Analyzing:
-                return EventStatus.Investigating;
-              // @ts-expect-error
-              case StatusEnum.Reopened:
-                dbEvent.End = undefined;
-              case StatusEnum.Fixing:
-                return EventStatus.Fixing;
-              case StatusEnum.Observing:
-                return EventStatus.Monitoring;
-              case StatusEnum.Resolved:
-              case StatusEnum.Changed:
-                return EventStatus.Resolved;
-
-              case StatusEnum.Description:
-              case StatusEnum.Scheduled:
-              case StatusEnum.Modified:
-                return EventStatus.Scheduled;
-              case StatusEnum.InProgress:
-                return EventStatus.Performing;
-              case StatusEnum.Completed:
-                return EventStatus.Completed;
-
-              default:
-                break;
+        if (incident.updates?.length) {
+          for (const update of incident.updates) {
+            const status = (() => {
+              switch (update.status) {
+                case StatusEnum.System:
+                  return incident.end_date
+                    ? EventStatus.Cancelled
+                    : EventStatus.Investigating;
+
+                case StatusEnum.Analyzing:
+                  return EventStatus.Investigating;
+                // @ts-expect-error
+                case StatusEnum.Reopened:
+                  dbEvent.End = undefined;
+                case StatusEnum.Fixing:
+                  return EventStatus.Fixing;
+                case StatusEnum.Observing:
+                  return EventStatus.Monitoring;
+                case StatusEnum.Resolved:
+                case StatusEnum.Changed:
+                  return EventStatus.Resolved;
+
+                case StatusEnum.Description:
+                case StatusEnum.Scheduled:
+                case StatusEnum.Modified:
+                  return EventStatus.Scheduled;
+                case StatusEnum.InProgress:
+                  return EventStatus.Performing;
+                case StatusEnum.Completed:
+                  return EventStatus.Completed;
+
+                default:
+                  break;
+              }
+            })();
+
+            if (!status) {
+              log.debug("Skipped Unknown Status.", update, incident);
+              continue;
             }
-          })();
 
-          if (!status) {
-            log.debug("Skipped Unknown Status.", update, incident);
-            continue;
-          }
+            const history = {
+              Id: id++,
+              Message: update.text,
+              Created: dayjs(update.timestamp).toDate(),
+              Status: status,
+              Event: dbEvent,
+            };
 
-          const history = {
-            Id: id++,
-            Message: update.text,
-            Created: dayjs(update.timestamp).toDate(),
-            Status: status,
-            Event: dbEvent,
-          };
-
-          dbEvent.Histories.add(history);
+            dbEvent.Histories.add(history);
+          }
         }
 
         db.Events.push(dbEvent);