From 988d828bb64381871ac71d683498e167927d9836 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Wed, 6 Nov 2024 12:20:37 +0000 Subject: [PATCH] Refactor Dashboard components for improved readability and consistency in code formatting --- .../src/Components/Dashboard/Canvas/Index.tsx | 6 +-- .../Components/DashboardBaseComponent.tsx | 41 +++++++++++-------- .../Components/Dashboard/DashboardView.tsx | 5 ++- .../SendStateChangeNotification.ts | 30 +++++++++----- 4 files changed, 49 insertions(+), 33 deletions(-) diff --git a/Dashboard/src/Components/Dashboard/Canvas/Index.tsx b/Dashboard/src/Components/Dashboard/Canvas/Index.tsx index ed7d0103dc9..cffa7c5cead 100644 --- a/Dashboard/src/Components/Dashboard/Canvas/Index.tsx +++ b/Dashboard/src/Components/Dashboard/Canvas/Index.tsx @@ -125,9 +125,7 @@ const DashboardCanvas: FunctionComponent = ( 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 = ( 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 index 5c847df60a1..17fe0129cc6 100644 --- 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 = ( 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 = ( const dashboardComponentRef: React.RefObject = React.useRef(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 = ( 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 = ( 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) => { }} - onDragEnd={(_event: React.DragEvent) => { }} + onDragStart={(_event: React.DragEvent) => {}} + onDragEnd={(_event: React.DragEvent) => {}} > ); }; @@ -354,14 +357,16 @@ const DashboardBaseComponentElement: FunctionComponent = ( }} 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 index 3072041cf4a..d5ed27a53c2 100644 --- a/Dashboard/src/Components/Dashboard/DashboardView.tsx +++ b/Dashboard/src/Components/Dashboard/DashboardView.tsx @@ -90,7 +90,10 @@ const DashboardViewer: FunctionComponent = ( 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 index 639050cb871..5f5a5274b6a 100644 --- 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 = { 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 = {