From 6ac2b27830be462a66a3d83aa1702a2ff97a7017 Mon Sep 17 00:00:00 2001
From: Manuel Holtgrewe <manuel.holtgrewe@bih-charite.de>
Date: Fri, 1 Sep 2023 09:34:08 +0200
Subject: [PATCH] feat: put the current version into docker image and display
 (#28)

---
 .gitignore                                    |  3 ++
 backend/app/main.py                           | 19 ++++++++
 frontend/src/api/__tests__/common.spec.ts     | 14 ++++--
 frontend/src/api/__tests__/misc.spec.ts       | 21 +++++++++
 frontend/src/api/annonars.ts                  |  8 ++--
 frontend/src/api/common.ts                    |  5 ++-
 frontend/src/api/misc.ts                      | 20 +++++++++
 frontend/src/components/HeaderDefault.vue     | 14 ++++++
 .../__tests__/HeaderDefault.spec.ts           | 16 ++++++-
 .../__tests__/HeaderDetailPage.spec.ts        |  2 +-
 .../src/stores/__tests__/geneInfo.spec.ts     |  3 +-
 frontend/src/stores/__tests__/misc.spec.ts    | 33 ++++++++++++++
 frontend/src/stores/geneInfo.ts               |  8 +---
 frontend/src/stores/misc.ts                   | 43 +++++++++++++++++++
 frontend/src/views/GeneDetailView.vue         |  3 +-
 .../src/views/__tests__/AboutView.spec.ts     | 14 +++++-
 .../src/views/__tests__/ContactView.spec.ts   | 14 +++++-
 .../views/__tests__/GeneDetailView.spec.ts    |  2 +-
 frontend/src/views/__tests__/HomeView.spec.ts | 35 +++++++--------
 utils/docker/Dockerfile                       |  3 ++
 utils/docker/build-docker.sh                  |  2 +
 utils/docker/empty-file-dont-remove           |  0
 22 files changed, 239 insertions(+), 43 deletions(-)
 create mode 100644 frontend/src/api/__tests__/misc.spec.ts
 create mode 100644 frontend/src/api/misc.ts
 create mode 100644 frontend/src/stores/__tests__/misc.spec.ts
 create mode 100644 frontend/src/stores/misc.ts
 create mode 100644 utils/docker/empty-file-dont-remove

diff --git a/.gitignore b/.gitignore
index 5144b746..8eb0cd09 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,9 @@
 .coverage
 coverage.lcov
 
+# Version file
+/VERSION
+
 # Environment variables
 .env
 
diff --git a/backend/app/main.py b/backend/app/main.py
index ee6cb9a3..0ef6a98d 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -1,5 +1,6 @@
 import os
 import pathlib
+import subprocess
 import sys
 
 import httpx
@@ -25,6 +26,14 @@
 BACKEND_PREFIX_MEHARI = env.get("REEV_BACKEND_PREFIX_MEHARI", "http://mehari:8080")
 #: Prefix for the backend of viguno service
 BACKEND_PREFIX_VIGUNO = env.get("REEV_BACKEND_PREFIX_VIGUNO", "http://viguno:8080")
+#: Path to REEV version file.
+VERSION_FILE = env.get("REEV_VERSION_FILE", "/VERSION")
+#: The REEV version from the file (``None`` if to load dynamically from git)
+REEV_VERSION = None
+# Try to obtain version from file, otherwise keep it at ``None``
+if os.path.exists(VERSION_FILE):
+    with open(VERSION_FILE) as f:
+        REEV_VERSION = f.read().strip() or None
 
 
 app = FastAPI()
@@ -82,6 +91,16 @@ async def reverse_proxy(request: Request) -> Response:
 app.add_route("/proxy/{path:path}", reverse_proxy, methods=["GET", "POST"])
 
 
+# Register app for returning REEV version.
+@app.get("/version")
+async def version():
+    if REEV_VERSION:
+        version = REEV_VERSION
+    else:
+        version = subprocess.check_output(["git", "describe", "--tags", "--dirty"]).strip()
+    return Response(content=version)
+
+
 # Register route for favicon.
 @app.get("/favicon.ico")
 async def favicon():
diff --git a/frontend/src/api/__tests__/common.spec.ts b/frontend/src/api/__tests__/common.spec.ts
index 38c974f0..e341d0df 100644
--- a/frontend/src/api/__tests__/common.spec.ts
+++ b/frontend/src/api/__tests__/common.spec.ts
@@ -1,11 +1,17 @@
 import { describe, it, expect } from 'vitest'
 
-import { API_BASE_PREFIX } from '../common'
+import { API_BASE_PREFIX, API_PROXY_BASE_PREFIX } from '../common'
 
-describe('API_BASE_PREFIX constant', () => {
-  it('returns the correct API base prefix in production mode', () => {
+describe('constants', () => {
+  it('returns the correct proxy API base prefix in production mode', () => {
     const originalMode = import.meta.env.MODE
-    expect(API_BASE_PREFIX).toBe('/proxy/annonars')
+    expect(API_BASE_PREFIX).toBe('/')
+    import.meta.env.MODE = originalMode
+  })
+
+  it('returns the correct proxy API base prefix in production mode', () => {
+    const originalMode = import.meta.env.MODE
+    expect(API_PROXY_BASE_PREFIX).toBe('/proxy/')
     import.meta.env.MODE = originalMode
   })
 })
diff --git a/frontend/src/api/__tests__/misc.spec.ts b/frontend/src/api/__tests__/misc.spec.ts
new file mode 100644
index 00000000..491d2bad
--- /dev/null
+++ b/frontend/src/api/__tests__/misc.spec.ts
@@ -0,0 +1,21 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { MiscClient } from '../misc'
+
+const fetchMocker = createFetchMock(vi)
+
+describe('Misc Client', () => {
+  beforeEach(() => {
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('fetches version info correctly', async () => {
+    fetchMocker.mockResponseOnce('v0.0.0')
+
+    const client = new MiscClient()
+    const result = await client.fetchVersion()
+    expect(result).toEqual('v0.0.0')
+  })
+})
diff --git a/frontend/src/api/annonars.ts b/frontend/src/api/annonars.ts
index 4df593f4..bd65b065 100644
--- a/frontend/src/api/annonars.ts
+++ b/frontend/src/api/annonars.ts
@@ -1,18 +1,16 @@
-import { API_BASE_PREFIX } from '@/api/common'
-
-const API_BASE_URL = `${API_BASE_PREFIX}/`
+import { API_PROXY_BASE_PREFIX } from '@/api/common'
 
 export class AnnonarsClient {
   private apiBaseUrl: string
   private csrfToken: string | null
 
   constructor(apiBaseUrl?: string, csrfToken?: string) {
-    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.apiBaseUrl = apiBaseUrl ?? `${API_PROXY_BASE_PREFIX}annonars`
     this.csrfToken = csrfToken ?? null
   }
 
   async fetchGeneInfo(hgncId: string): Promise<any> {
-    const response = await fetch(`${this.apiBaseUrl}genes/info?hgnc_id=${hgncId}`, {
+    const response = await fetch(`${this.apiBaseUrl}/genes/info?hgnc_id=${hgncId}`, {
       method: 'GET'
     })
     return await response.json()
diff --git a/frontend/src/api/common.ts b/frontend/src/api/common.ts
index 1af5c18b..1b1627b0 100644
--- a/frontend/src/api/common.ts
+++ b/frontend/src/api/common.ts
@@ -1,2 +1,3 @@
-export const API_BASE_PREFIX =
-  import.meta.env.MODE == 'development' ? '//localhost:8080/proxy/annonars' : '/proxy/annonars'
+export const API_BASE_PREFIX = import.meta.env.MODE == 'development' ? '//localhost:8080/' : '/'
+
+export const API_PROXY_BASE_PREFIX = `${API_BASE_PREFIX}proxy/`
diff --git a/frontend/src/api/misc.ts b/frontend/src/api/misc.ts
new file mode 100644
index 00000000..dac0d2fa
--- /dev/null
+++ b/frontend/src/api/misc.ts
@@ -0,0 +1,20 @@
+import { API_BASE_PREFIX } from '@/api/common'
+
+const API_BASE_URL = API_BASE_PREFIX
+
+export class MiscClient {
+  private apiBaseUrl: string
+  private csrfToken: string | null
+
+  constructor(apiBaseUrl?: string, csrfToken?: string) {
+    this.apiBaseUrl = apiBaseUrl ?? API_BASE_URL
+    this.csrfToken = csrfToken ?? null
+  }
+
+  async fetchVersion(): Promise<any> {
+    const response = await fetch(`${this.apiBaseUrl}version`, {
+      method: 'GET'
+    })
+    return await response.text()
+  }
+}
diff --git a/frontend/src/components/HeaderDefault.vue b/frontend/src/components/HeaderDefault.vue
index b5ade63b..d3bfe5a2 100644
--- a/frontend/src/components/HeaderDefault.vue
+++ b/frontend/src/components/HeaderDefault.vue
@@ -1,9 +1,23 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useMiscStore } from '@/stores/misc'
+
+const miscStore = useMiscStore()
+
+onMounted(() => {
+  if (miscStore?.initialize) {
+    miscStore?.initialize()
+  }
+})
+</script>
+
 <template>
   <v-app-bar app class="top-bar">
     <v-toolbar-title>
       <router-link to="/">
         <img src="@/assets/reev-logo.svg" id="logo" alt="logo" width="100" />
         Explanation and Evaluation of Variants
+        <small>{{ miscStore?.appVersion }}</small>
       </router-link>
     </v-toolbar-title>
     <v-spacer></v-spacer>
diff --git a/frontend/src/components/__tests__/HeaderDefault.spec.ts b/frontend/src/components/__tests__/HeaderDefault.spec.ts
index d33ac6c8..3d269cc6 100644
--- a/frontend/src/components/__tests__/HeaderDefault.spec.ts
+++ b/frontend/src/components/__tests__/HeaderDefault.spec.ts
@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           HeaderDefault
         }
@@ -44,7 +56,7 @@ describe('HeaderDefault.vue', () => {
     const logo = wrapper.find('#logo')
     const title = wrapper.find('a[href="/"]')
     expect(logo.exists()).toBe(true)
-    expect(title.text()).toBe('Explanation and Evaluation of Variants')
+    expect(title.text()).toBe('Explanation and Evaluation of Variants v0.0.0')
   })
 
   it('renders the navigation links', () => {
diff --git a/frontend/src/components/__tests__/HeaderDetailPage.spec.ts b/frontend/src/components/__tests__/HeaderDetailPage.spec.ts
index 5b8b5ff2..f6cdd202 100644
--- a/frontend/src/components/__tests__/HeaderDetailPage.spec.ts
+++ b/frontend/src/components/__tests__/HeaderDetailPage.spec.ts
@@ -11,7 +11,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import HeaderDetailPage from '../HeaderDetailPage.vue'
-import { StoreState } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
 
 const vuetify = createVuetify({
   components,
diff --git a/frontend/src/stores/__tests__/geneInfo.spec.ts b/frontend/src/stores/__tests__/geneInfo.spec.ts
index 3e86ceb6..4c823803 100644
--- a/frontend/src/stores/__tests__/geneInfo.spec.ts
+++ b/frontend/src/stores/__tests__/geneInfo.spec.ts
@@ -3,7 +3,8 @@ import createFetchMock from 'vitest-fetch-mock'
 
 import { setActivePinia, createPinia } from 'pinia'
 
-import { useGeneInfoStore, StoreState } from '../geneInfo'
+import { StoreState } from '../misc'
+import { useGeneInfoStore } from '../geneInfo'
 
 const fetchMocker = createFetchMock(vi)
 
diff --git a/frontend/src/stores/__tests__/misc.spec.ts b/frontend/src/stores/__tests__/misc.spec.ts
new file mode 100644
index 00000000..e47598b9
--- /dev/null
+++ b/frontend/src/stores/__tests__/misc.spec.ts
@@ -0,0 +1,33 @@
+import { beforeEach, describe, it, expect, vi } from 'vitest'
+import createFetchMock from 'vitest-fetch-mock'
+
+import { setActivePinia, createPinia } from 'pinia'
+
+import { StoreState, useMiscStore } from '../misc'
+
+const fetchMocker = createFetchMock(vi)
+
+describe('miscInfo Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    fetchMocker.enableMocks()
+    fetchMocker.resetMocks()
+  })
+
+  it('should have initial state', () => {
+    const store = useMiscStore()
+
+    expect(store.storeState).toBe(StoreState.Initial)
+    expect(store.appVersion).toBe(null)
+  })
+
+  it('should load data', async () => {
+    const store = useMiscStore()
+    fetchMocker.mockResponseOnce('v0.0.0')
+
+    await store.initialize()
+
+    expect(store.storeState).toBe(StoreState.Active)
+    expect(store.appVersion).toBe('v0.0.0')
+  })
+})
diff --git a/frontend/src/stores/geneInfo.ts b/frontend/src/stores/geneInfo.ts
index dda38736..0b6025c8 100644
--- a/frontend/src/stores/geneInfo.ts
+++ b/frontend/src/stores/geneInfo.ts
@@ -6,15 +6,9 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
+import { StoreState } from '@/stores/misc'
 import { AnnonarsClient } from '@/api/annonars'
 
-export enum StoreState {
-  Initial = 'initial',
-  Loading = 'loading',
-  Active = 'active',
-  Error = 'error'
-}
-
 export const useGeneInfoStore = defineStore('geneInfo', () => {
   // The current store state
   const storeState = ref<StoreState>(StoreState.Initial)
diff --git a/frontend/src/stores/misc.ts b/frontend/src/stores/misc.ts
new file mode 100644
index 00000000..516a2b72
--- /dev/null
+++ b/frontend/src/stores/misc.ts
@@ -0,0 +1,43 @@
+/**
+ * Store for misc info such as the current version.
+ */
+
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import { MiscClient } from '@/api/misc'
+
+export enum StoreState {
+  Initial = 'initial',
+  Loading = 'loading',
+  Active = 'active',
+  Error = 'error'
+}
+
+export const useMiscStore = defineStore('misc', () => {
+  // The current store state
+  const storeState = ref<StoreState>(StoreState.Initial)
+
+  // The app version.
+  const appVersion = ref<string | null>(null)
+
+  // Initialize store, load version.
+  const initialize = async () => {
+    storeState.value = StoreState.Loading
+    try {
+      const client = new MiscClient()
+      appVersion.value = await client.fetchVersion()
+
+      storeState.value = StoreState.Active
+    } catch (e) {
+      console.error('There was an error loading the app version.', e)
+      storeState.value = StoreState.Error
+    }
+  }
+
+  return {
+    storeState,
+    appVersion,
+    initialize
+  }
+})
diff --git a/frontend/src/views/GeneDetailView.vue b/frontend/src/views/GeneDetailView.vue
index 26257ab1..ffed66d5 100644
--- a/frontend/src/views/GeneDetailView.vue
+++ b/frontend/src/views/GeneDetailView.vue
@@ -2,7 +2,8 @@
 import { watch, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { StoreState, useGeneInfoStore } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
+import { useGeneInfoStore } from '@/stores/geneInfo'
 
 import HeaderDetailPage from '@/components/HeaderDetailPage.vue'
 import { roundIt } from '@/api/utils'
diff --git a/frontend/src/views/__tests__/AboutView.spec.ts b/frontend/src/views/__tests__/AboutView.spec.ts
index 4bab167a..7a2e5646 100644
--- a/frontend/src/views/__tests__/AboutView.spec.ts
+++ b/frontend/src/views/__tests__/AboutView.spec.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           AboutView
         }
diff --git a/frontend/src/views/__tests__/ContactView.spec.ts b/frontend/src/views/__tests__/ContactView.spec.ts
index 5f1b3c1b..121df6f2 100644
--- a/frontend/src/views/__tests__/ContactView.spec.ts
+++ b/frontend/src/views/__tests__/ContactView.spec.ts
@@ -2,6 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from '@/router'
+import { createTestingPinia } from '@pinia/testing'
 
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
@@ -28,7 +29,18 @@ const makeWrapper = () => {
     },
     {
       global: {
-        plugins: [vuetify, router],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           ContactView
         }
diff --git a/frontend/src/views/__tests__/GeneDetailView.spec.ts b/frontend/src/views/__tests__/GeneDetailView.spec.ts
index e18d979b..03e49a75 100644
--- a/frontend/src/views/__tests__/GeneDetailView.spec.ts
+++ b/frontend/src/views/__tests__/GeneDetailView.spec.ts
@@ -11,7 +11,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import GeneDetailView from '../GeneDetailView.vue'
-import { StoreState } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
 import * as BRCA1geneInfo from '@/assets/__tests__/BRCA1GeneInfo.json'
 
 const vuetify = createVuetify({
diff --git a/frontend/src/views/__tests__/HomeView.spec.ts b/frontend/src/views/__tests__/HomeView.spec.ts
index 9299829f..34f5c760 100644
--- a/frontend/src/views/__tests__/HomeView.spec.ts
+++ b/frontend/src/views/__tests__/HomeView.spec.ts
@@ -13,7 +13,7 @@ import * as directives from 'vuetify/directives'
 
 import HomeView from '../HomeView.vue'
 import SearchBar from '../../components/SearchBar.vue'
-import { StoreState } from '@/stores/geneInfo'
+import { StoreState } from '@/stores/misc'
 
 const vuetify = createVuetify({
   components,
@@ -39,7 +39,23 @@ const makeWrapper = (router: Router) => {
     },
     {
       global: {
-        plugins: [vuetify, router, createTestingPinia({ createSpy: vi.fn() })],
+        plugins: [
+          vuetify,
+          router,
+          createTestingPinia({
+            createSpy: vi.fn(),
+            initialState: {
+              geneInfo: {
+                storeState: StoreState.Active,
+                geneSymbol: geneData.geneSymbol,
+                geneInfo: JSON.parse(JSON.stringify(geneData.geneInfo))
+              },
+              misc: {
+                appVersion: 'v0.0.0'
+              }
+            }
+          })
+        ],
         components: {
           HomeView
         }
@@ -58,10 +74,6 @@ router.push = vi.fn()
 describe('HomeView with mocked router', async () => {
   it('renders the header', () => {
     const wrapper = makeWrapper(router)
-    const store = useGeneInfoStore()
-    store.storeState = StoreState.Active
-    store.geneSymbol = geneData.geneSymbol
-    store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
 
     const logo = wrapper.find('#logo')
     const aboutLink = wrapper.find('#about')
@@ -73,10 +85,6 @@ describe('HomeView with mocked router', async () => {
 
   it('renders the search bar', () => {
     const wrapper = makeWrapper(router)
-    const store = useGeneInfoStore()
-    store.storeState = StoreState.Active
-    store.geneSymbol = geneData.geneSymbol
-    store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
 
     const textField = wrapper.find('.v-text-field')
     const select = wrapper.find('.v-select')
@@ -88,10 +96,6 @@ describe('HomeView with mocked router', async () => {
 
   it('renders example search terms', () => {
     const wrapper = makeWrapper(router)
-    const store = useGeneInfoStore()
-    store.storeState = StoreState.Active
-    store.geneSymbol = geneData.geneSymbol
-    store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
 
     const subtitle = wrapper.find('h2')
     const exampleTerms = wrapper.findAll('.example')
@@ -102,9 +106,6 @@ describe('HomeView with mocked router', async () => {
   it('uses example by click', async () => {
     const wrapper = makeWrapper(router)
     const store = useGeneInfoStore()
-    store.storeState = StoreState.Active
-    store.geneSymbol = geneData.geneSymbol
-    store.geneInfo = JSON.parse(JSON.stringify(geneData.geneInfo))
 
     const exampleTerm = wrapper.find('.example')
     expect(exampleTerm.exists()).toBe(true)
diff --git a/utils/docker/Dockerfile b/utils/docker/Dockerfile
index 7f5b8b02..5a5fb911 100644
--- a/utils/docker/Dockerfile
+++ b/utils/docker/Dockerfile
@@ -59,6 +59,8 @@ RUN PIPENV_VENV_IN_PROJECT=1 pipenv install --deploy
 
 FROM backend-base AS backend-runtime
 
+ARG version_file=utils/docker/empty-file-dont-remove
+
 ENV REEV_SERVE_FRONTEND=/home/reev/ui
 
 COPY --from=backend-deps /.venv /.venv
@@ -69,6 +71,7 @@ RUN useradd --create-home reev
 WORKDIR /home/reev
 USER reev
 
+COPY ${version_file} /VERSION
 COPY backend/. .
 COPY --from=frontend-build /dist /home/reev/ui
 
diff --git a/utils/docker/build-docker.sh b/utils/docker/build-docker.sh
index 5a45edf2..511fbbd1 100755
--- a/utils/docker/build-docker.sh
+++ b/utils/docker/build-docker.sh
@@ -12,6 +12,8 @@ DOCKER_VERSION=$(echo $GIT_TAG | sed -e 's/^v//')
 ORG=bihealth
 REPO=reev
 
+git describe --tags --dirty >VERSION
+
 sudo docker build . \
     --file utils/docker/Dockerfile \
     --pull \
diff --git a/utils/docker/empty-file-dont-remove b/utils/docker/empty-file-dont-remove
new file mode 100644
index 00000000..e69de29b