More UI tweaks and Drop Mirror UI (#599)

- Drop mirror button in mirrors page
- Better text for unsupported source peer page
- Better tables in mirrors page and peer page
<img width="1176" alt="Screenshot 2023-10-31 at 1 00 37 PM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/b93cd886-3143-4b34-94e0-bebc739bf6c3">
(Says 'Drop' when not loading)
<img width="1459" alt="Screenshot 2023-10-31 at 1 55 46 PM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/4f75c353-d800-4af0-9df9-24345d995a52">

protos/route.proto

@@ -209,7 +209,9 @@ service FlowService {
   rpc GetStatInfo(PostgresPeerActivityInfoRequest) returns (PeerStatResponse) {
     option (google.api.http) = { get: "/v1/peers/stats/{peer_name}" };
   }
-  rpc ShutdownFlow(ShutdownRequest) returns (ShutdownResponse) {}
+  rpc ShutdownFlow(ShutdownRequest) returns (ShutdownResponse) {
+    option (google.api.http) = { post: "/v1/mirrors/drop", body: "*" };
+  }
   rpc MirrorStatus(MirrorStatusRequest) returns (MirrorStatusResponse) {
     option (google.api.http) = { get: "/v1/mirrors/{flow_job_name}" };
   }

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

@@ -0,0 +1,30 @@
+import { UDropMirrorResponse } from '@/app/dto/MirrorsDTO';
+import { ShutdownRequest, ShutdownResponse } from '@/grpc_generated/route';
+import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const { workflowId, flowJobName, sourcePeer, destinationPeer } = body;
+  const flowServiceAddr = GetFlowHttpAddressFromEnv();
+  const req: ShutdownRequest = {
+    workflowId,
+    flowJobName,
+    sourcePeer,
+    destinationPeer,
+  };
+  console.log('/drop/mirror: req:', req);
+  const dropStatus: ShutdownResponse = await fetch(
+    `${flowServiceAddr}/v1/mirrors/drop`,
+    {
+      method: 'POST',
+      body: JSON.stringify(req),
+    }
+  ).then((res) => {
+    return res.json();
+  });
+  let response: UDropMirrorResponse = {
+    dropped: dropStatus.ok,
+  };
+
+  return new Response(JSON.stringify(response));
+}

ui/app/api/peers/route.ts

@@ -1,4 +1,5 @@
 import {
+  CatalogPeer,
   PeerConfig,
   UCreatePeerResponse,
   UValidatePeerResponse,
@@ -94,56 +95,58 @@ export async function POST(request: Request) {
   }
 }
 
+export const getTruePeer = (peer: CatalogPeer) => {
+  const newPeer: Peer = {
+    name: peer.name,
+    type: peer.type,
+  };
+  const options = peer.options;
+  let config:
+    | BigqueryConfig
+    | SnowflakeConfig
+    | PostgresConfig
+    | EventHubConfig
+    | S3Config
+    | SqlServerConfig
+    | EventHubGroupConfig;
+  switch (peer.type) {
+    case 0:
+      config = BigqueryConfig.decode(options);
+      newPeer.bigqueryConfig = config;
+      break;
+    case 1:
+      config = SnowflakeConfig.decode(options);
+      newPeer.snowflakeConfig = config;
+      break;
+    case 3:
+      config = PostgresConfig.decode(options);
+      newPeer.postgresConfig = config;
+      break;
+    case 4:
+      config = EventHubConfig.decode(options);
+      newPeer.eventhubConfig = config;
+      break;
+    case 5:
+      config = S3Config.decode(options);
+      newPeer.s3Config = config;
+      break;
+    case 6:
+      config = SqlServerConfig.decode(options);
+      newPeer.sqlserverConfig = config;
+      break;
+    case 7:
+      config = EventHubGroupConfig.decode(options);
+      newPeer.eventhubGroupConfig = config;
+      break;
+    default:
+      return newPeer;
+  }
+  return newPeer;
+};
+
 // GET all the peers from the database
 export async function GET(request: Request) {
   const peers = await prisma.peers.findMany();
-  const truePeers: Peer[] = peers.map((peer) => {
-    const newPeer: Peer = {
-      name: peer.name,
-      type: peer.type,
-    };
-    const options = peer.options;
-    let config:
-      | BigqueryConfig
-      | SnowflakeConfig
-      | PostgresConfig
-      | EventHubConfig
-      | S3Config
-      | SqlServerConfig
-      | EventHubGroupConfig;
-    switch (peer.type) {
-      case 0:
-        config = BigqueryConfig.decode(options);
-        newPeer.bigqueryConfig = config;
-        break;
-      case 1:
-        config = SnowflakeConfig.decode(options);
-        newPeer.snowflakeConfig = config;
-        break;
-      case 3:
-        config = PostgresConfig.decode(options);
-        newPeer.postgresConfig = config;
-        break;
-      case 4:
-        config = EventHubConfig.decode(options);
-        newPeer.eventhubConfig = config;
-        break;
-      case 5:
-        config = S3Config.decode(options);
-        newPeer.s3Config = config;
-        break;
-      case 6:
-        config = SqlServerConfig.decode(options);
-        newPeer.sqlserverConfig = config;
-        break;
-      case 7:
-        config = EventHubGroupConfig.decode(options);
-        newPeer.eventhubGroupConfig = config;
-        break;
-      default:
-        return newPeer;
-    }
-    return newPeer;
-  });
+  const truePeers: Peer[] = peers.map((peer) => getTruePeer(peer));
   return new Response(JSON.stringify(truePeers));
 }

ui/app/dto/MirrorsDTO.ts

@@ -5,6 +5,10 @@ export type UCreateMirrorResponse = {
   created: boolean;
 };
 
+export type UDropMirrorResponse = {
+  dropped: boolean;
+};
+
 export type CDCConfig = FlowConnectionConfigs;
 export type MirrorConfig = CDCConfig | QRepConfig;
 export type MirrorSetter = Dispatch<SetStateAction<CDCConfig | QRepConfig>>;

ui/app/dto/PeersDTO.ts

@@ -23,3 +23,9 @@ export type UColumnsResponse = {
 };
 
 export type PeerConfig = PostgresConfig | SnowflakeConfig;
+export type CatalogPeer = {
+  id: number;
+  name: string;
+  type: number;
+  options: Buffer;
+};