feat: implement FetchMonitors, FetchMonitorStatuses, and FetchOnCallP…

…olicies components; update Field interface for summary element handling

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"`,
+    );
+  }
 }

Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts

@@ -201,5 +201,5 @@ export default [
   MigrationName1737141420441,
   MigrationName1737713529424,
   MigrationName1737715240684,
-  MigrationName1737997557974
+  MigrationName1737997557974,
 ];

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>

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;
-

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;
 }

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;

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;

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;

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;