From 210b64f0cb3a164a2d6d8a4f67221f0acfa6e731 Mon Sep 17 00:00:00 2001
From: Augustin Husson <augustin.husson@amadeus.com>
Date: Tue, 19 Sep 2023 16:19:51 +0200
Subject: [PATCH] init alert view

Signed-off-by: Augustin Husson <augustin.husson@amadeus.com>
---
 ui/react-app/src/Router.tsx                   |  8 +++-
 ui/react-app/src/client/alert.ts              | 40 +++++++++++++++++++
 .../src/client/{am-client.ts => status.ts}    |  0
 ui/react-app/src/components/navbar.tsx        | 18 +++++++--
 ui/react-app/src/views/AlertView.tsx          | 15 +++++++
 .../views/{ViewStatus.tsx => StatusView.tsx}  |  6 +--
 6 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 ui/react-app/src/client/alert.ts
 rename ui/react-app/src/client/{am-client.ts => status.ts} (100%)
 create mode 100644 ui/react-app/src/views/AlertView.tsx
 rename ui/react-app/src/views/{ViewStatus.tsx => StatusView.tsx} (94%)

diff --git a/ui/react-app/src/Router.tsx b/ui/react-app/src/Router.tsx
index 94d32a23..0dc422e8 100644
--- a/ui/react-app/src/Router.tsx
+++ b/ui/react-app/src/Router.tsx
@@ -2,13 +2,17 @@
 import { Suspense, lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 
-const ViewStatus = lazy(() => import('./views/ViewStatus'));
+const StatusView = lazy(() => import('./views/StatusView'));
+const AlertView = lazy(() => import('./views/AlertView'));
+
+const routePrefix = '/react-app';
 
 function Router() {
   return (
     <Suspense>
       <Routes>
-        <Route path="/react-app/status" element={<ViewStatus />} />
+        <Route path={`${routePrefix}/status`} element={<StatusView />} />
+        <Route path={`${routePrefix}/alert`} element={<AlertView />} />
       </Routes>
     </Suspense>
   );
diff --git a/ui/react-app/src/client/alert.ts b/ui/react-app/src/client/alert.ts
new file mode 100644
index 00000000..4c52b5bf
--- /dev/null
+++ b/ui/react-app/src/client/alert.ts
@@ -0,0 +1,40 @@
+import { useQuery } from '@tanstack/react-query';
+import buildURL from '../utils/url-builder';
+import { fetchJson } from '../utils/fetch';
+
+const resource = 'alerts/groups';
+
+export interface Receiver {
+  name: string;
+}
+
+export interface AlertStatus {
+  state: 'active' | 'unprocessed' | 'suppressed';
+  inhibitedBy: string[];
+  silenceby: string[];
+}
+
+export interface Alert {
+  labels: Record<string, string>;
+  annotations: Record<string, string>;
+  generatorURL?: string;
+  receivers: Receiver[];
+  fingerprint: string;
+  startsAt: string;
+  endsAt: string;
+  updatedAt: string;
+  status: AlertStatus;
+}
+
+export interface AlertGroup {
+  labels: Record<string, string>;
+  receiver: Receiver;
+  alerts: Alert[];
+}
+
+export function useAlertGroups() {
+  return useQuery<AlertGroup[], Error>([], () => {
+    const url = buildURL({ resource: resource });
+    return fetchJson<AlertGroup[]>(url);
+  });
+}
diff --git a/ui/react-app/src/client/am-client.ts b/ui/react-app/src/client/status.ts
similarity index 100%
rename from ui/react-app/src/client/am-client.ts
rename to ui/react-app/src/client/status.ts
diff --git a/ui/react-app/src/components/navbar.tsx b/ui/react-app/src/components/navbar.tsx
index 9debf8a7..87a1eb4a 100644
--- a/ui/react-app/src/components/navbar.tsx
+++ b/ui/react-app/src/components/navbar.tsx
@@ -27,8 +27,18 @@ export default function Navbar(): JSX.Element {
               AlertManager
             </Typography>
           </Button>
-          <Button variant="text">Alerts</Button>
-          <Button variant="text">Silences</Button>
+          <Button
+            variant="text"
+            onClick={() => {
+              navigate('/react-app/alert');
+            }}
+            disabled={location.pathname === '/react-app/alert'}
+          >
+            Alerts
+          </Button>
+          <Button variant="text" disabled>
+            Silences
+          </Button>
           <Button
             variant="text"
             onClick={() => {
@@ -38,7 +48,9 @@ export default function Navbar(): JSX.Element {
           >
             Status
           </Button>
-          <Button variant="text">Settings</Button>
+          <Button variant="text" disabled>
+            Settings
+          </Button>
           <Button variant="text" target="_blank" href="https://prometheus.io/docs/alerting/latest/alertmanager/">
             Help
           </Button>
diff --git a/ui/react-app/src/views/AlertView.tsx b/ui/react-app/src/views/AlertView.tsx
new file mode 100644
index 00000000..b382335f
--- /dev/null
+++ b/ui/react-app/src/views/AlertView.tsx
@@ -0,0 +1,15 @@
+import { useAlertGroups } from '../client/alert';
+import { Container, Typography } from '@mui/material';
+
+export default function AlertView() {
+  const { data } = useAlertGroups();
+  if (data === undefined || data === null) {
+    return null;
+  }
+
+  return (
+    <Container maxWidth="md">
+      <Typography variant="h4">Alert</Typography>
+    </Container>
+  );
+}
diff --git a/ui/react-app/src/views/ViewStatus.tsx b/ui/react-app/src/views/StatusView.tsx
similarity index 94%
rename from ui/react-app/src/views/ViewStatus.tsx
rename to ui/react-app/src/views/StatusView.tsx
index f1e166db..dc047d93 100644
--- a/ui/react-app/src/views/ViewStatus.tsx
+++ b/ui/react-app/src/views/StatusView.tsx
@@ -13,7 +13,7 @@ import {
   Theme,
   Typography,
 } from '@mui/material';
-import { useAMStatus } from '../client/am-client';
+import { useAMStatus } from '../client/status';
 
 const tableStyle: SxProps<Theme> = {
   [`& .${tableCellClasses.root}`]: {
@@ -42,9 +42,9 @@ function CustomTableCell(props: tableCellProperties) {
   );
 }
 
-export default function ViewStatus() {
+export default function StatusView() {
   const { data } = useAMStatus();
-  if (data === undefined || data === null) {
+  if (data === undefined || data === null || (Array.isArray(data) && data.length === 0)) {
     return null;
   }