feat: add new pages for Alert Description, Root Cause, and Remediatio…

…n with routing and breadcrumbs
OneUptime · Jan 17, 2025 · 3d34118 · 3d34118
1 parent 69a3a89
commit 3d34118
Show file tree

Hide file tree

Showing 8 changed files with 295 additions and 0 deletions.
diff --git a/Dashboard/src/Pages/Alerts/View/Description.tsx b/Dashboard/src/Pages/Alerts/View/Description.tsx
@@ -0,0 +1,57 @@
+import PageComponentProps from "../../PageComponentProps";
+import ObjectID from "Common/Types/ObjectID";
+import Navigation from "Common/UI/Utils/Navigation";
+import Alert from "Common/Models/DatabaseModels/Alert";
+import React, { FunctionComponent, ReactElement } from "react";
+import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail";
+import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
+import FieldType from "Common/UI/Components/Types/FieldType";
+
+const AlertDelete: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
+
+  return (
+    <CardModelDetail
+      name="Remediation Notes"
+      cardProps={{
+        title: "Remediation Notes",
+        description:
+          "What steps should be taken to resolve this alert? Here are the remediation notes.",
+      }}
+      editButtonText="Edit Remediation Notes"
+      isEditable={true}
+      formFields={[
+        {
+          field: {
+            remediationNotes: true,
+          },
+          title: "Remediation Notes",
+
+          fieldType: FormFieldSchemaType.Markdown,
+          required: true,
+          placeholder: "Remediation Notes",
+        },
+      ]}
+      modelDetailProps={{
+        showDetailsInNumberOfColumns: 1,
+        modelType: Alert,
+        id: "model-detail-alert-remediation-notes",
+        fields: [
+          {
+            field: {
+              remediationNotes: true,
+            },
+            title: "Remediation Notes",
+            placeholder: "No remediation notes added for this alert.",
+            fieldType: FieldType.Markdown,
+          },
+        ],
+        modelId: modelId,
+      }}
+    />
+  );
+};
+
+export default AlertDelete;
diff --git a/Dashboard/src/Pages/Alerts/View/Remediation.tsx b/Dashboard/src/Pages/Alerts/View/Remediation.tsx
@@ -0,0 +1,57 @@
+import PageComponentProps from "../../PageComponentProps";
+import ObjectID from "Common/Types/ObjectID";
+import Navigation from "Common/UI/Utils/Navigation";
+import Alert from "Common/Models/DatabaseModels/Alert";
+import React, { FunctionComponent, ReactElement } from "react";
+import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail";
+import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
+import FieldType from "Common/UI/Components/Types/FieldType";
+
+const AlertDelete: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
+
+  return (
+    <CardModelDetail
+      name="Remediation Notes"
+      cardProps={{
+        title: "Remediation Notes",
+        description:
+          "What steps should be taken to resolve this alert? Here are the remediation notes.",
+      }}
+      editButtonText="Edit Remediation Notes"
+      isEditable={true}
+      formFields={[
+        {
+          field: {
+            remediationNotes: true,
+          },
+          title: "Remediation Notes",
+
+          fieldType: FormFieldSchemaType.Markdown,
+          required: true,
+          placeholder: "Remediation Notes",
+        },
+      ]}
+      modelDetailProps={{
+        showDetailsInNumberOfColumns: 1,
+        modelType: Alert,
+        id: "model-detail-alert-remediation-notes",
+        fields: [
+          {
+            field: {
+              remediationNotes: true,
+            },
+            title: "Remediation Notes",
+            placeholder: "No remediation notes added for this alert.",
+            fieldType: FieldType.Markdown,
+          },
+        ],
+        modelId: modelId,
+      }}
+    />
+  );
+};
+
+export default AlertDelete;
diff --git a/Dashboard/src/Pages/Alerts/View/RootCause.tsx b/Dashboard/src/Pages/Alerts/View/RootCause.tsx
@@ -0,0 +1,43 @@
+import PageComponentProps from "../../PageComponentProps";
+import ObjectID from "Common/Types/ObjectID";
+import Navigation from "Common/UI/Utils/Navigation";
+import Alert from "Common/Models/DatabaseModels/Alert";
+import React, { FunctionComponent, ReactElement } from "react";
+import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail";
+import FieldType from "Common/UI/Components/Types/FieldType";
+
+const AlertDelete: FunctionComponent<
+  PageComponentProps
+> = (): ReactElement => {
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
+
+  return (
+    <CardModelDetail
+      name="Root Cause"
+      cardProps={{
+        title: "Root Cause",
+        description:
+          "Why did this alert happen? Here is the root cause of this alert.",
+      }}
+      isEditable={true}
+      modelDetailProps={{
+        showDetailsInNumberOfColumns: 1,
+        modelType: Alert,
+        id: "model-detail-alert-root-cause",
+        fields: [
+          {
+            field: {
+              rootCause: true,
+            },
+            title: "",
+            placeholder: "No root cause identified for this alert.",
+            fieldType: FieldType.Markdown,
+          },
+        ],
+        modelId: modelId,
+      }}
+    />
+  );
+};
+
+export default AlertDelete;
diff --git a/Dashboard/src/Pages/Alerts/View/SideMenu.tsx b/Dashboard/src/Pages/Alerts/View/SideMenu.tsx
@@ -28,6 +28,41 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
           }}
           icon={IconProp.Info}
         />
+
+        <SideMenuItem
+          link={{
+            title: "Description",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.ALERT_VIEW_DESCRIPTION] as Route,
+              { modelId: props.modelId },
+            ),
+          }}
+          icon={IconProp.Chat}
+        />
+
+        <SideMenuItem
+          link={{
+            title: "Root Cause",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.ALERT_VIEW_ROOT_CAUSE] as Route,
+              { modelId: props.modelId },
+            ),
+          }}
+          icon={IconProp.Cube}
+        />
+
+        <SideMenuItem
+          link={{
+            title: "Remediation",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.ALERT_VIEW_REMEDIATION] as Route,
+              { modelId: props.modelId },
+            ),
+          }}
+          icon={IconProp.Wrench}
+        />
+
+
         <SideMenuItem
           link={{
             title: "State Timeline",

diff --git a/Dashboard/src/Routes/AlertRoutes.tsx b/Dashboard/src/Routes/AlertRoutes.tsx
@@ -54,6 +54,27 @@ const AlertViewOwner: LazyExoticComponent<FunctionComponent<ComponentProps>> =
     return import("../Pages/Alerts/View/Owners");
   });
 
+
+
+  const AlertViewRootCause: LazyExoticComponent<
+  FunctionComponent<ComponentProps>
+> = lazy(() => {
+  return import("../Pages/Alerts/View/RootCause");
+});
+
+const AlertViewRemediation: LazyExoticComponent<
+  FunctionComponent<ComponentProps>
+> = lazy(() => {
+  return import("../Pages/Alerts/View/Remediation");
+}
+);
+
+const AlertDescription: LazyExoticComponent<
+  FunctionComponent<ComponentProps>
+> = lazy(() => {
+  return import("../Pages/Alerts/View/Description");
+});
+
 const AlertsRoutes: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
@@ -112,6 +133,43 @@ const AlertsRoutes: FunctionComponent<ComponentProps> = (
           }
         />
 
+        <PageRoute
+          path={RouteUtil.getLastPathForKey(PageMap.ALERT_VIEW_DESCRIPTION)}
+          element={
+            <Suspense fallback={Loader}>
+              <AlertDescription
+                {...props}
+                pageRoute={RouteMap[PageMap.ALERT_VIEW_DESCRIPTION] as Route}
+              />
+            </Suspense>
+          }
+        />
+
+        <PageRoute
+          path={RouteUtil.getLastPathForKey(PageMap.ALERT_VIEW_ROOT_CAUSE)}
+          element={
+            <Suspense fallback={Loader}>
+              <AlertViewRootCause
+                {...props}
+                pageRoute={RouteMap[PageMap.ALERT_VIEW_ROOT_CAUSE] as Route}
+              />
+            </Suspense>
+          }
+        />
+
+        <PageRoute
+          path={RouteUtil.getLastPathForKey(PageMap.ALERT_VIEW_REMEDIATION)}
+          element={
+            <Suspense fallback={Loader}>
+              <AlertViewRemediation
+                {...props}
+                pageRoute={RouteMap[PageMap.ALERT_VIEW_REMEDIATION] as Route}
+              />
+            </Suspense>
+          }
+
+        />
+
         <PageRoute
           path={RouteUtil.getLastPathForKey(PageMap.ALERT_VIEW_STATE_TIMELINE)}
           element={

diff --git a/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts b/Dashboard/src/Utils/Breadcrumbs/AlertBreadcrumbs.ts
@@ -46,6 +46,27 @@ export function getAlertsBreadcrumbs(path: string): Array<Link> | undefined {
       "View Alert",
       "Delete Alert",
     ]),
+    ...BuildBreadcrumbLinksByTitles(PageMap.ALERT_VIEW_ROOT_CAUSE, [
+      "Project",
+      "Alerts",
+      "View Alert",
+      "Root Cause",
+    ]),
+    ...BuildBreadcrumbLinksByTitles(PageMap.ALERT_VIEW_REMEDIATION, [
+      "Project",
+      "Alerts",
+      "View Alert",
+      "Remediation",
+    ]),
+
+    ...BuildBreadcrumbLinksByTitles(PageMap.ALERT_VIEW_DESCRIPTION, [
+      "Project",
+      "Alerts",
+      "Description",
+    ]),
+
+
+
   };
   return breadcrumpLinksMap[path];
 }
diff --git a/Dashboard/src/Utils/PageMap.ts b/Dashboard/src/Utils/PageMap.ts
@@ -91,6 +91,9 @@ enum PageMap {
   ALERT_INTERNAL_NOTE = "ALERT_INTERNAL_NOTE",
   ALERT_VIEW_CUSTOM_FIELDS = "ALERT_VIEW_CUSTOM_FIELDS",
   ALERT_VIEW_OWNERS = "ALERT_VIEW_OWNERS",
+  ALERT_VIEW_DESCRIPTION = "ALERT_VIEW_DESCRIPTION",
+  ALERT_VIEW_ROOT_CAUSE = "ALERT_VIEW_ROOT_CAUSE",
+  ALERT_VIEW_REMEDIATION = "ALERT_VIEW_REMEDIATION",
 
   SCHEDULED_MAINTENANCE_EVENTS_ROOT = "SCHEDULED_MAINTENANCE_EVENTS_ROOT",
   SCHEDULED_MAINTENANCE_EVENTS = "SCHEDULED_MAINTENANCE_EVENTS",

diff --git a/Dashboard/src/Utils/RouteMap.ts b/Dashboard/src/Utils/RouteMap.ts
@@ -156,6 +156,9 @@ export const AlertsRoutePath: Dictionary<string> = {
   [PageMap.ALERT_VIEW_STATE_TIMELINE]: `${RouteParams.ModelID}/state-timeline`,
   [PageMap.ALERT_VIEW_OWNERS]: `${RouteParams.ModelID}/owners`,
   [PageMap.ALERT_VIEW_DELETE]: `${RouteParams.ModelID}/delete`,
+  [PageMap.ALERT_VIEW_DESCRIPTION]: `${RouteParams.ModelID}/description`,
+  [PageMap.ALERT_VIEW_ROOT_CAUSE]: `${RouteParams.ModelID}/root-cause`,
+  [PageMap.ALERT_VIEW_REMEDIATION]: `${RouteParams.ModelID}/remediation`,
   [PageMap.ALERT_VIEW_CUSTOM_FIELDS]: `${RouteParams.ModelID}/custom-fields`,
   [PageMap.ALERT_INTERNAL_NOTE]: `${RouteParams.ModelID}/internal-notes`,
 };
@@ -429,6 +432,24 @@ const RouteMap: Dictionary<Route> = {
     }`,
   ),
 
+  [PageMap.ALERT_VIEW_DESCRIPTION]: new Route(
+    `/dashboard/${RouteParams.ProjectID}/alerts/${
+      AlertsRoutePath[PageMap.ALERT_VIEW_DESCRIPTION]
+    }`,
+  ),
+
+  [PageMap.ALERT_VIEW_ROOT_CAUSE]: new Route(
+    `/dashboard/${RouteParams.ProjectID}/alerts/${
+      AlertsRoutePath[PageMap.ALERT_VIEW_ROOT_CAUSE]
+    }`,
+  ),
+
+  [PageMap.ALERT_VIEW_REMEDIATION]: new Route(
+    `/dashboard/${RouteParams.ProjectID}/alerts/${
+      AlertsRoutePath[PageMap.ALERT_VIEW_REMEDIATION]
+    }`,
+  ),
+
   [PageMap.ALERT_VIEW_CUSTOM_FIELDS]: new Route(
     `/dashboard/${RouteParams.ProjectID}/alerts/${
       AlertsRoutePath[PageMap.ALERT_VIEW_CUSTOM_FIELDS]