init alert view

Signed-off-by: Augustin Husson <augustin.husson@amadeus.com>

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>
   );

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);
+  });
+}

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
-          <Button variant="text">Silences</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>

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>
+  );
+}

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;
   }