worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

WIP: Improve admin dashboard

Browse source
This commit is contained in:
syuilo 2020-08-13 21:27:06 +09:00
parent bb342c7601
commit 080574e13d
1 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/client/pages/instance/index.vue
View file

@ -108,7 +108,7 @@
<mk-folder> <mk-folder>
<template #header><fa :icon="faClipboardList"/> {{ $t('jobQueue') }}</template> <template #header><fa :icon="faClipboardList"/> {{ $t('jobQueue') }}</template>
<div class="vkyrmkwb"> <div class="vkyrmkwb" :style="{ gridTemplateRows: queueHeight }">
<mk-container :body-togglable="false" :scrollable="true" :resize-base-el="() => $el"> <mk-container :body-togglable="false" :scrollable="true" :resize-base-el="() => $el">
<template #header><fa :icon="faExclamationTriangle"/> {{ $t('delayed') }}</template> <template #header><fa :icon="faExclamationTriangle"/> {{ $t('delayed') }}</template>
@ -119,10 +119,10 @@
</div> </div>
</div> </div>
</mk-container> </mk-container>
<x-queue :connection="queueConnection" domain="inbox"> <x-queue :connection="queueConnection" domain="inbox" ref="queue" class="queue">
<template #title><fa :icon="faExchangeAlt"/> In</template> <template #title><fa :icon="faExchangeAlt"/> In</template>
</x-queue> </x-queue>
<x-queue :connection="queueConnection" domain="deliver"> <x-queue :connection="queueConnection" domain="deliver" class="queue">
<template #title><fa :icon="faExchangeAlt"/> Out</template> <template #title><fa :icon="faExchangeAlt"/> Out</template>
</x-queue> </x-queue>
</div> </div>
@ -239,6 +239,7 @@ export default Vue.extend({
modLogs: [], modLogs: [],
dbInfo: null, dbInfo: null,
overviewHeight: '1fr', overviewHeight: '1fr',
queueHeight: '1fr',
faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList, faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
} }
}, },
@ -512,13 +513,17 @@ export default Vue.extend({
}); });
this.$nextTick(() => { this.$nextTick(() => {
const ro = new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
if (this.$refs.stats) { if (this.$refs.stats && this.$refs.stats.$el) {
this.overviewHeight = this.$refs.stats.$el.offsetHeight + 'px'; this.overviewHeight = this.$refs.stats.$el.offsetHeight + 'px';
} }
}); }).observe(this.$refs.stats.$el);
ro.observe(this.$refs.stats.$el); new ResizeObserver((entries, observer) => {
if (this.$refs.queue && this.$refs.queue.$el) {
this.queueHeight = this.$refs.queue.$el.offsetHeight + 'px';
}
}).observe(this.$refs.queue.$el);
}); });
}, },
@ -666,8 +671,17 @@ export default Vue.extend({
.vkyrmkwb { .vkyrmkwb {
display: grid; display: grid;
grid-template-columns: 0.5fr 1fr 1fr; grid-template-columns: 0.5fr 1fr 1fr;
grid-template-rows: 400px; grid-template-rows: 1fr;
gap: 16px 16px; gap: 16px 16px;
margin-bottom: var(--margin);
> .queue {
height: min-content;
}
> * {
margin-bottom: 0;
}
} }
.uwuemslx { .uwuemslx {