#463: Show build-info in the footer

.github/workflows/test-build-push.yml

@@ -73,6 +73,9 @@ jobs:
 
       - name: Run build
         run: npm run package
+        env:
+          VITE_GIT_BRANCH: '${{ github.ref_name }}'
+          VITE_GIT_REVISION: '${{ github.sha }}'
 
   build-and-push-image:
     name: Build and Push Docker Image

openapi/StudyManagerAPI.yaml

@@ -1283,7 +1283,19 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/FrontendConfiguration'
-
+  /config/buildInfo:
+    get:
+      tags:
+        - configuration
+      description: retrieve the build info
+      operationId: getBuildInfo
+      responses:
+        200:
+          description: the build-info
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/BuildInfo'
 
 components:
   schemas:
@@ -1980,6 +1992,22 @@ components:
       required:
         - auth
       readOnly: true
+    BuildInfo:
+      type: object
+      properties:
+        version:
+          type: string
+          default: '0.0.0'
+        date:
+          type: string
+          format: date-time
+        branch:
+          type: string
+        rev:
+          type: string
+      required:
+        - version
+        - date
 
   parameters:
     StudyId:

src/components/shared/Footer.vue

@@ -4,16 +4,45 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
-  import { inject } from 'vue';
-  import { FrontendConfiguration } from '../../generated-sources/openapi';
+  import { inject, ref } from 'vue';
+  import {
+    BuildInfo,
+    FrontendConfiguration,
+  } from '../../generated-sources/openapi';
+  import OverlayPanel from 'primevue/overlaypanel';
 
   const uiConfig = inject('uiConfig') as FrontendConfiguration;
+  const buildInfo = inject('buildInfo') as {
+    frontend: BuildInfo;
+    backend: BuildInfo;
+  };
+  const buildInfoPanel = ref();
 </script>
 
 <template>
   <footer class="footer w-full">
     <div class="content-block mx-24 my-6 flex justify-between">
       <div>
+        <OverlayPanel ref="buildInfoPanel">
+          <div class="w-25rem flex flex-col gap-3">
+            <div
+              v-for="(info, tier) in buildInfo"
+              :key="tier"
+              class="build-info"
+            >
+              <div class="build-info_tier">{{ tier }}:</div>
+              <div class="build-info">
+                <span class="build-info_git">
+                  {{ info.branch || '' }}@{{ info.rev || '?' }}
+                </span>
+                <span class="build-info_date">
+                  ({{ new Date(info.date).toISOString() }})
+                </span>
+              </div>
+            </div>
+          </div>
+        </OverlayPanel>
+        <i class="pi pi-info-circle link" @click="buildInfoPanel.toggle"></i>
         {{ uiConfig.title }}
       </div>
       <a
@@ -53,4 +82,14 @@ Licensed under the Elastic License 2.0. */
       z-index: 100;
     }
   }
+
+  .p-overlaypanel-content {
+    .build-info_tier {
+      text-transform: capitalize;
+      font-weight: bold;
+    }
+    .build-info_git {
+      font-family: monospace;
+    }
+  }
 </style>

src/env.d.ts

@@ -8,6 +8,10 @@
  */
 /// <reference types="vite/client" />
 
+declare const __APP_VERSION__: string;
+declare const __BUILD_DATE__: string;
+declare const __BUILD_BRANCH__: string;
+declare const __BUILD_REVISION__: string;
 declare module '*.vue' {
   import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

src/main.ts

@@ -24,10 +24,34 @@ import i18n from './i18n/i18n';
 import { useErrorHandling } from './composable/useErrorHandling';
 import useLoader from './composable/useLoader';
 import { useUiConfigApi } from './composable/useApi';
-import { FrontendConfiguration } from './generated-sources/openapi';
+import { BuildInfo, FrontendConfiguration } from './generated-sources/openapi';
 
 const { uiConfigApi } = useUiConfigApi();
 
+const buildInfo = await uiConfigApi
+  .getBuildInfo()
+  .then((r) => r.data)
+  .catch((err: AxiosError) => {
+    console.info('Could not retrieve Build-Info from the backend', err.message);
+    return {
+      version: '0.0.0',
+      date: new Date(0).toISOString(),
+      branch: undefined,
+      rev: undefined,
+    } as BuildInfo;
+  })
+  .then((backend) => {
+    return {
+      frontend: {
+        version: __APP_VERSION__,
+        date: new Date(__BUILD_DATE__).toISOString(),
+        branch: __BUILD_BRANCH__,
+        rev: __BUILD_REVISION__,
+      } as BuildInfo,
+      backend,
+    };
+  });
+
 const uiConfig = await uiConfigApi
   .getFrontendConfig()
   .then((r) => r.data)
@@ -73,6 +97,7 @@ useLoader().activateLoadingInterceptor();
 const pinia = createPinia();
 
 const app = createApp(App);
+app.provide('buildInfo', buildInfo);
 app.provide('uiConfig', uiConfig);
 app.provide('authService', authService);
 

vite.config.ts

@@ -8,6 +8,12 @@ export default defineConfig({
     //TODO maybe remove on cleanup session
     target: 'esnext',
   },
+  define: {
+    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
+    __BUILD_DATE__: JSON.stringify(new Date().toISOString()),
+    __BUILD_BRANCH__: 'import.meta.env.VITE_GIT_BRANCH',
+    __BUILD_REVISION__: 'import.meta.env.VITE_GIT_REVISION',
+  },
   server: {
     port: 3000,
     proxy: {