WIP: Improve admin dashboard
This commit is contained in:
parent
ed17636fb9
commit
bb342c7601
|
@ -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) {
|
||||||
|
|
|
@ -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: [],
|
||||||
|
|
Loading…
Reference in New Issue