Refactor Dashboard components for improved readability and consistenc…

…y in code formatting
OneUptime · Nov 6, 2024 · 988d828 · 988d828
1 parent 7fd0000
commit 988d828
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 33 deletions.
diff --git a/Dashboard/src/Components/Dashboard/Canvas/Index.tsx b/Dashboard/src/Components/Dashboard/Canvas/Index.tsx
@@ -125,9 +125,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
     string | null
   >(null);
 
-  type RenderComponentFunction = (
-    componentId: ObjectID,
-  ) => ReactElement;
+  type RenderComponentFunction = (componentId: ObjectID) => ReactElement;
 
   const renderComponent: RenderComponentFunction = (
     componentId: ObjectID,
@@ -158,7 +156,7 @@ const DashboardCanvas: FunctionComponent<ComponentProps> = (
                   component.componentId.toString() ===
                   updatedComponent.componentId.toString()
                 ) {
-                  return {...updatedComponent};
+                  return { ...updatedComponent };
                 }
 
                 return component;

diff --git a/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx b/Dashboard/src/Components/Dashboard/Components/DashboardBaseComponent.tsx
@@ -45,10 +45,14 @@ export interface ComponentProps extends DashboardBaseComponentProps {
 const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
-
-  const component: DashboardBaseComponent = props.dashboardViewConfig.components.find(
-    (component: DashboardBaseComponent) => component.componentId.toString() === props.componentId.toString(),
-  ) as DashboardBaseComponent;
+  const component: DashboardBaseComponent =
+    props.dashboardViewConfig.components.find(
+      (component: DashboardBaseComponent) => {
+        return (
+          component.componentId.toString() === props.componentId.toString()
+        );
+      },
+    ) as DashboardBaseComponent;
 
   const widthOfComponent: number = component.widthInDashboardUnits;
   const heightOfComponent: number = component.heightInDashboardUnits;
@@ -69,20 +73,20 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
   const dashboardComponentRef: React.RefObject<HTMLDivElement> =
     React.useRef<HTMLDivElement>(null);
 
-
   const refreshTopAndLeftInPx: () => void = () => {
     if (dashboardComponentRef.current === null) {
       return;
     }
 
-    const topInPx: number = dashboardComponentRef.current.getBoundingClientRect().top;
-    const leftInPx: number = dashboardComponentRef.current.getBoundingClientRect().left;
+    const topInPx: number =
+      dashboardComponentRef.current.getBoundingClientRect().top;
+    const leftInPx: number =
+      dashboardComponentRef.current.getBoundingClientRect().left;
 
     setTopInPx(topInPx);
     setLeftInPx(leftInPx);
   };
 
-
   useEffect(() => {
     refreshTopAndLeftInPx();
   }, [props.dashboardViewConfig]);
@@ -93,8 +97,7 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
     mouseEvent: MouseEvent,
   ): void => {
     const dashboardComponentOldTopInPx: number = topInPx;
-    const dashboardComponentOldLeftInPx: number =
-      leftInPx;
+    const dashboardComponentOldLeftInPx: number = leftInPx;
 
     const newMoveToTop: number = mouseEvent.pageY;
     const newMoveToLeft: number = mouseEvent.pageX;
@@ -292,8 +295,8 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
           stopResizeAndMove();
         }}
         className="move-element cursor-move absolute w-4 h-4 bg-blue-300 hover:bg-blue-400 rounded-full cursor-pointer"
-        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => { }}
-        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => { }}
+        onDragStart={(_event: React.DragEvent<HTMLDivElement>) => {}}
+        onDragEnd={(_event: React.DragEvent<HTMLDivElement>) => {}}
       ></div>
     );
   };
@@ -354,14 +357,16 @@ const DashboardBaseComponentElement: FunctionComponent<ComponentProps> = (
       }}
       style={{
         margin: `${MarginForEachUnitInPx}px`,
-        height: `${GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
-          heightOfComponent +
+        height: `${
+          GetDashboardUnitHeightInPx(props.totalCurrentDashboardWidthInPx) *
+            heightOfComponent +
           SpaceBetweenUnitsInPx * (heightOfComponent - 1)
-          }px`,
-        width: `${GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
-          widthOfComponent +
+        }px`,
+        width: `${
+          GetDashboardUnitWidthInPx(props.totalCurrentDashboardWidthInPx) *
+            widthOfComponent +
           (SpaceBetweenUnitsInPx - 2) * (widthOfComponent - 1)
-          }px`,
+        }px`,
       }}
       ref={dashboardComponentRef}
     >

diff --git a/Dashboard/src/Components/Dashboard/DashboardView.tsx b/Dashboard/src/Components/Dashboard/DashboardView.tsx
@@ -90,7 +90,10 @@ const DashboardViewer: FunctionComponent<ComponentProps> = (
           return;
         }
 
-        setDashboardViewConfig(dashboard.dashboardViewConfig || DashboardViewConfigUtil.createDefaultDashboardViewConfig());
+        setDashboardViewConfig(
+          dashboard.dashboardViewConfig ||
+            DashboardViewConfigUtil.createDefaultDashboardViewConfig(),
+        );
       } catch (err) {
         setError(API.getFriendlyErrorMessage(err as Error));
       }

diff --git a/Worker/Jobs/IncidentOwners/SendStateChangeNotification.ts b/Worker/Jobs/IncidentOwners/SendStateChangeNotification.ts
@@ -8,7 +8,6 @@ import EmailTemplateType from "Common/Types/Email/EmailTemplateType";
 import NotificationSettingEventType from "Common/Types/NotificationSetting/NotificationSettingEventType";
 import ObjectID from "Common/Types/ObjectID";
 import { SMSMessage } from "Common/Types/SMS/SMS";
-import Text from "Common/Types/Text";
 import { EVERY_MINUTE } from "Common/Utils/CronTime";
 import IncidentService from "Common/Server/Services/IncidentService";
 import IncidentStateTimelineService from "Common/Server/Services/IncidentStateTimelineService";
@@ -47,6 +46,7 @@ RunCron(
           incidentId: true,
           incidentState: {
             name: true,
+            isResolvedState: true,
           },
         },
       });
@@ -129,6 +129,13 @@ RunCron(
         continue;
       }
 
+      const resourcesAffected: string =
+        incident
+          .monitors!.map((monitor: Monitor) => {
+            return monitor.name!;
+          })
+          .join(", ") || "";
+
       for (const user of owners) {
         const vars: Dictionary<string> = {
           incidentTitle: incident.title!,
@@ -138,12 +145,7 @@ RunCron(
             incident.description! || "",
             MarkdownContentType.Email,
           ),
-          resourcesAffected:
-            incident
-              .monitors!.map((monitor: Monitor) => {
-                return monitor.name!;
-              })
-              .join(", ") || "None",
+          resourcesAffected: resourcesAffected || "None",
           stateChangedAt:
             OneUptimeDate.getDateAsFormattedHTMLInMultipleTimezones({
               date: incidentStateTimeline.createdAt!,
@@ -162,12 +164,20 @@ RunCron(
           vars["isOwner"] = "true";
         }
 
+        let subjectLine: string = `[Incident] ${incident.title!}`;
+
+        if (incidentState.isResolvedState) {
+          if (resourcesAffected) {
+            subjectLine = `[Incident] Incident on ${resourcesAffected} is resolved`;
+          } else {
+            subjectLine = `[Incident] Incident is resolved`;
+          }
+        }
+
         const emailMessage: EmailEnvelope = {
           templateType: EmailTemplateType.IncidentOwnerStateChanged,
           vars: vars,
-          subject: `[Incident ${Text.uppercaseFirstLetter(
-            incidentState!.name!,
-          )}] ${incident.title!}`,
+          subject: subjectLine,
         };
 
         const sms: SMSMessage = {