diff --git a/client/src/api/alerts.ts b/client/src/api/alerts.ts index 97c411a..d7d98cb 100644 --- a/client/src/api/alerts.ts +++ b/client/src/api/alerts.ts @@ -1,5 +1,12 @@ import { request } from './request' +export enum AlertStatuses { + OK = 'ok', + ALERT_PENDING = 'alert_pending', + ALERTING = 'alerting', + OK_PENDING = 'ok_pending', +} + export type AlertInfo = { id: number name: string @@ -8,8 +15,8 @@ export type AlertInfo = { customMessage: string customResolvedMessage: string triggerInterval: number - lastStatus: string - lastStatusAt: string + lastStatus: AlertStatuses + lastStatusAt: number } export const getAlerts = () => request('/api/alerts') diff --git a/client/src/api/contactPoints.ts b/client/src/api/contactPoints.ts index 0c162c8..70ae984 100644 --- a/client/src/api/contactPoints.ts +++ b/client/src/api/contactPoints.ts @@ -25,7 +25,7 @@ export const updateContactPoint = ({ id, ...body }: ContactPointInfo) => }) export const deleteContactPoint = (id: number) => - request( + request( `/api/contact-points/${id}`, { method: 'DELETE' }, 'void' diff --git a/client/src/api/dashboards.ts b/client/src/api/dashboards.ts index b3468ca..c1e0ab2 100644 --- a/client/src/api/dashboards.ts +++ b/client/src/api/dashboards.ts @@ -43,7 +43,7 @@ export const updateDashboard = ({ }) export const deleteDashboard = (id: number) => - request( + request( `/api/dashboards/${id}`, { method: 'DELETE', diff --git a/client/src/api/sensors.ts b/client/src/api/sensors.ts index 7a9de58..7252e26 100644 --- a/client/src/api/sensors.ts +++ b/client/src/api/sensors.ts @@ -4,6 +4,7 @@ export type SensorInfo = { id: number name: string authKey: string + lastContactAt?: number } export const getSensors = () => request('/api/sensors') @@ -23,4 +24,4 @@ export const updateSensor = ({ id, ...body }: { id: number; name: string }) => }) export const deleteSensor = (id: number) => - request(`/api/sensors/${id}`, { method: 'DELETE' }, 'void') + request(`/api/sensors/${id}`, { method: 'DELETE' }, 'void') diff --git a/client/src/assets/pages/_alerts-page.scss b/client/src/assets/pages/_alerts-page.scss index 0a44707..4cc692b 100644 --- a/client/src/assets/pages/_alerts-page.scss +++ b/client/src/assets/pages/_alerts-page.scss @@ -5,4 +5,27 @@ .contact-points { margin-bottom: 2rem; } + + .alert-status { + text-transform: uppercase; + padding: 0.2rem 0.4rem; + border-radius: var(--border-radius); + display: inline-flex; + + &.status-ok { + background-color: #016101; + color: #fff; + } + + &.status-alert_pending, + &.status-ok_pending { + background-color: #ff8c00; + color: #fff; + } + + &.status-alerting { + background-color: #d22424; + color: #fff; + } + } } diff --git a/client/src/pages/alerts/components/AlertStatus.tsx b/client/src/pages/alerts/components/AlertStatus.tsx new file mode 100644 index 0000000..2940f84 --- /dev/null +++ b/client/src/pages/alerts/components/AlertStatus.tsx @@ -0,0 +1,25 @@ +import { AlertInfo, AlertStatuses } from '@/api/alerts' +import { cn } from '@/utils/cn' +import { formatDateTime } from '@/utils/formatDateTime' + +type Props = { + alert: Pick +} + +const statusToStr = { + [AlertStatuses.OK]: 'OK', + [AlertStatuses.ALERT_PENDING]: 'Alert pending', + [AlertStatuses.ALERTING]: 'Alerting', + [AlertStatuses.OK_PENDING]: 'OK pending', +} as const + +export const AlertStatus = ({ alert }: Props) => { + return ( +
+ {statusToStr[alert.lastStatus]} +
+ ) +} diff --git a/client/src/pages/alerts/components/AlertsTable/AlertsTable.tsx b/client/src/pages/alerts/components/AlertsTable/AlertsTable.tsx index 512fad8..79839f4 100644 --- a/client/src/pages/alerts/components/AlertsTable/AlertsTable.tsx +++ b/client/src/pages/alerts/components/AlertsTable/AlertsTable.tsx @@ -6,6 +6,7 @@ import { useState } from 'preact/hooks' import { useMutation, useQuery } from 'react-query' import { AlertFormModal } from './components/AlertFormModal' import { NoAlerts } from '../NoAlerts' +import { AlertStatus } from '../AlertStatus' export const AlertsTable = () => { const alerts = useQuery('/alerts', getAlerts, { @@ -43,8 +44,8 @@ export const AlertsTable = () => { { key: 'lastStatus', title: 'Last status', - render: (c) => c.lastStatus, - width: '10rem', + render: (c) => , + width: '6rem', }, { key: 'actions', diff --git a/client/src/pages/alerts/components/ContactPointsTable/ContactPointsTable.tsx b/client/src/pages/alerts/components/ContactPointsTable/ContactPointsTable.tsx index 2fa7c31..786434b 100644 --- a/client/src/pages/alerts/components/ContactPointsTable/ContactPointsTable.tsx +++ b/client/src/pages/alerts/components/ContactPointsTable/ContactPointsTable.tsx @@ -53,7 +53,10 @@ export const ContactPointsTable = () => { className: 'actions', render: (c) => (
-