diff --git a/packages/client/src/components/file-list-for-admin.vue b/packages/client/src/components/file-list-for-admin.vue index 59256f90c..489c017a9 100644 --- a/packages/client/src/components/file-list-for-admin.vue +++ b/packages/client/src/components/file-list-for-admin.vue @@ -87,7 +87,7 @@ const props = defineProps<{ &.grid { display: grid; - grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-gap: 12px; margin: var(--margin) 0; diff --git a/packages/client/src/pages/admin/overview.queue-chart.vue b/packages/client/src/pages/admin/overview.queue-chart.vue index 9f23a14b5..e9ad18614 100644 --- a/packages/client/src/pages/admin/overview.queue-chart.vue +++ b/packages/client/src/pages/admin/overview.queue-chart.vue @@ -73,7 +73,7 @@ const onStats = (stats) => { chartInstance.data.datasets[1].data.push(stats[props.domain].active); chartInstance.data.datasets[2].data.push(stats[props.domain].waiting); chartInstance.data.datasets[3].data.push(stats[props.domain].delayed); - if (chartInstance.data.datasets[0].data.length > 200) { + if (chartInstance.data.datasets[0].data.length > 100) { chartInstance.data.labels.shift(); chartInstance.data.datasets[0].data.shift(); chartInstance.data.datasets[1].data.shift(); @@ -90,7 +90,7 @@ const onStatsLog = (statsLog) => { chartInstance.data.datasets[1].data.push(stats[props.domain].active); chartInstance.data.datasets[2].data.push(stats[props.domain].waiting); chartInstance.data.datasets[3].data.push(stats[props.domain].delayed); - if (chartInstance.data.datasets[0].data.length > 200) { + if (chartInstance.data.datasets[0].data.length > 100) { chartInstance.data.labels.shift(); chartInstance.data.datasets[0].data.shift(); chartInstance.data.datasets[1].data.shift(); @@ -146,7 +146,7 @@ onMounted(() => { }], }, options: { - aspectRatio: 3, + aspectRatio: 2.5, layout: { padding: { left: 0, @@ -157,6 +157,7 @@ onMounted(() => { }, scales: { x: { + display: false, grid: { display: false, }, @@ -166,6 +167,7 @@ onMounted(() => { }, }, y: { + display: false, min: 0, grid: { display: false, diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue index 8e57c7aaf..382169f72 100644 --- a/packages/client/src/pages/admin/overview.vue +++ b/packages/client/src/pages/admin/overview.vue @@ -24,13 +24,15 @@
Job queue
-
-
Deliver
- -
-
-
Inbox
- +
+
+
Deliver
+ +
+
+
Inbox
+ +
@@ -104,6 +106,7 @@
Recent files
+
@@ -148,6 +151,7 @@ import { definePageMetadata } from '@/scripts/page-metadata'; import 'chartjs-adapter-date-fns'; import { defaultStore } from '@/store'; import { useChartTooltip } from '@/scripts/use-chart-tooltip'; +import MkFileListForAdmin from '@/components/file-list-for-admin.vue'; Chart.register( ArcElement, @@ -182,6 +186,11 @@ const queueStatsConnection = markRaw(stream.useChannel('queueStats')); const now = new Date(); let chartInstance: Chart = null; const chartLimit = 30; +const filesPagination = { + endpoint: 'admin/drive/files' as const, + limit: 9, + noPaging: true, +}; const { handler: externalTooltipHandler } = useChartTooltip(); @@ -256,6 +265,7 @@ async function renderChart() { scales: { x: { type: 'time', + display: false, stacked: true, offset: false, time: { @@ -276,6 +286,7 @@ async function renderChart() { min: getDate(chartLimit).getTime(), }, y: { + display: false, position: 'left', stacked: true, grid: { @@ -383,7 +394,7 @@ onMounted(async () => { nextTick(() => { queueStatsConnection.send('requestLog', { id: Math.random().toString().substr(2, 8), - length: 200, + length: 100, }); }); }); @@ -415,7 +426,6 @@ definePageMetadata({ margin: 32px 0; > .title { - font-size: 1.1em; font-weight: bold; margin-bottom: 16px; } @@ -424,7 +434,7 @@ definePageMetadata({ > .body { display: grid; grid-gap: 16px; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); > .number { padding: 14px 20px; @@ -450,7 +460,7 @@ definePageMetadata({ > .body { display: grid; grid-gap: 16px; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); > .number { padding: 14px 20px; @@ -500,19 +510,22 @@ definePageMetadata({ &.queue { > .body { - position: relative; - padding: 24px; - background: var(--panel); - border-radius: var(--radius); + display: grid; + grid-gap: 16px; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - &:not(:last-child) { - margin-bottom: 16px; - } + > .chart { + position: relative; + padding: 20px; + background: var(--panel); + border-radius: var(--radius); - > .title { - position: absolute; - top: 24px; - left: 24px; + > .title { + position: absolute; + top: 20px; + left: 20px; + font-size: 90%; + } } } }