diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2019-03-13 00:14:44 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2019-03-13 00:14:44 +0900 |
| commit | 7537fb88d43345c702a8a04791cee4bf0fbece7e (patch) | |
| tree | c35922b909a7eddd1fbb78a1a2b4b49b2575650e /src/client/app/admin/views/cpu-memory.vue | |
| parent | Resolve #4454 (diff) | |
| download | misskey-7537fb88d43345c702a8a04791cee4bf0fbece7e.tar.gz misskey-7537fb88d43345c702a8a04791cee4bf0fbece7e.tar.bz2 misskey-7537fb88d43345c702a8a04791cee4bf0fbece7e.zip | |
Refactor
Diffstat (limited to 'src/client/app/admin/views/cpu-memory.vue')
| -rw-r--r-- | src/client/app/admin/views/cpu-memory.vue | 185 |
1 files changed, 0 insertions, 185 deletions
diff --git a/src/client/app/admin/views/cpu-memory.vue b/src/client/app/admin/views/cpu-memory.vue deleted file mode 100644 index a3951e7618..0000000000 --- a/src/client/app/admin/views/cpu-memory.vue +++ /dev/null @@ -1,185 +0,0 @@ -<template> -<div class="zyknedwtlthezamcjlolyusmipqmjgxz"> - <div> - <header> - <span><fa icon="microchip"/> CPU <span>{{ cpuP }}%</span></span> - <span v-if="meta">{{ meta.cpu.model }}</span> - </header> - <div ref="cpu"></div> - </div> - <div> - <header> - <span><fa icon="memory"/> MEM <span>{{ memP }}%</span></span> - <span v-if="meta"></span> - </header> - <div ref="mem"></div> - </div> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import ApexCharts from 'apexcharts'; - -export default Vue.extend({ - props: ['connection'], - - data() { - return { - stats: [], - cpuChart: null, - memChart: null, - cpuP: '', - memP: '', - meta: null - }; - }, - - watch: { - stats(stats) { - this.cpuChart.updateSeries([{ - data: stats.map((x, i) => ({ x: i, y: x.cpu_usage })) - }]); - this.memChart.updateSeries([{ - data: stats.map((x, i) => ({ x: i, y: (x.mem.used / x.mem.total) })) - }]); - } - }, - - mounted() { - this.$root.getMeta().then(meta => { - this.meta = meta; - }); - - this.connection.on('stats', this.onStats); - this.connection.on('statsLog', this.onStatsLog); - this.connection.send('requestLog', { - id: Math.random().toString().substr(2, 8), - length: 200 - }); - - const chartOpts = { - chart: { - type: 'area', - height: 200, - animations: { - dynamicAnimation: { - enabled: false - } - }, - toolbar: { - show: false - }, - zoom: { - enabled: false - } - }, - dataLabels: { - enabled: false - }, - grid: { - clipMarkers: false, - borderColor: 'rgba(0, 0, 0, 0.1)' - }, - stroke: { - curve: 'straight', - width: 2 - }, - tooltip: { - enabled: false - }, - series: [{ - data: [] - }], - xaxis: { - type: 'numeric', - labels: { - show: false - }, - tooltip: { - enabled: false - } - }, - yaxis: { - show: false, - min: 0, - max: 1 - } - }; - - this.cpuChart = new ApexCharts(this.$refs.cpu, chartOpts); - this.memChart = new ApexCharts(this.$refs.mem, chartOpts); - - this.cpuChart.render(); - this.memChart.render(); - }, - - beforeDestroy() { - this.connection.off('stats', this.onStats); - this.connection.off('statsLog', this.onStatsLog); - - this.cpuChart.destroy(); - this.memChart.destroy(); - }, - - methods: { - onStats(stats) { - this.stats.push(stats); - if (this.stats.length > 200) this.stats.shift(); - - this.cpuP = (stats.cpu_usage * 100).toFixed(0); - this.memP = (stats.mem.used / stats.mem.total * 100).toFixed(0); - }, - - onStatsLog(statsLog) { - for (const stats of statsLog.reverse()) { - this.onStats(stats); - } - } - } -}); -</script> - -<style lang="stylus" scoped> -.zyknedwtlthezamcjlolyusmipqmjgxz - display flex - - > div - display block - flex 1 - padding 20px 12px 0 12px - box-shadow 0 2px 4px rgba(0, 0, 0, 0.1) - background var(--face) - border-radius 8px - - &:first-child - margin-right 16px - - > header - display flex - padding 0 8px - margin-bottom -16px - color var(--adminDashboardCardFg) - font-size 14px - - > span - &:last-child - margin-left auto - opacity 0.7 - - > span - opacity 0.7 - - > div - margin-bottom -10px - - @media (max-width 1000px) - display block - margin-bottom 26px - - > div - &:first-child - margin-right 0 - margin-bottom 26px - -</style> |