Add repair app configure view

2025-02-22 18:31:21 +01:00
parent 3e2177b402
commit c593b4180a
5 changed files with 105 additions and 21 deletions
@@ -0,0 +1,82 @@
+<script setup>
+
+import { ref, onMounted, watch } from 'vue';
+import { Button, Switch } from 'pankow';
+import { ISTATES } from '../../constants.js';
+import AppsModel from '../../models/AppsModel.js';
+
+const props = defineProps([ 'app' ]);
+
+const appsModel = AppsModel.create();
+const busyRestart = ref(false);
+const debugMode = ref(false);
+
+watch(debugMode, async (newValue) => {
+  const data = newValue ? {
+    readonlyRootfs: false,
+    cmd: [ '/bin/bash', '-c', 'echo "Repair mode. Use the webterminal or cloudron exec to repair. Sleeping" && sleep infinity' ]
+  } : null;
+
+  const [error] = await appsModel.configure(props.app.id, 'debug_mode', { debugMode: data });
+  if (error) return console.error(error);
+});
+
+async function onRepair() {
+  // TODO
+}
+
+async function onRestart() {
+  busyRestart.value = true;
+
+  const [error] = await appsModel.restart(props.app.id);
+  if (error) console.error(error);
+
+  busyRestart.value = false;
+}
+
+function taskName(installationState) {
+  switch (installationState) {
+    case ISTATES.PENDING_INSTALL: return 'install';
+    case ISTATES.PENDING_CLONE: return 'clone';
+    case ISTATES.PENDING_LOCATION_CHANGE: return 'location change';
+    case ISTATES.PENDING_CONFIGURE: return 'configure';
+    case ISTATES.PENDING_RECREATE_CONTAINER: return 'create container';
+    case ISTATES.PENDING_DEBUG: return 'debug';
+    case ISTATES.PENDING_RESIZE: return 'resize';
+    case ISTATES.PENDING_DATA_DIR_MIGRATION: return 'data migration';
+    case ISTATES.PENDING_UNINSTALL: return 'uninstall';
+    case ISTATES.PENDING_RESTORE: return 'restore';
+    case ISTATES.PENDING_IMPORT: return 'import';
+    case ISTATES.PENDING_UPDATE: return 'update';
+    case ISTATES.PENDING_BACKUP: return 'backup';
+    case ISTATES.PENDING_START: return 'start app';
+    case ISTATES.PENDING_STOP: return 'stop app';
+    case ISTATES.PENDING_RESTART: return 'restart app';
+    default: return installationState || '';
+  }
+}
+
+onMounted(() => {
+  debugMode.value = !!props.app.debugMode;
+});
+
+</script>
+
+<template>
+  <div>
+    <label>{{ $t('app.repair.recovery.title') }}</label>
+    <p v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-app' })"></p>
+
+    <div style="display: flex; justify-content: space-between;">
+      <Switch v-model="debugMode" :disabled="app.error || app.taskId" v-tooltip="app.taskId ? (app.error ? 'App is in error state' : 'App is busy') : ''" label="Recovery Mode"/>
+      <Button @click="onRestart()" :disabled="busyRestart || app.taskId || app.error || app.installationState === 'pending_restart'" :loading="busyRestart || app.installationState === 'pending_restart'" v-tooltip="app.error ? 'App is in error state' : (app.taskId ? 'App is busy' : '')">{{ $t('app.repair.recovery.restartAction') }}</Button>
+    </div>
+
+    <hr/>
+
+    <label>{{ $t('app.repair.taskError.title') }}</label>
+    <p>{{ $t('app.repair.taskError.description') }}</p>
+    <p v-if="app.error">An error occurred during the <b>{{ taskName(app.error.installationState) }}</b> operation: <span class="text-danger"><b>{{ app.error.reason + ': ' + app.error.message }}</b></span></p>
+    <Button @click="onRepair()" :disabled="app.taskId || !app.error" v-tooltip="app.taskId ? $t('app.repair.appIsBusyTooltip') : ''">{{ $t('app.repair.taskError.retryAction', { task: app.error ? taskName(app.error.installationState) : '' }) }}</Button>
+  </div>
+</template>