From 11ca60b12b85267024f7f0fb5f9df3eee25afad9 Mon Sep 17 00:00:00 2001
From: Kaushik Iska <iska.kaushik@gmail.com>
Date: Fri, 20 Oct 2023 10:00:47 -0400
Subject: [PATCH] do minor ui tweaks

---
 ui/app/mirrors/edit/[mirrorId]/cdc.tsx        |  5 ++-
 ui/app/mirrors/edit/[mirrorId]/page.tsx       |  3 ++
 .../edit/[mirrorId]/syncStatusTable.tsx       |  5 ++-
 ui/app/mirrors/page.tsx                       |  5 ++-
 .../mirrors/status/qrep/[mirrorId]/page.tsx   |  4 ++
 .../qrep/[mirrorId]/qrepConfigViewer.tsx      | 43 +++++++++++++++++++
 .../qrep/[mirrorId]/qrepStatusTable.tsx       |  5 ++-
 ui/app/peers/edit/[connectorId]/page.tsx      |  5 ++-
 ui/lib/Badge/Badge.styles.ts                  |  7 +++
 ui/package.json                               |  1 +
 ui/yarn.lock                                  | 15 +++++++
 11 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 ui/app/mirrors/status/qrep/[mirrorId]/qrepConfigViewer.tsx

diff --git a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
index d70ba3b4fa..02202922cc 100644
--- a/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/cdc.tsx
@@ -106,7 +106,10 @@ const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
           <Button variant='normalBorderless'>
             <Icon name='chevron_right' />
           </Button>
-          <Button variant='normalBorderless'>
+          <Button
+            variant='normalBorderless'
+            onClick={() => window.location.reload()}
+          >
             <Icon name='refresh' />
           </Button>
         </>
diff --git a/ui/app/mirrors/edit/[mirrorId]/page.tsx b/ui/app/mirrors/edit/[mirrorId]/page.tsx
index ce3ccab474..e2c5e6596a 100644
--- a/ui/app/mirrors/edit/[mirrorId]/page.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/page.tsx
@@ -2,6 +2,7 @@ import { MirrorStatusResponse } from '@/grpc_generated/route';
 import { Header } from '@/lib/Header';
 import { LayoutMain } from '@/lib/Layout';
 import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
+import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
 import { CDCMirror } from './cdc';
 import SyncStatus from './syncStatus';
@@ -39,6 +40,8 @@ export default async function EditMirror({
   let syncStatusChild = <></>;
   if (mirrorStatus.cdcStatus) {
     syncStatusChild = <SyncStatus flowJobName={mirrorId} />;
+  } else {
+    redirect(`/mirrors/status/qrep/${mirrorId}`);
   }
 
   return (
diff --git a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
index 06abcc67ce..d26ef70a6e 100644
--- a/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
+++ b/ui/app/mirrors/edit/[mirrorId]/syncStatusTable.tsx
@@ -76,7 +76,10 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
               <Icon name='chevron_right' />
             </Button>
             <Label>{`${currentPage} of ${totalPages}`}</Label>
-            <Button variant='normalBorderless'>
+            <Button
+              variant='normalBorderless'
+              onClick={() => window.location.reload()}
+            >
               <Icon name='refresh' />
             </Button>
           </>
diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
index 6c40108f07..9cbb00035b 100644
--- a/ui/app/mirrors/page.tsx
+++ b/ui/app/mirrors/page.tsx
@@ -170,7 +170,10 @@ async function QRepFlows() {
             </Label>
           </TableCell>
           <TableCell>
-            <Label>Status TBD</Label>
+            <Badge variant='positive' key={1}>
+              <Icon name='play_circle' />
+              Active
+            </Badge>
           </TableCell>
         </TableRow>
       ))}
diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/page.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/page.tsx
index 131d788ee6..a3fed7e0e9 100644
--- a/ui/app/mirrors/status/qrep/[mirrorId]/page.tsx
+++ b/ui/app/mirrors/status/qrep/[mirrorId]/page.tsx
@@ -1,8 +1,11 @@
 import prisma from '@/app/utils/prisma';
 import { Header } from '@/lib/Header';
 import { LayoutMain } from '@/lib/Layout';
+import QRepConfigViewer from './qrepConfigViewer';
 import QRepStatusTable, { QRepPartitionStatus } from './qrepStatusTable';
 
+export const dynamic = 'force-dynamic';
+
 type QRepMirrorStatusProps = {
   params: { mirrorId: string };
 };
@@ -37,6 +40,7 @@ export default async function QRepMirrorStatus({
   return (
     <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
       <Header variant='title2'>{mirrorId}</Header>
+      <QRepConfigViewer mirrorId={mirrorId} />
       <QRepStatusTable flowJobName={mirrorId} partitions={partitions} />
     </LayoutMain>
   );
diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepConfigViewer.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepConfigViewer.tsx
new file mode 100644
index 0000000000..05fffd9570
--- /dev/null
+++ b/ui/app/mirrors/status/qrep/[mirrorId]/qrepConfigViewer.tsx
@@ -0,0 +1,43 @@
+import prisma from '@/app/utils/prisma';
+import { QRepConfig } from '@/grpc_generated/flow';
+import { Badge } from '@/lib/Badge';
+import { Icon } from '@/lib/Icon';
+
+export const dynamic = 'force-dynamic';
+
+type QRepConfigViewerProps = {
+  mirrorId: string;
+};
+
+export default async function QRepConfigViewer({
+  mirrorId,
+}: QRepConfigViewerProps) {
+  const configBuffer = await prisma.qrep_runs.findFirst({
+    select: {
+      config_proto: true,
+    },
+    where: {
+      flow_name: mirrorId,
+      config_proto: {
+        not: null,
+      },
+    },
+  });
+
+  if (!configBuffer?.config_proto) {
+    return <div>Config Unavailable</div>;
+  }
+
+  let qrepConfig = QRepConfig.decode(configBuffer.config_proto);
+
+  return (
+    <div className='my-4'>
+      <Badge variant='warning' type='longText'>
+        <Icon name={qrepConfig.initialCopyOnly ? 'double_arrow' : 'sync'} />
+        <div className='font-bold'>
+          {qrepConfig.initialCopyOnly ? 'Initial Load' : 'Continuous Sync'}
+        </div>
+      </Badge>
+    </div>
+  );
+}
diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
index c50c145de1..e90038d45c 100644
--- a/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
+++ b/ui/app/mirrors/status/qrep/[mirrorId]/qrepStatusTable.tsx
@@ -117,7 +117,10 @@ export default function QRepStatusTable({
             >
               <Icon name='chevron_right' />
             </Button>
-            <Button variant='normalBorderless'>
+            <Button
+              variant='normalBorderless'
+              onClick={() => window.location.reload()}
+            >
               <Icon name='refresh' />
             </Button>
             <Button variant='normalBorderless'>
diff --git a/ui/app/peers/edit/[connectorId]/page.tsx b/ui/app/peers/edit/[connectorId]/page.tsx
index 232a3f77ed..f7021b8c04 100644
--- a/ui/app/peers/edit/[connectorId]/page.tsx
+++ b/ui/app/peers/edit/[connectorId]/page.tsx
@@ -65,7 +65,10 @@ const ExampleTable = ({ title }: { title: string }) => (
           <Button variant='normalBorderless'>
             <Icon name='chevron_right' />
           </Button>
-          <Button variant='normalBorderless'>
+          <Button
+            variant='normalBorderless'
+            onClick={() => window.location.reload()}
+          >
             <Icon name='refresh' />
           </Button>
           <Button variant='normalBorderless'>
diff --git a/ui/lib/Badge/Badge.styles.ts b/ui/lib/Badge/Badge.styles.ts
index de564a384b..caa2ee4430 100644
--- a/ui/lib/Badge/Badge.styles.ts
+++ b/ui/lib/Badge/Badge.styles.ts
@@ -40,9 +40,16 @@ const singleDigitTypeStyle = css`
   height: 24px;
   justify-content: center;
 `;
+const longTextTypeStyle = css`
+  padding: 10;
+  width: max-content;
+  height: 32px;
+  justify-content: center;
+`;
 const types = {
   default: defaultTypeStyle,
   singleDigit: singleDigitTypeStyle,
+  longText: longTextTypeStyle,
 };
 
 const baseStyle = css`
diff --git a/ui/package.json b/ui/package.json
index 627f0abf45..2eb449027c 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -18,6 +18,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@prisma/client": "^5.4.2",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-icons": "^1.3.0",
diff --git a/ui/yarn.lock b/ui/yarn.lock
index c13debc7ec..093ddfdd3a 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1806,6 +1806,21 @@
     "@radix-ui/react-use-previous" "1.0.1"
     "@radix-ui/react-use-size" "1.0.1"
 
+"@radix-ui/react-collapsible@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz#df0e22e7a025439f13f62d4e4a9e92c4a0df5b81"
+  integrity sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-collection@1.0.3":
   version "1.0.3"
   resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz"