Add initial repair dialog

This commit is contained in:
Johannes Zellner
2025-03-22 11:19:06 +01:00
parent 8522775569
commit 64b730a22e
4 changed files with 233 additions and 27 deletions
+9 -27
View File
@@ -1,8 +1,9 @@
<script setup>
import { ref, onMounted, watch } from 'vue';
import { ref, onMounted, watch, useTemplateRef } from 'vue';
import { Button, Switch } from 'pankow';
import { ISTATES } from '../../constants.js';
import { taskNameFromInstallationState } from '../../utils.js';
import AppRepairDialog from '../AppRepairDialog.vue';
import AppsModel from '../../models/AppsModel.js';
const props = defineProps([ 'app' ]);
@@ -21,8 +22,9 @@ watch(debugMode, async (newValue) => {
if (error) return console.error(error);
});
const repairDialog = useTemplateRef('repairDialog');
async function onRepair() {
// TODO
repairDialog.value.open(props.app);
}
async function onRestart() {
@@ -34,28 +36,6 @@ async function onRestart() {
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;
});
@@ -64,6 +44,8 @@ onMounted(() => {
<template>
<div>
<AppRepairDialog ref="repairDialog" />
<label>{{ $t('app.repair.recovery.title') }}</label>
<p v-html="$t('app.repair.recovery.description', { docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-app' })"></p>
@@ -76,7 +58,7 @@ onMounted(() => {
<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>
<p v-if="app.error">An error occurred during the <b>{{ taskNameFromInstallationState(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 ? taskNameFromInstallationState(app.error.installationState) : '' }) }}</Button>
</div>
</template>