Show version, make ui dependent on api in docker

docker-compose-dev.yml

@@ -209,6 +209,8 @@ services:
       DATABASE_URL: postgres://postgres:postgres@catalog:5432/postgres
       PEERDB_FLOW_SERVER_HTTP: http://flow_api:8113
       PEERDB_PASSWORD:
+    depends_on:
+      - flow-api
 
 volumes:
   pgdata:

docker-compose.yml

@@ -174,6 +174,8 @@ services:
       <<: *catalog-config
       DATABASE_URL: postgres://postgres:postgres@catalog:5432/postgres
       PEERDB_FLOW_SERVER_HTTP: http://flow_api:8113
+    depends_on:
+      - flow-api
 
 volumes:
   pgdata:

ui/app/api/version/route.ts

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

ui/app/dto/VersionDTO.ts

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

ui/components/SidebarComponent.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { UVersionResponse } from '@/app/dto/VersionDTO';
 import useTZStore from '@/app/globalstate/time';
 import Logout from '@/components/Logout';
 import { BrandLogo } from '@/lib/BrandLogo';
@@ -8,11 +9,30 @@ import { Label } from '@/lib/Label';
 import { RowWithSelect } from '@/lib/Layout';
 import { Sidebar, SidebarItem } from '@/lib/Sidebar';
 import Link from 'next/link';
+import useSWR from 'swr';
 
+const centerFlexStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '100%',
+  marginBottom: '0.5rem',
+};
+const fetcher = (...args: [any]) => fetch(...args).then((res) => res.json());
 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 {
+    data: version,
+    error,
+    isLoading,
+  }: { data: UVersionResponse; error: any; isLoading: boolean } = useSWR(
+    '/api/version',
+    fetcher
+  );
+
   return (
     <Sidebar
       topTitle={
@@ -24,15 +44,7 @@ export default function SidebarComponent(props: { logout?: boolean }) {
       }
       bottomRow={
         <>
-          <div
-            style={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              width: '100%',
-              marginBottom: '0.5rem',
-            }}
-          >
+          <div style={centerFlexStyle}>
             <div style={{ width: '80%' }}>
               <RowWithSelect
                 label={<Label>Timezone:</Label>}
@@ -63,7 +75,15 @@ export default function SidebarComponent(props: { logout?: boolean }) {
           {props.logout && <Logout />}
         </>
       }
-      bottomLabel={<Label variant='footnote'>App. v0.7.0</Label>}
+      bottomLabel={
+        <div style={centerFlexStyle}>
+          <Label as='label' style={{ textAlign: 'center', fontSize: 15 }}>
+            {' '}
+            <b>Version: </b>
+            {isLoading ? 'Loading...' : version?.version}
+          </Label>
+        </div>
+      }
     >
       <SidebarItem
         as={Link}