keith/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2024-11-26 08:45:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

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 { &.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;

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

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

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