From df31f71879c5d00af6d682ba2f8bb34ffffc561c Mon Sep 17 00:00:00 2001
From: zhengkunwang223 <zhengkun@fit2cloud.com>
Date: Wed, 7 Dec 2022 16:06:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=20AppStatus=20?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=9D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/app-status/index.vue  |  49 +++++--
 frontend/src/lang/modules/zh.ts               |   4 +-
 frontend/src/styles/common.scss               |  37 ++++--
 frontend/src/views/website/website/index.vue  | 125 ++++++++++--------
 .../src/views/website/website/nginx/index.vue |  22 +--
 .../website/website/nginx/status/index.vue    |  10 ++
 6 files changed, 159 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/app-status/index.vue b/frontend/src/components/app-status/index.vue
index a9e01dbe5..f66565855 100644
--- a/frontend/src/components/app-status/index.vue
+++ b/frontend/src/components/app-status/index.vue
@@ -3,7 +3,7 @@
         <div class="app-content" v-if="data.isExist">
             <el-card class="app-card" v-loading="loading">
                 <el-row :gutter="20">
-                    <el-col :lg="2" :xl="1">
+                    <el-col :lg="3" :xl="2">
                         <div>
                             <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
                         </div>
@@ -18,18 +18,20 @@
                         <div>
                             {{ $t('commons.table.status') }}:
                             <el-tag type="info">
-                                <Status :status="data.status"></Status>
+                                <Status :key="refresh" :status="data.status"></Status>
                             </el-tag>
                         </div>
                     </el-col>
-                    <el-col :lg="6" :xl="4">
-                        <div>
-                            {{ $t('website.lastBackupAt') }}:
-                            <el-tag v-if="data.lastBackupAt != ''" type="info">{{ data.lastBackupAt }}</el-tag>
-                            <span v-else>{{ $t('website.null') }}</span>
-                        </div>
-                    </el-col>
                     <el-col :lg="4" :xl="6">
+                        <el-button type="primary" v-if="data.status != 'Running'" link @click="onOperate('up')">
+                            {{ $t('app.up') }}
+                        </el-button>
+                        <el-button type="primary" v-if="data.status === 'Running'" link @click="onOperate('down')">
+                            {{ $t('app.down') }}
+                        </el-button>
+                        <el-divider direction="vertical" />
+                        <el-button type="primary" link @click="onOperate('restart')">{{ $t('app.restart') }}</el-button>
+                        <el-divider direction="vertical" />
                         <el-button type="primary" link @click="setting">{{ $t('commons.button.set') }}</el-button>
                     </el-col>
                 </el-row>
@@ -45,10 +47,12 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { CheckAppInstalled } from '@/api/modules/app';
+import { CheckAppInstalled, InstalledOp } from '@/api/modules/app';
 import router from '@/routers';
 import { onMounted, reactive, ref } from 'vue';
 import Status from '@/components/status/index.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import i18n from '@/lang';
 
 const props = defineProps({
     appKey: {
@@ -72,6 +76,7 @@ let operateReq = reactive({
     installId: 0,
     operate: '',
 });
+let refresh = ref(1);
 
 const em = defineEmits(['setting', 'isExist']);
 const setting = () => {
@@ -89,6 +94,30 @@ const onCheck = async () => {
     em('isExist', res.data);
     operateReq.installId = res.data.appInstallId;
     loading.value = false;
+    refresh.value++;
+};
+
+const onOperate = async (operation: string) => {
+    operateReq.operate = operation;
+    ElMessageBox.confirm(
+        i18n.global.t('app.operatorHelper', [i18n.global.t('app.' + operation)]),
+        i18n.global.t('app.' + operation),
+        {
+            confirmButtonText: i18n.global.t('commons.button.confirm'),
+            cancelButtonText: i18n.global.t('commons.button.cancel'),
+            type: 'info',
+        },
+    ).then(() => {
+        loading.value = true;
+        InstalledOp(operateReq)
+            .then(() => {
+                ElMessage.success(i18n.global.t('commons.msg.operationSuccess'));
+                onCheck();
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    });
 };
 
 onMounted(() => {
diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts
index 2ccdfb8f3..f80fc4cc8 100644
--- a/frontend/src/lang/modules/zh.ts
+++ b/frontend/src/lang/modules/zh.ts
@@ -876,7 +876,9 @@ export default {
         reading: '请求数(Reading)',
         writing: '响应数(Writing)',
         waiting: '驻留进程(Waiting)',
-        status: '负载状态',
+        status: '当前状态',
+        nginxConfig: 'OpenResty 设置',
+        configResource: '配置修改',
     },
     ssl: {
         provider: '类型',
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 1d42c9092..944f9796b 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -116,13 +116,13 @@
 }
 
 .input-help {
-  font-size: 12px;
-  word-break: break-all;
-  color: #4A4B4D;
-  transform: scale(0.9);
-  transform-origin: left;
-  width: 110%;
-  display: inline-block;
+    font-size: 12px;
+    word-break: break-all;
+    color: #4a4b4d;
+    transform: scale(0.9);
+    transform-origin: left;
+    width: 110%;
+    display: inline-block;
 }
 
 .input-error {
@@ -133,7 +133,7 @@
     transform-origin: left;
     width: 110%;
     display: inline-block;
-  }
+}
 
 .myTable {
     border-collapse: collapse;
@@ -150,7 +150,7 @@
 }
 
 .myTable td div {
-    margin-top: 2px
+    margin-top: 2px;
 }
 
 .myTable th {
@@ -168,4 +168,21 @@
 
 .myTable tr td:nth-child(even) {
     color: #85888e;
-}
\ No newline at end of file
+}
+
+.mask {
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.mask-prompt {
+    position: absolute;
+    z-index: 9999;
+    top: 20%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/frontend/src/views/website/website/index.vue b/frontend/src/views/website/website/index.vue
index a838966af..03c6dd28e 100644
--- a/frontend/src/views/website/website/index.vue
+++ b/frontend/src/views/website/website/index.vue
@@ -1,66 +1,73 @@
 <template>
     <div>
         <AppStatus :app-key="'nginx'" @setting="setting" @is-exist="checkExist"></AppStatus>
-        <LayoutContent v-if="nginxIsExist">
-            <br />
-            <el-card v-if="!openNginxConfig">
-                <LayoutContent :header="$t('website.website')">
-                    <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search()">
-                        <template #toolbar>
-                            <el-button type="primary" icon="Plus" @click="openCreate">
-                                {{ $t('commons.button.create') }}
-                            </el-button>
-                            <el-button type="primary" plain @click="openGroup">{{ $t('website.group') }}</el-button>
-                        </template>
-                        <el-table-column
-                            :label="$t('commons.table.name')"
-                            fix
-                            show-overflow-tooltip
-                            prop="primaryDomain"
-                        >
-                            <template #default="{ row }">
-                                <el-link type="primary" @click="openConfig(row.id)">{{ row.primaryDomain }}</el-link>
+        <div v-if="nginxIsExist" :class="{ mask: nginxStatus != 'Running' }">
+            <LayoutContent>
+                <br />
+                <el-card v-if="!openNginxConfig">
+                    <LayoutContent :header="$t('website.website')">
+                        <ComplexTable :pagination-config="paginationConfig" :data="data" @search="search()">
+                            <template #toolbar>
+                                <el-button type="primary" icon="Plus" @click="openCreate">
+                                    {{ $t('commons.button.create') }}
+                                </el-button>
+                                <el-button type="primary" plain @click="openGroup">{{ $t('website.group') }}</el-button>
                             </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('commons.table.type')" fix prop="type">
-                            <template #default="{ row }">
-                                {{ $t('website.' + row.type) }}
-                            </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('commons.table.status')" prop="status">
-                            <template #default="{ row }">
-                                <Status :status="row.status"></Status>
-                            </template>
-                        </el-table-column>
-                        <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
-                        <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
-                        <el-table-column :label="$t('website.expireDate')">
-                            <template #default="{ row }">
-                                <span v-if="row.protocol === 'HTTP'">{{ $t('website.neverExpire') }}</span>
-                                <span v-else>{{ dateFromat(1, 1, row.webSiteSSL.expireDate) }}</span>
-                            </template>
-                        </el-table-column>
-                        <fu-table-operations
-                            :ellipsis="10"
-                            width="260px"
-                            :buttons="buttons"
-                            :label="$t('commons.table.operate')"
-                            fixed="right"
-                            fix
-                        />
-                    </ComplexTable>
-                </LayoutContent>
-            </el-card>
-            <el-card v-if="openNginxConfig">
-                <NginxConfig :containerName="containerName"></NginxConfig>
-            </el-card>
+                            <el-table-column
+                                :label="$t('commons.table.name')"
+                                fix
+                                show-overflow-tooltip
+                                prop="primaryDomain"
+                            >
+                                <template #default="{ row }">
+                                    <el-link type="primary" @click="openConfig(row.id)">
+                                        {{ row.primaryDomain }}
+                                    </el-link>
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('commons.table.type')" fix prop="type">
+                                <template #default="{ row }">
+                                    {{ $t('website.' + row.type) }}
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('commons.table.status')" prop="status">
+                                <template #default="{ row }">
+                                    <Status :status="row.status"></Status>
+                                </template>
+                            </el-table-column>
+                            <el-table-column :label="$t('website.remark')" prop="remark"></el-table-column>
+                            <el-table-column :label="$t('website.protocol')" prop="protocol"></el-table-column>
+                            <el-table-column :label="$t('website.expireDate')">
+                                <template #default="{ row }">
+                                    <span v-if="row.protocol === 'HTTP'">{{ $t('website.neverExpire') }}</span>
+                                    <span v-else>{{ dateFromat(1, 1, row.webSiteSSL.expireDate) }}</span>
+                                </template>
+                            </el-table-column>
+                            <fu-table-operations
+                                :ellipsis="10"
+                                width="260px"
+                                :buttons="buttons"
+                                :label="$t('commons.table.operate')"
+                                fixed="right"
+                                fix
+                            />
+                        </ComplexTable>
+                    </LayoutContent>
+                </el-card>
 
-            <CreateWebSite ref="createRef" @close="search"></CreateWebSite>
-            <DeleteWebsite ref="deleteRef" @close="search"></DeleteWebsite>
-            <WebSiteGroup ref="groupRef"></WebSiteGroup>
-            <UploadDialog ref="uploadRef" />
-            <BackupRecords ref="dialogBackupRef" />
-        </LayoutContent>
+                <CreateWebSite ref="createRef" @close="search"></CreateWebSite>
+                <DeleteWebsite ref="deleteRef" @close="search"></DeleteWebsite>
+                <WebSiteGroup ref="groupRef"></WebSiteGroup>
+                <UploadDialog ref="uploadRef" />
+                <BackupRecords ref="dialogBackupRef" />
+            </LayoutContent>
+        </div>
+        <el-card width="30%" v-if="nginxStatus != 'Running'" class="mask-prompt">
+            <span style="font-size: 14px">当前未启动 OpenResty 服务</span>
+        </el-card>
+        <el-card v-if="openNginxConfig">
+            <NginxConfig :containerName="containerName" :status="nginxStatus"></NginxConfig>
+        </el-card>
     </div>
 </template>
 
@@ -90,6 +97,7 @@ const groupRef = ref();
 let openNginxConfig = ref(false);
 let nginxIsExist = ref(false);
 let containerName = ref('');
+let nginxStatus = ref('');
 
 const paginationConfig = reactive({
     currentPage: 1,
@@ -172,6 +180,7 @@ const openGroup = () => {
 const checkExist = (data: App.CheckInstalled) => {
     nginxIsExist.value = data.isExist;
     containerName.value = data.containerName;
+    nginxStatus.value = data.status;
 };
 
 onMounted(() => {
diff --git a/frontend/src/views/website/website/nginx/index.vue b/frontend/src/views/website/website/nginx/index.vue
index f380b53c2..055ec8fee 100644
--- a/frontend/src/views/website/website/nginx/index.vue
+++ b/frontend/src/views/website/website/nginx/index.vue
@@ -1,17 +1,17 @@
 <template>
-    <LayoutContent :header="$t('website.nginxConfig')" :reload="true">
+    <LayoutContent :header="$t('nginx.nginxConfig')" :reload="true">
         <el-collapse v-model="activeName" accordion>
-            <el-collapse-item :title="$t('website.source')" name="1">
-                <Source></Source>
+            <el-collapse-item :title="$t('nginx.configResource')" name="1">
+                <Source v-if="activeName === '1'"></Source>
             </el-collapse-item>
-            <el-collapse-item :title="$t('website.log')" name="2">
-                <ContainerLog ref="dialogContainerLogRef" />
+            <el-collapse-item :title="$t('nginx.status')" name="2">
+                <Status v-if="activeName === '2'" :status="status" />
             </el-collapse-item>
             <el-collapse-item :title="$t('website.nginxPer')" name="3">
-                <NginxPer />
+                <NginxPer v-if="activeName === '3'" />
             </el-collapse-item>
-            <el-collapse-item :title="$t('nginx.status')" name="4">
-                <Status />
+            <el-collapse-item :title="$t('website.log')" name="4">
+                <ContainerLog ref="dialogContainerLogRef" />
             </el-collapse-item>
         </el-collapse>
     </LayoutContent>
@@ -33,12 +33,16 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    status: {
+        type: String,
+        default: 'Running',
+    },
 });
 
 watch(
     activeName,
     (newvalue) => {
-        if (newvalue === '2') {
+        if (newvalue === '4') {
             dialogContainerLogRef.value!.acceptParams({
                 containerID: props.containerName,
                 container: props.containerName,
diff --git a/frontend/src/views/website/website/nginx/status/index.vue b/frontend/src/views/website/website/nginx/status/index.vue
index 2ff76eeec..6f59b7204 100644
--- a/frontend/src/views/website/website/nginx/status/index.vue
+++ b/frontend/src/views/website/website/nginx/status/index.vue
@@ -21,6 +21,13 @@ import { Nginx } from '@/api/interface/nginx';
 import { GetNginxStatus } from '@/api/modules/nginx';
 import { onMounted, ref } from 'vue';
 
+const props = defineProps({
+    status: {
+        type: String,
+        default: 'Running',
+    },
+});
+
 let data = ref<Nginx.NginxStatus>({
     accepts: '',
     handled: '',
@@ -32,6 +39,9 @@ let data = ref<Nginx.NginxStatus>({
 });
 
 const get = async () => {
+    if (props.status != 'Running') {
+        return;
+    }
     const res = await GetNginxStatus();
     data.value = res.data;
 };