From 722fe30c8fe9bff90d2cc322443c279d5eb3279c Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 27 Jan 2025 17:37:08 +0000
Subject: [PATCH] feat: implement FetchMonitors, FetchMonitorStatuses, and
 FetchOnCallPolicies components; update Field interface for summary element
 handling

---
 .../1737997557974-MigrationName.ts            |  19 ++-
 .../Postgres/SchemaMigrations/Index.ts        |   2 +-
 Common/UI/Components/Forms/BasicForm.tsx      |   6 +-
 Common/UI/Components/Forms/FormSummary.tsx    |  77 +++++-----
 Common/UI/Components/Forms/Types/Field.ts     |   2 +-
 .../FetchIncidentSeverity.tsx                 |  71 +++++++++
 .../IncidentSeveritiesElement.tsx             |  31 ++++
 .../IncidentSeverityElement.tsx               |  23 +++
 .../src/Components/Label/FetchLabels.tsx      |  89 +++++------
 .../src/Components/Monitor/FetchMonitors.tsx  |  71 +++++++++
 .../MonitorStatus/FetchMonitorStatuses.tsx    |  71 +++++++++
 .../OnCallPolicy/FetchOnCallPolicies.tsx      |  71 +++++++++
 Dashboard/src/Components/Team/FetchTeams.tsx  |  93 ++++++------
 Dashboard/src/Components/User/FetchUsers.tsx  |  91 +++++------
 Dashboard/src/Pages/Incidents/Create.tsx      | 143 +++++++++++++++++-
 15 files changed, 659 insertions(+), 201 deletions(-)
 create mode 100644 Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx
 create mode 100644 Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx
 create mode 100644 Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx
 create mode 100644 Dashboard/src/Components/Monitor/FetchMonitors.tsx
 create mode 100644 Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx
 create mode 100644 Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx

diff --git a/Common/Server/Infrastructure/Postgres/SchemaMigrations/1737997557974-MigrationName.ts b/Common/Server/Infrastructure/Postgres/SchemaMigrations/1737997557974-MigrationName.ts
index 8cb65ca9456..5b86e1ab110 100644
--- a/Common/Server/Infrastructure/Postgres/SchemaMigrations/1737997557974-MigrationName.ts
+++ b/Common/Server/Infrastructure/Postgres/SchemaMigrations/1737997557974-MigrationName.ts
@@ -1,14 +1,17 @@
 import { MigrationInterface, QueryRunner } from "typeorm";
 
 export class MigrationName1737997557974 implements MigrationInterface {
-    public name = 'MigrationName1737997557974'
+  public name = "MigrationName1737997557974";
 
-    public async up(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`CREATE INDEX "IDX_4d5e62631b2b63aaecb00950ef" ON "MonitorTest" ("isInQueue") `);
-    }
-
-    public async down(queryRunner: QueryRunner): Promise<void> {
-        await queryRunner.query(`DROP INDEX "public"."IDX_4d5e62631b2b63aaecb00950ef"`);
-    }
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE INDEX "IDX_4d5e62631b2b63aaecb00950ef" ON "MonitorTest" ("isInQueue") `,
+    );
+  }
 
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `DROP INDEX "public"."IDX_4d5e62631b2b63aaecb00950ef"`,
+    );
+  }
 }
diff --git a/Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts b/Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts
index 6636fc3d31e..fdb3402d8d0 100644
--- a/Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts
+++ b/Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts
@@ -201,5 +201,5 @@ export default [
   MigrationName1737141420441,
   MigrationName1737713529424,
   MigrationName1737715240684,
-  MigrationName1737997557974
+  MigrationName1737997557974,
 ];
diff --git a/Common/UI/Components/Forms/BasicForm.tsx b/Common/UI/Components/Forms/BasicForm.tsx
index e6543929368..73539771749 100644
--- a/Common/UI/Components/Forms/BasicForm.tsx
+++ b/Common/UI/Components/Forms/BasicForm.tsx
@@ -37,7 +37,6 @@ import React, {
 } from "react";
 import useAsyncEffect from "use-async-effect";
 
-
 export type FormProps<T> = FormikProps<T>;
 export type FormErrors<T> = FormikErrors<T>;
 
@@ -633,7 +632,10 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                     {/* If Summary, show Model detail  */}
 
                     {currentFormStepId === "summary" && (
-                        <FormSummary formValues={refCurrentValue.current} formFields={formFields} />
+                      <FormSummary
+                        formValues={refCurrentValue.current}
+                        formFields={formFields}
+                      />
                     )}
                   </div>
                 </div>
diff --git a/Common/UI/Components/Forms/FormSummary.tsx b/Common/UI/Components/Forms/FormSummary.tsx
index 2f6da5d3962..fe845f64bbb 100644
--- a/Common/UI/Components/Forms/FormSummary.tsx
+++ b/Common/UI/Components/Forms/FormSummary.tsx
@@ -10,53 +10,50 @@ import Field from "./Types/Field";
 import FieldType from "../Types/FieldType";
 
 export interface ComponentProps<T> {
-    formValues: FormValues<T>;
-    formFields: Fields<T>;
+  formValues: FormValues<T>;
+  formFields: Fields<T>;
 }
 
 const FormSummary: <T extends GenericObject>(
-    props: ComponentProps<T>,
+  props: ComponentProps<T>,
 ) => ReactElement = <T extends GenericObject>(
-    props: ComponentProps<T>,
+  props: ComponentProps<T>,
 ): ReactElement => {
-        const { formValues, formFields } = props;
+  const { formValues, formFields } = props;
 
-        const getDetailForFormFields: <T extends GenericObject>(
-            formValues: FormValues<T>,
-            formFields: Fields<T>,
-        ) => ReactElement = <T extends GenericObject>(
-            formValues: FormValues<T>,
-            formFields: Fields<T>,
-        ): ReactElement => {
-                return (
-                    <Detail
-                        item={formValues as T}
-                        fields={
-                            formFields.map((field: Field<T>) => {
-                                const detailField: DetailField<T> = {
-                                    title: field.title || "",
-                                    fieldType: field.getSummaryElement ?
-                                        FieldType.Element :
-                                        FormFieldSchemaTypeUtil.toFieldType(
-                                            field.fieldType || FormFieldSchemaType.Text,
-                                        ),
-                                    description: field.description || "",
-                                    getElement: field.getSummaryElement as any,
-                                    sideLink: field.sideLink,
-                                    key: (Object.keys(
-                                        field.field || {},
-                                    )[0]?.toString() || "") as keyof T,
-                                };
-                                return detailField;
-                            }) as DetailField<GenericObject>[]
-                        }
-                    />
-
-                );
+  const getDetailForFormFields: <T extends GenericObject>(
+    formValues: FormValues<T>,
+    formFields: Fields<T>,
+  ) => ReactElement = <T extends GenericObject>(
+    formValues: FormValues<T>,
+    formFields: Fields<T>,
+  ): ReactElement => {
+    return (
+      <Detail
+        item={formValues as T}
+        fields={
+          formFields.map((field: Field<T>) => {
+            const detailField: DetailField<T> = {
+              title: field.title || "",
+              fieldType: field.getSummaryElement
+                ? FieldType.Element
+                : FormFieldSchemaTypeUtil.toFieldType(
+                    field.fieldType || FormFieldSchemaType.Text,
+                  ),
+              description: field.description || "",
+              getElement: field.getSummaryElement as any,
+              sideLink: field.sideLink,
+              key: (Object.keys(field.field || {})[0]?.toString() ||
+                "") as keyof T,
             };
+            return detailField;
+          }) as DetailField<GenericObject>[]
+        }
+      />
+    );
+  };
 
-        return getDetailForFormFields(formValues, formFields);
-    };
+  return getDetailForFormFields(formValues, formFields);
+};
 
 export default FormSummary;
-
diff --git a/Common/UI/Components/Forms/Types/Field.ts b/Common/UI/Components/Forms/Types/Field.ts
index 806d48af099..fdfd48e2e1d 100644
--- a/Common/UI/Components/Forms/Types/Field.ts
+++ b/Common/UI/Components/Forms/Types/Field.ts
@@ -103,5 +103,5 @@ export default interface Field<TEntity> {
 
   hideOptionalLabel?: boolean | undefined;
 
-  getSummaryElement?: (item: TEntity) => ReactElement | undefined;
+  getSummaryElement?: (item: FormValues<TEntity>) => ReactElement | undefined;
 }
diff --git a/Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx b/Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx
new file mode 100644
index 00000000000..68bfdcdd16a
--- /dev/null
+++ b/Dashboard/src/Components/IncidentSeverity/FetchIncidentSeverity.tsx
@@ -0,0 +1,71 @@
+import IncidentSeverity from "Common/Models/DatabaseModels/IncidentSeverity";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import IncidentSeveritiesElement from "./IncidentSeveritiesElement";
+
+export interface ComponentProps {
+  onCallDutyPolicyIds: Array<ObjectID>;
+}
+
+const FetchIncidentSeverities: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [incidentSeverities, setIncidentSeverities] = React.useState<Array<IncidentSeverity>>([]);
+
+  const fetchIncidentSeverities = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const incidentSeverities: ListResult<IncidentSeverity> = await ModelAPI.getList({
+        modelType: IncidentSeverity,
+        query: {
+          _id: new Includes(props.onCallDutyPolicyIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
+
+      setIncidentSeverities(incidentSeverities.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchIncidentSeverities().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
+
+  return <IncidentSeveritiesElement incidentSeverities={incidentSeverities} />;
+};
+
+export default FetchIncidentSeverities;
diff --git a/Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx b/Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx
new file mode 100644
index 00000000000..f2ef8aa2257
--- /dev/null
+++ b/Dashboard/src/Components/IncidentSeverity/IncidentSeveritiesElement.tsx
@@ -0,0 +1,31 @@
+import IncidentSeverityElement from "./IncidentSeverityElement";
+import TableColumnListComponent from "Common/UI/Components/TableColumnList/TableColumnListComponent";
+import IncidentSeverity from "Common/Models/DatabaseModels/IncidentSeverity";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  incidentSeverities: Array<IncidentSeverity>;
+  onNavigateComplete?: (() => void) | undefined;
+}
+
+const IncidentSeveritiesElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <TableColumnListComponent
+      items={props.incidentSeverities}
+      moreText="more Incident Severities"
+      getEachElement={(incidentSeverity: IncidentSeverity) => {
+        return (
+          <IncidentSeverityElement
+            incidentSeverity={incidentSeverity}
+            onNavigateComplete={props.onNavigateComplete}
+          />
+        );
+      }}
+      noItemsMessage="No Incident Severities."
+    />
+  );
+};
+
+export default IncidentSeveritiesElement;
diff --git a/Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx b/Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx
new file mode 100644
index 00000000000..dca0db075bf
--- /dev/null
+++ b/Dashboard/src/Components/IncidentSeverity/IncidentSeverityElement.tsx
@@ -0,0 +1,23 @@
+import IncidentSeverity from "Common/Models/DatabaseModels/IncidentSeverity";
+import React, { FunctionComponent, ReactElement } from "react";
+import { Black } from "Common/Types/BrandColors";
+import Pill from "Common/UI/Components/Pill/Pill";
+
+export interface ComponentProps {
+  incidentSeverity: IncidentSeverity;
+  onNavigateComplete?: (() => void) | undefined;
+  showIcon?: boolean | undefined;
+}
+
+const IncidentSeverityElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+    return (
+        <Pill
+          color={props.incidentSeverity.color || Black}
+          text={props.incidentSeverity.name || "Unknown"}
+        />
+      );
+};
+
+export default IncidentSeverityElement;
diff --git a/Dashboard/src/Components/Label/FetchLabels.tsx b/Dashboard/src/Components/Label/FetchLabels.tsx
index 967feca7c4d..24bee506f07 100644
--- a/Dashboard/src/Components/Label/FetchLabels.tsx
+++ b/Dashboard/src/Components/Label/FetchLabels.tsx
@@ -18,62 +18,55 @@ export interface ComponentProps {
 const FetchLabels: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [labels, setLabels] = React.useState<Array<Label>>([]);
 
-    const [isLoading, setIsLoading] = React.useState<boolean>(true);
-    const [error, setError] = React.useState<string>("");
-    const [labels, setLabels] = React.useState<Array<Label>>([]);
+  const fetchLabels = async () => {
+    setIsLoading(true);
+    setError("");
 
+    try {
+      const labels: ListResult<Label> = await ModelAPI.getList({
+        modelType: Label,
+        query: {
+          _id: new Includes(props.labelIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          color: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
 
-    const fetchLabels = async () => {
-        setIsLoading(true);
-        setError("");
-
-        try{
-            const labels: ListResult<Label> = await ModelAPI.getList({
-                modelType: Label,
-                query: {
-                    _id: new Includes(props.labelIds),
-                },
-                skip: 0, 
-                limit: LIMIT_PER_PROJECT,
-                select: {
-                    name: true, 
-                    color: true, 
-                    _id: true
-                },
-                sort: {
-                    name: SortOrder.Ascending
-                }
-            });
-
-            setLabels(labels.data);
-        
-        }catch(err){
-            setError(API.getFriendlyMessage(err));
-        }
-
-        setIsLoading(false);
-    };
+      setLabels(labels.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
 
-    useEffect(() => {
-        fetchLabels().catch((err) => {
-            setError(API.getFriendlyMessage(err));
-        });
-       
-    }, []);
+    setIsLoading(false);
+  };
 
-    if(error){
-        return <ErrorMessage message={error} />;
-    }
+  useEffect(() => {
+    fetchLabels().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
 
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
 
-    if(isLoading){
-        return <ComponentLoader />;
-    }
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
 
-  return (
-    <LabelsElement labels={labels} />
-  );
+  return <LabelsElement labels={labels} />;
 };
 
 export default FetchLabels;
diff --git a/Dashboard/src/Components/Monitor/FetchMonitors.tsx b/Dashboard/src/Components/Monitor/FetchMonitors.tsx
new file mode 100644
index 00000000000..fa35a897e7e
--- /dev/null
+++ b/Dashboard/src/Components/Monitor/FetchMonitors.tsx
@@ -0,0 +1,71 @@
+import Monitor from "Common/Models/DatabaseModels/Monitor";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import MonitorsElement from "./Monitors";
+
+export interface ComponentProps {
+  monitorIds: Array<ObjectID>;
+}
+
+const FetchMonitors: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [monitor, setMonitor] = React.useState<Array<Monitor>>([]);
+
+  const fetchMonitor = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const monitor: ListResult<Monitor> = await ModelAPI.getList({
+        modelType: Monitor,
+        query: {
+          _id: new Includes(props.monitorIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
+
+      setMonitor(monitor.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchMonitor().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
+
+  return <MonitorsElement monitors={monitor} />;
+};
+
+export default FetchMonitors;
diff --git a/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx b/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx
new file mode 100644
index 00000000000..810a3812ab3
--- /dev/null
+++ b/Dashboard/src/Components/MonitorStatus/FetchMonitorStatuses.tsx
@@ -0,0 +1,71 @@
+import MonitorStatus from "Common/Models/DatabaseModels/MonitorStatus";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import MonitorStatusesElement from "./MonitorStatusesElement";
+
+export interface ComponentProps {
+  monitorStatusIds: Array<ObjectID>;
+}
+
+const FetchMonitorStatuses: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [monitorStatus, setMonitorStatus] = React.useState<Array<MonitorStatus>>([]);
+
+  const fetchMonitorStatus = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const monitorStatus: ListResult<MonitorStatus> = await ModelAPI.getList({
+        modelType: MonitorStatus,
+        query: {
+          _id: new Includes(props.monitorStatusIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
+
+      setMonitorStatus(monitorStatus.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchMonitorStatus().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
+
+  return <MonitorStatusesElement monitorStatuses={monitorStatus} />;
+};
+
+export default FetchMonitorStatuses;
diff --git a/Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx b/Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx
new file mode 100644
index 00000000000..949fda4453c
--- /dev/null
+++ b/Dashboard/src/Components/OnCallPolicy/FetchOnCallPolicies.tsx
@@ -0,0 +1,71 @@
+import OnCallDutyPolicy from "Common/Models/DatabaseModels/OnCallDutyPolicy";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import OnCallPoliciesElement from "./OnCallPolicies";
+
+export interface ComponentProps {
+  onCallDutyPolicyIds: Array<ObjectID>;
+}
+
+const FetchOnCallDutyPolicies: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [onCallDutyPolicies, setOnCallDutyPolicies] = React.useState<Array<OnCallDutyPolicy>>([]);
+
+  const fetchOnCallDutyPolicies = async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const onCallDutyPolicies: ListResult<OnCallDutyPolicy> = await ModelAPI.getList({
+        modelType: OnCallDutyPolicy,
+        query: {
+          _id: new Includes(props.onCallDutyPolicyIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
+
+      setOnCallDutyPolicies(onCallDutyPolicies.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    fetchOnCallDutyPolicies().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
+
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
+
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
+
+  return <OnCallPoliciesElement onCallPolicies={onCallDutyPolicies} />;
+};
+
+export default FetchOnCallDutyPolicies;
diff --git a/Dashboard/src/Components/Team/FetchTeams.tsx b/Dashboard/src/Components/Team/FetchTeams.tsx
index f7b139af974..99aa271386e 100644
--- a/Dashboard/src/Components/Team/FetchTeams.tsx
+++ b/Dashboard/src/Components/Team/FetchTeams.tsx
@@ -12,67 +12,60 @@ import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoade
 import TeamsElement from "./TeamsElement";
 
 export interface ComponentProps {
-  userIds: Array<ObjectID>;
+  teamIds: Array<ObjectID>;
 }
 
-const FetchTeam: FunctionComponent<ComponentProps> = (
+const FetchTeams: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [team, setTeam] = React.useState<Array<Team>>([]);
 
-    const [isLoading, setIsLoading] = React.useState<boolean>(true);
-    const [error, setError] = React.useState<string>("");
-    const [team, setTeam] = React.useState<Array<Team>>([]);
+  const fetchTeam = async () => {
+    setIsLoading(true);
+    setError("");
 
+    try {
+      const team: ListResult<Team> = await ModelAPI.getList({
+        modelType: Team,
+        query: {
+          _id: new Includes(props.teamIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
 
-    const fetchTeam = async () => {
-        setIsLoading(true);
-        setError("");
-
-        try{
-            const team: ListResult<Team> = await ModelAPI.getList({
-                modelType: Team,
-                query: {
-                    _id: new Includes(props.userIds),
-                },
-                skip: 0, 
-                limit: LIMIT_PER_PROJECT,
-                select: {
-                    name: true, 
-                    _id: true
-                },
-                sort: {
-                    name: SortOrder.Ascending
-                }
-            });
-
-            setTeam(team.data);
-        
-        }catch(err){
-            setError(API.getFriendlyMessage(err));
-        }
-
-        setIsLoading(false);
-    };
+      setTeam(team.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
 
-    useEffect(() => {
-        fetchTeam().catch((err) => {
-            setError(API.getFriendlyMessage(err));
-        });
-       
-    }, []);
+    setIsLoading(false);
+  };
 
-    if(error){
-        return <ErrorMessage message={error} />;
-    }
+  useEffect(() => {
+    fetchTeam().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
 
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
 
-    if(isLoading){
-        return <ComponentLoader />;
-    }
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
 
-  return (
-   <TeamsElement teams={team} />
-  );
+  return <TeamsElement teams={team} />;
 };
 
-export default FetchTeam;
+export default FetchTeams;
diff --git a/Dashboard/src/Components/User/FetchUsers.tsx b/Dashboard/src/Components/User/FetchUsers.tsx
index f9e8939af7c..b98c78f8843 100644
--- a/Dashboard/src/Components/User/FetchUsers.tsx
+++ b/Dashboard/src/Components/User/FetchUsers.tsx
@@ -18,63 +18,56 @@ export interface ComponentProps {
 const FetchUsers: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [isLoading, setIsLoading] = React.useState<boolean>(true);
+  const [error, setError] = React.useState<string>("");
+  const [users, setUsers] = React.useState<Array<User>>([]);
 
-    const [isLoading, setIsLoading] = React.useState<boolean>(true);
-    const [error, setError] = React.useState<string>("");
-    const [users, setUsers] = React.useState<Array<User>>([]);
+  const fetchUsers = async () => {
+    setIsLoading(true);
+    setError("");
 
+    try {
+      const users: ListResult<User> = await ModelAPI.getList({
+        modelType: User,
+        query: {
+          _id: new Includes(props.userIds),
+        },
+        skip: 0,
+        limit: LIMIT_PER_PROJECT,
+        select: {
+          name: true,
+          profilePictureId: true,
+          email: true,
+          _id: true,
+        },
+        sort: {
+          name: SortOrder.Ascending,
+        },
+      });
 
-    const fetchUsers = async () => {
-        setIsLoading(true);
-        setError("");
-
-        try{
-            const users: ListResult<User> = await ModelAPI.getList({
-                modelType: User,
-                query: {
-                    _id: new Includes(props.userIds),
-                },
-                skip: 0, 
-                limit: LIMIT_PER_PROJECT,
-                select: {
-                    name: true, 
-                    profilePictureId: true,
-                    email: true,
-                    _id: true
-                },
-                sort: {
-                    name: SortOrder.Ascending
-                }
-            });
-
-            setUsers(users.data);
-        
-        }catch(err){
-            setError(API.getFriendlyMessage(err));
-        }
-
-        setIsLoading(false);
-    };
+      setUsers(users.data);
+    } catch (err) {
+      setError(API.getFriendlyMessage(err));
+    }
 
-    useEffect(() => {
-        fetchUsers().catch((err) => {
-            setError(API.getFriendlyMessage(err));
-        });
-       
-    }, []);
+    setIsLoading(false);
+  };
 
-    if(error){
-        return <ErrorMessage message={error} />;
-    }
+  useEffect(() => {
+    fetchUsers().catch((err) => {
+      setError(API.getFriendlyMessage(err));
+    });
+  }, []);
 
+  if (error) {
+    return <ErrorMessage message={error} />;
+  }
 
-    if(isLoading){
-        return <ComponentLoader />;
-    }
+  if (isLoading) {
+    return <ComponentLoader />;
+  }
 
-  return (
-   <UsersElement users={users} />
-  );
+  return <UsersElement users={users} />;
 };
 
 export default FetchUsers;
diff --git a/Dashboard/src/Pages/Incidents/Create.tsx b/Dashboard/src/Pages/Incidents/Create.tsx
index d975dce0c12..a294930b4f8 100644
--- a/Dashboard/src/Pages/Incidents/Create.tsx
+++ b/Dashboard/src/Pages/Incidents/Create.tsx
@@ -34,6 +34,13 @@ import API from "Common/UI/Utils/API/API";
 import PageLoader from "Common/UI/Components/Loader/PageLoader";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import FetchLabels from "../../Components/Label/FetchLabels";
+import FormValues from "Common/UI/Components/Forms/Types/FormValues";
+import FetchUsers from "../../Components/User/FetchUsers";
+import User from "Common/Models/DatabaseModels/User";
+import FetchTeam from "../../Components/Team/FetchTeams";
+import FetchMonitorStatuses from "../../Components/MonitorStatus/FetchMonitorStatuses";
+import FetchOnCallDutyPolicies from "../../Components/OnCallPolicy/FetchOnCallPolicies";
+import FetchMonitors from "../../Components/Monitor/FetchMonitors";
 
 const IncidentCreate: FunctionComponent<
   PageComponentProps
@@ -220,6 +227,36 @@ const IncidentCreate: FunctionComponent<
                   },
                   required: false,
                   placeholder: "Monitors affected",
+                  getSummaryElement: (item: FormValues<Incident>) => {
+                    if (!item.monitors || !Array.isArray(item.monitors)) {
+                      return <p>No monitors affected by this incident.</p>;
+                    }
+
+                   const monitorIds: Array<ObjectID> = [];
+
+                    for(const monitor of item.monitors){
+                      if(typeof monitor === "string"){
+                        monitorIds.push(new ObjectID(monitor));
+                        continue;
+                      }
+
+                      if(monitor instanceof ObjectID){
+                        monitorIds.push(monitor);
+                        continue;
+                      }
+
+                      if(monitor instanceof Monitor){
+                        monitorIds.push(new ObjectID(monitor._id?.toString() || ""));
+                        continue;
+                      }
+                    }
+
+                    return (
+                      <div>
+                        <FetchMonitors monitorIds={monitorIds} />
+                      </div>
+                    );
+                  }
                 },
                 {
                   field: {
@@ -237,6 +274,36 @@ const IncidentCreate: FunctionComponent<
                   },
                   required: false,
                   placeholder: "Select on-call policies",
+                  getSummaryElement: (item: FormValues<Incident>) => {
+                    if (!item.onCallDutyPolicies || !Array.isArray(item.onCallDutyPolicies)) {
+                      return <p>No on-call policies will be executed when this incident is created.</p>;
+                    }
+
+                    const onCallDutyPolicyIds: Array<ObjectID> = [];
+
+                    for(const onCallDutyPolicy of item.onCallDutyPolicies){
+                      if(typeof onCallDutyPolicy === "string"){
+                        onCallDutyPolicyIds.push(new ObjectID(onCallDutyPolicy));
+                        continue;
+                      }
+
+                      if(onCallDutyPolicy instanceof ObjectID){
+                        onCallDutyPolicyIds.push(onCallDutyPolicy);
+                        continue;
+                      }
+
+                      if(onCallDutyPolicy instanceof OnCallDutyPolicy){
+                        onCallDutyPolicyIds.push(new ObjectID(onCallDutyPolicy._id?.toString() || ""));
+                        continue;
+                      }
+                    }
+
+                    return (
+                      <div>
+                        <FetchOnCallDutyPolicies onCallDutyPolicyIds={onCallDutyPolicyIds} />
+                      </div>
+                    );
+                  }
                 },
                 {
                   field: {
@@ -254,6 +321,17 @@ const IncidentCreate: FunctionComponent<
                   },
                   required: false,
                   placeholder: "Monitor Status",
+                  getSummaryElement: (item: FormValues<Incident>) => {
+                    if (!item.changeMonitorStatusTo) {
+                      return <p>Status of the monitors will not be changed when this incident is created.</p>;
+                    }
+
+                    return (
+                      <FetchMonitorStatuses
+                        monitorStatusIds={[new ObjectID(item.changeMonitorStatusTo.toString())]}
+                      />
+                    );
+                  }
                 },
                 {
                   overrideField: {
@@ -273,6 +351,36 @@ const IncidentCreate: FunctionComponent<
                   required: false,
                   placeholder: "Select Teams",
                   overrideFieldKey: "ownerTeams",
+                  getSummaryElement: (item: FormValues<Incident>) => {
+                    if(!(item as JSONObject)["ownerTeams"] || !Array.isArray((item as JSONObject)["ownerTeams"])){
+                      return <p>No teams assigned.</p>
+                    }
+
+                    const ownerTeamIds: Array<ObjectID> = [];
+
+                    for(const ownerTeam of ((item as JSONObject)["ownerTeams"] as Array<any>)){
+                      if(typeof ownerTeam === "string"){
+                        ownerTeamIds.push(new ObjectID(ownerTeam));
+                        continue;
+                      }
+
+                      if(ownerTeam instanceof ObjectID){
+                        ownerTeamIds.push(ownerTeam);
+                        continue;
+                      }
+
+                      if(ownerTeam instanceof Team){
+                        ownerTeamIds.push(new ObjectID(ownerTeam._id?.toString() || ""));
+                        continue;
+                      }
+                    }
+
+                    return (
+                      <div>
+                        <FetchTeam teamIds={ownerTeamIds} />
+                      </div>
+                    );
+                  }
                 },
                 {
                   overrideField: {
@@ -292,6 +400,37 @@ const IncidentCreate: FunctionComponent<
                   required: false,
                   placeholder: "Select Users",
                   overrideFieldKey: "ownerUsers",
+                  getSummaryElement: (item: FormValues<Incident>) => {
+                    if(!(item as JSONObject)["ownerUsers"] || !Array.isArray((item as JSONObject)["ownerUsers"])){
+                      return <p>No owners assigned.</p>
+                    }
+
+                    const ownerUserIds: Array<ObjectID> = [];
+
+                    for(const ownerUser of ((item as JSONObject)["ownerUsers"] as Array<any>)){
+                      if(typeof ownerUser === "string"){
+                        ownerUserIds.push(new ObjectID(ownerUser));
+                        continue;
+                      }
+
+                      if(ownerUser instanceof ObjectID){
+                        ownerUserIds.push(ownerUser);
+                        continue;
+                      }
+
+                      if(ownerUser instanceof User){
+                        ownerUserIds.push(new ObjectID(ownerUser._id?.toString() || ""));
+                        continue;
+                      }
+                    }
+
+                    return (
+                      <div>
+                        <FetchUsers userIds={ownerUserIds} />
+                      </div>
+                    );
+                    
+                  }
                 },
                 {
                   field: {
@@ -310,9 +449,9 @@ const IncidentCreate: FunctionComponent<
                   },
                   required: false,
                   placeholder: "Labels",
-                  getSummaryElement: (item: Incident) => {
+                  getSummaryElement: (item: FormValues<Incident>) => {
 
-                    if(!item.labels){
+                    if(!item.labels || !Array.isArray(item.labels)){
                       return <p>No labels assigned.</p>
                     }