diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/components/ui/container.vue | 9 | ||||
| -rw-r--r-- | src/client/pages/admin/overview.vue | 60 |
2 files changed, 64 insertions, 5 deletions
diff --git a/src/client/components/ui/container.vue b/src/client/components/ui/container.vue index 1940099096..14673dfcd7 100644 --- a/src/client/components/ui/container.vue +++ b/src/client/components/ui/container.vue @@ -1,5 +1,5 @@ <template> -<div class="ukygtjoj _block" :class="{ naked, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }"> +<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }" v-size="{ max: [380] }"> <header v-if="showHeader" ref="header"> <div class="title"><slot name="header"></slot></div> <div class="sub"> @@ -36,6 +36,11 @@ export default defineComponent({ required: false, default: true }, + thin: { + type: Boolean, + required: false, + default: false + }, naked: { type: Boolean, required: false, @@ -226,7 +231,7 @@ export default defineComponent({ } } - &.max-width_380px { + &.max-width_380px, &.thin { > header { > .title { padding: 8px 10px; diff --git a/src/client/pages/admin/overview.vue b/src/client/pages/admin/overview.vue index 327a6492e6..bb9c10f106 100644 --- a/src/client/pages/admin/overview.vue +++ b/src/client/pages/admin/overview.vue @@ -2,7 +2,7 @@ <div> <MkHeader :info="header"/> - <div class="edbbcaef"> + <div class="edbbcaef" v-size="{ max: [880] }"> <div v-if="stats" class="cfcdecdf" style="margin: var(--margin)"> <div class="number _panel"> <div class="label">Users</div> @@ -26,7 +26,18 @@ <MkInstanceStats :chart-limit="500" :detailed="true"/> </div> </MkContainer> - + + <div class="queue"> + <MkContainer :foldable="true" :thin="true" class="deliver"> + <template #header>Queue: deliver</template> + <MkQueueChart :connection="queueStatsConnection" domain="deliver"/> + </MkContainer> + <MkContainer :foldable="true" :thin="true" class="inbox"> + <template #header>Queue: inbox</template> + <MkQueueChart :connection="queueStatsConnection" domain="inbox"/> + </MkContainer> + </div> + <!--<XMetrics/>--> <MkFolder style="margin: var(--margin)"> @@ -59,7 +70,7 @@ </template> <script lang="ts"> -import { computed, defineComponent, version as vueVersion } from 'vue'; +import { computed, defineComponent, markRaw, version as vueVersion } from 'vue'; import FormKeyValueView from '@client/components/debobigego/key-value-view.vue'; import MkInstanceStats from '@client/components/instance-stats.vue'; import MkButton from '@client/components/ui/button.vue'; @@ -67,6 +78,7 @@ import MkSelect from '@client/components/form/select.vue'; import MkNumberDiff from '@client/components/number-diff.vue'; import MkContainer from '@client/components/ui/container.vue'; import MkFolder from '@client/components/ui/folder.vue'; +import MkQueueChart from '@client/components/queue-chart.vue'; import { version, url } from '@client/config'; import bytes from '@client/filters/bytes'; import number from '@client/filters/number'; @@ -82,6 +94,7 @@ export default defineComponent({ MkInstanceStats, MkContainer, MkFolder, + MkQueueChart, XMetrics, }, @@ -108,6 +121,7 @@ export default defineComponent({ notesComparedToThePrevDay: null, fetchJobs: () => os.api('admin/queue/deliver-delayed', {}), fetchModLogs: () => os.api('admin/show-moderation-logs', {}), + queueStatsConnection: markRaw(os.stream.useChannel('queueStats')), } }, @@ -133,6 +147,17 @@ export default defineComponent({ os.api('admin/server-info', {}).then(serverInfo => { this.serverInfo = serverInfo; }); + + this.$nextTick(() => { + this.queueStatsConnection.send('requestLog', { + id: Math.random().toString().substr(2, 8), + length: 200 + }); + }); + }, + + beforeUnmount() { + this.queueStatsConnection.dispose(); }, methods: { @@ -184,5 +209,34 @@ export default defineComponent({ > .charts { margin: var(--margin); } + + > .queue { + margin: var(--margin); + display: flex; + + > .deliver, + > .inbox { + flex: 1; + width: 50%; + + &:not(:first-child) { + margin-left: var(--margin); + } + } + } + + &.max-width_800px { + > .queue { + display: block; + + > .deliver, + > .inbox { + &:not(:first-child) { + margin-top: var(--margin); + margin-left: 0; + } + } + } + } } </style> |