WIP: Improve admin dashboard

This commit is contained in:
syuilo 2020-08-13 19:56:46 +09:00
parent ed17636fb9
commit bb342c7601
2 changed files with 29 additions and 4 deletions

View file

@ -27,11 +27,22 @@
<template #header><fa :icon="faDatabase"/>{{ $t('database') }}</template> <template #header><fa :icon="faDatabase"/>{{ $t('database') }}</template>
<div class="_content" v-if="dbInfo"> <div class="_content" v-if="dbInfo">
<div class="_keyValue" v-for="table in Object.entries(dbInfo)"><b>{{ table[0] }}</b><span>{{ table[1].count | number }}</span><span>{{ table[1].size | bytes }}</span></div> <table style="border-collapse: collapse; width: 100%;">
<tr style="opacity: 0.7;">
<th style="text-align: left; padding: 0 8px 8px 0;">Table</th>
<th style="text-align: left; padding: 0 8px 8px 0;">Records</th>
<th style="text-align: left; padding: 0 0 8px 0;">Size</th>
</tr>
<tr v-for="table in dbInfo" :key="table[0]">
<th style="text-align: left; padding: 0 8px 0 0; word-break: break-all;">{{ table[0] }}</th>
<td style="padding: 0 8px 0 0;">{{ table[1].count | number }}</td>
<td style="padding: 0; opacity: 0.7;">{{ table[1].size | bytes }}</td>
</tr>
</table>
</div> </div>
</mk-container> </mk-container>
<mkw-federation class="fed"/> <mkw-federation class="fed" :body-togglable="true" :scrollable="true"/>
</div> </div>
</div> </div>
</mk-folder> </mk-folder>
@ -497,7 +508,7 @@ export default Vue.extend({
}); });
this.$root.api('admin/get-table-stats', {}).then(res => { this.$root.api('admin/get-table-stats', {}).then(res => {
this.dbInfo = res; this.dbInfo = Object.entries(res).sort((a, b) => b[1].size - a[1].size);
}); });
this.$nextTick(() => { this.$nextTick(() => {
@ -630,11 +641,13 @@ export default Vue.extend({
> .db { > .db {
flex: 1; flex: 1;
flex-grow: 0; flex-grow: 0;
height: 100%;
} }
> .fed { > .fed {
flex: 1; flex: 1;
flex-grow: 0; flex-grow: 0;
height: 100%;
} }
> *:not(:last-child) { > *:not(:last-child) {

View file

@ -1,5 +1,5 @@
<template> <template>
<mk-container :show-header="props.showHeader"> <mk-container :show-header="props.showHeader" :body-togglable="bodyTogglable" :scrollable="scrollable">
<template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template> <template #header><fa :icon="faGlobe"/>{{ $t('_widgets.federation') }}</template>
<div class="wbrkwalb"> <div class="wbrkwalb">
@ -36,6 +36,18 @@ export default define({
components: { components: {
MkContainer, MkMiniChart MkContainer, MkMiniChart
}, },
props: {
bodyTogglable: {
type: Boolean,
required: false,
default: false
},
scrollable: {
type: Boolean,
required: false,
default: false
},
},
data() { data() {
return { return {
instances: [], instances: [],