Implement app update view

2025-02-21 20:58:43 +01:00
parent d77aaded39
commit 7d35c9a8eb
4 changed files with 161 additions and 1 deletions
@@ -0,0 +1,128 @@
+<script setup>
+
+import { ref, watch, onMounted, useTemplateRef } from 'vue';
+import { marked } from 'marked';
+import { Button, Switch, Dialog, Checkbox } from 'pankow';
+import AppsModel from '../../models/AppsModel.js';
+import UpdaterModel from '../../models/UpdaterModel.js';
+import ProfileModel from '../../models/ProfileModel.js';
+
+const props = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+const updaterModel = UpdaterModel.create();
+const profileModel = ProfileModel.create();
+
+const dialog = useTemplateRef('dialog');
+const update = ref(null);
+const profile = ref({});
+const busyUpdate = ref(false);
+const busyCheck = ref(false);
+const skipBackup = ref(false);
+const autoUpdatesEnabled = ref(false);
+watch(autoUpdatesEnabled, async (newValue) => {
+  const [error] = await appsModel.configure(props.app.id, 'automatic_update', { enable: newValue });
+  if (error) return console.error(error);
+});
+
+async function refreshUpdates() {
+  const [error, result] = await updaterModel.info();
+  if (error) return console.error(error);
+
+  const appUpdate = result[props.app.id] || null;
+  if (!appUpdate) update.value = null;
+  else if (!appUpdate.manifest) update.value = null;
+  else if (!appUpdate.manifest.version) update.value = null;
+  else if (appUpdate.manifest.version === props.app.manifest.version) update.value = null;
+  else update.value = appUpdate;
+}
+
+async function onCheck() {
+  busyCheck.value = true;
+
+  const [error] = await appsModel.checkForUpdates(props.app.id);
+  if (error) return console.error(error);
+
+  await refreshUpdates();
+
+  busyCheck.value = false;
+}
+
+async function onUpdate() {
+  busyUpdate.value = true;
+  const [error] = await appsModel.update(props.app.id, update.value.manifest, skipBackup.value);
+  if (error) {
+    busyUpdate.value = false;
+    return console.error(error);
+  }
+
+  await refreshUpdates();
+
+  dialog.value.close();
+}
+
+function onAskUpdate() {
+  busyUpdate.value = false;
+  dialog.value.open();
+}
+
+function onSetupSubscription() {
+  // TODO
+}
+
+onMounted(async () => {
+  busyUpdate.value = false;
+  busyCheck.value = false;
+  autoUpdatesEnabled.value = props.app.enableAutomaticUpdate;
+  await refreshUpdates();
+
+  const [error, result] = await profileModel.get();
+  if (error) return console.error(error);
+
+  profile.value = result;
+});
+
+</script>
+
+<template>
+  <Dialog v-if="update" ref="dialog"
+    :title="$t('app.updateDialog.title', { app: app.fqdn })"
+    :reject-label="$t('main.dialog.cancel')"
+     reject-style="secondary"
+    :confirm-label="$t('app.updateDialog.updateAction')"
+    :confirm-active="!busyUpdate && update.manifest.dockerImage"
+    :confirm-busy="busyUpdate"
+    :alternate-label="!update.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
+     alternate-style="success"
+    @confirm="onUpdate()"
+    @alternate="onSetupSubscription()"
+  >
+    <div>
+      <p class="text-danger" v-if="update.unstable">{{ $t('app.updateDialog.unstableWarning') }}</p>
+      <p>{{ $t('app.updateDialog.changelogHeader', { version: update.manifest.version }) }}</p>
+      <div v-html="marked.parse(update.manifest.changelog)"></div>
+      <p class="text-danger text-bold" v-if="!update.manifest.dockerImage">
+        <br/>
+        {{ $t('app.updateDialog.subscriptionExpired') }}
+      </p>
+
+      <Checkbox v-if="update.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
+    </div>
+  </Dialog>
+
+  <div>
+    <label>{{ $t('app.updatesTabTitle') }}</label>
+
+    <p v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></p>
+    <p v-if="!app.appStoreId" class="text-danger">{{ $t('app.updates.info.customAppUpdateInfo') }}</p>
+
+    <Switch v-if="app.appStoreId" v-model="autoUpdatesEnabled" :label="$t(autoUpdatesEnabled ? 'app.updates.auto.enabled' : 'app.updates.auto.disabled')"/>
+
+    <div style="display: flex; gap: 6px; margin-top: 20px">
+      <Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>
+
+      <!-- show update button only if update available -->
+      <Button v-if="update" :danger="update.unstable ? true : null" :success="update.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || app.error || app.runState === 'stopped' || app.installationState === 'pending_update'" v-tooltip="(app.error || app.taskId || app.runState === 'stopped') ? (app.error ? 'App is in error state' : 'App is not running') : ''">{{ $t('app.updateDialog.updateAction') }}</Button>
+    </div>
+  </div>
+</template>