feat: 增加nginx状态页面

apps/nginx/versions/1.23.1/conf/conf.d/default.conf

@@ -1,6 +1,6 @@
 server {
-    listen        80 default_server;
+    listen        80 ;
-    server_name   _;
+    server_name   127.0.0.1;
     charset       utf-8;
     default_type  text/html;
 
@@ -9,5 +9,10 @@ server {
         root /usr/share/nginx/html;
     }
 
+    location /nginx_status {
+        stub_status   on;
+        access_log   off;
+    }
+
     root /usr/share/nginx/html;
 }

backend/app/api/v1/nginx.go

@@ -47,3 +47,13 @@ func (b *BaseApi) UpdateNginxConfigBy(c *gin.Context) {
 	}
 	helper.SuccessWithData(c, nil)
 }
+
+func (b *BaseApi) GetNginxStatus(c *gin.Context) {
+
+	res, err := nginxService.GetStatus()
+	if err != nil {
+		helper.ErrorWithDetail(c, constant.CodeErrInternalServer, constant.ErrTypeInternalServer, err)
+		return
+	}
+	helper.SuccessWithData(c, res)
+}

backend/app/dto/nginx.go

@@ -20,6 +20,16 @@ type NginxScopeReq struct {
 	Scope NginxKey `json:"scope"`
 }
 
+type NginxStatus struct {
+	Active   string `json:"active"`
+	Accepts  string `json:"accepts"`
+	Handled  string `json:"handled"`
+	Requests string `json:"requests"`
+	Reading  string `json:"reading"`
+	Writing  string `json:"writing"`
+	Waiting  string `json:"waiting"`
+}
+
 type NginxKey string
 
 const (

backend/app/service/nginx.go

@@ -1,10 +1,13 @@
 package service
 
 import (
+	"fmt"
 	"github.com/1Panel-dev/1Panel/backend/app/dto"
 	"github.com/1Panel-dev/1Panel/backend/constant"
+	"github.com/1Panel-dev/1Panel/backend/utils/cmd"
 	"github.com/1Panel-dev/1Panel/backend/utils/files"
 	"path"
+	"strings"
 )
 
 type NginxService struct {
@@ -46,3 +49,25 @@ func (n NginxService) UpdateConfigByScope(req dto.NginxConfigReq) error {
 	}
 	return updateHttpNginxConfig(getNginxParams(req.Params, keys))
 }
+
+func (n NginxService) GetStatus() (dto.NginxStatus, error) {
+	nginxInstall, err := getAppInstallByKey("nginx")
+	if err != nil {
+		return dto.NginxStatus{}, err
+	}
+	res, err := cmd.Exec(fmt.Sprintf("docker exec -i %s curl http://127.0.0.1/nginx_status", nginxInstall.ContainerName))
+	if err != nil {
+		return dto.NginxStatus{}, err
+	}
+	var status dto.NginxStatus
+	resArray := strings.Split(res, " ")
+	status.Active = resArray[2]
+	status.Accepts = resArray[7]
+	status.Handled = resArray[8]
+	status.Requests = resArray[9]
+	status.Reading = resArray[11]
+	status.Writing = resArray[13]
+	status.Waiting = resArray[15]
+
+	return status, nil
+}

backend/router/ro_nginx.go

@@ -18,5 +18,6 @@ func (a *NginxRouter) InitNginxRouter(Router *gin.RouterGroup) {
 		groupRouter.GET("", baseApi.GetNginx)
 		groupRouter.POST("/scope", baseApi.GetNginxConfigByScope)
 		groupRouter.POST("/update", baseApi.UpdateNginxConfigBy)
+		groupRouter.GET("/status", baseApi.GetNginxStatus)
 	}
 }

frontend/src/api/interface/nginx.ts

@@ -14,4 +14,14 @@ export namespace Nginx {
         scope: string;
         params?: any;
     }
+
+    export interface NginxStatus {
+        accepts: string;
+        handled: string;
+        active: string;
+        requests: string;
+        reading: string;
+        writing: string;
+        waiting: string;
+    }
 }

frontend/src/api/modules/nginx.ts

@@ -13,3 +13,7 @@ export const GetNginxConfigByScope = (req: Nginx.NginxScopeReq) => {
 export const UpdateNginxConfigByScope = (req: Nginx.NginxConfigReq) => {
     return http.post<any>(`/nginx/update`, req);
 };
+
+export const GetNginxStatus = () => {
+    return http.get<Nginx.NginxStatus>(`/nginx/status`);
+};

frontend/src/lang/modules/zh.ts

@@ -769,5 +769,13 @@ export default {
         gzipMinLengthHelper: '最小压缩文件',
         gzipCompLevelHelper: '压缩率',
         gzipHelper: '是否开启压缩传输',
+        connections: '活动连接(Active connections)',
+        accepts: '总连接次数(accepts)',
+        handled: '总握手次数(handled)',
+        requests: '总握手次数(requests)',
+        reading: '请求数(Reading)',
+        writing: '响应数(Writing)',
+        waiting: '驻留进程(Waiting)',
+        status: '负载状态',
     },
 };

frontend/src/views/website/website/nginx/index.vue

@@ -10,6 +10,9 @@
             <el-collapse-item :title="$t('website.nginxPer')" name="3">
                 <NginxPer />
             </el-collapse-item>
+            <el-collapse-item :title="$t('nginx.status')" name="4">
+                <Status />
+            </el-collapse-item>
         </el-collapse>
     </LayoutContent>
 </template>
@@ -20,6 +23,7 @@ import Source from './source/index.vue';
 import { ref, watch } from 'vue';
 import ContainerLog from '@/components/container-log/index.vue';
 import NginxPer from './performance/index.vue';
+import Status from './status/index.vue';
 
 let activeName = ref('1');
 let dialogContainerLogRef = ref();

frontend/src/views/website/website/nginx/status/index.vue

@@ -0,0 +1,42 @@
+<template>
+    <el-row>
+        <el-col :span="12">
+            <el-descriptions :column="1" border>
+                <el-descriptions-item :width="100" :label="$t('nginx.connections')">
+                    {{ data.active }}
+                </el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.accepts')">{{ data.accepts }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.handled')">{{ data.handled }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.requests')">{{ data.requests }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.reading')">{{ data.reading }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.writing')">{{ data.writing }}</el-descriptions-item>
+                <el-descriptions-item :label="$t('nginx.waiting')">{{ data.waiting }}</el-descriptions-item>
+            </el-descriptions>
+        </el-col>
+    </el-row>
+</template>
+
+<script lang="ts" setup>
+import { Nginx } from '@/api/interface/nginx';
+import { GetNginxStatus } from '@/api/modules/nginx';
+import { onMounted, ref } from 'vue';
+
+let data = ref<Nginx.NginxStatus>({
+    accepts: '',
+    handled: '',
+    requests: '',
+    reading: '',
+    waiting: '',
+    writing: '',
+    active: '',
+});
+
+const get = async () => {
+    const res = await GetNginxStatus();
+    data.value = res.data;
+};
+
+onMounted(() => {
+    get();
+});
+</script>