SWREI/switched
0
0
Fork 0
Code

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo 2022-06-26 13:28:47 +09:00
parent 5e95a1f7af
commit 0cae0a49e2
3 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/file-list-for-admin.vue
View File

@ -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;

8
packages/client/src/pages/admin/overview.queue-chart.vue
View File

@ -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,

57
packages/client/src/pages/admin/overview.vue
View File

@ -24,13 +24,15 @@
<div class="container queue">
<div class="title">Job queue</div>
<div class="body deliver">
<div class="title">Deliver</div>
<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
</div>
<div class="body inbox">
<div class="title">Inbox</div>
<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
<div class="body">
<div class="chart deliver">
<div class="title">Deliver</div>
<XQueueChart :connection="queueStatsConnection" domain="deliver"/>
</div>
<div class="chart inbox">
<div class="title">Inbox</div>
<XQueueChart :connection="queueStatsConnection" domain="inbox"/>
</div>
</div>
</div>
@ -104,6 +106,7 @@
<div class="container files">
<div class="title">Recent files</div>
<div class="body">
<MkFileListForAdmin :pagination="filesPagination" view-mode="grid"/>
</div>
</div>
</div>
@ -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%;
}
}
}
}