From 7c5adbe0118ec9d1a1effdc2451dd44ef4f8d795 Mon Sep 17 00:00:00 2001
From: Kaushik Iska <iska.kaushik@gmail.com>
Date: Fri, 22 Dec 2023 11:15:00 -0500
Subject: [PATCH 1/2] Show alerts in UI

---
 ui/app/api/mirrors/alerts/route.ts | 16 +++++++
 ui/app/mirrors/mirror-error.tsx    | 74 ++++++++++++++++++++++++++++++
 ui/app/mirrors/tables.tsx          |  7 ++-
 ui/prisma/schema.prisma            | 44 ++++++++++++++++++
 4 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 ui/app/api/mirrors/alerts/route.ts
 create mode 100644 ui/app/mirrors/mirror-error.tsx

diff --git a/ui/app/api/mirrors/alerts/route.ts b/ui/app/api/mirrors/alerts/route.ts
new file mode 100644
index 0000000000..1870ef89af
--- /dev/null
+++ b/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))
+  );
+}
diff --git a/ui/app/mirrors/mirror-error.tsx b/ui/app/mirrors/mirror-error.tsx
new file mode 100644
index 0000000000..950ef6d500
--- /dev/null
+++ b/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} />;
+};
diff --git a/ui/app/mirrors/tables.tsx b/ui/app/mirrors/tables.tsx
index 743bbc28a4..133427ff43 100644
--- a/ui/app/mirrors/tables.tsx
+++ b/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'
diff --git a/ui/prisma/schema.prisma b/ui/prisma/schema.prisma
index 3e71753d4c..3337588e2b 100644
--- a/ui/prisma/schema.prisma
+++ b/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")
+}

From db3b18eec8fa6a790ce93bd2078366d8d6022f9f Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Sat, 23 Dec 2023 02:07:00 +0530
Subject: [PATCH 2/2] error log page UI

---
 ui/app/api/mirrors/alerts/route.ts          | 15 ++--
 ui/app/dto/MirrorsDTO.ts                    |  9 +++
 ui/app/mirrors/errors/[mirrorName]/page.tsx | 75 +++++++++++++++++++
 ui/app/mirrors/mirror-error.tsx             | 74 ------------------
 ui/app/mirrors/mirror-status.tsx            | 83 +++++++++++++++++++++
 ui/app/mirrors/tables.tsx                   | 32 +++++---
 6 files changed, 198 insertions(+), 90 deletions(-)
 create mode 100644 ui/app/mirrors/errors/[mirrorName]/page.tsx
 delete mode 100644 ui/app/mirrors/mirror-error.tsx
 create mode 100644 ui/app/mirrors/mirror-status.tsx

diff --git a/ui/app/api/mirrors/alerts/route.ts b/ui/app/api/mirrors/alerts/route.ts
index 1870ef89af..ecb9891cbd 100644
--- a/ui/app/api/mirrors/alerts/route.ts
+++ b/ui/app/api/mirrors/alerts/route.ts
@@ -4,13 +4,18 @@ export const dynamic = 'force-dynamic';
 
 export async function POST(request: Request) {
   const { flowName } = await request.json();
-  const errs = await prisma.flow_errors.findMany({
+  const errCount = await prisma.flow_errors.count({
     where: {
       flow_name: flowName,
+      error_type: 'error',
+      ack: false,
     },
   });
-
-  return new Response(
-    JSON.stringify(errs, (_, v) => (typeof v === 'bigint' ? v.toString() : v))
-  );
+  let mirrorStatus: 'healthy' | 'failed';
+  if (errCount > 0) {
+    mirrorStatus = 'failed';
+  } else {
+    mirrorStatus = 'healthy';
+  }
+  return new Response(JSON.stringify(mirrorStatus));
 }
diff --git a/ui/app/dto/MirrorsDTO.ts b/ui/app/dto/MirrorsDTO.ts
index 4a76200fd4..977f7f353c 100644
--- a/ui/app/dto/MirrorsDTO.ts
+++ b/ui/app/dto/MirrorsDTO.ts
@@ -28,3 +28,12 @@ export type SyncStatusRow = {
   endTime: Date | null;
   numRows: number;
 };
+
+export type AlertErr = {
+  id: bigint;
+  flow_name: string;
+  error_message: string;
+  error_type: string;
+  error_timestamp: Date;
+  ack: boolean;
+};
diff --git a/ui/app/mirrors/errors/[mirrorName]/page.tsx b/ui/app/mirrors/errors/[mirrorName]/page.tsx
new file mode 100644
index 0000000000..75e8c91d2b
--- /dev/null
+++ b/ui/app/mirrors/errors/[mirrorName]/page.tsx
@@ -0,0 +1,75 @@
+import { AlertErr } from '@/app/dto/MirrorsDTO';
+import prisma from '@/app/utils/prisma';
+import TimeLabel from '@/components/TimeComponent';
+import { Label } from '@/lib/Label';
+import { Table, TableCell, TableRow } from '@/lib/Table';
+
+type MirrorErrorProps = {
+  params: { mirrorName: string };
+};
+
+const MirrorError = async ({ params: { mirrorName } }: MirrorErrorProps) => {
+  const mirrorErrors: AlertErr[] = await prisma.flow_errors.findMany({
+    where: {
+      flow_name: mirrorName,
+      error_type: 'error',
+    },
+    distinct: ['error_message'],
+  });
+
+  return (
+    <div style={{ padding: '2rem' }}>
+      <Label variant='title2'>Error Log</Label>
+      <hr></hr>
+      <div style={{ marginTop: '1rem' }}>
+        <Label variant='body'>
+          <b>Mirror name</b>:
+        </Label>
+        <Label variant='body'>{mirrorName}</Label>
+        <div
+          style={{
+            fontSize: 15,
+            marginTop: '1rem',
+            width: '100%',
+            border: '1px solid rgba(0,0,0,0.1)',
+            padding: '1rem',
+            borderRadius: '1rem',
+          }}
+        >
+          <Table
+            header={
+              <TableRow style={{ textAlign: 'left' }}>
+                <TableCell>Type</TableCell>
+                <TableCell>Message</TableCell>
+                <TableCell>
+                  <Label as='label' style={{ fontSize: 15 }}>
+                    Timestamp
+                  </Label>
+                </TableCell>
+              </TableRow>
+            }
+          >
+            {mirrorErrors.map((mirrorError) => (
+              <TableRow key={mirrorError.error_message}>
+                <TableCell style={{ color: '#F45156', width: '10%' }}>
+                  {mirrorError.error_type.toUpperCase()}
+                </TableCell>
+                <TableCell style={{ width: '70%', fontSize: 13 }}>
+                  {mirrorError.error_message}
+                </TableCell>
+                <TableCell style={{ width: '30%' }}>
+                  <TimeLabel
+                    fontSize={14}
+                    timeVal={mirrorError.error_timestamp.toLocaleString()}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MirrorError;
diff --git a/ui/app/mirrors/mirror-error.tsx b/ui/app/mirrors/mirror-error.tsx
deleted file mode 100644
index 950ef6d500..0000000000
--- a/ui/app/mirrors/mirror-error.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-'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} />;
-};
diff --git a/ui/app/mirrors/mirror-status.tsx b/ui/app/mirrors/mirror-status.tsx
new file mode 100644
index 0000000000..2a68b7b3d2
--- /dev/null
+++ b/ui/app/mirrors/mirror-status.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { Button } from '@/lib/Button';
+import { Icon } from '@/lib/Icon';
+import { Label } from '@/lib/Label';
+import { ProgressCircle } from '@/lib/ProgressCircle';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+export const ErrorModal = ({ flowName }: { flowName: string }) => {
+  const router = useRouter();
+  return (
+    <Link href={`/mirrors/errors/${flowName}`}>
+      <Button
+        style={{
+          backgroundColor: 'rgba(240, 128, 128, 0.5)',
+          height: '2rem',
+          boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
+        }}
+      >
+        <Label as='label' style={{ fontSize: 13, color: 'darkred' }}>
+          Show errors
+        </Label>
+      </Button>
+    </Link>
+  );
+};
+
+export const MirrorError = ({ flowName }: { flowName: string }) => {
+  const [flowStatus, setFlowStatus] = useState<string>();
+  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 flowStatus = await response.json();
+        setFlowStatus(flowStatus);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [flowName]);
+
+  if (isLoading) {
+    return (
+      <div>
+        <ProgressCircle variant='intermediate_progress_circle' />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        <Icon name='error' />
+      </div>
+    );
+  }
+
+  if (flowStatus == 'healthy') {
+    return <Icon name='check_circle' fill={true} />;
+  }
+
+  return <ErrorModal flowName={flowName} />;
+};
diff --git a/ui/app/mirrors/tables.tsx b/ui/app/mirrors/tables.tsx
index 133427ff43..6c1289befc 100644
--- a/ui/app/mirrors/tables.tsx
+++ b/ui/app/mirrors/tables.tsx
@@ -5,10 +5,9 @@ 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';
+import { MirrorError } from './mirror-status';
 
 export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
   const [searchQuery, setSearchQuery] = useState<string>('');
@@ -45,15 +44,26 @@ export function CDCFlows({ cdcFlows }: { cdcFlows: any }) {
           }}
           header={
             <TableRow>
-              {['Name', 'Source', 'Destination', 'Start Time', 'Errors', ''].map(
-                (heading, index) => (
-                  <TableCell as='th' key={index}>
-                    <Label as='label' style={{ fontWeight: 'bold' }}>
-                      {heading}
-                    </Label>
-                  </TableCell>
-                )
-              )}
+              {[
+                'Name',
+                'Source',
+                'Destination',
+                'Start Time',
+                'Status',
+                '',
+              ].map((heading, index) => (
+                <TableCell as='th' key={index}>
+                  <Label
+                    as='label'
+                    style={{
+                      fontWeight: 'bold',
+                      padding: heading === 'Status' ? 0 : 'auto',
+                    }}
+                  >
+                    {heading}
+                  </Label>
+                </TableCell>
+              ))}
             </TableRow>
           }
         >