mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-13 03:15:48 +02:00
use vue-gettext
This commit is contained in:
0xJacky
parent
b8d5d03572
commit
35d144c678
61 changed files with 1929 additions and 412 deletions
193
frontend/src/views/dashboard/DashBoard.vue
Normal file
193
frontend/src/views/dashboard/DashBoard.vue
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-row class="row-two">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-card style="min-height: 400px" :title="$gettext('Server status')">
|
||||
<a-row>
|
||||
<a-col :lg="12" :sm="24" class="chart">
|
||||
<a-statistic :value="cpu" style="margin: 0 50px 10px 0" title="CPU">
|
||||
<template v-slot:suffix>
|
||||
<span>%</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
<p><translate>Uptime</translate> {{ uptime }}</p>
|
||||
<p><translate>Load averages</translate> 1min:{{ loadavg.load1 }} 5min:{{ loadavg.load5 }}
|
||||
15min:{{ loadavg.load15 }}</p>
|
||||
<line-chart :chart-data="cpu_analytic" :options="cpu_analytic.options" :height="150"/>
|
||||
</a-col>
|
||||
<a-col :lg="6" :sm="8" :xs="12" class="chart_dashboard">
|
||||
<div>
|
||||
<a-tooltip
|
||||
:title="$gettext('Used:') + memory_used + $gettext('Cached:') +
|
||||
memory_cached + $gettext('Free:') + memory_free +
|
||||
$gettext('Physical memory:') + memory_total">
|
||||
<a-progress :percent="memory_pressure" strokeColor="rgb(135, 208, 104)"
|
||||
type="dashboard"/>
|
||||
<p class="description" v-translate>Memory</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :lg="6" :sm="8" :xs="12" class="chart_dashboard">
|
||||
<div>
|
||||
<a-tooltip
|
||||
:title="$gettext('Used: ')+ disk_used +
|
||||
' / '+ $gettext('Total: ') + disk_total">
|
||||
<a-progress :percent="disk_percentage" type="dashboard"/>
|
||||
<p class="description" v-translate>Storage</p>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from '@/components/Chart/LineChart'
|
||||
import ReconnectingWebSocket from 'reconnecting-websocket'
|
||||
|
||||
export default {
|
||||
name: 'DashBoard',
|
||||
components: {
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
websocket: null,
|
||||
loading: true,
|
||||
stat: {},
|
||||
memory_pressure: 0,
|
||||
memory_used: '',
|
||||
memory_cached: '',
|
||||
memory_free: '',
|
||||
memory_total: '',
|
||||
cpu_analytic: {
|
||||
datasets: [{
|
||||
label: 'cpu user',
|
||||
borderColor: '#36a3eb',
|
||||
backgroundColor: '#36a3eb',
|
||||
pointRadius: 0,
|
||||
data: [],
|
||||
}, {
|
||||
label: 'cpu total',
|
||||
borderColor: '#ff6385',
|
||||
backgroundColor: '#ff6385',
|
||||
pointRadius: 0,
|
||||
data: [],
|
||||
}],
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 0, // 调整大小后的动画持续时间
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0 // 禁用贝塞尔曲线
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
display: true
|
||||
}
|
||||
}],
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'minute',
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
cpu: 0,
|
||||
disk_percentage: 0,
|
||||
disk_total: '',
|
||||
disk_used: '',
|
||||
uptime: '',
|
||||
loadavg: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.websocket = new ReconnectingWebSocket(this.getWebSocketRoot() + '/analytic?token='
|
||||
+ btoa(this.$store.state.user.token))
|
||||
this.websocket.onmessage = this.wsOnMessage
|
||||
this.websocket.onopen = this.wsOpen
|
||||
const time = new Date()
|
||||
for (let i = 0; i < 120; i++) {
|
||||
this.cpu_analytic.datasets[0].data.push({x: time, y: 0})
|
||||
this.cpu_analytic.datasets[1].data.push({x: time, y: 0})
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.websocket.close()
|
||||
},
|
||||
methods: {
|
||||
wsOpen() {
|
||||
this.websocket.send('ping')
|
||||
},
|
||||
wsOnMessage(m) {
|
||||
const r = JSON.parse(m.data)
|
||||
// console.log(r)
|
||||
this.cpu = r.cpu_system + r.cpu_user
|
||||
const time = new Date()
|
||||
this.cpu_analytic.datasets[0].data
|
||||
.push({x: time, y: r.cpu_user})
|
||||
this.cpu_analytic.datasets[1].data
|
||||
.push({x: time, y: this.cpu})
|
||||
if (this.cpu_analytic.datasets[0].data.length > 120) {
|
||||
this.cpu_analytic.datasets[0].data.shift()
|
||||
this.cpu_analytic.datasets[1].data.shift()
|
||||
}
|
||||
this.cpu = this.cpu.toFixed(2)
|
||||
this.memory_pressure = r.memory_pressure
|
||||
this.memory_used = r.memory_used
|
||||
this.memory_cached = r.memory_cached
|
||||
this.memory_free = r.memory_free
|
||||
this.memory_total = r.memory_total
|
||||
this.disk_percentage = r.disk_percentage
|
||||
this.disk_used = r.disk_used
|
||||
this.disk_total = r.disk_total
|
||||
let uptime = Math.floor(r.uptime)
|
||||
let uptime_days = Math.floor(uptime / 86400)
|
||||
uptime -= uptime_days * 86400
|
||||
let uptime_hours = Math.floor(uptime / 3600)
|
||||
uptime -= uptime_hours * 3600
|
||||
this.uptime = uptime_days + 'd ' + uptime_hours + 'h ' + Math.floor(uptime / 60) + 'm'
|
||||
this.loadavg = r.loadavg
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-card {
|
||||
|
||||
.chart {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.chart_dashboard {
|
||||
padding: 60px;
|
||||
|
||||
.description {
|
||||
width: 120px;
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 512px) {
|
||||
margin: 10px 0;
|
||||
.chart_dashboard {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue