Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions 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>
<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">
<template #header><fa :icon="faExclamationTriangle"/> {{ $t('delayed') }}</template>
@ -119,10 +119,10 @@
</div>
</div>
</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>
</x-queue>
<x-queue :connection="queueConnection" domain="deliver">
<x-queue :connection="queueConnection" domain="deliver" class="queue">
<template #title><fa :icon="faExchangeAlt"/> Out</template>
</x-queue>
</div>
@ -239,6 +239,7 @@ export default Vue.extend({
modLogs: [],
dbInfo: null,
overviewHeight: '1fr',
queueHeight: '1fr',
faDatabase, faServer, faExchangeAlt, faMicrochip, faHdd, faStream, faTrashAlt, faInfoCircle, faExclamationTriangle, faTachometerAlt, faHeartbeat, faClipboardList,
}
},
@ -512,13 +513,17 @@ export default Vue.extend({
});
this.$nextTick(() => {
const ro = new ResizeObserver((entries, observer) => {
if (this.$refs.stats) {
new ResizeObserver((entries, observer) => {
if (this.$refs.stats && this.$refs.stats.$el) {
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 {
display: grid;
grid-template-columns: 0.5fr 1fr 1fr;
grid-template-rows: 400px;
grid-template-rows: 1fr;
gap: 16px 16px;
margin-bottom: var(--margin);
> .queue {
height: min-content;
}
> * {
margin-bottom: 0;
}
}
.uwuemslx {