mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-01-19 08:19:15 +08:00
style(website): Update Nginx Status Page Styling (#7423)
This commit is contained in:
zhengkunwang
GitHub
parent
05a92f0b0d
commit
f6475e7c7f
@ -3,13 +3,13 @@ package response
|
||||
import "github.com/1Panel-dev/1Panel/agent/app/dto"
|
||||
|
||||
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"`
|
||||
Active int `json:"active"`
|
||||
Accepts int `json:"accepts"`
|
||||
Handled int `json:"handled"`
|
||||
Requests int `json:"requests"`
|
||||
Reading int `json:"reading"`
|
||||
Writing int `json:"writing"`
|
||||
Waiting int `json:"waiting"`
|
||||
}
|
||||
|
||||
type NginxParam struct {
|
||||
|
||||
@ -12,6 +12,7 @@ import (
|
||||
"net/http"
|
||||
"os"
|
||||
"path"
|
||||
"strconv"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
@ -94,13 +95,34 @@ func (n NginxService) GetStatus() (response.NginxStatus, error) {
|
||||
}
|
||||
var status response.NginxStatus
|
||||
resArray := strings.Split(string(content), " ")
|
||||
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]
|
||||
active, err := strconv.Atoi(resArray[2])
|
||||
if err == nil {
|
||||
status.Active = active
|
||||
}
|
||||
accepts, err := strconv.Atoi(resArray[7])
|
||||
if err == nil {
|
||||
status.Accepts = accepts
|
||||
}
|
||||
handled, err := strconv.Atoi(resArray[8])
|
||||
if err == nil {
|
||||
status.Handled = handled
|
||||
}
|
||||
requests, err := strconv.Atoi(resArray[9])
|
||||
if err == nil {
|
||||
status.Requests = requests
|
||||
}
|
||||
reading, err := strconv.Atoi(resArray[11])
|
||||
if err == nil {
|
||||
status.Reading = reading
|
||||
}
|
||||
writing, err := strconv.Atoi(resArray[13])
|
||||
if err == nil {
|
||||
status.Writing = writing
|
||||
}
|
||||
waiting, err := strconv.Atoi(resArray[15])
|
||||
if err == nil {
|
||||
status.Waiting = waiting
|
||||
}
|
||||
return status, nil
|
||||
}
|
||||
|
||||
|
||||
@ -15,13 +15,13 @@ export namespace Nginx {
|
||||
}
|
||||
|
||||
export interface NginxStatus {
|
||||
accepts: string;
|
||||
handled: string;
|
||||
active: string;
|
||||
requests: string;
|
||||
reading: string;
|
||||
writing: string;
|
||||
waiting: string;
|
||||
accepts: number;
|
||||
handled: number;
|
||||
active: number;
|
||||
requests: number;
|
||||
reading: number;
|
||||
writing: number;
|
||||
waiting: number;
|
||||
}
|
||||
|
||||
export interface NginxFileUpdate {
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<el-tag effect="dark" type="success">{{ data.app }}</el-tag>
|
||||
<Status :key="refresh" :status="data.status"></Status>
|
||||
<el-tag>{{ $t('app.version') }}{{ $t('commons.colon') }}{{ data.version }}</el-tag>
|
||||
<el-tag>{{ $t('app.version') }}{{ data.version }}</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="mt-0.5">
|
||||
|
||||
@ -1,24 +1,17 @@
|
||||
<template>
|
||||
<el-page-header :content="header" @back="jump">
|
||||
<template v-if="slots.buttons" #content>
|
||||
<span>{{ header }}</span>
|
||||
<span v-if="!mobile">
|
||||
<el-divider direction="vertical" />
|
||||
<!-- <span>{{ header }}</span> -->
|
||||
<!-- <el-divider direction="vertical" /> -->
|
||||
<slot name="buttons"></slot>
|
||||
</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<template v-if="slots.buttons && mobile">
|
||||
<slot name="buttons"></slot>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject, useSlots } from 'vue';
|
||||
import { inject, useSlots } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { GlobalStore } from '@/store';
|
||||
|
||||
const globalStore = GlobalStore();
|
||||
const slots = useSlots();
|
||||
const router = useRouter();
|
||||
const props = defineProps({
|
||||
@ -45,8 +38,4 @@ function jump() {
|
||||
}
|
||||
|
||||
let reloadPage: Function = inject('reload');
|
||||
|
||||
const mobile = computed(() => {
|
||||
return globalStore.isMobile();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
<el-card>
|
||||
<div class="content-container__title">
|
||||
<slot name="title">
|
||||
<div v-if="showBack">
|
||||
<div class="flex flex-wrap gap-4 sm:justify-between">
|
||||
<div class="flex gap-2 flex-wrap items-center justify-start">
|
||||
<div v-if="showBack" class="flex flex-wrap gap-4 sm:justify-between">
|
||||
<back-button
|
||||
:path="backPath"
|
||||
:name="backName"
|
||||
@ -32,17 +30,16 @@
|
||||
:reload="reload"
|
||||
>
|
||||
<template v-if="slots.leftToolBar" #buttons>
|
||||
<div class="flex flex-wrap gap-2 items-center justify-start">
|
||||
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
|
||||
</div>
|
||||
</template>
|
||||
</back-button>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="flex flex-wrap gap-4 sm:justify-between">
|
||||
<div v-else class="flex flex-wrap gap-4 sm:justify-between">
|
||||
<div class="flex gap-2 flex-wrap items-center justify-start">
|
||||
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
|
||||
<slot name="buttons" v-if="slots.buttons"></slot>
|
||||
@ -52,7 +49,6 @@
|
||||
<slot name="rightButton"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span v-if="slots.toolbar">
|
||||
<slot name="toolbar"></slot>
|
||||
|
||||
@ -1,53 +1,28 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-position="top">
|
||||
<el-row type="flex" style="margin-left: 50px" justify="center">
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.connections') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.active }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.accepts') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.accepts }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.handled') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.handled }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.requests') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.requests }}</span>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.reading') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.reading }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.writing') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.writing }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%">
|
||||
<template #label>
|
||||
<span class="status-label">{{ $t('nginx.waiting') }}</span>
|
||||
</template>
|
||||
<span class="status-count">{{ data.waiting }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item style="width: 25%" />
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.connections')" :value="data.active" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.accepts')" :value="data.accepts" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.handled')" :value="data.handled" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.requests')" :value="data.requests" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.reading')" :value="data.reading" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.writing')" :value="data.writing" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||||
<el-statistic :title="$t('nginx.waiting')" :value="data.waiting" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -64,13 +39,13 @@ const props = defineProps({
|
||||
});
|
||||
|
||||
let data = ref<Nginx.NginxStatus>({
|
||||
accepts: '',
|
||||
handled: '',
|
||||
requests: '',
|
||||
reading: '',
|
||||
waiting: '',
|
||||
writing: '',
|
||||
active: '',
|
||||
accepts: 0,
|
||||
handled: 0,
|
||||
requests: 0,
|
||||
reading: 0,
|
||||
waiting: 0,
|
||||
writing: 0,
|
||||
active: 0,
|
||||
});
|
||||
|
||||
const get = async () => {
|
||||
@ -85,3 +60,9 @@ onMounted(() => {
|
||||
get();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-col {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user