diff options
Diffstat (limited to 'packages/client/src/pages/admin/queue.vue')
| -rw-r--r-- | packages/client/src/pages/admin/queue.vue | 67 |
1 files changed, 29 insertions, 38 deletions
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue index 656b18199f..6ccb464d17 100644 --- a/packages/client/src/pages/admin/queue.vue +++ b/packages/client/src/pages/admin/queue.vue @@ -1,26 +1,24 @@ <template> -<MkSpacer :content-max="800"> - <XQueue :connection="connection" domain="inbox"> - <template #title>In</template> - </XQueue> - <XQueue :connection="connection" domain="deliver"> - <template #title>Out</template> - </XQueue> - <MkButton danger @click="clear()"><i class="fas fa-trash-alt"></i> {{ i18n.ts.clearQueue }}</MkButton> -</MkSpacer> +<MkStickyContainer> + <template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> + <MkSpacer :content-max="800"> + <XQueue v-if="tab === 'deliver'" domain="deliver"/> + <XQueue v-else-if="tab === 'inbox'" domain="inbox"/> + </MkSpacer> +</MkStickyContainer> </template> <script lang="ts" setup> import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue'; -import MkButton from '@/components/ui/button.vue'; import XQueue from './queue.chart.vue'; +import XHeader from './_header_.vue'; +import MkButton from '@/components/ui/button.vue'; import * as os from '@/os'; -import { stream } from '@/stream'; -import * as symbols from '@/symbols'; import * as config from '@/config'; import { i18n } from '@/i18n'; +import { definePageMetadata } from '@/scripts/page-metadata'; -const connection = markRaw(stream.useChannel('queueStats')); +let tab = $ref('deliver'); function clear() { os.confirm({ @@ -34,32 +32,25 @@ function clear() { }); } -onMounted(() => { - nextTick(() => { - connection.send('requestLog', { - id: Math.random().toString().substr(2, 8), - length: 200 - }); - }); -}); +const headerActions = $computed(() => [{ + asFullButton: true, + icon: 'fas fa-up-right-from-square', + text: i18n.ts.dashboard, + handler: () => { + window.open(config.url + '/queue', '_blank'); + }, +}]); -onBeforeUnmount(() => { - connection.dispose(); -}); +const headerTabs = $computed(() => [{ + key: 'deliver', + title: 'Deliver', +}, { + key: 'inbox', + title: 'Inbox', +}]); -defineExpose({ - [symbols.PAGE_INFO]: { - title: i18n.ts.jobQueue, - icon: 'fas fa-clipboard-list', - bg: 'var(--bg)', - actions: [{ - asFullButton: true, - icon: 'fas fa-up-right-from-square', - text: i18n.ts.dashboard, - handler: () => { - window.open(config.url + '/queue', '_blank'); - }, - }], - } +definePageMetadata({ + title: i18n.ts.jobQueue, + icon: 'fas fa-clipboard-list', }); </script> |