feat(site-editor): added alert if nginx is not running #425

app/src/components/NginxControl/NginxControl.vue

@@ -4,9 +4,12 @@ import { ReloadOutlined } from '@ant-design/icons-vue'
 import ngx from '@/api/ngx'
 import { logLevel } from '@/views/config/constants'
 import { NginxStatus } from '@/constants'
+import { useGlobalStore } from '@/pinia/moudule/global'
 
-const status = ref(0)
-async function get_status() {
+const global = useGlobalStore()
+const { nginxStatus: status } = storeToRefs(global)
+
+async function getStatus() {
   const r = await ngx.status()
   if (r?.running === true)
     status.value = NginxStatus.Running
@@ -16,7 +19,7 @@ async function get_status() {
   return r
 }
 
-function reload_nginx() {
+function reloadNginx() {
   status.value = NginxStatus.Reloading
   ngx.reload().then(r => {
     if (r.level < logLevel.Warn)
@@ -27,14 +30,14 @@ function reload_nginx() {
       message.error(r.message)
   }).catch(e => {
     message.error(`${$gettext('Server error')} ${e?.message}`)
-  }).finally(() => get_status())
+  }).finally(() => getStatus())
 }
 
-async function restart_nginx() {
+async function restartNginx() {
   status.value = NginxStatus.Restarting
   await ngx.restart()
 
-  get_status().then(r => {
+  getStatus().then(r => {
     if (r.level < logLevel.Warn)
       message.success($gettext('Nginx restarted successfully'))
     else if (r.level === logLevel.Warn)
@@ -50,7 +53,7 @@ const visible = ref(false)
 
 watch(visible, v => {
   if (v)
-    get_status()
+    getStatus()
 })
 </script>
 
@@ -58,7 +61,7 @@ watch(visible, v => {
   <APopover
     v-model:open="visible"
     placement="bottomRight"
-    @confirm="reload_nginx"
+    @confirm="reloadNginx"
   >
     <template #content>
       <div class="content-wrapper">
@@ -88,14 +91,14 @@ watch(visible, v => {
         <AButton
           size="small"
           type="link"
-          @click="restart_nginx"
+          @click="restartNginx"
         >
           {{ $gettext('Restart') }}
         </AButton>
         <AButton
           size="small"
           type="link"
-          @click="reload_nginx"
+          @click="reloadNginx"
         >
           {{ $gettext('Reload') }}
         </AButton>

app/src/pinia/moudule/global.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+import type { NginxStatus } from '@/constants'
+
+export const useGlobalStore = defineStore('global', () => {
+  const nginxStatus:
+  Ref<NginxStatus.Reloading | NginxStatus.Restarting | NginxStatus.Running | NginxStatus.Stopped>
+      = ref(0)
+
+  return {
+    nginxStatus,
+  }
+})

app/src/routes/index.ts

@@ -41,25 +41,25 @@ export const routes: RouteRecordRaw[] = [
         },
       },
       {
-        path: 'domain',
+        path: 'sites',
         name: 'Manage Sites',
         component: () => import('@/layouts/BaseRouterView.vue'),
         meta: {
           name: () => $gettext('Manage Sites'),
           icon: CloudOutlined,
         },
-        redirect: '/domain/list',
+        redirect: '/sites/list',
         children: [{
           path: 'list',
           name: 'Sites List',
-          component: () => import('@/views/domain/DomainList.vue'),
+          component: () => import('@/views/site/SiteList.vue'),
           meta: {
             name: () => $gettext('Sites List'),
           },
         }, {
           path: 'add',
           name: 'Add Site',
-          component: () => import('@/views/domain/DomainAdd.vue'),
+          component: () => import('@/views/site/SiteAdd.vue'),
           meta: {
             name: () => $gettext('Add Site'),
             lastRouteName: 'Sites List',
@@ -67,7 +67,7 @@ export const routes: RouteRecordRaw[] = [
         }, {
           path: ':name',
           name: 'Edit Site',
-          component: () => import('@/views/domain/DomainEdit.vue'),
+          component: () => import('@/views/site/SiteEdit.vue'),
           meta: {
             name: () => $gettext('Edit Site'),
             hiddenInSidebar: true,
@@ -183,7 +183,7 @@ export const routes: RouteRecordRaw[] = [
       {
         path: 'terminal',
         name: 'Terminal',
-        component: () => import('@/views/pty/Terminal.vue'),
+        component: () => import('@/views/terminal/Terminal.vue'),
         meta: {
           name: () => $gettext('Terminal'),
           icon: CodeOutlined,

app/src/views/certificate/CertificateEditor.vue

@@ -2,8 +2,8 @@
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import { AutoCertState } from '@/constants'
-import CertInfo from '@/views/domain/cert/CertInfo.vue'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import CertInfo from '@/views/site/cert/CertInfo.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import type { Cert } from '@/api/cert'
 import cert from '@/api/cert'

app/src/views/certificate/RenewCert.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { AutoCertOptions } from '@/api/auto_cert'
 
 const props = defineProps<{

app/src/views/certificate/WildcardCertificate.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 
 const emit = defineEmits<{
   issued: [void]

app/src/views/domain/DomainAdd.vue → app/src/views/site/SiteAdd.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import domain from '@/api/domain'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
@@ -51,7 +51,7 @@ async function save() {
 const router = useRouter()
 
 function goto_modify() {
-  router.push(`/domain/${ngx_config.name}`)
+  router.push(`/sites/${ngx_config.name}`)
 }
 
 function create_another() {

app/src/views/domain/DomainEdit.vue → app/src/views/site/SiteEdit.vue

@@ -3,13 +3,13 @@ import { message } from 'ant-design-vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import type { Site } from '@/api/domain'
 import domain from '@/api/domain'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
 import config from '@/api/config'
-import RightSettings from '@/views/domain/components/RightSettings.vue'
+import RightSettings from '@/views/site/components/RightSettings.vue'
 import type { CertificateInfo } from '@/api/cert'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { CheckedType } from '@/types'
@@ -137,7 +137,7 @@ const save = async () => {
   }).then(r => {
     handle_response(r)
     router.push({
-      path: `/domain/${filename.value}`,
+      path: `/sites/${filename.value}`,
       query: route.query,
     })
     message.success($gettext('Saved successfully'))
@@ -249,7 +249,7 @@ provide('data', data)
 
     <FooterToolBar>
       <ASpace>
-        <AButton @click="$router.push('/domain/list')">
+        <AButton @click="$router.push('/sites/list')">
           {{ $gettext('Back') }}
         </AButton>
         <AButton

app/src/views/domain/DomainList.vue → app/src/views/site/SiteList.vue

@@ -5,7 +5,7 @@ import type { customRender } from '@/components/StdDesign/StdDataDisplay/StdTabl
 import { datetime } from '@/components/StdDesign/StdDataDisplay/StdTableTransformer'
 import domain from '@/api/domain'
 import { input } from '@/components/StdDesign/StdDataEntry'
-import SiteDuplicate from '@/views/domain/components/SiteDuplicate.vue'
+import SiteDuplicate from '@/views/site/components/SiteDuplicate.vue'
 import InspectConfig from '@/views/config/InspectConfig.vue'
 import type { Column, JSXElements } from '@/components/StdDesign/types'
 
@@ -110,7 +110,7 @@ watch(route, () => {
       disable-delete
       disable-view
       @click-edit="r => $router.push({
-        path: `/domain/${r}`,
+        path: `/sites/${r}`,
       })"
     >
       <template #actions="{ record }">

app/src/views/domain/cert/Cert.vue → app/src/views/site/cert/Cert.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import CertInfo from '@/views/domain/cert/CertInfo.vue'
-import IssueCert from '@/views/domain/cert/IssueCert.vue'
-import ChangeCert from '@/views/domain/cert/components/ChangeCert/ChangeCert.vue'
+import CertInfo from '@/views/site/cert/CertInfo.vue'
+import IssueCert from '@/views/site/cert/IssueCert.vue'
+import ChangeCert from '@/views/site/cert/components/ChangeCert/ChangeCert.vue'
 import type { Cert, CertificateInfo } from '@/api/cert'
 
 const props = defineProps<{

app/src/views/domain/cert/IssueCert.vue → app/src/views/site/cert/IssueCert.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import ObtainCert from '@/views/domain/cert/components/ObtainCert.vue'
+import ObtainCert from '@/views/site/cert/components/ObtainCert.vue'
 import type { NgxDirective } from '@/api/ngx'
 
 defineProps<{

app/src/views/domain/cert/components/AutoCertStepOne.vue → app/src/views/site/cert/components/AutoCertStepOne.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { $gettext } from '../../../../gettext'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import DNSChallenge from '@/views/domain/cert/components/DNSChallenge.vue'
+import DNSChallenge from '@/views/site/cert/components/DNSChallenge.vue'
 import ACMEUserSelector from '@/views/certificate/ACMEUserSelector.vue'
 import { PrivateKeyTypeList } from '@/constants'
 

app/src/views/domain/cert/components/ObtainCert.vue → app/src/views/site/cert/components/ObtainCert.vue

@@ -2,10 +2,10 @@
 import { Modal, message } from 'ant-design-vue'
 import type { ComputedRef, Ref } from 'vue'
 import domain from '@/api/domain'
-import AutoCertStepOne from '@/views/domain/cert/components/AutoCertStepOne.vue'
+import AutoCertStepOne from '@/views/site/cert/components/AutoCertStepOne.vue'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { AutoCertOptions } from '@/api/auto_cert'
-import ObtainCertLive from '@/views/domain/cert/components/ObtainCertLive.vue'
+import ObtainCertLive from '@/views/site/cert/components/ObtainCertLive.vue'
 import type { CertificateResult } from '@/api/cert'
 import type { PrivateKeyType } from '@/constants'
 

app/src/views/domain/components/RightSettings.vue → app/src/views/site/components/RightSettings.vue

@@ -5,7 +5,7 @@ import type { Site } from '@/api/domain'
 import domain from '@/api/domain'
 import ChatGPT from '@/components/ChatGPT/ChatGPT.vue'
 import { formatDateTime } from '@/lib/helper'
-import Deploy from '@/views/domain/components/Deploy.vue'
+import Deploy from '@/views/site/components/Deploy.vue'
 import { useSettingsStore } from '@/pinia'
 import type { ChatComplicationMessage } from '@/api/openai'
 import type { CheckedType } from '@/types'

app/src/views/site/ngx_conf/NginxStatusAlert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useGlobalStore } from '@/pinia/moudule/global'
+import { NginxStatus } from '@/constants'
+
+const global = useGlobalStore()
+const { nginxStatus: status } = storeToRefs(global)
+</script>
+
+<template>
+  <AAlert
+    v-if="status !== NginxStatus.Running"
+    class="mb-4"
+    type="warning"
+    show-icon
+    :message="$gettext('Nginx is not running')"
+  />
+</template>
+
+<style scoped lang="less">
+
+</style>

app/src/views/domain/ngx_conf/NgxConfigEditor.vue → app/src/views/site/ngx_conf/NgxConfigEditor.vue

@@ -5,9 +5,10 @@ import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 import template from '@/api/template'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { CertificateInfo } from '@/api/cert'
-import NgxServer from '@/views/domain/ngx_conf/NgxServer.vue'
-import NgxUpstream from '@/views/domain/ngx_conf/NgxUpstream.vue'
+import NgxServer from '@/views/site/ngx_conf/NgxServer.vue'
+import NgxUpstream from '@/views/site/ngx_conf/NgxUpstream.vue'
 import type { CheckedType } from '@/types'
+import NginxStatusAlert from '@/views/site/ngx_conf/NginxStatusAlert.vue'
 
 const props = withDefaults(defineProps<{
   autoCert?: boolean
@@ -175,6 +176,9 @@ const activeKey = ref(['3'])
 <template>
   <div>
     <ContextHolder />
+
+    <NginxStatusAlert />
+
     <AFormItem
       v-if="!support_ssl && context === 'http'"
       :label="$gettext('Enable TLS')"

app/src/views/domain/ngx_conf/NgxServer.vue → app/src/views/site/ngx_conf/NgxServer.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { Modal } from 'ant-design-vue'
-import LogEntry from '@/views/domain/ngx_conf/LogEntry.vue'
-import ConfigTemplate from '@/views/domain/ngx_conf/config_template/ConfigTemplate.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
-import Cert from '@/views/domain/cert/Cert.vue'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
+import LogEntry from '@/views/site/ngx_conf/LogEntry.vue'
+import ConfigTemplate from '@/views/site/ngx_conf/config_template/ConfigTemplate.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
+import Cert from '@/views/site/cert/Cert.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
 import type { CertificateInfo } from '@/api/cert'
 

app/src/views/domain/ngx_conf/NgxUpstream.vue → app/src/views/site/ngx_conf/NgxUpstream.vue

@@ -3,7 +3,7 @@ import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import { Modal } from 'ant-design-vue'
 import _ from 'lodash'
 import type { NgxConfig, NgxDirective } from '@/api/ngx'
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
 import type { UpstreamStatus } from '@/api/upstream'
 import upstream from '@/api/upstream'
 

app/src/views/domain/ngx_conf/config_template/ConfigTemplate.vue → app/src/views/site/ngx_conf/config_template/ConfigTemplate.vue

@@ -5,10 +5,10 @@ import type { Template } from '@/api/template'
 import template from '@/api/template'
 import { useSettingsStore } from '@/pinia'
 
-import DirectiveEditor from '@/views/domain/ngx_conf/directive/DirectiveEditor.vue'
-import LocationEditor from '@/views/domain/ngx_conf/LocationEditor.vue'
+import DirectiveEditor from '@/views/site/ngx_conf/directive/DirectiveEditor.vue'
+import LocationEditor from '@/views/site/ngx_conf/LocationEditor.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
-import TemplateForm from '@/views/domain/ngx_conf/config_template/TemplateForm.vue'
+import TemplateForm from '@/views/site/ngx_conf/config_template/TemplateForm.vue'
 import type { NgxConfig } from '@/api/ngx'
 
 const props = defineProps<{

app/src/views/domain/ngx_conf/config_template/TemplateForm.vue → app/src/views/site/ngx_conf/config_template/TemplateForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TemplateFormItem from '@/views/domain/ngx_conf/config_template/TemplateFormItem.vue'
+import TemplateFormItem from '@/views/site/ngx_conf/config_template/TemplateFormItem.vue'
 import type { Variable } from '@/api/template'
 
 const data = defineModel<Record<string, Variable>>({

app/src/views/domain/ngx_conf/directive/DirectiveEditor.vue → app/src/views/site/ngx_conf/directive/DirectiveEditor.vue

@@ -2,7 +2,7 @@
 import Draggable from 'vuedraggable'
 import type { ComputedRef } from 'vue'
 import DirectiveAdd from './DirectiveAdd.vue'
-import DirectiveEditorItem from '@/views/domain/ngx_conf/directive/DirectiveEditorItem.vue'
+import DirectiveEditorItem from '@/views/site/ngx_conf/directive/DirectiveEditorItem.vue'
 import type { NgxDirective } from '@/api/ngx'
 
 defineProps<{

app/src/views/stream/StreamEdit.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import FooterToolBar from '@/components/FooterToolbar/FooterToolBar.vue'
 import CodeEditor from '@/components/CodeEditor/CodeEditor.vue'
 
-import NgxConfigEditor from '@/views/domain/ngx_conf/NgxConfigEditor.vue'
+import NgxConfigEditor from '@/views/site/ngx_conf/NgxConfigEditor.vue'
 import type { NgxConfig } from '@/api/ngx'
 import ngx from '@/api/ngx'
 import config from '@/api/config'