From 39e3e8f214b6826893c0f32233226729200f24d3 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Wed, 22 Mar 2023 15:32:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E9=A1=B5=E9=9D=A2=E7=8A=B6=E6=80=81=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=A0=B7=E5=BC=8F=20(#356)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/common.scss               |  5 ++-
 .../src/views/container/compose/index.vue     | 37 +++++++++---------
 .../src/views/container/container/index.vue   | 38 ++++++++++---------
 frontend/src/views/container/image/index.vue  | 34 ++++++++++-------
 .../src/views/container/network/index.vue     | 38 ++++++++++---------
 frontend/src/views/container/repo/index.vue   | 34 ++++++++++-------
 .../src/views/container/template/index.vue    | 38 ++++++++++---------
 frontend/src/views/container/volume/index.vue | 34 ++++++++++-------
 frontend/src/views/database/mysql/index.vue   |  2 +-
 frontend/src/views/database/redis/index.vue   |  2 +-
 10 files changed, 145 insertions(+), 117 deletions(-)

diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 4d989c76b..4437b7ed8 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -179,9 +179,12 @@
     top: 220px;
     left: 45%;
     transform: translate(-50%, -50%);
-    width: 300px;
+    width: 400px;
     text-align: center;
     font-size: 14px;
+    .bt {
+        margin-top: -2px;
+    }
 }
 
 .table-button {
diff --git a/frontend/src/views/container/compose/index.vue b/frontend/src/views/container/compose/index.vue
index 9cde545fd..18e0751a5 100644
--- a/frontend/src/views/container/compose/index.vue
+++ b/frontend/src/views/container/compose/index.vue
@@ -3,20 +3,13 @@
         <div v-show="isOnDetail">
             <ComposeDetial @back="backList" ref="composeDetailRef" />
         </div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            v-if="!isOnDetail"
-            :title="$t('container.compose')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent v-if="!isOnDetail" :title="$t('container.compose')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -111,13 +104,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/container/index.vue b/frontend/src/views/container/container/index.vue
index af486ff91..8cbb060f1 100644
--- a/frontend/src/views/container/container/index.vue
+++ b/frontend/src/views/container/container/index.vue
@@ -1,17 +1,11 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" class="bt" link @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.container')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.container')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -141,13 +135,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/image/index.vue b/frontend/src/views/container/image/index.vue
index 42d9af89c..3223b64b5 100644
--- a/frontend/src/views/container/image/index.vue
+++ b/frontend/src/views/container/image/index.vue
@@ -1,14 +1,12 @@
 <template>
     <div v-loading="loading">
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.image')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -110,14 +108,22 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-        loadRepos();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+                loadRepos();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/network/index.vue b/frontend/src/views/container/network/index.vue
index aee8250a7..1e8af2b6a 100644
--- a/frontend/src/views/container/network/index.vue
+++ b/frontend/src/views/container/network/index.vue
@@ -1,18 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.network')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.network')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -124,13 +118,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/repo/index.vue b/frontend/src/views/container/repo/index.vue
index 3c59293f6..f4afb97b5 100644
--- a/frontend/src/views/container/repo/index.vue
+++ b/frontend/src/views/container/repo/index.vue
@@ -1,14 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.repo')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -99,13 +97,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/template/index.vue b/frontend/src/views/container/template/index.vue
index 3a89ca1b6..8b4d8e6b8 100644
--- a/frontend/src/views/container/template/index.vue
+++ b/frontend/src/views/container/template/index.vue
@@ -1,18 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent
-            v-loading="loading"
-            :title="$t('container.composeTemplate')"
-            :class="{ mask: dockerStatus != 'Running' }"
-        >
+        <LayoutContent :title="$t('container.composeTemplate')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -96,13 +90,21 @@ const searchName = ref();
 
 const detailRef = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/container/volume/index.vue b/frontend/src/views/container/volume/index.vue
index 9ff7cb48d..db2fbde5e 100644
--- a/frontend/src/views/container/volume/index.vue
+++ b/frontend/src/views/container/volume/index.vue
@@ -1,14 +1,12 @@
 <template>
-    <div>
-        <el-card width="30%" v-if="dockerStatus != 'Running'" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('container.serviceUnavailable') }}</span>
-            <el-button type="primary" link style="font-size: 14px; margin-bottom: 5px" @click="goSetting">
-                【 {{ $t('container.setting') }} 】
-            </el-button>
-            <span style="font-size: 14px">{{ $t('container.startIn') }}</span>
+    <div v-loading="loading">
+        <el-card v-if="dockerStatus != 'Running'" class="mask-prompt">
+            <span>{{ $t('container.serviceUnavailable') }}</span>
+            <el-button type="primary" link class="bt" @click="goSetting">【 {{ $t('container.setting') }} 】</el-button>
+            <span>{{ $t('container.startIn') }}</span>
         </el-card>
 
-        <LayoutContent v-loading="loading" :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
+        <LayoutContent :title="$t('container.volume')" :class="{ mask: dockerStatus != 'Running' }">
             <template #toolbar>
                 <el-row>
                     <el-col :span="16">
@@ -104,13 +102,21 @@ const paginationConfig = reactive({
 });
 const searchName = ref();
 
-const dockerStatus = ref();
+const dockerStatus = ref('Running');
 const loadStatus = async () => {
-    const res = await loadDockerStatus();
-    dockerStatus.value = res.data;
-    if (dockerStatus.value === 'Running') {
-        search();
-    }
+    loading.value = true;
+    await loadDockerStatus()
+        .then((res) => {
+            loading.value = false;
+            dockerStatus.value = res.data;
+            if (dockerStatus.value === 'Running') {
+                search();
+            }
+        })
+        .catch(() => {
+            dockerStatus.value = 'Failed';
+            loading.value = false;
+        });
 };
 const goSetting = async () => {
     router.push({ name: 'ContainerSetting' });
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 96b2843cd..c22665330 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -112,7 +112,7 @@
             v-if="mysqlStatus != 'Running' && !isOnSetting && mysqlIsExist && !loading"
             class="mask-prompt"
         >
-            <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
+            <span>{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
         </el-card>
 
         <Setting ref="settingRef" style="margin-top: 20px" />
diff --git a/frontend/src/views/database/redis/index.vue b/frontend/src/views/database/redis/index.vue
index 41c56c8b6..e9ab98cff 100644
--- a/frontend/src/views/database/redis/index.vue
+++ b/frontend/src/views/database/redis/index.vue
@@ -24,7 +24,7 @@
         </LayoutContent>
 
         <el-card width="30%" v-if="redisStatus != 'Running' && !isOnSetting && redisIsExist" class="mask-prompt">
-            <span style="font-size: 14px">{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span>
+            <span>{{ $t('commons.service.serviceNotStarted', ['Redis']) }}</span>
         </el-card>
 
         <Setting ref="settingRef" style="margin-top: 30px" />