cloudron-box/dashboard/src/components/app/Updates.vue

<script setup>

import { ref, onMounted, useTemplateRef } from 'vue';
import { marked } from 'marked';
import { Button, Switch, Dialog, Checkbox } from '@cloudron/pankow';
import { ISTATES } from '../../constants.js';
import SettingsItem from '../SettingsItem.vue';
import AppsModel from '../../models/AppsModel.js';
import ProfileModel from '../../models/ProfileModel.js';
import TasksModel from '../../models/TasksModel.js';

const props = defineProps([ 'app' ]);

const appsModel = AppsModel.create();
const profileModel = ProfileModel.create();
const tasksModel = TasksModel.create();

const dialog = useTemplateRef('dialog');
const profile = ref({});
const busyUpdate = ref(false);
const busyCheck = ref(false);
const skipBackup = ref(false);
const updateError = ref('');
const autoUpdatesEnabled = ref(false);
const autoUpdatesEnabledBusy = ref(false);

async function onAutoUpdatesEnabledChange(value) {
  autoUpdatesEnabledBusy.value = true;

  const [error] = await appsModel.configure(props.app.id, 'automatic_update', { enable: value });
  if (error) {
    autoUpdatesEnabled.value = !value;
    console.error(error);
  }

  autoUpdatesEnabledBusy.value = false;
}

async function waitForTask(id) {
  if (!id) return;

  const [error, result] = await tasksModel.get(id);
  if (error) return console.error(error);

  // task done, refresh menu
  if (!result.active) {
    await onCheck();
    return;
  }

  setTimeout(waitForTask.bind(null, id), 2000);
}

async function onCheck() {
  busyCheck.value = true;

  const [error] = await appsModel.checkUpdate(props.app.id);
  if (error) return console.error(error);

  busyCheck.value = false;
}

async function onUpdate() {
  busyUpdate.value = true;
  updateError.value = '';

  const [error, result] = await appsModel.update(props.app.id, props.app.updateInfo.manifest, skipBackup.value);
  if (error) {
    busyUpdate.value = false;
    if (error.status === 400) updateError.value = error.body ? error.body.message : 'Internal error';
    return console.error(error);
  }

  dialog.value.close();

  waitForTask(result);
}

function onAskUpdate() {
  busyUpdate.value = false;
  dialog.value.open();
}

function onSetupSubscription() {
  // TODO payment
}

onMounted(async () => {
  busyUpdate.value = false;
  busyCheck.value = false;
  autoUpdatesEnabled.value = props.app.enableAutomaticUpdate;

  const [error, result] = await profileModel.get();
  if (error) return console.error(error);

  profile.value = result;
});

</script>

<template>
  <div>
    <Dialog v-if="app.updateInfo" 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 && app.updateInfo.manifest.dockerImage"
      :confirm-busy="busyUpdate"
      :alternate-label="!app.updateInfo.manifest.dockerImage && profile.isAtLeastOwner ? $t('app.updateDialog.setupSubscriptionAction') : ''"
       alternate-style="success"
      @confirm="onUpdate()"
      @alternate="onSetupSubscription()"
    >
      <div>
        <Checkbox v-if="app.updateInfo.manifest.dockerImage" v-model="skipBackup" :label="$t('app.updateDialog.skipBackupCheckbox')" />
      </div>
    </Dialog>

    <SettingsItem>
      <div>
        <label>{{ $t('app.updates.auto.title') }}</label>
        <div v-if="!app.appStoreId">{{ $t('app.updates.info.customAppUpdateInfo') }}</div>
          <div v-else>{{ $t('app.updates.auto') }}</div>
      </div>
      <Switch v-if="app.appStoreId" v-model="autoUpdatesEnabled" :disabled="autoUpdatesEnabledBusy" @change="onAutoUpdatesEnabledChange"/>
    </SettingsItem>

    <hr style="margin-top: 20px"/>

    <div v-if="app.appStoreId">
      <label>{{ $t('app.updatesTabTitle') }}</label>
      <div v-html="$t('app.updates.auto.description', { appStoreLink: 'https://www.cloudron.io/store/index.html' })"></div>
    </div>
    <br/>
    <Button v-if="app.appStoreId" @click="onCheck()" :disabled="busyCheck" :loading="busyCheck">{{ $t('settings.updates.checkForUpdatesAction') }}</Button>

    <hr v-if="app.updateInfo" style="margin-top: 20px"/>

    <div v-if="app.updateInfo">
      <label>{{ $t('settings.updates.updateAvailableAction') }}</label>
      <div class="error-label" v-if="!app.updateInfo.manifest.dockerImage">{{ $t('app.updateDialog.subscriptionExpired') }}</div>
      <div class="error-label" v-if="updateError">{{ updateError }}</div>

      <div class="text-danger" v-if="app.updateInfo.unstable">{{ $t('app.updateDialog.unstableWarning') }}</div>

      <div>{{ $t('app.updateDialog.changelogHeader', { version: app.updateInfo.manifest.version }) }}</div>
      <div v-html="marked.parse(app.updateInfo.manifest.changelog)"></div>
    </div>
    <br/>
    <Button v-if="app.updateInfo" :danger="app.updateInfo.unstable ? true : null" :success="app.updateInfo.unstable ? null : true" @click="onAskUpdate()" :disabled="app.taskId || (app.error && app.error.details.installationState !== ISTATES.PENDING_UPDATE) || app.runState === 'stopped' || app.installationState === 'pending_update'">{{ $t('app.updateDialog.updateAction') }}</Button>
  </div>
</template>