[feat] Add Product Information Feature and Enhance Event Handling Logic (#173)

Author: Aloento

package.json

@@ -1,6 +1,6 @@
 {
   "name": "statusdashboard",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "farm start",
@@ -11,15 +11,15 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.64.1",
+    "@fluentui/react-components": "^9.66.1",
     "@telekom/scale-components": "3.0.0-beta.155",
     "@telekom/scale-components-react": "3.0.0-beta.155",
     "ahooks": "^3.8.5",
     "dayjs": "^1.11.13",
     "idb": "^8.0.3",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
-    "oidc-client-ts": "^3.2.1",
+    "oidc-client-ts": "^3.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-helmet": "^6.1.0",
@@ -31,22 +31,22 @@
     "@farmfe/core": "^1.7.5",
     "@farmfe/js-plugin-postcss": "^1.12.0",
     "@farmfe/plugin-react": "^1.2.6",
-    "@tailwindcss/postcss": "^4.1.8",
+    "@tailwindcss/postcss": "^4.1.10",
     "@testing-library/react": "^16.3.0",
     "@types/lodash": "^4.17.17",
-    "@types/node": "^22.15.30",
-    "@types/react": "^19.1.6",
+    "@types/node": "^22.15.32",
+    "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-helmet": "^6.1.11",
     "autoprefixer": "^10.4.21",
-    "core-js": "^3.42.0",
-    "eslint": "^9.28.0",
+    "core-js": "^3.43.0",
+    "eslint": "^9.29.0",
     "globals": "^16.2.0",
-    "postcss": "^8.5.4",
+    "postcss": "^8.5.6",
     "react-refresh": "^0.17.0",
     "tailwindcss": "3.4.17",
     "tailwindcss-scoped-preflight": "^3.4.12",
-    "typescript-eslint": "^8.33.1"
+    "typescript-eslint": "^8.34.1"
   },
   "packageManager": "pnpm@10.11.1"
 }

pnpm-lock.yaml

@@ -41,16 +41,14 @@ export function GetEventType(impact: number): EventType {
  */
 export function GetEventImpact(type: EventType): number {
   switch (type) {
-    case EventType.Maintenance:
-      return 0;
     case EventType.Minor:
       return 1;
     case EventType.Major:
       return 2;
     case EventType.Outage:
       return 3;
     default:
-      return 4;
+      return 0;
   }
 }
 
@@ -76,10 +74,11 @@ export enum EventStatus {
 
   Planned = "Planned",
   Modified = "Modified",
-  InProgress = "InProgress",
+  InProgress = "In Progress",
   Completed = "Completed",
   Cancelled = "Cancelled",
 
+  Active = "Active",
   Reopened = "Reopened",
   Changed = "Changed",
 }
@@ -94,7 +93,7 @@ export function GetStatusList(type: EventType): EventStatus[] {
     case EventType.Maintenance:
       return Object.values(EventStatus).slice(4, 9);
     case EventType.Information:
-      return [EventStatus.Planned, EventStatus.Completed, EventStatus.Cancelled];
+      return [EventStatus.Planned, EventStatus.Active, EventStatus.Completed, EventStatus.Cancelled];
     default:
       return Object.values(EventStatus).slice(0, 4);
   }
@@ -138,5 +137,7 @@ export function GetStatusString(status: EventStatus): string {
       return StatusEnum.Planned;
     case EventStatus.Cancelled:
       return StatusEnum.Cancelled;
+    case EventStatus.Active:
+      return StatusEnum.Active;
   }
 }

src/Components/Event/Enums.ts

@@ -3,7 +3,7 @@ import { Dic } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
 import { Authorized } from "../Auth/With";
 import { Indicator } from "../Home/Indicator";
-import { EventStatus, EventType } from "./Enums";
+import { EventStatus, IsIncident } from "./Enums";
 import { EventAffected } from "./EventAffected";
 import { EventEditor } from "./EventEditor";
 import { EventExtract } from "./EventExtract";
@@ -23,7 +23,7 @@ import { EventExtract } from "./EventExtract";
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function EventCard({ Event }: { Event: Models.IEvent }) {
   return (
@@ -63,12 +63,12 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
           </label>
 
           <label className="text-xl font-medium text-slate-600 whitespace-nowrap">
-            {Event.Type === EventType.Maintenance &&
+            {!IsIncident(Event.Type) &&
               Event.Status !== EventStatus.Completed &&
               "(Plan)"} End At:
           </label>
 
-          {Event.Type === EventType.Maintenance && Event.Description &&
+          {!IsIncident(Event.Type) && Event.Description &&
             <label className="text-xl font-medium text-slate-600">
               Description:
             </label>}
@@ -91,7 +91,7 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
             {Event.End ? dayjs(Event.End).tz(Dic.TZ).format(Dic.TimeTZ) : "Still Ongoing"}
           </label>
 
-          {Event.Type === EventType.Maintenance && Event.Description &&
+          {!IsIncident(Event.Type) && Event.Description &&
             <label className="text-xl font-medium text-slate-700 break-all">
               {Event.Description}
             </label>}

src/Components/Event/EventCard.tsx

@@ -3,7 +3,7 @@ import { useBoolean } from "ahooks";
 import dayjs from "dayjs";
 import { Dic } from "~/Helpers/Entities";
 import { Models } from "~/Services/Status.Models";
-import { EventStatus, EventType, IsOpenStatus } from "./Enums";
+import { EventStatus, EventType, GetStatusList, IsIncident, IsOpenStatus } from "./Enums";
 import { useEditForm } from "./useEditForm";
 
 /**
@@ -20,7 +20,7 @@ import { useEditForm } from "./useEditForm";
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function EventEditor({ Event }: { Event: Models.IEvent }) {
   const { State, Actions, Validation, OnSubmit, Loading } = useEditForm(Event);
@@ -60,12 +60,12 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
         <ScaleDropdownSelect
           label="Type"
           value={State.type}
-          disabled={Event.Type === EventType.Maintenance}
+          disabled={!IsIncident(Event.Type)}
           onScale-change={(e) => Actions.setType(e.target.value as EventType)}
           invalid={!!Validation.type}
           helperText={Validation.type}
         >
-          {Object.values(EventType).slice(2).map((type, i) =>
+          {Object.values(EventType).slice(2, 5).map((type, i) =>
             <ScaleDropdownSelectItem value={type} key={i}>
               {type}
             </ScaleDropdownSelectItem>)}
@@ -78,11 +78,8 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           invalid={!!Validation.status}
           helperText={Validation.status}
         >
-          {Object.values(EventStatus)
-            .slice(
-              State.type === EventType.Maintenance ? 4 : 0,
-              State.type === EventType.Maintenance ? 9 : 4
-            ).map((status, i) =>
+          {GetStatusList(State.type)
+            .map((status, i) =>
               <ScaleDropdownSelectItem value={status} key={i}>
                 {status}
               </ScaleDropdownSelectItem>)}
@@ -91,7 +88,7 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
         <ScaleTextField
           type="datetime-local"
           label="Start CET"
-          disabled={State.type !== EventType.Maintenance && IsOpenStatus(Event.Status)}
+          disabled={IsIncident(State.type) && IsOpenStatus(Event.Status)}
           value={dayjs(State.start).format(Dic.Picker)}
           onScale-input={(e) => Actions.setStart(new Date(e.target.value as string))}
           invalid={!!Validation.start}
@@ -101,7 +98,7 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
         <ScaleTextField
           type="datetime-local"
           label="(Plan) End CET"
-          disabled={!(State.type === EventType.Maintenance || !IsOpenStatus(State.status))}
+          disabled={!(!IsIncident(State.type) || !IsOpenStatus(State.status))}
           value={State.end ? dayjs(State.end).format(Dic.Picker) : null}
           onScale-input={(e) => Actions.setEnd(new Date(e.target.value as string))}
           invalid={!!Validation.end}

src/Components/Event/EventEditor.tsx

@@ -4,7 +4,7 @@ import { useStatus } from "~/Services/Status";
 import { StatusEnum } from "~/Services/Status.Entities";
 import { Models } from "~/Services/Status.Models";
 import { useAccessToken } from "../Auth/useAccessToken";
-import { EventStatus, EventType, GetEventImpact, GetStatusString, IsOpenStatus } from "./Enums";
+import { EventStatus, EventType, GetEventImpact, GetStatusString, IsIncident, IsOpenStatus } from "./Enums";
 
 /**
  * Custom hook for managing the edit form state and validation for an event.
@@ -23,7 +23,7 @@ import { EventStatus, EventType, GetEventImpact, GetStatusString, IsOpenStatus }
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function useEditForm(event: Models.IEvent) {
   const [title, _setTitle] = useState(event.Title);
@@ -60,12 +60,12 @@ export function useEditForm(event: Models.IEvent) {
       return false;
     }
 
-    if (type === EventType.Maintenance && value !== EventType.Maintenance) {
+    if (!IsIncident(type) && IsIncident(value)) {
       _setStatus(EventStatus.Analysing);
     }
 
-    if (type !== EventType.Maintenance && value === EventType.Maintenance) {
-      _setStatus(EventStatus.Modified);
+    if (IsIncident(type) && !IsIncident(value)) {
+      _setStatus(EventStatus.Planned);
     }
 
     _setType(value);
@@ -124,7 +124,7 @@ export function useEditForm(event: Models.IEvent) {
       setValStart("Start Date cannot be later than End Date.");
       err = true;
     }
-    if (value > now && type !== EventType.Maintenance) {
+    if (value > now && IsIncident(type)) {
       setValStart("Start Date cannot be in the future.");
       err = true;
     }
@@ -194,15 +194,15 @@ export function useEditForm(event: Models.IEvent) {
       body.status = StatusEnum.ImpactChanged;
     }
 
-    if (event.Type === EventType.Maintenance) {
+    if (!IsIncident(event.Type)) {
       body.start_date = start.toISOString();
     }
 
     if (end && !isNaN(end.getTime())) {
       body.end_date = end.toISOString();
     }
 
-    if (!IsOpenStatus(event.Status) && event.Type !== EventType.Maintenance) {
+    if (!IsOpenStatus(event.Status) && IsIncident(event.Type)) {
       if (event.Status !== status) {
         body.end_date = undefined;
         body.status = StatusEnum.Reopened;

src/Components/Event/useEditForm.ts

@@ -15,7 +15,7 @@ interface IEventItem {
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function EventItem({ Prev, Curr }: IEventItem) {
   const isBegin = useMemo(() => {
@@ -68,11 +68,25 @@ export function EventItem({ Prev, Curr }: IEventItem) {
 
   switch (Curr.Status) {
     case EventStatus.Analysing:
+      color = "red";
+      break;
+
     case EventStatus.Fixing:
+      color = "orange";
+      break;
+
     case EventStatus.Observing:
       color = "yellow";
       break;
 
+    case EventStatus.Planned:
+      color = "cyan";
+      break;
+
+    case EventStatus.Active:
+      color = "teal";
+      break;
+
     case EventStatus.Modified:
     case EventStatus.InProgress:
       color = "violet";

src/Components/History/EventItem.tsx

@@ -5,12 +5,12 @@ import { chain } from "lodash";
 import { useEffect, useRef } from "react";
 import { Dic } from "~/Helpers/Entities";
 import { useStatus } from "~/Services/Status";
-import { EventType, IsOpenStatus } from "../Event/Enums";
+import { EventType, IsIncident, IsOpenStatus } from "../Event/Enums";
 
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function EventGrid() {
   const { DB } = useStatus();
@@ -87,7 +87,7 @@ export function EventGrid() {
         }
       })
       .filter(x => {
-        if (x.Type !== EventType.Maintenance && x.End) {
+        if (IsIncident(x.Type) && x.End) {
           return false;
         }
 
@@ -107,9 +107,11 @@ export function EventGrid() {
           case EventType.Outage:
             tag = { content: EventType.Outage, color: "red" };
             break;
-          default:
+          case EventType.Maintenance:
             tag = { content: EventType.Maintenance, color: "cyan" };
             break;
+          default:
+            tag = { content: EventType.Information, color: "standard" };
         }
 
         return [

src/Components/Home/EventGrid.tsx

@@ -10,7 +10,7 @@ interface IIndicator {
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function Indicator({ Type, Size, Class }: IIndicator) {
   const scaleIcon = "scale-icon-";
@@ -28,6 +28,8 @@ export function Indicator({ Type, Size, Class }: IIndicator) {
         return "alert-warning";
       case EventType.Outage:
         return "action-circle-close";
+      case EventType.Information:
+        return "alert-information";
       default:
         return "action-success";
     }
@@ -43,6 +45,8 @@ export function Indicator({ Type, Size, Class }: IIndicator) {
         return `${text}warning)`;
       case EventType.Outage:
         return `${text}danger)`;
+      case EventType.Information:
+        return `${text}disabled)`;
       default:
         return `${text}success)`;
     }

src/Components/Home/Indicator.ts

@@ -4,7 +4,7 @@ import { chain } from "lodash";
 import { useEffect, useState } from "react";
 import { useStatus } from "~/Services/Status";
 import { Models } from "~/Services/Status.Models";
-import { EventType, IsOpenStatus } from "../Event/Enums";
+import { EventType, IsIncident, IsOpenStatus } from "../Event/Enums";
 import { Indicator } from "./Indicator";
 import "./ServiceItem.css";
 
@@ -15,7 +15,7 @@ interface IServiceItem {
 /**
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.2.0
  */
 export function ServiceItem({ RegionService }: IServiceItem) {
   const { DB } = useStatus();
@@ -27,7 +27,7 @@ export function ServiceItem({ RegionService }: IServiceItem) {
   useEffect(() => {
     const res = chain([...RegionService.Events])
       .filter(x => {
-        if (x.Type !== EventType.Maintenance && x.End) {
+        if (IsIncident(x.Type) && x.End) {
           return false;
         }