Show alerts in UI

ui/app/api/mirrors/alerts/route.ts

@@ -0,0 +1,16 @@
+import prisma from '@/app/utils/prisma';
+
+export const dynamic = 'force-dynamic';
+
+export async function POST(request: Request) {
+  const { flowName } = await request.json();
+  const errs = await prisma.flow_errors.findMany({
+    where: {
+      flow_name: flowName,
+    },
+  });
+
+  return new Response(
+    JSON.stringify(errs, (_, v) => (typeof v === 'bigint' ? v.toString() : v))
+  );
+}

ui/app/mirrors/mirror-error.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { Icon } from "@/lib/Icon";
+import { Prisma } from "@prisma/client";
+import React, { useState, useEffect } from "react";
+import * as Popover from '@radix-ui/react-popover';
+import { ProgressCircle } from "@/lib/ProgressCircle";
+import styled, { css } from 'styled-components';
+
+
+// const NoErrorMirror = styled.div`
+// color:  ${({ theme }) => theme.colors.positive.fill.normal};
+// `;
+
+// const ErroredMirror = styled.div`
+// color:  ${({ theme }) => theme.colors.destructive.fill.normal};
+// `;
+
+
+export const ErrorModal = ({ flowErrors }: { flowErrors: Prisma.flow_errorsSelect[] }) => {
+  return (
+    <Icon name='error' />
+  );
+};
+
+
+export const MirrorError = ({ flowName }: { flowName: string }) => {
+  const [flowErrors, setFlowErrors] = useState<Prisma.flow_errorsSelect[]>();
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/mirrors/alerts`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ flowName }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+
+        const data = await response.json();
+        setFlowErrors(data.errors);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [flowName]);
+
+  if (isLoading) {
+    return <div><ProgressCircle variant="intermediate_progress_circle" /></div>;
+  }
+
+  if (error) {
+    console.log(error);
+    return <div><Icon name='error' /></div>;
+  }
+
+  if (!flowErrors || flowErrors.length === 0) {
+    return <Icon name='check_circle' fill={true} />;
+  }
+
+  return <ErrorModal flowErrors={flowErrors} />;
+};

ui/app/mirrors/tables.tsx

@@ -5,8 +5,10 @@ import TimeLabel from '@/components/TimeComponent';
 import { Label } from '@/lib/Label';
 import { SearchField } from '@/lib/SearchField';
 import { Table, TableCell, TableRow } from '@/lib/Table';
+import { Tab } from '@tremor/react';
 import Link from 'next/link';
 import { useMemo, useState } from 'react';
+import { MirrorError } from './mirror-error';
 
 export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -43,7 +45,7 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
           }}
           header={
             <TableRow>
-              {['Name', 'Source', 'Destination', 'Start Time', ''].map(
+              {['Name', 'Source', 'Destination', 'Start Time', 'Errors', ''].map(
                 (heading, index) => (
                   <TableCell as='th' key={index}>
                     <Label as='label' style={{ fontWeight: 'bold' }}>
@@ -77,6 +79,9 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
               <TableCell>
                 <TimeLabel timeVal={flow.created_at} />
               </TableCell>
+              <TableCell>
+                <MirrorError flowName={flow.name} />
+              </TableCell>
               <TableCell>
                 <DropDialog
                   mode='MIRROR'

ui/prisma/schema.prisma

@@ -155,7 +155,51 @@ model peer_slot_size {
   confirmed_flush_lsn String?
   slot_size           BigInt?
   updated_at          DateTime @default(now()) @db.Timestamp(6)
+  wal_status          String?
 
   @@index([slot_name], map: "index_slot_name")
   @@schema("peerdb_stats")
 }
+
+/// This table contains check constraints and requires additional setup for migrations. Visit https://pris.ly/d/check-constraints for more info.
+model alerting_config {
+  id             BigInt @id @default(autoincrement())
+  service_type   String
+  service_config Json
+
+  @@schema("peerdb_stats")
+}
+
+/// This table contains check constraints and requires additional setup for migrations. Visit https://pris.ly/d/check-constraints for more info.
+model alerts_v1 {
+  id                BigInt    @id @default(autoincrement())
+  alert_key         String
+  alert_level       String    @default("critical")
+  alert_message     String
+  created_timestamp DateTime? @default(now()) @db.Timestamp(6)
+
+  @@schema("peerdb_stats")
+}
+
+model flow_errors {
+  id              BigInt   @id @default(autoincrement())
+  flow_name       String
+  error_message   String
+  error_type      String
+  error_timestamp DateTime @default(now()) @db.Timestamp(6)
+  ack             Boolean  @default(false)
+
+  @@index([flow_name], map: "idx_flow_errors_flow_name")
+  @@schema("peerdb_stats")
+}
+
+model schema_deltas_audit_log {
+  id             BigInt    @id @default(autoincrement())
+  flow_job_name  String
+  read_timestamp DateTime? @default(now()) @db.Timestamp(6)
+  workflow_id    String
+  run_id         String
+  delta_info     Json
+
+  @@schema("peerdb_stats")
+}