chore(client): tweak ui
This commit is contained in:
parent
5e95a1f7af
commit
0cae0a49e2
@ -87,7 +87,7 @@ const props = defineProps<{
|
|||||||
|
|
||||||
&.grid {
|
&.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||||||
grid-gap: 12px;
|
grid-gap: 12px;
|
||||||
margin: var(--margin) 0;
|
margin: var(--margin) 0;
|
||||||
|
|
||||||
|
@ -73,7 +73,7 @@ const onStats = (stats) => {
|
|||||||
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
chartInstance.data.datasets[1].data.push(stats[props.domain].active);
|
||||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
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.labels.shift();
|
||||||
chartInstance.data.datasets[0].data.shift();
|
chartInstance.data.datasets[0].data.shift();
|
||||||
chartInstance.data.datasets[1].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[1].data.push(stats[props.domain].active);
|
||||||
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
|
||||||
chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
|
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.labels.shift();
|
||||||
chartInstance.data.datasets[0].data.shift();
|
chartInstance.data.datasets[0].data.shift();
|
||||||
chartInstance.data.datasets[1].data.shift();
|
chartInstance.data.datasets[1].data.shift();
|
||||||
@ -146,7 +146,7 @@ onMounted(() => {
|
|||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
aspectRatio: 3,
|
aspectRatio: 2.5,
|
||||||
layout: {
|
layout: {
|
||||||
padding: {
|
padding: {
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -157,6 +157,7 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
|
display: false,
|
||||||
grid: {
|
grid: {
|
||||||
display: false,
|
display: false,
|
||||||
},
|
},
|
||||||
@ -166,6 +167,7 @@ onMounted(() => {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
|
display: false,
|
||||||
min: 0,
|
min: 0,
|
||||||
grid: {
|
grid: {
|
||||||
display: false,
|
display: false,
|
||||||
|
@ -24,13 +24,15 @@
|
|||||||
|
|
||||||
<div class="container queue">
|
<div class="container queue">
|
||||||
<div class="title">Job queue</div>
|
<div class="title">Job queue</div>
|
||||||
<div class="body deliver">
|
<div class="body">
|
||||||
<div class="title">Deliver</div>
|
<div class="chart deliver">
|
||||||
<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
|
<div class="title">Deliver</div>
|
||||||
</div>
|
<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
|
||||||
<div class="body inbox">
|
</div>
|
||||||
<div class="title">Inbox</div>
|
<div class="chart inbox">
|
||||||
<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
|
<div class="title">Inbox</div>
|
||||||
|
<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -104,6 +106,7 @@
|
|||||||
<div class="container files">
|
<div class="container files">
|
||||||
<div class="title">Recent files</div>
|
<div class="title">Recent files</div>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
|
<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -148,6 +151,7 @@ import { definePageMetadata } from '@/scripts/page-metadata';
|
|||||||
import 'chartjs-adapter-date-fns';
|
import 'chartjs-adapter-date-fns';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
|
||||||
|
import MkFileListForAdmin from '@/components/file-list-for-admin.vue';
|
||||||
|
|
||||||
Chart.register(
|
Chart.register(
|
||||||
ArcElement,
|
ArcElement,
|
||||||
@ -182,6 +186,11 @@ const queueStatsConnection = markRaw(stream.useChannel('queueStats'));
|
|||||||
const now = new Date();
|
const now = new Date();
|
||||||
let chartInstance: Chart = null;
|
let chartInstance: Chart = null;
|
||||||
const chartLimit = 30;
|
const chartLimit = 30;
|
||||||
|
const filesPagination = {
|
||||||
|
endpoint: 'admin/drive/files' as const,
|
||||||
|
limit: 9,
|
||||||
|
noPaging: true,
|
||||||
|
};
|
||||||
|
|
||||||
const { handler: externalTooltipHandler } = useChartTooltip();
|
const { handler: externalTooltipHandler } = useChartTooltip();
|
||||||
|
|
||||||
@ -256,6 +265,7 @@ async function renderChart() {
|
|||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
type: 'time',
|
type: 'time',
|
||||||
|
display: false,
|
||||||
stacked: true,
|
stacked: true,
|
||||||
offset: false,
|
offset: false,
|
||||||
time: {
|
time: {
|
||||||
@ -276,6 +286,7 @@ async function renderChart() {
|
|||||||
min: getDate(chartLimit).getTime(),
|
min: getDate(chartLimit).getTime(),
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
|
display: false,
|
||||||
position: 'left',
|
position: 'left',
|
||||||
stacked: true,
|
stacked: true,
|
||||||
grid: {
|
grid: {
|
||||||
@ -383,7 +394,7 @@ onMounted(async () => {
|
|||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
queueStatsConnection.send('requestLog', {
|
queueStatsConnection.send('requestLog', {
|
||||||
id: Math.random().toString().substr(2, 8),
|
id: Math.random().toString().substr(2, 8),
|
||||||
length: 200,
|
length: 100,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@ -415,7 +426,6 @@ definePageMetadata({
|
|||||||
margin: 32px 0;
|
margin: 32px 0;
|
||||||
|
|
||||||
> .title {
|
> .title {
|
||||||
font-size: 1.1em;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
@ -424,7 +434,7 @@ definePageMetadata({
|
|||||||
> .body {
|
> .body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 16px;
|
grid-gap: 16px;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||||
|
|
||||||
> .number {
|
> .number {
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
@ -450,7 +460,7 @@ definePageMetadata({
|
|||||||
> .body {
|
> .body {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 16px;
|
grid-gap: 16px;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||||
|
|
||||||
> .number {
|
> .number {
|
||||||
padding: 14px 20px;
|
padding: 14px 20px;
|
||||||
@ -500,19 +510,22 @@ definePageMetadata({
|
|||||||
|
|
||||||
&.queue {
|
&.queue {
|
||||||
> .body {
|
> .body {
|
||||||
position: relative;
|
display: grid;
|
||||||
padding: 24px;
|
grid-gap: 16px;
|
||||||
background: var(--panel);
|
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||||
border-radius: var(--radius);
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
> .chart {
|
||||||
margin-bottom: 16px;
|
position: relative;
|
||||||
}
|
padding: 20px;
|
||||||
|
background: var(--panel);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
|
||||||
> .title {
|
> .title {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 24px;
|
top: 20px;
|
||||||
left: 24px;
|
left: 20px;
|
||||||
|
font-size: 90%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user