From c19913ac589f79178929fcb4a6e9cf7da042ac21 Mon Sep 17 00:00:00 2001 From: Simon Larsen Date: Fri, 17 Jan 2025 20:42:10 +0000 Subject: [PATCH] refactor: clean up code formatting and improve readability in Alert components --- Dashboard/src/Components/Alert/AlertFeed.tsx | 66 +++++-------------- .../src/Components/Alert/ChangeState.tsx | 13 ++-- .../src/Pages/Alerts/View/Description.tsx | 4 +- Dashboard/src/Pages/Alerts/View/Index.tsx | 4 +- .../src/Pages/Alerts/View/Remediation.tsx | 4 +- Dashboard/src/Pages/Alerts/View/RootCause.tsx | 4 +- Dashboard/src/Pages/Alerts/View/SideMenu.tsx | 1 - Dashboard/src/Routes/AlertRoutes.tsx | 17 ++--- .../src/Utils/Breadcrumbs/AlertBreadcrumbs.ts | 3 - 9 files changed, 31 insertions(+), 85 deletions(-) diff --git a/Dashboard/src/Components/Alert/AlertFeed.tsx b/Dashboard/src/Components/Alert/AlertFeed.tsx index d6ddf4e8c9..b178b213a0 100644 --- a/Dashboard/src/Components/Alert/AlertFeed.tsx +++ b/Dashboard/src/Components/Alert/AlertFeed.tsx @@ -49,39 +49,27 @@ const AlertFeedElement: FunctionComponent = ( }); }; - type GetFeedItemFromAlertFeed = ( - alertFeed: AlertFeed, - ) => FeedItemProps; + type GetFeedItemFromAlertFeed = (alertFeed: AlertFeed) => FeedItemProps; const getFeedItemFromAlertFeed: GetFeedItemFromAlertFeed = ( alertFeed: AlertFeed, ): FeedItemProps => { let icon: IconProp = IconProp.Circle; - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.AlertCreated - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.AlertCreated) { icon = IconProp.Alert; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.AlertStateChanged - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.AlertStateChanged) { icon = IconProp.ArrowCircleRight; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.AlertUpdated - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.AlertUpdated) { icon = IconProp.Edit; } if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OwnerNotificationSent + alertFeed.alertFeedEventType === AlertFeedEventType.OwnerNotificationSent ) { icon = IconProp.Bell; } @@ -93,69 +81,45 @@ const AlertFeedElement: FunctionComponent = ( icon = IconProp.Notification; } - if ( - alertFeed.alertFeedEventType === AlertFeedEventType.PublicNote - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.PublicNote) { icon = IconProp.Announcement; } - if ( - alertFeed.alertFeedEventType === AlertFeedEventType.PrivateNote - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.PrivateNote) { icon = IconProp.Lock; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OwnerUserAdded - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.OwnerUserAdded) { icon = IconProp.User; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OwnerTeamAdded - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.OwnerTeamAdded) { icon = IconProp.Team; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.RemediationNotes - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.RemediationNotes) { icon = IconProp.Wrench; } - if ( - alertFeed.alertFeedEventType === AlertFeedEventType.RootCause - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.RootCause) { icon = IconProp.Cube; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OwnerUserRemoved - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.OwnerUserRemoved) { icon = IconProp.Close; } - if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OwnerTeamRemoved - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.OwnerTeamRemoved) { icon = IconProp.Close; } if ( - alertFeed.alertFeedEventType === - AlertFeedEventType.OnCallNotification + alertFeed.alertFeedEventType === AlertFeedEventType.OnCallNotification ) { icon = IconProp.Alert; } - if ( - alertFeed.alertFeedEventType === AlertFeedEventType.OnCallPolicy - ) { + if (alertFeed.alertFeedEventType === AlertFeedEventType.OnCallPolicy) { icon = IconProp.Call; } diff --git a/Dashboard/src/Components/Alert/ChangeState.tsx b/Dashboard/src/Components/Alert/ChangeState.tsx index 3fdbe89dd2..12b65be9df 100644 --- a/Dashboard/src/Components/Alert/ChangeState.tsx +++ b/Dashboard/src/Components/Alert/ChangeState.tsx @@ -209,12 +209,11 @@ const ChangeAlertState: FunctionComponent = ( }} onSuccess={(model: AlertStateTimeline) => { //get alert state and update current alert state - const alertState: AlertState | undefined = - alertStates.find((state: AlertState) => { - return ( - state.id?.toString() === model.alertStateId?.toString() - ); - }); + const alertState: AlertState | undefined = alertStates.find( + (state: AlertState) => { + return state.id?.toString() === model.alertStateId?.toString(); + }, + ); setCurrentAlertState(alertState); @@ -237,7 +236,7 @@ const ChangeAlertState: FunctionComponent = ( required: false, overrideFieldKey: "privateNote", showEvenIfPermissionDoesNotExist: true, - } + }, ], formType: FormType.Create, }} diff --git a/Dashboard/src/Pages/Alerts/View/Description.tsx b/Dashboard/src/Pages/Alerts/View/Description.tsx index 906ecf39c5..80efcde1b9 100644 --- a/Dashboard/src/Pages/Alerts/View/Description.tsx +++ b/Dashboard/src/Pages/Alerts/View/Description.tsx @@ -7,9 +7,7 @@ import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail"; import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType"; import FieldType from "Common/UI/Components/Types/FieldType"; -const AlertDelete: FunctionComponent< - PageComponentProps -> = (): ReactElement => { +const AlertDelete: FunctionComponent = (): ReactElement => { const modelId: ObjectID = Navigation.getLastParamAsObjectID(1); return ( diff --git a/Dashboard/src/Pages/Alerts/View/Index.tsx b/Dashboard/src/Pages/Alerts/View/Index.tsx index afc7308f16..f359d8b373 100644 --- a/Dashboard/src/Pages/Alerts/View/Index.tsx +++ b/Dashboard/src/Pages/Alerts/View/Index.tsx @@ -479,8 +479,7 @@ const AlertView: FunctionComponent = (): ReactElement => { getElement: (item: Alert): ReactElement => { return ; }, - } - + }, ], modelId: modelId, }} @@ -506,7 +505,6 @@ const AlertView: FunctionComponent = (): ReactElement => { /> - {telemetryQuery && telemetryQuery.telemetryType === TelemetryType.Log && telemetryQuery.telemetryQuery && ( diff --git a/Dashboard/src/Pages/Alerts/View/Remediation.tsx b/Dashboard/src/Pages/Alerts/View/Remediation.tsx index 906ecf39c5..80efcde1b9 100644 --- a/Dashboard/src/Pages/Alerts/View/Remediation.tsx +++ b/Dashboard/src/Pages/Alerts/View/Remediation.tsx @@ -7,9 +7,7 @@ import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail"; import FormFieldSchemaType from "Common/UI/Components/Forms/Types/FormFieldSchemaType"; import FieldType from "Common/UI/Components/Types/FieldType"; -const AlertDelete: FunctionComponent< - PageComponentProps -> = (): ReactElement => { +const AlertDelete: FunctionComponent = (): ReactElement => { const modelId: ObjectID = Navigation.getLastParamAsObjectID(1); return ( diff --git a/Dashboard/src/Pages/Alerts/View/RootCause.tsx b/Dashboard/src/Pages/Alerts/View/RootCause.tsx index 4d6c8021b6..0bf84d5874 100644 --- a/Dashboard/src/Pages/Alerts/View/RootCause.tsx +++ b/Dashboard/src/Pages/Alerts/View/RootCause.tsx @@ -6,9 +6,7 @@ import React, { FunctionComponent, ReactElement } from "react"; import CardModelDetail from "Common/UI/Components/ModelDetail/CardModelDetail"; import FieldType from "Common/UI/Components/Types/FieldType"; -const AlertDelete: FunctionComponent< - PageComponentProps -> = (): ReactElement => { +const AlertDelete: FunctionComponent = (): ReactElement => { const modelId: ObjectID = Navigation.getLastParamAsObjectID(1); return ( diff --git a/Dashboard/src/Pages/Alerts/View/SideMenu.tsx b/Dashboard/src/Pages/Alerts/View/SideMenu.tsx index b042223d67..4aa5a76354 100644 --- a/Dashboard/src/Pages/Alerts/View/SideMenu.tsx +++ b/Dashboard/src/Pages/Alerts/View/SideMenu.tsx @@ -62,7 +62,6 @@ const DashboardSideMenu: FunctionComponent = ( icon={IconProp.Wrench} /> - > = return import("../Pages/Alerts/View/Owners"); }); - - - const AlertViewRootCause: LazyExoticComponent< +const AlertViewRootCause: LazyExoticComponent< FunctionComponent > = lazy(() => { return import("../Pages/Alerts/View/RootCause"); @@ -66,15 +64,13 @@ const AlertViewRemediation: LazyExoticComponent< FunctionComponent > = lazy(() => { return import("../Pages/Alerts/View/Remediation"); -} -); - -const AlertDescription: LazyExoticComponent< - FunctionComponent -> = lazy(() => { - return import("../Pages/Alerts/View/Description"); }); +const AlertDescription: LazyExoticComponent> = + lazy(() => { + return import("../Pages/Alerts/View/Description"); + }); + const AlertsRoutes: FunctionComponent = ( props: ComponentProps, ) => { @@ -167,7 +163,6 @@ const AlertsRoutes: FunctionComponent = ( /> } - /> | undefined { "Alerts", "Description", ]), - - - }; return breadcrumpLinksMap[path]; }