gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 08:19:15 +08:00
Code

style(website): Update Nginx Status Page Styling (#7423)

Browse Source
This commit is contained in:
zhengkunwang 2024-12-18 16:48:15 +08:00 committed by GitHub
parent 05a92f0b0d
commit f6475e7c7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 108 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
agent/app/dto/response/nginx.go
View File

@ -3,13 +3,13 @@ package response
import "github.com/1Panel-dev/1Panel/agent/app/dto" import "github.com/1Panel-dev/1Panel/agent/app/dto"
type NginxStatus struct { type NginxStatus struct {
Active string `json:"active"` Active int `json:"active"`
Accepts string `json:"accepts"` Accepts int `json:"accepts"`
Handled string `json:"handled"` Handled int `json:"handled"`
Requests string `json:"requests"` Requests int `json:"requests"`
Reading string `json:"reading"` Reading int `json:"reading"`
Writing string `json:"writing"` Writing int `json:"writing"`
Waiting string `json:"waiting"` Waiting int `json:"waiting"`
} }
type NginxParam struct { type NginxParam struct {

36
agent/app/service/nginx.go
View File

@ -12,6 +12,7 @@ import (
"net/http" "net/http"
"os" "os"
"path" "path"
"strconv"
"strings" "strings"
"time" "time"
@ -94,13 +95,34 @@ func (n NginxService) GetStatus() (response.NginxStatus, error) {
} }
var status response.NginxStatus var status response.NginxStatus
resArray := strings.Split(string(content), " ") resArray := strings.Split(string(content), " ")
status.Active = resArray[2] active, err := strconv.Atoi(resArray[2])
status.Accepts = resArray[7] if err == nil {
status.Handled = resArray[8] status.Active = active
status.Requests = resArray[9] }
status.Reading = resArray[11] accepts, err := strconv.Atoi(resArray[7])
status.Writing = resArray[13] if err == nil {
status.Waiting = resArray[15] 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 return status, nil
} }

14
frontend/src/api/interface/nginx.ts
View File

@ -15,13 +15,13 @@ export namespace Nginx {
} }
export interface NginxStatus { export interface NginxStatus {
accepts: string; accepts: number;
handled: string; handled: number;
active: string; active: number;
requests: string; requests: number;
reading: string; reading: number;
writing: string; writing: number;
waiting: string; waiting: number;
} }
export interface NginxFileUpdate { export interface NginxFileUpdate {

2
frontend/src/components/app-status/index.vue
View File

@ -5,7 +5,7 @@
<div class="flex flex-wrap gap-4"> <div class="flex flex-wrap gap-4">
<el-tag effect="dark" type="success">{{ data.app }}</el-tag> <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
<Status :key="refresh" :status="data.status"></Status> <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>
<div class="mt-0.5"> <div class="mt-0.5">

19
frontend/src/components/back-button/index.vue
View File

@ -1,24 +1,17 @@
<template> <template>
<el-page-header :content="header" @back="jump"> <el-page-header :content="header" @back="jump">
<template v-if="slots.buttons" #content> <template v-if="slots.buttons" #content>
<span>{{ header }}</span> <!-- <span>{{ header }}</span> -->
<span v-if="!mobile"> <!-- <el-divider direction="vertical" /> -->
<el-divider direction="vertical" /> <slot name="buttons"></slot>
<slot name="buttons"></slot>
</span>
</template> </template>
</el-page-header> </el-page-header>
<template v-if="slots.buttons && mobile">
<slot name="buttons"></slot>
</template>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject, useSlots } from 'vue'; import { inject, useSlots } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { GlobalStore } from '@/store';
const globalStore = GlobalStore();
const slots = useSlots(); const slots = useSlots();
const router = useRouter(); const router = useRouter();
const props = defineProps({ const props = defineProps({
@ -45,8 +38,4 @@ function jump() {
} }
let reloadPage: Function = inject('reload'); let reloadPage: Function = inject('reload');
const mobile = computed(() => {
return globalStore.isMobile();
});
</script> </script>

52
frontend/src/components/layout-content/index.vue
View File

@ -21,36 +21,32 @@
<el-card> <el-card>
<div class="content-container__title"> <div class="content-container__title">
<slot name="title"> <slot name="title">
<div v-if="showBack"> <div v-if="showBack" class="flex flex-wrap gap-4 sm:justify-between">
<div class="flex flex-wrap gap-4 sm:justify-between"> <back-button
<div class="flex gap-2 flex-wrap items-center justify-start"> :path="backPath"
<back-button :name="backName"
:path="backPath" :to="backTo"
:name="backName" :header="title"
:to="backTo" :reload="reload"
:header="title" >
:reload="reload" <template v-if="slots.leftToolBar" #buttons>
> <div class="flex flex-wrap gap-2 items-center justify-start">
<template v-if="slots.leftToolBar" #buttons> <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot> </div>
</template> </template>
</back-button> </back-button>
</div> <div class="flex flex-wrap gap-3">
<div class="flex flex-wrap gap-3"> <slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
<slot name="rightToolBar" v-if="slots.rightToolBar"></slot>
</div>
</div> </div>
</div> </div>
<div v-else> <div v-else class="flex flex-wrap gap-4 sm:justify-between">
<div class="flex flex-wrap gap-4 sm:justify-between"> <div class="flex gap-2 flex-wrap items-center justify-start">
<div class="flex gap-2 flex-wrap items-center justify-start"> <slot name="leftToolBar" v-if="slots.leftToolBar"></slot>
<slot name="leftToolBar" v-if="slots.leftToolBar"></slot> <slot name="buttons" v-if="slots.buttons"></slot>
<slot name="buttons" v-if="slots.buttons"></slot> </div>
</div> <div class="flex flex-wrap gap-3" v-if="slots.rightToolBar || slots.rightButton">
<div class="flex flex-wrap gap-3" v-if="slots.rightToolBar || slots.rightButton"> <slot name="rightToolBar"></slot>
<slot name="rightToolBar"></slot> <slot name="rightButton"></slot>
<slot name="rightButton"></slot>
</div>
</div> </div>
</div> </div>

91
frontend/src/views/website/website/nginx/status/index.vue
View File

@ -1,53 +1,28 @@
<template> <template>
<div> <div>
<el-form label-position="top"> <el-row>
<el-row type="flex" style="margin-left: 50px" justify="center"> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-statistic :title="$t('nginx.connections')" :value="data.active" />
<template #label> </el-col>
<span class="status-label">{{ $t('nginx.connections') }}</span> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
</template> <el-statistic :title="$t('nginx.accepts')" :value="data.accepts" />
<span class="status-count">{{ data.active }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-statistic :title="$t('nginx.handled')" :value="data.handled" />
<template #label> </el-col>
<span class="status-label">{{ $t('nginx.accepts') }}</span> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
</template> <el-statistic :title="$t('nginx.requests')" :value="data.requests" />
<span class="status-count">{{ data.accepts }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-statistic :title="$t('nginx.reading')" :value="data.reading" />
<template #label> </el-col>
<span class="status-label">{{ $t('nginx.handled') }}</span> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
</template> <el-statistic :title="$t('nginx.writing')" :value="data.writing" />
<span class="status-count">{{ data.handled }}</span> </el-col>
</el-form-item> <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
<el-form-item style="width: 25%"> <el-statistic :title="$t('nginx.waiting')" :value="data.waiting" />
<template #label> </el-col>
<span class="status-label">{{ $t('nginx.requests') }}</span> </el-row>
</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-form>
</div> </div>
</template> </template>
@ -64,13 +39,13 @@ const props = defineProps({
}); });
let data = ref<Nginx.NginxStatus>({ let data = ref<Nginx.NginxStatus>({
accepts: '', accepts: 0,
handled: '', handled: 0,
requests: '', requests: 0,
reading: '', reading: 0,
waiting: '', waiting: 0,
writing: '', writing: 0,
active: '', active: 0,
}); });
const get = async () => { const get = async () => {
@ -85,3 +60,9 @@ onMounted(() => {
get(); get();
}); });
</script> </script>
<style scoped>
.el-col {
text-align: center;
}
</style>