ログビューア実装

This commit is contained in:
syuilo 2020-02-18 21:27:43 +09:00
parent e2ff408f2f
commit da4af041af
2 changed files with 110 additions and 2 deletions

View File

@ -419,6 +419,8 @@ hideThisNote: "このノートを非表示"
showFeaturedNotesInTimeline: "タイムラインにおすすめのノートを表示する"
objectStorage: "オブジェクトストレージ"
useObjectStorage: "オブジェクトストレージを使用"
serverLogs: "サーバーログ"
deleteAll: "全て削除"
_ago:
unknown: "謎"

View File

@ -5,6 +5,38 @@
<mk-instance-stats style="margin-bottom: var(--margin);"/>
<section class="_card logs">
<div class="_title"><fa :icon="faStream"/> {{ $t('serverLogs') }}</div>
<div class="_content">
<div class="_inputs">
<mk-input v-model="logDomain" :debounce="true">
<span>{{ $t('domain') }}</span>
</mk-input>
<mk-select v-model="logLevel">
<template #label>{{ $t('level') }}</template>
<option value="all">{{ $t('levels.all') }}</option>
<option value="info">{{ $t('levels.info') }}</option>
<option value="success">{{ $t('levels.success') }}</option>
<option value="warning">{{ $t('levels.warning') }}</option>
<option value="error">{{ $t('levels.error') }}</option>
<option value="debug">{{ $t('levels.debug') }}</option>
</mk-select>
</div>
<div class="logs">
<code v-for="log in logs" :key="log.id" :class="log.level">
<details>
<summary><mk-time :time="log.createdAt"/> [{{ log.domain.join('.') }}] {{ log.message }}</summary>
<vue-json-pretty v-if="log.data" :data="log.data"></vue-json-pretty>
</details>
</code>
</div>
</div>
<div class="_footer">
<mk-button @click="deleteAllLogs()" primary><fa :icon="faTrashAlt"/> {{ $t('deleteAll') }}</mk-button>
</div>
</section>
<section class="_card chart">
<div class="_title"><fa :icon="faMicrochip"/> {{ $t('cpuAndMemory') }}</div>
<div class="_content" style="margin-top: -8px; margin-bottom: -12px;">
@ -67,9 +99,13 @@
<script lang="ts">
import Vue from 'vue';
import { faServer, faExchangeAlt, faMicrochip, faHdd } from '@fortawesome/free-solid-svg-icons';
import { faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import Chart from 'chart.js';
import VueJsonPretty from 'vue-json-pretty';
import MkInstanceStats from '../../components/instance-stats.vue';
import MkButton from '../../components/ui/button.vue';
import MkSelect from '../../components/ui/select.vue';
import MkInput from '../../components/ui/input.vue';
import { version, url } from '../../config';
import i18n from '../../i18n';
@ -92,6 +128,10 @@ export default Vue.extend({
components: {
MkInstanceStats,
MkButton,
MkSelect,
MkInput,
VueJsonPretty
},
data() {
@ -104,7 +144,10 @@ export default Vue.extend({
memUsage: 0,
chartCpuMem: null,
chartNet: null,
faServer, faExchangeAlt, faMicrochip, faHdd
logs: [],
logLevel: 'all',
logDomain: '',
faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt
}
},
@ -114,7 +157,20 @@ export default Vue.extend({
},
},
watch: {
logLevel() {
this.logs = [];
this.fetchLogs();
},
logDomain() {
this.logs = [];
this.fetchLogs();
}
},
mounted() {
this.fetchLogs();
Chart.defaults.global.defaultFontColor = getComputedStyle(document.documentElement).getPropertyValue('--fg');
this.chartCpuMem = new Chart(this.$refs.cpumem, {
@ -330,6 +386,25 @@ export default Vue.extend({
},
methods: {
fetchLogs() {
this.$root.api('admin/logs', {
level: this.logLevel === 'all' ? null : this.logLevel,
domain: this.logDomain === '' ? null : this.logDomain,
limit: 30
}).then(logs => {
this.logs = logs.reverse();
});
},
deleteAllLogs() {
this.$root.api('admin/delete-logs').then(() => {
this.$root.dialog({
type: 'success',
iconOnly: true, autoClose: true
});
});
},
onStats(stats) {
const cpu = (stats.cpu * 100).toFixed(0);
const memActive = (stats.mem.active / this.serverInfo.mem.total * 100).toFixed(0);
@ -389,6 +464,37 @@ export default Vue.extend({
}
}
> .logs {
> ._content {
> .logs {
padding: 8px;
background: #000;
color: #fff;
font-size: 0.9em;
> code {
display: block;
&.error {
color: #f00;
}
&.warning {
color: #ff0;
}
&.success {
color: #0f0;
}
&.debug {
opacity: 0.7;
}
}
}
}
}
> .chart {
> ._content {
> .table {