Refactor MonitorPage and TableView components

Common/Types/Monitor/MonitorCriteriaInstance.ts

@@ -311,7 +311,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
         changeMonitorStatus: true,
         createIncidents: true,
         createAlerts: false,
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         name: `Check if ${arg.monitorName} is offline`,
         description: `This criteria checks if the ${arg.monitorName} is offline`,
       };
@@ -337,7 +346,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
             value: 200,
           },
         ],
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         incidents: [
           {
@@ -378,7 +396,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
             onCallPolicyIds: [],
           },
         ],
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         changeMonitorStatus: true,
         createIncidents: true,
@@ -399,7 +426,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
             value: 0, // if there are no logs then the monitor is offline
           },
         ],
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         incidents: [
           {
@@ -430,7 +466,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
             value: 30, // if the request is not recieved in 30 minutes, then the monitor is offline
           },
         ],
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         incidents: [
           {
@@ -464,7 +509,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
             value: undefined,
           },
         ],
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         incidents: [
           {
@@ -488,7 +542,16 @@ export default class MonitorCriteriaInstance extends DatabaseProperty {
         id: ObjectID.generate().toString(),
         monitorStatusId: arg.monitorStatusId,
         filterCondition: FilterCondition.Any,
-        alerts: [],
+        alerts: [
+          {
+            title: `${arg.monitorName} is offline`,
+            description: `${arg.monitorName} is currently offline.`,
+            alertSeverityId: arg.incidentSeverityId,
+            autoResolveAlert: true,
+            id: ObjectID.generate().toString(),
+            onCallPolicyIds: [],
+          },
+        ],
         createAlerts: false,
         filters: [
           {

Common/UI/Components/ModelTable/TableView.tsx

@@ -279,6 +279,7 @@ const TableViewElement: FunctionComponent<ComponentProps> = (
         }}
         submitButtonText="Save Changes"
         onBeforeCreate={(tableView: TableView) => {
+          tableView.tableId =   props.tableId;
           tableView.query = props.currentTableView?.query || {};
           tableView.itemsOnPage = props.currentTableView?.itemsOnPage || 10;
           tableView.sort = props.currentTableView?.sort || {};

Common/UI/Components/Toggle/Toggle.tsx

@@ -4,6 +4,9 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import Tooltip from "../Tooltip/Tooltip";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   onChange: (value: boolean) => void;
@@ -16,6 +19,7 @@ export interface ComponentProps {
   description?: string | undefined;
   error?: string | undefined;
   dataTestId?: string | undefined;
+  tooltip?: string | undefined;
 }
 
 const Toggle: FunctionComponent<ComponentProps> = (
@@ -100,6 +104,16 @@ const Toggle: FunctionComponent<ComponentProps> = (
             {props.description}
           </span>
         </span>
+        {props.tooltip && (
+          <Tooltip key={1} text={props.tooltip || "Not available"}>
+            <div className="ml-1">
+              <Icon
+                className="cursor-pointer w-4 h-4 mt-1 text-gray-400"
+                icon={IconProp.Help}
+              />
+            </div>
+          </Tooltip>
+        )}
       </div>
       {props.error && (
         <p data-testid="error-message" className="mt-1 text-sm text-red-400">

Dashboard/src/Components/Form/Monitor/MonitorCriteriaAlertForm.tsx

@@ -46,6 +46,7 @@ const MonitorCriteriaAlertForm: FunctionComponent<ComponentProps> = (
             fieldType: FormFieldSchemaType.Text,
             stepId: "alert-details",
             required: true,
+
             placeholder: "Alert Title",
             validation: {
               minLength: 2,
@@ -70,6 +71,7 @@ const MonitorCriteriaAlertForm: FunctionComponent<ComponentProps> = (
             description: "What type of alert is this?",
             fieldType: FormFieldSchemaType.Dropdown,
             dropdownOptions: props.alertSeverityDropdownOptions,
+
             required: true,
             placeholder: "Alert Severity",
             id: "alert-severity",
@@ -84,6 +86,7 @@ const MonitorCriteriaAlertForm: FunctionComponent<ComponentProps> = (
               "Execute these on-call policies when this alert is created.",
             fieldType: FormFieldSchemaType.MultiSelectDropdown,
             dropdownOptions: props.onCallPolicyDropdownOptions,
+
             required: false,
             placeholder: "Select On-Call Policies",
           },
@@ -96,6 +99,7 @@ const MonitorCriteriaAlertForm: FunctionComponent<ComponentProps> = (
             description:
               "Automatically resolve this alert when this criteria is no longer met.",
             fieldType: FormFieldSchemaType.Toggle,
+
             required: false,
           },
           {

Dashboard/src/Components/Form/Monitor/MonitorCriteriaAlertsForm.tsx

@@ -15,14 +15,16 @@ const MonitorCriteriaAlertsForm: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [alerts, setAlerts] = React.useState<Array<CriteriaAlert>>(
-    props.initialValue || [
-      {
-        title: "",
-        description: "",
-        alertSeverityId: undefined,
-        id: ObjectID.generate().toString(),
-      },
-    ],
+    props.initialValue && props.initialValue?.length > 0
+      ? props.initialValue
+      : [
+          {
+            title: "",
+            description: "",
+            alertSeverityId: undefined,
+            id: ObjectID.generate().toString(),
+          },
+        ],
   );
 
   useEffect(() => {

Dashboard/src/Components/Form/Monitor/MonitorCriteriaInstance.tsx

@@ -88,11 +88,11 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
       Boolean(props.initialValue?.data?.monitorStatusId?.id) || false,
     );
   const [showIncidentControl, setShowIncidentControl] = useState<boolean>(
-    (props.initialValue?.data?.incidents?.length || 0) > 0,
+    props.initialValue?.data?.createIncidents || false
   );
 
   const [showAlertControl, setShowAlertControl] = useState<boolean>(
-    (props.initialValue?.data?.alerts?.length || 0) > 0,
+    props.initialValue?.data?.createAlerts || false
   );
 
   return (
@@ -296,12 +296,13 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
         <Toggle
           value={showAlertControl}
           title="When filters match, create an alert."
+          tooltip="When you create an alert, it is used to notify the team but is not shown on the status page."
           onChange={(value: boolean) => {
             setShowAlertControl(value);
             monitorCriteriaInstance.setCreateAlerts(value);
 
             if (
-              (value && !monitorCriteriaInstance.data?.alerts) ||
+              !monitorCriteriaInstance.data?.alerts ||
               monitorCriteriaInstance.data?.alerts?.length === 0
             ) {
               monitorCriteriaInstance.setAlerts([
@@ -313,9 +314,6 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
                 },
               ]);
             }
-            if (!value) {
-              monitorCriteriaInstance.setAlerts([]);
-            }
 
             setMonitorCriteriaInstance(
               MonitorCriteriaInstance.clone(monitorCriteriaInstance),
@@ -345,13 +343,14 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
       <div className="mt-4">
         <Toggle
           value={showIncidentControl}
-          title="When filters match, create an incident."
+          title="When filters match, declare an incident."
+          tooltip="When you delcare an incident, it is used to notify the team and is shown on the status page as well."
           onChange={(value: boolean) => {
             setShowIncidentControl(value);
             monitorCriteriaInstance.setCreateIncidents(value);
 
             if (
-              (value && !monitorCriteriaInstance.data?.incidents) ||
+              !monitorCriteriaInstance.data?.incidents ||
               monitorCriteriaInstance.data?.incidents?.length === 0
             ) {
               monitorCriteriaInstance.setIncidents([
@@ -363,9 +362,6 @@ const MonitorCriteriaInstanceElement: FunctionComponent<ComponentProps> = (
                 },
               ]);
             }
-            if (!value) {
-              monitorCriteriaInstance.setIncidents([]);
-            }
 
             setMonitorCriteriaInstance(
               MonitorCriteriaInstance.clone(monitorCriteriaInstance),

Dashboard/src/Components/Monitor/MonitorTable.tsx

@@ -21,7 +21,7 @@ import {
 import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType";
 import FormValues from "Common/UI/Components/Forms/Types/FormValues";
 import { ModalWidth } from "Common/UI/Components/Modal/Modal";
-import { ModalTableBulkDefaultActions } from "Common/UI/Components/ModelTable/BaseModelTable";
+import { ModalTableBulkDefaultActions, SaveFilterProps } from "Common/UI/Components/ModelTable/BaseModelTable";
 import ModelTable from "Common/UI/Components/ModelTable/ModelTable";
 import Statusbubble from "Common/UI/Components/StatusBubble/StatusBubble";
 import FieldType from "Common/UI/Components/Types/FieldType";
@@ -46,6 +46,7 @@ export interface ComponentProps {
   disableCreate?: boolean | undefined;
   actionButtons?: Array<ActionButtonSchema<Monitor>> | undefined;
   cardButtons?: Array<CardButtonSchema> | undefined;
+  saveFilterProps?: SaveFilterProps | undefined;
 }
 
 const MonitorsTable: FunctionComponent<ComponentProps> = (
@@ -56,9 +57,7 @@ const MonitorsTable: FunctionComponent<ComponentProps> = (
       modelType={Monitor}
       name="Monitors"
       id="Monitors-table"
-      saveFilterProps={{
-        tableId: "monitor-table",
-      }}
+      saveFilterProps={props.saveFilterProps}
       bulkActions={{
         buttons: [
           {

Dashboard/src/Pages/Monitor/Monitors.tsx

@@ -18,6 +18,9 @@ const MonitorPage: FunctionComponent<PageComponentProps> = (): ReactElement => {
         query={{
           projectId: DashboardNavigation.getProjectId()!,
         }}
+        saveFilterProps={{
+          tableId: "main-monitor-table",
+        }}
       />
     </Fragment>
   );