Merge pull request #919 from fdm-monster/feat/update-downgrade-client…

…-software-settings-page

Feat/update downgrade client software settings page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client",
-  "version": "1.5.0-rc3",
+  "version": "1.5.0-rc4",
   "private": false,
   "author": "David Zwart",
   "license": "AGPL-3.0-or-later",

src/backend/app.service.ts

@@ -5,8 +5,11 @@ import { IClientReleases } from "@/models/server/client-releases.model";
 import { getHttpClient } from "@/shared/http-client";
 
 export class AppService extends BaseService {
-  static async updateClientDistGithub(tag_name: string) {
-    return await this.postApi("api/server/update-client-bundle-github", { tag_name });
+  static async updateClientDistGithub(version?: string, allowDowngrade?: boolean) {
+    return await this.postApi("api/server/update-client-bundle-github", {
+      downloadRelease: version,
+      allowDowngrade,
+    });
   }
 
   static async getClientReleases() {

src/components/Settings/SoftwareUpgradeSettings.vue

@@ -10,16 +10,16 @@
       <v-list-item-content>
         <v-list-item>
           <v-list-item-content>
-            <v-list-item-title> Current versions:</v-list-item-title>
+            <v-list-item-title> Current versions in use:</v-list-item-title>
             <v-list-item-action-text>
               <strong>Your server's version is: {{ serverVersion }}</strong>
               <br />
-              <strong>Your clients's version is: {{ version }}</strong>
+              <strong>Your client's version is: {{ version }}</strong>
               <br />
               <strong v-if="monsterPiVersion">
                 Your MonsterPi version is: {{ monsterPiVersion }}<br />
               </strong>
-              <strong v-else> No MonsterPi distro detected. </strong>
+              <strong v-else> No MonsterPi distro was detected. </strong>
             </v-list-item-action-text>
           </v-list-item-content>
         </v-list-item>
@@ -51,32 +51,54 @@
       <v-list-item>
         <v-list-item-content>
           <v-list-item-title> Select a release to upgrade to:</v-list-item-title>
-          <v-list-item-action>
-            <v-radio-group v-model="selectedRelease">
-              <v-radio
-                v-for="release in filteredReleases"
-                :key="release.tag_name"
-                :disabled="isCurrentRelease(release) || isDowngrade(release, current)"
-                :label="`${release.tag_name}${
-                  isDowngrade(release, current)
-                    ? ' (cannot downgrade)'
-                    : '' || (isCurrentRelease(release) ? ' (current)' : '')
-                }`"
-                :value="release.tag_name"
-              ></v-radio>
-            </v-radio-group>
-          </v-list-item-action>
+          <v-list-item-subtitle>
+            Minimum required version: {{ minimum?.tag_name }}</v-list-item-subtitle
+          >
+
+          <span v-if="loading"> <v-alert>Loading releases...</v-alert></span>
+          <v-alert v-if="!loading && !filteredReleases?.length">No releases to show.</v-alert>
+          <v-radio-group v-model="selectedRelease">
+            <v-radio
+              v-for="release in filteredReleases"
+              :key="release.tag_name"
+              :disabled="
+                isCurrentRelease(release) ||
+                !isUpgradeOrAllowedDowngrade(release, current) ||
+                isBelowMinimum(release)
+              "
+              :label="`${release.tag_name}${
+                !isUpgradeOrAllowedDowngrade(release, current)
+                  ? ' (cannot downgrade, '
+                  : ' (' || (isCurrentRelease(release) ? ' (current, ' : '(')
+              }${
+                isVersionUnstable(release)
+                  ? `${isBelowMinimum(release) ? 'below minimum' : 'unstable'})`
+                  : ')'
+              }`"
+              :value="release.tag_name"
+            >
+            </v-radio>
+          </v-radio-group>
           <div>
             <v-alert v-if="showPrereleases" color="primary" max-width="500px">
-              You are viewing prereleases, please install such versions at your own risk!</v-alert
-            >
+              You are viewing prereleases, please install such versions at your own risk!
+            </v-alert>
           </div>
           <div>
+            <v-checkbox v-model="allowDowngrade" label="Allow downgrade"></v-checkbox>
             <v-checkbox
-              label="Show prerelease versions (unstable)"
+              :disabled="getIsCurrentUnstable"
               v-model="showPrereleases"
+              :label="
+                getIsCurrentUnstable
+                  ? 'Show prerelease versions (Currently already on prerelease version)'
+                  : 'Show prerelease versions'
+              "
             ></v-checkbox>
           </div>
+          <v-btn class="mt-2 mr-4" color="secondary" @click="loadReleases()">
+            Reload release version list
+          </v-btn>
           <v-btn
             :disabled="!selectedRelease?.length || selectedRelease === current?.tag_name"
             class="mt-2"
@@ -85,7 +107,7 @@
             @click="clickUpdateClient(selectedRelease)"
           >
             <v-icon>upgrade</v-icon>
-            Upgrade client
+            Upgrade/downgrade client
           </v-btn>
         </v-list-item-content>
       </v-list-item>
@@ -99,57 +121,96 @@ import { version as packageJsonVersion } from "../../../package.json";
 import { IRelease } from "@/models/server/client-releases.model";
 import { compare, minor } from "semver";
 
+const loading = ref(true);
+const allowDowngrade = ref(false);
 const serverVersion = ref("");
 const monsterPiVersion = ref<string | null>("");
 const version = ref(packageJsonVersion);
-const releases = ref<IRelease[]>([]);
 const current = ref<IRelease>();
 const minimum = ref<IRelease>();
 const selectedRelease = ref<string>();
 const showPrereleases = ref<boolean>(false);
 const loadedClientReleases = ref<IRelease[]>([]);
 
 onMounted(async () => {
-  const clientReleases = await AppService.getClientReleases();
-  current.value = clientReleases.current;
-  minimum.value = clientReleases.minimum;
-  loadedClientReleases.value = clientReleases.releases;
+  await loadReleases();
 
   const versionSpec = await AppService.getVersion();
   serverVersion.value = versionSpec.version;
   monsterPiVersion.value = versionSpec.monsterPi;
 });
 
+async function loadReleases() {
+  loading.value = true;
+  const clientReleases = await AppService.getClientReleases();
+  current.value = clientReleases.current;
+  minimum.value = clientReleases.minimum;
+  loadedClientReleases.value = clientReleases.releases;
+  loading.value = false;
+}
+
 const filteredReleases = computed(() => {
   return loadedClientReleases.value.filter((release) => {
-    const isMinimumVersion = minor(release.tag_name) === minor(minimum.value!.tag_name);
-    const isReleaseCandidate =
-      release.prerelease ||
-      release.tag_name.includes("rc") ||
-      release.tag_name.includes("unstable");
+    const isMinimumVersionOrHigher = minor(release.tag_name) === minor(minimum.value!.tag_name);
+    const isReleaseCandidate = isVersionUnstable(release);
     const isDraft = release.draft;
-    return isMinimumVersion && (showPrereleases.value || !isReleaseCandidate) && !isDraft;
+
+    return (
+      isMinimumVersionOrHigher &&
+      (isCurrentUnstable() || showPrereleases.value || !isReleaseCandidate) &&
+      !isDraft
+    );
   });
 });
 
-function isCurrentRelease(release: IRelease) {
-  return release.tag_name === current.value?.tag_name;
+const getIsCurrentUnstable = computed(() => {
+  return isCurrentUnstable();
+});
+
+function isCurrentUnstable() {
+  // Determine if current is rc/unstable, meaning we should ignore prerelease filter checkbox
+  const currentRelease = current.value;
+  return isVersionUnstable(currentRelease);
+}
+
+function isVersionUnstable(release?: IRelease) {
+  if (release?.tag_name?.length) {
+    return (
+      release.prerelease || release.tag_name.includes("rc") || release.tag_name.includes("unstable")
+    );
+  }
+  return false;
 }
 
-function isDowngrade(release: IRelease, current?: IRelease) {
+function isBelowMinimum(release: IRelease) {
+  return compare(release.tag_name, minimum.value!.tag_name) === -1;
+}
+
+function isUpgradeOrAllowedDowngrade(release: IRelease, current?: IRelease) {
   // If no current release is known, we need to throw
   if (!current) {
     throw new Error("No current release is known, cannot compare.");
   }
-  return compare(release.tag_name, current.tag_name) === -1;
+  if (allowDowngrade.value) {
+    return true;
+  }
+
+  return (
+    compare(release.tag_name, current.tag_name) !== -1 &&
+    compare(minimum.value!.tag_name, current.tag_name) !== -1
+  );
+}
+
+function isCurrentRelease(release: IRelease) {
+  return release.tag_name === current.value?.tag_name;
 }
 
-async function clickUpdateClient(tagName: string) {
+async function clickUpdateClient(version?: string) {
   if (!confirm("Are you sure? This might cause breaking changes, if the server is outdated")) {
     return;
   }
 
-  await AppService.updateClientDistGithub(tagName);
+  await AppService.updateClientDistGithub(version, allowDowngrade.value);
   location.reload();
 }
 </script>

src/components/TopBar.vue

@@ -50,7 +50,14 @@
     <v-btn icon @click="showHelp = true">
       <v-icon>help</v-icon>
     </v-btn>
-    <v-dialog v-model="showHelp" eager fullscreen transition="dialog-bottom-transition" width="90%">
+    <v-dialog
+      v-model="showHelp"
+      style="background-color: white"
+      eager
+      fullscreen
+      transition="dialog-bottom-transition"
+      width="90%"
+    >
       <v-btn @click="showHelp = false"
         >Close Help
         <v-icon>close</v-icon>
@@ -61,7 +68,12 @@
           Showing help from docs.fdm-monster.net
         </v-toolbar>
 
-        <iframe height="100%" src="https://docs.fdm-monster.net/software_usage" width="100%" />
+        <iframe
+          style="background-color: white"
+          height="100%"
+          src="https://docs.fdm-monster.net"
+          width="100%"
+        />
       </v-card>
     </v-dialog>
   </v-app-bar>