mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-21 22:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

add alerts page to monitor groups

Browse Source
This commit is contained in:
Simon Larsen 2024-10-04 08:31:46 -07:00
parent 54cd18896a
commit 6acb0fb486
No known key found for this signature in database
GPG Key ID: 96C5DCA24769DBCA
9 changed files with 196 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dashboard/src/Components/Alert/AlertsTable.tsx
View File

@ -232,7 +232,7 @@ const AlertsTable: FunctionComponent<ComponentProps> = (
projectId: true,
},
},
title: "Monitors Affected",
title: "Monitor Affected",
type: FieldType.EntityArray,
getElement: (item: Alert): ReactElement => {

37
Dashboard/src/Pages/Monitor/View/Alerts.tsx Normal file
View File

@ -0,0 +1,37 @@
import AlertsTable from "../../../Components/Alert/AlertsTable";
import DisabledWarning from "../../../Components/Monitor/DisabledWarning";
import DashboardNavigation from "../../../Utils/Navigation";
import PageComponentProps from "../../PageComponentProps";
import ObjectID from "Common/Types/ObjectID";
import Navigation from "Common/UI/Utils/Navigation";
import React, { Fragment, FunctionComponent, ReactElement } from "react";
import Alert from "Common/Models/DatabaseModels/Alert";
import Query from "Common/Types/BaseDatabase/Query";
const MonitorAlerts: FunctionComponent<
PageComponentProps
> = (): ReactElement => {
const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
const query: Query<Alert> = {
projectId: DashboardNavigation.getProjectId()!,
};
if (modelId) {
query.monitor = modelId;
}
return (
<Fragment>
<DisabledWarning monitorId={modelId} />
<AlertsTable
query={query}
createInitialValues={{
monitor: modelId,
}}
/>
</Fragment>
);
};
export default MonitorAlerts;

12
Dashboard/src/Pages/Monitor/View/SideMenu.tsx
View File

@ -76,7 +76,7 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
)}
</SideMenuSection>
<SideMenuSection title="Timeline and Incidents">
<SideMenuSection title="More">
<SideMenuItem
link={{
title: "Status Timeline",
@ -97,6 +97,16 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
}}
icon={IconProp.Alert}
/>
<SideMenuItem
link={{
title: "Alerts",
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.MONITOR_VIEW_ALERTS] as Route,
{ modelId: props.modelId },
),
}}
icon={IconProp.ExclaimationCircle}
/>
</SideMenuSection>
<SideMenuSection title="Advanced">

88
Dashboard/src/Pages/MonitorGroup/View/Alerts.tsx Normal file
View File

@ -0,0 +1,88 @@
import AlertsTable from "../../../Components/Alert/AlertsTable";
import DashboardNavigation from "../../../Utils/Navigation";
import PageComponentProps from "../../PageComponentProps";
import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
import ObjectID from "Common/Types/ObjectID";
import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
import PageLoader from "Common/UI/Components/Loader/PageLoader";
import API from "Common/UI/Utils/API/API";
import ModelAPI, { ListResult } from "Common/UI/Utils/ModelAPI/ModelAPI";
import Navigation from "Common/UI/Utils/Navigation";
import MonitorGroupResource from "Common/Models/DatabaseModels/MonitorGroupResource";
import React, {
Fragment,
FunctionComponent,
ReactElement,
useEffect,
} from "react";
import Includes from "Common/Types/BaseDatabase/Includes";
const MonitorAlerts: FunctionComponent<
PageComponentProps
> = (): ReactElement => {
const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
const [isLoading, setIsLoading] = React.useState<boolean>(true);
const [monitorIds, setMonitorIds] = React.useState<ObjectID[]>([]);
const [error, setError] = React.useState<string | undefined>(undefined);
const loadMonitorsIds: PromiseVoidFunction = async (): Promise<void> => {
setIsLoading(true);
try {
const monitorGroupResources: ListResult<MonitorGroupResource> =
await ModelAPI.getList({
modelType: MonitorGroupResource,
query: {
monitorGroupId: modelId.toString(),
},
limit: LIMIT_PER_PROJECT,
skip: 0,
select: {
monitorId: true,
},
sort: {},
});
const monitorIds: Array<ObjectID> = monitorGroupResources.data.map(
(monitorGroupResource: MonitorGroupResource): ObjectID => {
return monitorGroupResource.monitorId!;
},
);
setMonitorIds(monitorIds);
} catch (err) {
setError(API.getFriendlyMessage(err));
}
setIsLoading(false);
};
useEffect(() => {
loadMonitorsIds().catch(() => {});
}, []);
if (isLoading) {
return <PageLoader isVisible={true} />;
}
if (error) {
return <ErrorMessage error={error} />;
}
return (
<Fragment>
<AlertsTable
query={{
projectId: DashboardNavigation.getProjectId()!,
monitor: new Includes(monitorIds),
}}
/>
</Fragment>
);
};
export default MonitorAlerts;

13
Dashboard/src/Pages/MonitorGroup/View/SideMenu.tsx
View File

@ -41,7 +41,7 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
/>
</SideMenuSection>
<SideMenuSection title="Monitors and Incidents">
<SideMenuSection title="More">
<SideMenuItem
link={{
title: "Monitors",
@ -63,6 +63,17 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
}}
icon={IconProp.Alert}
/>
<SideMenuItem
link={{
title: "Alerts",
to: RouteUtil.populateRouteParams(
RouteMap[PageMap.MONITOR_GROUP_VIEW_ALERTS] as Route,
{ modelId: props.modelId },
),
}}
icon={IconProp.ExclaimationCircle}
/>
</SideMenuSection>
<SideMenuSection title="Advanced">

19
Dashboard/src/Routes/MonitorGroupRoutes.tsx
View File

@ -27,6 +27,13 @@ const MonitorGroupViewDelete: LazyExoticComponent<
> = lazy(() => {
return import("../Pages/MonitorGroup/View/Delete");
});
const MonitorGroupAlerts: LazyExoticComponent<
FunctionComponent<ComponentProps>
> = lazy(() => {
return import("../Pages/MonitorGroup/View/Alerts");
});
const MonitorGroupViewMonitors: LazyExoticComponent<
FunctionComponent<ComponentProps>
> = lazy(() => {
@ -87,6 +94,18 @@ const MonitorGroupRoutes: FunctionComponent<ComponentProps> = (
}
/>
<PageRoute
path={RouteUtil.getLastPathForKey(PageMap.MONITOR_GROUP_VIEW_ALERTS)}
element={
<Suspense fallback={Loader}>
<MonitorGroupAlerts
{...props}
pageRoute={RouteMap[PageMap.MONITOR_GROUP_VIEW_ALERTS] as Route}
/>
</Suspense>
}
/>
<PageRoute
path={RouteUtil.getLastPathForKey(
PageMap.MONITOR_GROUP_VIEW_MONITORS,

18
Dashboard/src/Routes/MonitorsRoutes.tsx
View File

@ -55,6 +55,11 @@ const MonitorIncidents: LazyExoticComponent<FunctionComponent<ComponentProps>> =
lazy(() => {
return import("../Pages/Monitor/View/Incidents");
});
const MonitorAlerts: LazyExoticComponent<FunctionComponent<ComponentProps>> =
lazy(() => {
return import("../Pages/Monitor/View/Alerts");
});
const MonitorInoperational: LazyExoticComponent<
FunctionComponent<ComponentProps>
> = lazy(() => {
@ -265,6 +270,19 @@ const MonitorRoutes: FunctionComponent<ComponentProps> = (
</Suspense>
}
/>
<PageRoute
path={RouteUtil.getLastPathForKey(PageMap.MONITOR_VIEW_ALERTS)}
element={
<Suspense fallback={Loader}>
<MonitorAlerts
{...props}
pageRoute={RouteMap[PageMap.MONITOR_VIEW_ALERTS] as Route}
/>
</Suspense>
}
/>
<PageRoute
path={RouteUtil.getLastPathForKey(PageMap.MONITOR_VIEW_DELETE)}
element={

2
Dashboard/src/Utils/PageMap.ts
View File

@ -118,6 +118,7 @@ enum PageMap {
MONITOR_VIEW_DELETE = "MONITOR_VIEW_DELETE",
MONITOR_VIEW_STATUS_TIMELINE = "MONITOR_VIEW_STATUS_TIMELINE",
MONITOR_VIEW_INCIDENTS = "MONITOR_VIEW_INCIDENTS",
MONITOR_VIEW_ALERTS = "MONITOR_VIEW_ALERTS",
MONITOR_VIEW_CUSTOM_FIELDS = "MONITOR_VIEW_CUSTOM_FIELDS",
MONITOR_VIEW_INTERVAL = "MONITOR_VIEW_INTERVAL",
MONITOR_VIEW_PROBES = "MONITOR_VIEW_PROBES",
@ -132,6 +133,7 @@ enum PageMap {
MONITOR_GROUP_VIEW_MONITORS = "MONITOR_GROUP_VIEW_MONITORS",
MONITOR_GROUP_VIEW_OWNERS = "MONITOR_GROUP_VIEW_OWNERS",
MONITOR_GROUP_VIEW_INCIDENTS = "MONITOR_GROUP_VIEW_INCIDENTS",
MONITOR_GROUP_VIEW_ALERTS = "MONITOR_GROUP_VIEW_ALERTS",
SERVICE_CATALOG_ROOT = "SERVICE_CATALOG_ROOT",
SERVICE_CATALOG = "SERVICE_CATALOG",

8
Dashboard/src/Utils/RouteMap.ts
View File

@ -17,6 +17,7 @@ export const MonitorsRoutePath: Dictionary<string> = {
[PageMap.MONITOR_VIEW_OWNERS]: `${RouteParams.ModelID}/owners`,
[PageMap.MONITOR_VIEW_STATUS_TIMELINE]: `${RouteParams.ModelID}/status-timeline`,
[PageMap.MONITOR_VIEW_INCIDENTS]: `${RouteParams.ModelID}/incidents`,
[PageMap.MONITOR_VIEW_ALERTS]: `${RouteParams.ModelID}/alerts`,
[PageMap.MONITOR_VIEW_CUSTOM_FIELDS]: `${RouteParams.ModelID}/custom-fields`,
[PageMap.MONITOR_VIEW_DELETE]: `${RouteParams.ModelID}/delete`,
[PageMap.MONITOR_VIEW_SETTINGS]: `${RouteParams.ModelID}/settings`,
@ -237,6 +238,7 @@ export const MonitorGroupRoutePath: Dictionary<string> = {
[PageMap.MONITOR_GROUP_VIEW]: `${RouteParams.ModelID}`,
[PageMap.MONITOR_GROUP_VIEW_OWNERS]: `${RouteParams.ModelID}/owners`,
[PageMap.MONITOR_GROUP_VIEW_INCIDENTS]: `${RouteParams.ModelID}/incidents`,
[PageMap.MONITOR_GROUP_VIEW_ALERTS]: `${RouteParams.ModelID}/alerts`,
[PageMap.MONITOR_GROUP_VIEW_DELETE]: `${RouteParams.ModelID}/delete`,
[PageMap.MONITOR_GROUP_VIEW_MONITORS]: `${RouteParams.ModelID}/monitors`,
};
@ -346,6 +348,12 @@ const RouteMap: Dictionary<Route> = {
}`,
),
[PageMap.MONITOR_VIEW_ALERTS]: new Route(
`/dashboard/${RouteParams.ProjectID}/monitors/${
MonitorsRoutePath[PageMap.MONITOR_VIEW_ALERTS]
}`,
),
[PageMap.MONITOR_VIEW_SETTINGS]: new Route(
`/dashboard/${RouteParams.ProjectID}/monitors/${
MonitorsRoutePath[PageMap.MONITOR_VIEW_SETTINGS]