[feat] Add EventExtract component with multi-region service extraction and form enhancements (#174)

Author: Aloento

package.json

@@ -14,7 +14,7 @@
     "@fluentui/react-components": "^9.64.0",
     "@telekom/scale-components": "3.0.0-beta.155",
     "@telekom/scale-components-react": "3.0.0-beta.155",
-    "ahooks": "^3.8.4",
+    "ahooks": "^3.8.5",
     "dayjs": "^1.11.13",
     "idb": "^8.0.3",
     "jwt-decode": "^4.0.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.7",
+    "@tailwindcss/postcss": "^4.1.8",
     "@testing-library/react": "^16.3.0",
-    "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.18",
-    "@types/react": "^19.1.4",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.24",
+    "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
     "@types/react-helmet": "^6.1.11",
     "autoprefixer": "^10.4.21",
     "core-js": "^3.42.0",
-    "eslint": "^9.26.0",
-    "globals": "^16.1.0",
-    "postcss": "^8.5.3",
+    "eslint": "^9.27.0",
+    "globals": "^16.2.0",
+    "postcss": "^8.5.4",
     "react-refresh": "^0.17.0",
     "tailwindcss": "3.4.17",
     "tailwindcss-scoped-preflight": "^3.4.12",
-    "typescript-eslint": "^8.32.1"
+    "typescript-eslint": "^8.33.0"
   },
   "packageManager": "[email protected]"
 }

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { Indicator } from "../Home/Indicator";
 import { EventStatus, EventType } from "./Enums";
 import { EventAffected } from "./EventAffected";
 import { EventEditor } from "./EventEditor";
+import { EventExtract } from "./EventExtract";
 
 /**
  * Represents an EventCard component that displays detailed information about a specific event.
@@ -37,7 +38,13 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
         </div>
 
         <Authorized>
-          <EventEditor Event={Event} />
+          <div className="flex gap-x-3">
+            {
+              Event.RegionServices.size > 1 &&
+              <EventExtract Event={Event} />
+            }
+            <EventEditor Event={Event} />
+          </div>
         </Authorized>
       </div>
 

src/Components/Event/EventCard.tsx

@@ -0,0 +1,95 @@
+import { ScaleButton, ScaleHelperText, ScaleIconActionExport, ScaleModal, ScaleTable } from "@telekom/scale-components-react";
+import { useBoolean } from "ahooks";
+import { chain } from "lodash";
+import { Models } from "~/Services/Status.Models";
+import { useEventExtract } from "./useEventExtract";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function EventExtract({ Event }: { Event: Models.IEvent }) {
+  const { services, setServices, valServices, OnSubmit, Loading } = useEventExtract(Event);
+  const [open, { setTrue, setFalse }] = useBoolean();
+
+  return <>
+    <ScaleButton onClick={setTrue} size="small" variant="secondary">
+      <ScaleIconActionExport />
+      Extract
+    </ScaleButton>
+
+    <ScaleModal
+      heading="Extract Event"
+      opened={open}
+      omitCloseButton
+      size="small"
+      class="absolute"
+      onScale-before-close={(e) => e.preventDefault()}
+    >
+      <form
+        className="flex flex-col gap-y-6"
+        autoComplete="off"
+        onSubmit={(e) => {
+          e.preventDefault();
+          OnSubmit().then((ok) => ok && setFalse());
+        }}>
+        <ScaleTable>
+          <div className="max-h-96 overflow-auto">
+            <table>
+              <thead className="sticky">
+                <tr>
+                  <th />
+                  <th>Service Name</th>
+                  <th>Region</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {chain([...Event.RegionServices])
+                  .orderBy(x => x.Service.Name)
+                  .map((x, i) =>
+                    <tr key={i}>
+                      <td>
+                        <input
+                          type="checkbox"
+                          onChange={(e) => {
+                            const checked = e.target.checked;
+                            setServices((curr) => {
+                              if (checked) {
+                                return [...curr, x];
+                              }
+
+                              return curr.filter(s => s !== x);
+                            })
+                          }}
+                        />
+                      </td>
+
+                      <td>{x.Service.Name}</td>
+                      <td>{x.Region.Name}</td>
+                    </tr>)
+                  .value()}
+              </tbody>
+            </table>
+          </div>
+
+          <ScaleHelperText
+            variant={valServices ? "danger" : "informational"}
+            helperText={valServices || `Selected ${services.length} services`}
+          />
+        </ScaleTable>
+
+        <div className="flex gap-x-3 self-end">
+          <ScaleButton onClick={setFalse} variant="secondary" type="button">
+            Cancel
+          </ScaleButton>
+
+          <ScaleButton type="submit" disabled={Loading}>
+            Submit
+          </ScaleButton>
+        </div>
+      </form>
+    </ScaleModal>
+  </>;
+}

src/Components/Event/EventExtract.tsx

@@ -0,0 +1,75 @@
+import { useRequest } from "ahooks";
+import { useState } from "react";
+import { useStatus } from "~/Services/Status";
+import { Models } from "~/Services/Status.Models";
+import { useAccessToken } from "../Auth/useAccessToken";
+import { useRouter } from "../Router";
+
+/**
+ * @author Aloento
+ * @since 1.0.0
+ * @version 0.1.0
+ */
+export function useEventExtract(event: Models.IEvent) {
+  const [services, _setServices] = useState<Models.IRegionService[]>([]);
+  const [valServices, setValServices] = useState<string>();
+  function setServices(action: (curr: Models.IRegionService[]) => Models.IRegionService[] = (s) => s) {
+    const updated = action(services);
+    let err: boolean = false;
+
+    if (!updated || !updated.length) {
+      setValServices("At least one service is required.");
+      err = true;
+    }
+
+    _setServices(updated);
+    !err && setValServices(undefined);
+
+    return !err;
+  }
+
+  const getToken = useAccessToken();
+  const { Nav } = useRouter();
+  const { Refresh } = useStatus();
+
+  const { runAsync, loading } = useRequest(async () => {
+    if (!setServices()) {
+      return false;
+    }
+
+    const url = process.env.SD_BACKEND_URL!;
+
+    const body: Record<string, any> = {
+      components: services.map(s => s.Id),
+    }
+
+    const raw = await fetch(`${url}/v2/incidents/${event.Id}/extract`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${getToken()}`
+      },
+      body: JSON.stringify(body)
+    });
+
+    const res = await raw.json();
+    const id = res.id;
+
+    if (id) {
+      await Refresh();
+      Nav(`/Event/${id}`);
+    }
+
+    return true;
+  }, {
+    manual: true
+  });
+
+  return {
+    services,
+    setServices,
+    valServices,
+    OnSubmit: runAsync,
+    Loading: loading
+  }
+}

src/Components/Event/useEventExtract.ts

@@ -150,7 +150,7 @@ export function useNewForm() {
   const getToken = useAccessToken();
 
   const { runAsync, loading } = useRequest(async () => {
-    if (![setTitle(), setType(), setDescription(), setStart, setEnd(), setServices()].every(Boolean)) {
+    if (![setTitle(), setType(), setDescription(), setStart(), setEnd(), setServices()].every(Boolean)) {
       return;
     }
 

src/Components/New/useNewForm.ts

@@ -36,6 +36,7 @@ const db = new DB(EmptyDB);
 interface IContext {
   DB: IStatusContext;
   Update: (data?: IStatusContext) => void;
+  Refresh: () => Promise<unknown>;
 }
 
 const CTX = createContext<IContext>({} as IContext);
@@ -138,6 +139,6 @@ export function StatusContext({ children }: { children: JSX.Element }) {
   }
 
   return (
-    <CTX.Provider value={{ DB: ins, Update: update }}>{children}</CTX.Provider>
+    <CTX.Provider value={{ DB: ins, Update: update, Refresh: runAsync }}>{children}</CTX.Provider>
   );
 }