implement version info

report-viewer/src/components/VersionInfoComponent.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="text-sm font-bold">
+    <div v-if="reportViewerVersion.isInvalid()">Could not load version information</div>
+    <div v-else-if="reportViewerVersion.isDevVersion()">
+      You are using a development version of the JPlag Report Viewer.
+    </div>
+
+    <div v-else-if="newestVersion.compareTo(reportViewerVersion) > 0" class="text-left text-error">
+      You are using an outdated version of the JPlag Report Viewer ({{
+        reportViewerVersion.toString()
+      }}).<br />
+      Version {{ newestVersion.toString() }} is available on
+      <a href="https://github.com/jplag/JPlag/releases/latest" class="underline text-link">GitHub</a
+      >.
+    </div>
+
+    <div v-else>JPlag v{{ reportViewerVersion.toString() }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Version } from '@/model/Version'
+import versionJson from '@/version.json'
+import { ref } from 'vue'
+import { OverviewFactory } from '@/model/factories/OverviewFactory'
+
+const reportViewerVersion: Version =
+  versionJson['report_viewer_version'] !== undefined
+    ? OverviewFactory.extractVersion(versionJson['report_viewer_version'])
+    : new Version(-1, -1, -1)
+
+const newestVersion = ref(new Version(-1, -1, -1))
+
+fetch('https://api.github.com/repos/jplag/JPlag/releases/latest')
+  .then((response) => response.json())
+  .then((data) => {
+    const versionString = data.tag_name
+    // remove the 'v' from the version string and split it into an array
+    const versionArray = versionString.substring(1).split('.')
+    newestVersion.value = new Version(
+      parseInt(versionArray[0]),
+      parseInt(versionArray[1]),
+      parseInt(versionArray[2])
+    )
+  })
+  .catch(() => {
+    newestVersion.value = new Version(-1, -1, -1)
+  })
+</script>

report-viewer/src/model/Version.ts

@@ -1,8 +1,36 @@
 /**
  * Version of the report viewer.
  */
-export type Version = {
-  major: number
-  minor: number
-  patch: number
+export class Version {
+  private major: number
+  private minor: number
+  private patch: number
+
+  constructor(major: number, minor: number, patch: number) {
+    this.major = major
+    this.minor = minor
+    this.patch = patch
+  }
+
+  public toString(): string {
+    return this.major + '.' + this.minor + '.' + this.patch
+  }
+
+  public compareTo(other: Version): number {
+    if (this.major !== other.major) {
+      return this.major - other.major
+    }
+    if (this.minor !== other.minor) {
+      return this.minor - other.minor
+    }
+    return this.patch - other.patch
+  }
+
+  public isDevVersion(): boolean {
+    return this.major === 0 && this.minor === 0 && this.patch === 0
+  }
+
+  public isInvalid(): boolean {
+    return this.major < 0 || this.minor < 0 || this.patch < 0
+  }
 }

report-viewer/src/model/factories/OverviewFactory.ts

@@ -2,7 +2,7 @@ import { Overview } from '../Overview'
 import type { ComparisonListElement } from '../ComparisonListElement'
 import type { Cluster } from '@/model/Cluster'
 import store from '@/stores/store'
-import type { Version } from '../Version'
+import { Version } from '../Version'
 import versionJson from '@/version.json'
 import Distribution from '../Distribution'
 import MetricType from '../MetricType'
@@ -16,8 +16,8 @@ import TenValueDistribution from '../TenValueDistribution'
 export class OverviewFactory extends BaseFactory {
   static reportViewerVersion: Version =
     versionJson['report_viewer_version'] !== undefined
-      ? versionJson['report_viewer_version']
-      : { major: -1, minor: -1, patch: -1 }
+      ? this.extractVersion(versionJson['report_viewer_version'] as Record<string, number>)
+      : new Version(-1, -1, -1)
 
   /**
    * Gets the overview file based on the used mode (zip, local, single).
@@ -31,7 +31,9 @@ export class OverviewFactory extends BaseFactory {
    * @param json the json object
    */
   private static extractOverview(json: Record<string, unknown>): Overview {
-    const jplagVersion = this.extractVersion(json)
+    const versionField = json.jplag_version as Record<string, number>
+    const jplagVersion = this.extractVersion(versionField)
+
     OverviewFactory.compareVersions(jplagVersion, this.reportViewerVersion)
 
     const submissionFolder = json.submission_folder_path as Array<string>
@@ -61,13 +63,8 @@ export class OverviewFactory extends BaseFactory {
     )
   }
 
-  private static extractVersion(json: Record<string, unknown>): Version {
-    const versionField = json.jplag_version as Record<string, number>
-    return {
-      major: versionField.major,
-      minor: versionField.minor,
-      patch: versionField.patch
-    }
+  public static extractVersion(versionField: Record<string, number>): Version {
+    return new Version(versionField.major, versionField.minor, versionField.patch)
   }
 
   private static extractDistributions(
@@ -207,24 +204,8 @@ export class OverviewFactory extends BaseFactory {
    */
   static compareVersions(jsonVersion: Version, reportViewerVersion: Version) {
     if (sessionStorage.getItem('versionAlert') === null) {
-      if (
-        reportViewerVersion.major === 0 &&
-        reportViewerVersion.minor === 0 &&
-        reportViewerVersion.patch === 0
-      ) {
-        alert('The development version (0.0.0) of JPlag is used.')
-      }
-
-      if (
-        jsonVersion.major !== reportViewerVersion.major ||
-        jsonVersion.minor !== reportViewerVersion.minor ||
-        jsonVersion.patch !== reportViewerVersion.patch
-      ) {
-        if (
-          reportViewerVersion.major === -1 &&
-          reportViewerVersion.minor === -1 &&
-          reportViewerVersion.patch === -1
-        ) {
+      if (jsonVersion.compareTo(reportViewerVersion) !== 0) {
+        if (reportViewerVersion.isInvalid()) {
           console.warn(
             "The report viewer's version cannot be read from version.json file. Please configure it correctly."
           )
@@ -234,17 +215,9 @@ export class OverviewFactory extends BaseFactory {
           )
           alert(
             "The result's version(" +
-              jsonVersion.major +
-              '.' +
-              jsonVersion.minor +
-              '.' +
-              jsonVersion.patch +
+              jsonVersion.toString() +
               ") tag does not fit the report viewer's version(" +
-              reportViewerVersion.major +
-              '.' +
-              reportViewerVersion.minor +
-              '.' +
-              reportViewerVersion.patch +
+              reportViewerVersion.toString() +
               '). ' +
               'Trying to read it anyhow but be careful.'
           )

report-viewer/src/views/FileUploadView.vue

@@ -43,6 +43,7 @@
         <p class="font-bold text-2xl">Loading file...</p>
       </div>
     </div>
+    <VersionInfoComponent class="absolute bottom-3 left-3" />
   </div>
 </template>
 
@@ -54,6 +55,7 @@ import router from '@/router'
 import store from '@/stores/store'
 import slash from 'slash'
 import Button from '@/components/ButtonComponent.vue'
+import VersionInfoComponent from '@/components/VersionInfoComponent.vue'
 
 class LoadError extends Error {}
 

report-viewer/tailwind.config.js

@@ -52,7 +52,11 @@ export default {
           DEFAULT: '#be1622',
           dark: '#7F0F18'
         },
-
+        link: {
+          DEFAULT: '#0070f3',
+          dark: '#00c'
+        },
+        error: '#dc322f'
       },
       borderWidth: {
         1: '1px',

report-viewer/tests/unit/components/VersionInfoComponent.test.ts

@@ -0,0 +1,55 @@
+import VersionInfoComponent from '@/components/VersionInfoComponent.vue'
+import { flushPromises, mount } from '@vue/test-utils'
+import { describe, it, vi, expect } from 'vitest'
+import version from '@/version.json'
+
+vi.mock('@/version.json')
+
+describe('VersionInfoComponent', () => {
+  it('Render develop version', async () => {
+    version.report_viewer_version = mockVersionJSON(0, 0, 0)
+    global.fetch = vi.fn().mockResolvedValueOnce(mockVersionResponse('v4.3.0'))
+
+    const wrapper = mount(VersionInfoComponent)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('development version')
+  })
+
+  it('Render outdated version', async () => {
+    version.report_viewer_version = mockVersionJSON(4, 3, 0)
+    global.fetch = vi.fn().mockResolvedValueOnce(mockVersionResponse('v4.4.0'))
+
+    const wrapper = mount(VersionInfoComponent)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('outdated version')
+  })
+
+  it('Render latest version', async () => {
+    version.report_viewer_version = mockVersionJSON(4, 3, 0)
+    global.fetch = vi.fn().mockResolvedValueOnce(mockVersionResponse('v4.3.0'))
+
+    const wrapper = mount(VersionInfoComponent)
+    await flushPromises()
+
+    expect(wrapper.text()).toContain('JPlag v4.3.0')
+  })
+})
+
+function mockVersionResponse(version: string) {
+  return {
+    json: () =>
+      Promise.resolve({
+        tag_name: version
+      })
+  }
+}
+
+function mockVersionJSON(major: number, minor: number, patch: number) {
+  return {
+    major: major,
+    minor: minor,
+    patch: patch
+  }
+}

report-viewer/vitest.config.ts

@@ -1,7 +1,9 @@
 import { fileURLToPath } from 'node:url'
 import { configDefaults, defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
+  plugins: [vue()],
   test: {
     environment: 'jsdom',
     exclude: [...configDefaults.exclude, 'tests/e2e/*'],