From cac504a2b26cf02a652f25a6b513b6d101369dd5 Mon Sep 17 00:00:00 2001
From: Kurt Lourens <kurt.lourens@outlook.com>
Date: Wed, 14 Aug 2024 21:19:13 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=96=200.2.4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |  2 +-
 src/components/monitorDetailModal.tsx   | 10 ++---
 src/components/monitorList.tsx          | 50 +++++++++----------------
 src/components/monitorStatusRow.tsx     | 24 ++++++------
 src/contracts/MonitorStatusViewModel.ts |  1 -
 5 files changed, 34 insertions(+), 53 deletions(-)

diff --git a/package.json b/package.json
index e3e1fd9..943f0c8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "status-nmscd",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "",
   "scripts": {
     "start": "vite",
diff --git a/src/components/monitorDetailModal.tsx b/src/components/monitorDetailModal.tsx
index 19456ba..caf343a 100644
--- a/src/components/monitorDetailModal.tsx
+++ b/src/components/monitorDetailModal.tsx
@@ -20,7 +20,7 @@ import { ApiService } from "../services/api/ApiService";
 import { MonitorStatusIcon } from "./monitorStatusRow";
 
 export interface ISelectedMonitorTickProps {
-  maxStatus: number;
+  percentage: number;
   monitorId: number;
   hour: number;
 }
@@ -51,15 +51,15 @@ export const MonitorDetailModal: Component<ISelectedMonitorTickProps> = (
     setNetworkState(NetworkState.Success);
   };
 
-  const getMaxStatus = (record: MonitorStatusTickViewModel) => {
+  const getPercentage = (record: MonitorStatusTickViewModel) => {
     const successPerc = record.numSuccessStatuses / record.numStatuses;
-    return successPerc == 1 ? 2 : 9;
+    return successPerc * 100;
   };
 
   return (
     <>
       <ModalHeader>
-        <MonitorStatusIcon maxStatus={props.maxStatus} />
+        <MonitorStatusIcon percentage={props.percentage} />
         {monitorHourFormat(hoursToEpoch(props.hour))}
       </ModalHeader>
       <ModalBody>
@@ -98,7 +98,7 @@ export const MonitorDetailModal: Component<ISelectedMonitorTickProps> = (
             <For each={monitorTickRecords()}>
               {(record) => (
                 <p>
-                  <MonitorStatusIcon maxStatus={getMaxStatus(record)} />
+                  <MonitorStatusIcon percentage={getPercentage(record)} />
                   {monitorTickFormat(
                     minutesToEpoch(record.minutesSinceEpochInterval)
                   )}
diff --git a/src/components/monitorList.tsx b/src/components/monitorList.tsx
index 7ccd042..4f9e726 100644
--- a/src/components/monitorList.tsx
+++ b/src/components/monitorList.tsx
@@ -1,42 +1,25 @@
-import {
-  Component,
-  createSignal,
-  For,
-  Match,
-  onMount,
-  Show,
-  Switch,
-} from "solid-js";
-import { ApiService } from "../services/api/ApiService";
-import { NetworkState } from "../constants/enum/NetworkState";
-import {
-  MonitorStatusHourViewModel,
-  MonitorStatusViewModel,
-} from "../contracts/MonitorStatusViewModel";
-import { MonitorStatusIcon, MonitorStatusRow } from "./monitorStatusRow";
 import {
   Button,
   createDisclosure,
   Modal,
-  ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
-  ModalHeader,
   ModalOverlay,
-  Text,
 } from "@hope-ui/solid";
-import { anyObject } from "../helper/typescriptHacks";
+import { Component, createSignal, For, Match, onMount, Switch } from "solid-js";
+import { NetworkState } from "../constants/enum/NetworkState";
 import {
-  formatDate,
-  hoursToEpoch,
-  monitorHourFormat,
-  monitorTickFormat,
-} from "../helper/dateHelper";
+  MonitorStatusHourViewModel,
+  MonitorStatusViewModel,
+} from "../contracts/MonitorStatusViewModel";
+import { anyObject } from "../helper/typescriptHacks";
+import { ApiService } from "../services/api/ApiService";
 import {
   ISelectedMonitorTickProps,
   MonitorDetailModal,
 } from "./monitorDetailModal";
+import { MonitorStatusIcon, MonitorStatusRow } from "./monitorStatusRow";
 
 export const MonitorList: Component = () => {
   const { isOpen, onOpen, onClose } = createDisclosure();
@@ -75,13 +58,16 @@ export const MonitorList: Component = () => {
     (monitorRecordPerHour: MonitorStatusHourViewModel) => {
       setSelectedMonitorTickRecord({
         monitorId,
-        maxStatus: monitorRecordPerHour.maxStatus,
+        percentage:
+          (monitorRecordPerHour.numSuccessStatuses /
+            monitorRecordPerHour.numStatuses) *
+          100,
         hour: monitorRecordPerHour.hourSinceEpochInterval,
       });
       onOpen();
     };
 
-  const getAvailability = (monitor: MonitorStatusViewModel): string => {
+  const getPercentage = (monitor: MonitorStatusViewModel) => {
     const totalStatuses = monitor.hours.reduce(
       (partial, cur) => partial + cur.numStatuses,
       0
@@ -91,9 +77,7 @@ export const MonitorList: Component = () => {
       0
     );
 
-    const successPerc = totalSuccessStatuses / totalStatuses;
-
-    return `${Math.round(successPerc * 100)}%`;
+    return (totalSuccessStatuses / totalStatuses) * 100;
   };
 
   return (
@@ -126,9 +110,9 @@ export const MonitorList: Component = () => {
         {(monitor) => (
           <div class="col-12 monitor">
             <h3 data-id={monitor.monitorId}>
-              <MonitorStatusIcon maxStatus={monitor.status} />
+              <MonitorStatusIcon percentage={getPercentage(monitor)} />
               &nbsp;{monitor.name}
-              <small>Availablity: {getAvailability(monitor)}</small>
+              <small>Availablity: {Math.round(getPercentage(monitor))}%</small>
             </h3>
             <MonitorStatusRow
               record={monitor}
@@ -145,7 +129,7 @@ export const MonitorList: Component = () => {
           <ModalCloseButton />
           <MonitorDetailModal
             monitorId={selectedMonitorTickRecord().monitorId}
-            maxStatus={selectedMonitorTickRecord().maxStatus}
+            percentage={selectedMonitorTickRecord().percentage}
             hour={selectedMonitorTickRecord().hour}
           />
           <ModalFooter>
diff --git a/src/components/monitorStatusRow.tsx b/src/components/monitorStatusRow.tsx
index d7a99b0..41c1fce 100644
--- a/src/components/monitorStatusRow.tsx
+++ b/src/components/monitorStatusRow.tsx
@@ -51,7 +51,6 @@ export const MonitorStatusRow: Component<IMonitorStatusRow> = (
         arrItems[arrIndex] = perHour;
       } else {
         arrItems[arrIndex] = {
-          maxStatus: 0,
           numStatuses: 0,
           numSuccessStatuses: 0,
           hourSinceEpochInterval: hourSinceEpochInterval,
@@ -59,13 +58,6 @@ export const MonitorStatusRow: Component<IMonitorStatusRow> = (
       }
     }
     const reversed = arrItems.reverse();
-
-    // If latest value is unknown, use the previous hour's value
-    if (reversed[reversed.length - 1].maxStatus === 0) {
-      reversed[reversed.length - 1].maxStatus =
-        reversed[reversed.length - 2].maxStatus;
-    }
-
     return reversed;
   };
 
@@ -84,6 +76,11 @@ export const MonitorStatusRow: Component<IMonitorStatusRow> = (
     };
   };
 
+  const getPercentage = (hour: MonitorStatusHourViewModel) => {
+    const successPerc = hour.numSuccessStatuses / hour.numStatuses;
+    return successPerc * 100;
+  };
+
   return (
     <div class="status-row" data-num-bars={numBars()}>
       <For each={getHourArr(numBars())}>
@@ -94,13 +91,13 @@ export const MonitorStatusRow: Component<IMonitorStatusRow> = (
             mt="0.5em"
             label={
               <>
-                <MonitorStatusIcon maxStatus={hour.maxStatus} />
+                <MonitorStatusIcon percentage={getPercentage(hour)} />
                 {monitorHourFormat(hoursToEpoch(hour.hourSinceEpochInterval))}
               </>
             }
           >
             <div
-              class={classNames("bar", "bar-" + hour.maxStatus)}
+              class={classNames("bar", "bar-" + 0)}
               style={getOverrideStyleBasedOnMinuteStatuses(hour)}
               onClick={() => props.setModalContent(hour)}
             ></div>
@@ -112,12 +109,13 @@ export const MonitorStatusRow: Component<IMonitorStatusRow> = (
 };
 
 interface IMonitorStatusIcon {
-  maxStatus: number;
+  percentage: number;
 }
 export const MonitorStatusIcon: Component<IMonitorStatusIcon> = (
   props: IMonitorStatusIcon
 ) => {
-  if (props.maxStatus === 0) return <QuestionMarkIcon />;
-  if (props.maxStatus === 2) return <CheckMarkIcon />;
+  if (props.percentage === 100) return <CheckMarkIcon />;
+  if (props.percentage < 100 && props.percentage > 33)
+    return <QuestionMarkIcon />;
   return <ErrorCrossIcon />;
 };
diff --git a/src/contracts/MonitorStatusViewModel.ts b/src/contracts/MonitorStatusViewModel.ts
index 88a253a..cbd9c03 100644
--- a/src/contracts/MonitorStatusViewModel.ts
+++ b/src/contracts/MonitorStatusViewModel.ts
@@ -9,7 +9,6 @@ export interface MonitorStatusViewModel {
 }
 
 export interface MonitorStatusHourViewModel {
-  maxStatus: number;
   numStatuses: number;
   numSuccessStatuses: number;
   hourSinceEpochInterval: number;