Add a version component

ui/app/api/version/route.ts

@@ -0,0 +1,25 @@
+import { UPeerDBVersion } from '@/app/dto/VersionDTO';
+import { PeerDBVersionResponse } from '@/grpc_generated/route';
+import { GetFlowHttpAddressFromEnv } from '@/rpc/http';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(request: Request) {
+  const flowServiceAddr = GetFlowHttpAddressFromEnv();
+  try {
+    const versionResponse: PeerDBVersionResponse = await fetch(
+      `${flowServiceAddr}/v1/version`,
+      {
+        method: 'GET',
+      }
+    ).then((res) => {
+      return res.json();
+    });
+    let response: UPeerDBVersion = {
+      version: versionResponse.version,
+    };
+    return new Response(JSON.stringify(response));
+  } catch (e) {
+    console.log(e);
+  }
+}

ui/app/dto/VersionDTO.ts

@@ -0,0 +1,3 @@
+export type UPeerDBVersion = {
+  version: string;
+};

ui/components/SidebarComponent.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useMemo } from 'react';
 import useTZStore from '@/app/globalstate/time';
 import Logout from '@/components/Logout';
 import { BrandLogo } from '@/lib/BrandLogo';
@@ -8,11 +9,33 @@ import { Label } from '@/lib/Label';
 import { RowWithSelect } from '@/lib/Layout';
 import { Sidebar, SidebarItem } from '@/lib/Sidebar';
 import Link from 'next/link';
+import { UPeerDBVersion } from '@/app/dto/VersionDTO';
+import { ProgressCircle } from '@/lib/ProgressCircle';
+
+function ShowVersion(props: { version: UPeerDBVersion | null }) {
+  return props.version ? (
+    <Label variant='footnote'>
+      Version {props.version.version}
+    </Label>
+  ) : (
+    <Label variant='footnote'>
+      Version <ProgressCircle variant='intermediate_progress_circle' />
+    </Label>
+  );
+}
 
 export default function SidebarComponent(props: { logout?: boolean }) {
   const timezones = ['UTC', 'Local', 'Relative'];
   const setZone = useTZStore((state) => state.setZone);
   const zone = useTZStore((state) => state.timezone);
+
+  const [version, setVersion] = useState<UPeerDBVersion | null>(null);
+  useMemo(async () => {
+    const res = await fetch('/api/version');
+    const json = await res.json();
+    setVersion(json.version);
+  }, []);
+
   return (
     <Sidebar
       topTitle={
@@ -63,7 +86,7 @@ export default function SidebarComponent(props: { logout?: boolean }) {
           {props.logout && <Logout />}
         </>
       }
-      bottomLabel={<Label variant='footnote'>App. v0.7.0</Label>}
+      bottomLabel={<ShowVersion version={version} />}
     >
       <SidebarItem
         as={Link}