feat: 优化快照功能

frontend/src/views/setting/snapshot/create/index.vue

@@ -69,6 +69,7 @@
                         :default-expand-all="true"
                         :data="form.appData"
                         :props="defaultProps"
+                        @check-change="onChangeAppData"
                         show-checkbox
                     >
                         <template #default="{ data }">
@@ -401,6 +402,39 @@ const search = async () => {
     form.appData = res.data.appData || [];
 };
 
+function onChangeAppData(data: any, isCheck: boolean) {
+    if (data.label !== 'appData' || !data.relationItemID) {
+        return;
+    }
+    data.isCheck = isCheck;
+    let isDisable = false;
+    for (const item of form.appData) {
+        if (!item.children) {
+            return;
+        }
+        for (const itemData of item.children) {
+            if (itemData.label === 'appData' && itemData.relationItemID === data.relationItemID && itemData.isCheck) {
+                isDisable = true;
+                break;
+            }
+        }
+    }
+    for (const item of form.appData) {
+        if (!item.children) {
+            return;
+        }
+        for (const relationItem of item.children) {
+            if (relationItem.id !== data.relationItemID) {
+                continue;
+            }
+            relationItem.isDisable = isDisable;
+            if (isDisable) {
+                appRef.value.setChecked(relationItem.id, isDisable, isDisable);
+            }
+            break;
+        }
+    }
+}
 const setAppDefaultCheck = async (list: any) => {
     for (const item of list) {
         if (item.isCheck) {

frontend/src/views/setting/snapshot/snap_status/index.vue

@@ -12,35 +12,19 @@
             </div>
         </template>
         <div v-loading="loading">
-            <el-alert :type="loadStatus(status.panelInfo)" :closable="false">
+            <el-alert :type="loadStatus(status.baseData)" :closable="false">
                 <template #title>
-                    <el-button :icon="loadIcon(status.panelInfo)" link>{{ $t('setting.panelInfo') }}</el-button>
+                    <el-button :icon="loadIcon(status.baseData)" link>{{ $t('setting.panelInfo') }}</el-button>
-                    <div v-if="showErrorMsg(status.panelInfo)" class="top-margin">
+                    <div v-if="showErrorMsg(status.baseData)" class="top-margin">
-                        <span class="err-message">{{ status.panelInfo }}</span>
+                        <span class="err-message">{{ status.baseData }}</span>
                     </div>
                 </template>
             </el-alert>
-            <el-alert :type="loadStatus(status.panel)" :closable="false">
+            <el-alert :type="loadStatus(status.appImage)" :closable="false">
                 <template #title>
-                    <el-button :icon="loadIcon(status.panel)" link>{{ $t('setting.panelBin') }}</el-button>
+                    <el-button :icon="loadIcon(status.appImage)" link>{{ $t('setting.appData') }}</el-button>
-                    <div v-if="showErrorMsg(status.panel)" class="top-margin">
+                    <div v-if="showErrorMsg(status.appImage)" class="top-margin">
-                        <span class="err-message">{{ status.panel }}</span>
+                        <span class="err-message">{{ status.appImage }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.daemonJson)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.daemonJson)" link>{{ $t('setting.daemonJson') }}</el-button>
-                    <div v-if="showErrorMsg(status.daemonJson)" class="top-margin">
-                        <span class="err-message">{{ status.daemonJson }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.appData)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.appData)" link>{{ $t('setting.appData') }}</el-button>
-                    <div v-if="showErrorMsg(status.appData)" class="top-margin">
-                        <span class="err-message">{{ status.appData }}</span>
                     </div>
                 </template>
             </el-alert>
@@ -100,10 +84,8 @@ import { loadSnapStatus, snapshotCreate } from '@/api/modules/setting';
 import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
 
 const status = reactive<Setting.SnapshotStatus>({
-    panel: '',
+    baseData: '',
-    panelInfo: '',
+    appImage: '',
-    daemonJson: '',
-    appData: '',
     panelData: '',
     backupData: '',
 
@@ -147,10 +129,8 @@ const loadCurrentStatus = async () => {
     await loadSnapStatus(snapID.value)
         .then((res) => {
             loading.value = false;
-            status.panel = res.data.panel;
+            status.baseData = res.data.baseData;
-            status.panelInfo = res.data.panelInfo;
+            status.appImage = res.data.appImage;
-            status.daemonJson = res.data.daemonJson;
-            status.appData = res.data.appData;
             status.panelData = res.data.panelData;
             status.backupData = res.data.backupData;
 
@@ -172,10 +152,19 @@ const onRetry = async () => {
     loading.value = true;
     await snapshotCreate({
         id: snapID.value,
-        fromAccounts: [],
-        from: snapFrom.value,
-        defaultDownload: snapDefaultDownload.value,
         description: snapDescription.value,
+
+        downloadAccountID: '',
+        sourceAccountIDs: '',
+        secret: '',
+
+        withLoginLog: false,
+        withOperationLog: false,
+        withMonitorData: false,
+
+        panelData: [],
+        backupData: [],
+        appData: [],
     })
         .then(() => {
             loading.value = false;
@@ -190,10 +179,8 @@ const onWatch = () => {
     timer = setInterval(async () => {
         if (keepLoadStatus()) {
             const res = await loadSnapStatus(snapID.value);
-            status.panel = res.data.panel;
+            status.baseData = res.data.baseData;
-            status.panelInfo = res.data.panelInfo;
+            status.appImage = res.data.appImage;
-            status.daemonJson = res.data.daemonJson;
-            status.appData = res.data.appData;
             status.panelData = res.data.panelData;
             status.backupData = res.data.backupData;
 
@@ -205,16 +192,10 @@ const onWatch = () => {
 };
 
 const keepLoadStatus = () => {
-    if (status.panel === 'Running') {
+    if (status.baseData === 'Running') {
         return true;
     }
-    if (status.panelInfo === 'Running') {
+    if (status.appImage === 'Running') {
-        return true;
-    }
-    if (status.daemonJson === 'Running') {
-        return true;
-    }
-    if (status.appData === 'Running') {
         return true;
     }
     if (status.panelData === 'Running') {
@@ -240,16 +221,10 @@ const showRetry = () => {
     if (keepLoadStatus()) {
         return false;
     }
-    if (status.panel !== 'Running' && status.panel !== 'Done') {
+    if (status.baseData !== 'Running' && status.baseData !== 'Done') {
         return true;
     }
-    if (status.panelInfo !== 'Running' && status.panelInfo !== 'Done') {
+    if (status.appImage !== 'Running' && status.appImage !== 'Done') {
-        return true;
-    }
-    if (status.daemonJson !== 'Running' && status.daemonJson !== 'Done') {
-        return true;
-    }
-    if (status.appData !== 'Running' && status.appData !== 'Done') {
         return true;
     }
     if (status.panelData !== 'Running' && status.panelData !== 'Done') {

frontend/src/views/setting/snapshot/status/index.vue

@@ -1,295 +1,220 @@
 <template>
-    <el-dialog
+    <DrawerPro v-model="drawerVisible" :header="$t('setting.recoverDetail')" :back="handleClose" size="small">
-        v-model="dialogVisible"
+        <el-form label-position="top" v-loading="loading">
-        @close="onClose"
+            <span class="card-title">{{ $t('setting.recover') }}</span>
-        :destroy-on-close="true"
+            <el-divider class="divider" />
-        :close-on-click-modal="false"
+            <div v-if="!snapInfo.recoverStatus && !snapInfo.lastRecoveredAt">
-        width="50%"
+                <el-alert center class="alert" style="height: 257px" :closable="false">
-    >
+                    <el-button size="large" round plain type="primary" @click="recoverSnapshot(true)">
-        <template #header>
+                        {{ $t('setting.recover') }}
-            <div class="card-header">
-                <span>{{ $t('setting.status') }}</span>
-            </div>
-        </template>
-        <div v-loading="loading">
-            <el-alert :type="loadStatus(status.baseData)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.baseData)" link>{{ $t('setting.baseData') }}</el-button>
-                    <div v-if="showErrorMsg(status.baseData)" class="top-margin">
-                        <span class="err-message">{{ status.baseData }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.appImage)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.appImage)" link>{{ $t('setting.appData') }}</el-button>
-                    <div v-if="showErrorMsg(status.appImage)" class="top-margin">
-                        <span class="err-message">{{ status.appImage }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.backupData)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.backupData)" link>{{ $t('setting.backupData') }}</el-button>
-                    <div v-if="showErrorMsg(status.backupData)" class="top-margin">
-                        <span class="err-message">{{ status.backupData }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.panelData)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.panelData)" link>{{ $t('setting.panelData') }}</el-button>
-                    <div v-if="showErrorMsg(status.panelData)" class="top-margin">
-                        <span class="err-message">{{ status.panelData }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.compress)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.compress)" link>
-                        {{ $t('setting.compress') }} {{ status.size }}
                     </el-button>
-                    <div v-if="showErrorMsg(status.compress)" class="top-margin">
-                        <span class="err-message">{{ status.compress }}</span>
-                    </div>
-                </template>
-            </el-alert>
-            <el-alert :type="loadStatus(status.upload)" :closable="false">
-                <template #title>
-                    <el-button :icon="loadIcon(status.upload)" link>
-                        {{ $t('setting.upload') }}
-                    </el-button>
-                    <div v-if="showErrorMsg(status.upload)" class="top-margin">
-                        <span class="err-message">{{ status.upload }}</span>
-                    </div>
-                </template>
                 </el-alert>
             </div>
-        <template #footer>
+            <el-card v-else class="mini-border-card">
-            <span class="dialog-footer">
+                <div v-if="!snapInfo.recoverStatus" class="mini-border-card">
-                <el-button @click="onClose">
+                    <div v-if="snapInfo.lastRecoveredAt">
-                    {{ $t('commons.button.cancel') }}
+                        <el-form-item :label="$t('commons.table.status')">
+                            <el-tag type="success">
+                                {{ $t('commons.table.statusSuccess') }}
+                            </el-tag>
+                            <el-button @click="recoverSnapshot(true)" style="margin-left: 10px" type="primary">
+                                {{ $t('setting.recover') }}
                             </el-button>
-                <el-button v-if="showRetry()" @click="onRetry">
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.lastRecoverAt')">
+                            {{ snapInfo.lastRecoveredAt }}
+                        </el-form-item>
+                    </div>
+                </div>
+                <div v-else>
+                    <el-form-item :label="$t('commons.table.status')">
+                        <el-tag type="danger" v-if="snapInfo.recoverStatus === 'Failed'">
+                            {{ $t('commons.table.statusFailed') }}
+                        </el-tag>
+                        <el-tag type="success" v-if="snapInfo.recoverStatus === 'Success'">
+                            {{ $t('commons.table.statusSuccess') }}
+                        </el-tag>
+                        <el-tag type="info" v-if="snapInfo.recoverStatus === 'Waiting'">
+                            {{ $t('commons.table.statusWaiting') }}
+                        </el-tag>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.lastRecoverAt')" v-if="snapInfo.recoverStatus !== 'Waiting'">
+                        {{ snapInfo.lastRecoveredAt }}
+                    </el-form-item>
+                    <div v-if="snapInfo.recoverStatus === 'Failed'">
+                        <el-form-item :label="$t('commons.button.log')">
+                            <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                {{ snapInfo.recoverMessage }}
+                            </span>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="recoverSnapshot(false)" type="primary">
                                 {{ $t('commons.button.retry') }}
                             </el-button>
+                        </el-form-item>
+                    </div>
+                </div>
+            </el-card>
+
+            <div v-if="snapInfo.recoverStatus === 'Failed'">
+                <span class="card-title">{{ $t('setting.rollback') }}</span>
+                <el-divider class="divider" />
+                <div v-if="!snapInfo.rollbackStatus && !snapInfo.lastRollbackedAt">
+                    <el-alert center class="alert" style="height: 257px" :closable="false">
+                        <el-button size="large" round plain type="primary" @click="rollbackSnapshot()">
+                            {{ $t('setting.rollback') }}
+                        </el-button>
+                    </el-alert>
+                </div>
+                <div v-if="!snapInfo.rollbackStatus">
+                    <div v-if="snapInfo.lastRollbackedAt">
+                        <el-form-item :label="$t('commons.table.status')">
+                            <el-tag type="success">
+                                {{ $t('commons.table.statusSuccess') }}
+                            </el-tag>
+                            <el-button @click="rollbackSnapshot" style="margin-left: 10px" type="primary">
+                                {{ $t('setting.rollback') }}
+                            </el-button>
+                        </el-form-item>
+                        <el-form-item :label="$t('setting.lastRollbackAt')">
+                            {{ snapInfo.lastRollbackedAt }}
+                        </el-form-item>
+                    </div>
+                </div>
+                <div v-else>
+                    <el-form-item :label="$t('commons.table.status')">
+                        <el-tag type="success" v-if="snapInfo.rollbackStatus === 'Success'">
+                            {{ $t('commons.table.statusSuccess') }}
+                        </el-tag>
+                        <el-tag type="danger" v-if="snapInfo.rollbackStatus === 'Failed'">
+                            {{ $t('commons.table.statusFailed') }}
+                        </el-tag>
+                        <el-tag type="info" v-if="snapInfo.rollbackStatus === 'Waiting'">
+                            {{ $t('commons.table.statusWaiting') }}
+                        </el-tag>
+                        <el-button
+                            style="margin-left: 15px"
+                            :disabled="snapInfo.rollbackStatus !== 'Success'"
+                            @click="rollbackSnapshot"
+                        >
+                            {{ $t('setting.rollback') }}
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item :label="$t('setting.lastRollbackAt')" v-if="snapInfo.rollbackStatus !== 'Waiting'">
+                        {{ snapInfo.lastRollbackedAt }}
+                    </el-form-item>
+                    <div v-if="snapInfo.rollbackStatus === 'Failed'">
+                        <el-form-item :label="$t('commons.button.log')">
+                            <span style="word-break: break-all; flex-wrap: wrap; word-wrap: break-word">
+                                {{ snapInfo.rollbackMessage }}
                             </span>
-        </template>
+                        </el-form-item>
-    </el-dialog>
+                        <el-form-item>
+                            <el-button @click="rollbackSnapshot()" type="primary">
+                                {{ $t('commons.button.retry') }}
+                            </el-button>
+                        </el-form-item>
+                    </div>
+                </div>
+            </div>
+        </el-form>
+    </DrawerPro>
+    <SnapRecover ref="recoverRef" @close="handleClose" />
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
+import { ref } from 'vue';
 import { Setting } from '@/api/interface/setting';
-import { loadSnapStatus, snapshotCreate } from '@/api/modules/setting';
+import { ElMessageBox } from 'element-plus';
-import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
+import i18n from '@/lang';
-
+import { snapshotRollback } from '@/api/modules/setting';
-const status = reactive<Setting.SnapshotStatus>({
+import { MsgSuccess } from '@/utils/message';
-    baseData: '',
+import { loadOsInfo } from '@/api/modules/dashboard';
-    appImage: '',
+import SnapRecover from '@/views/setting/snapshot/recover/index.vue';
-    panelData: '',
-    backupData: '',
-
-    compress: '',
-    size: '',
-    upload: '',
-});
-
-const dialogVisible = ref(false);
 
+const drawerVisible = ref(false);
+const snapInfo = ref();
 const loading = ref();
-const snapID = ref();
-const snapFrom = ref();
-const snapDefaultDownload = ref();
-const snapDescription = ref();
 
-let timer: NodeJS.Timer | null = null;
+const recoverRef = ref();
 
 interface DialogProps {
-    id: number;
+    snapInfo: Setting.SnapshotInfo;
-    from: string;
-    defaultDownload: string;
-    description: string;
 }
-
+const acceptParams = (params: DialogProps): void => {
-const acceptParams = (props: DialogProps): void => {
+    snapInfo.value = params.snapInfo;
-    dialogVisible.value = true;
+    drawerVisible.value = true;
-    snapID.value = props.id;
-    snapFrom.value = props.from;
-    snapDefaultDownload.value = props.defaultDownload;
-    snapDescription.value = props.description;
-    onWatch();
-    nextTick(() => {
-        loadCurrentStatus();
-    });
 };
 const emit = defineEmits(['search']);
 
-const loadCurrentStatus = async () => {
+const handleClose = () => {
+    drawerVisible.value = false;
+};
+
+const recoverSnapshot = async (isNew: boolean) => {
     loading.value = true;
-    await loadSnapStatus(snapID.value)
+    await loadOsInfo()
         .then((res) => {
             loading.value = false;
-            status.baseData = res.data.baseData;
+            let params = {
-            status.appImage = res.data.appImage;
+                id: snapInfo.value.id,
-            status.panelData = res.data.panelData;
+                isNew: isNew,
-            status.backupData = res.data.backupData;
+                name: snapInfo.value.name,
+                reDownload: false,
+                secret: snapInfo.value.secret,
 
-            status.compress = res.data.compress;
+                arch: res.data.kernelArch,
-            status.size = res.data.size;
+                size: snapInfo.value.size,
-            status.upload = res.data.upload;
+                freeSize: res.data.diskSize,
+            };
+            recoverRef.value.acceptParams(params);
         })
         .catch(() => {
             loading.value = false;
         });
 };
 
-const onClose = async () => {
+const rollbackSnapshot = async () => {
-    emit('search');
+    ElMessageBox.confirm(i18n.global.t('setting.rollbackHelper'), i18n.global.t('setting.rollback'), {
-    dialogVisible.value = false;
+        confirmButtonText: i18n.global.t('commons.button.confirm'),
-};
+        cancelButtonText: i18n.global.t('commons.button.cancel'),
-
+        type: 'info',
-const onRetry = async () => {
+    }).then(async () => {
         loading.value = true;
-    await snapshotCreate({
+        await snapshotRollback({ id: snapInfo.value.id, isNew: false, reDownload: false, secret: '' })
-        id: snapID.value,
-        description: snapDescription.value,
-
-        downloadAccountID: '',
-        sourceAccountIDs: '',
-        secret: '',
-
-        withLoginLog: false,
-        withOperationLog: false,
-        withMonitorData: false,
-
-        panelData: [],
-        backupData: [],
-        appData: [],
-    })
             .then(() => {
+                emit('search');
                 loading.value = false;
-            loadCurrentStatus();
+                drawerVisible.value = false;
+                MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
             })
             .catch(() => {
                 loading.value = false;
             });
+    });
 };
 
-const onWatch = () => {
-    timer = setInterval(async () => {
-        if (keepLoadStatus()) {
-            const res = await loadSnapStatus(snapID.value);
-            status.baseData = res.data.baseData;
-            status.appImage = res.data.appImage;
-            status.panelData = res.data.panelData;
-            status.backupData = res.data.backupData;
-
-            status.compress = res.data.compress;
-            status.size = res.data.size;
-            status.upload = res.data.upload;
-        }
-    }, 1000 * 3);
-};
-
-const keepLoadStatus = () => {
-    if (status.baseData === 'Running') {
-        return true;
-    }
-    if (status.appImage === 'Running') {
-        return true;
-    }
-    if (status.panelData === 'Running') {
-        return true;
-    }
-    if (status.backupData === 'Running') {
-        return true;
-    }
-    if (status.compress === 'Running') {
-        return true;
-    }
-    if (status.upload === 'Uploading') {
-        return true;
-    }
-    return false;
-};
-
-const showErrorMsg = (status: string) => {
-    return status !== 'Running' && status !== 'Done' && status !== 'Uploading' && status !== 'Waiting';
-};
-
-const showRetry = () => {
-    if (keepLoadStatus()) {
-        return false;
-    }
-    if (status.baseData !== 'Running' && status.baseData !== 'Done') {
-        return true;
-    }
-    if (status.appImage !== 'Running' && status.appImage !== 'Done') {
-        return true;
-    }
-    if (status.panelData !== 'Running' && status.panelData !== 'Done') {
-        return true;
-    }
-    if (status.backupData !== 'Running' && status.backupData !== 'Done') {
-        return true;
-    }
-    if (status.compress !== 'Running' && status.compress !== 'Done' && status.compress !== 'Waiting') {
-        return true;
-    }
-    if (status.upload !== 'Uploading' && status.upload !== 'Done' && status.upload !== 'Waiting') {
-        return true;
-    }
-    return false;
-};
-
-const loadStatus = (status: string) => {
-    switch (status) {
-        case 'Running':
-        case 'Waiting':
-        case 'Uploading':
-            return 'info';
-        case 'Done':
-            return 'success';
-        default:
-            return 'error';
-    }
-};
-
-const loadIcon = (status: string) => {
-    switch (status) {
-        case 'Running':
-        case 'Waiting':
-        case 'Uploading':
-            return 'Loading';
-        case 'Done':
-            return 'Check';
-        default:
-            return 'Close';
-    }
-};
-
-onBeforeUnmount(() => {
-    clearInterval(Number(timer));
-    timer = null;
-});
 defineExpose({
     acceptParams,
 });
 </script>
-<style scoped lang="scss">
+
-.el-alert {
+<style lang="scss" scoped>
-    margin: 10px 0 0;
+.divider {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 12px 0;
+    border-top: 1px var(--el-border-color) var(--el-border-style);
 }
-.el-alert:first-child {
+.alert {
-    margin: 0;
+    background-color: rgba(0, 94, 235, 0.03);
 }
-.top-margin {
+
-    margin-top: 10px;
+.card-title {
-}
+    font-size: 14px;
-.err-message {
+    font-weight: 500;
-    margin-left: 23px;
+    line-height: 25px;
-    line-height: 20px;
+    color: var(--el-button-text-color, var(--el-text-color-regular));
-    word-break: break-all;
-    word-wrap: break-word;
 }
 </style>