sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-05 00:03:51 +09:00
Code Issues Projects Releases Wiki Activity

rename: client -> frontend

Browse Source
This commit is contained in:
syuilo
2022-12-27 14:36:33 +09:00
parent db6fff6f26
commit 9384f5399d
592 changed files with 111 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
packages/frontend/src/pages/admin/overview.queue.vue Normal file
View File

@ -0,0 +1,127 @@
<template>
<div :class="$style.root">
<div class="_table status">
<div class="_row">
<div class="_cell" style="text-align: center;"><div class="_label">Process</div>{{ number(activeSincePrevTick) }}</div>
<div class="_cell" style="text-align: center;"><div class="_label">Active</div>{{ number(active) }}</div>
<div class="_cell" style="text-align: center;"><div class="_label">Waiting</div>{{ number(waiting) }}</div>
<div class="_cell" style="text-align: center;"><div class="_label">Delayed</div>{{ number(delayed) }}</div>
</div>
</div>
<div class="charts">
<div class="chart">
<div class="title">Process</div>
<XChart ref="chartProcess" type="process"/>
</div>
<div class="chart">
<div class="title">Active</div>
<XChart ref="chartActive" type="active"/>
</div>
<div class="chart">
<div class="title">Delayed</div>
<XChart ref="chartDelayed" type="delayed"/>
</div>
<div class="chart">
<div class="title">Waiting</div>
<XChart ref="chartWaiting" type="waiting"/>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { markRaw, onMounted, onUnmounted, ref } from 'vue';
import XChart from './overview.queue.chart.vue';
import number from '@/filters/number';
import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
const connection = markRaw(stream.useChannel('queueStats'));
const activeSincePrevTick = ref(0);
const active = ref(0);
const delayed = ref(0);
const waiting = ref(0);
let chartProcess = $ref<InstanceType<typeof XChart>>();
let chartActive = $ref<InstanceType<typeof XChart>>();
let chartDelayed = $ref<InstanceType<typeof XChart>>();
let chartWaiting = $ref<InstanceType<typeof XChart>>();
const props = defineProps<{
domain: string;
}>();
const onStats = (stats) => {
activeSincePrevTick.value = stats[props.domain].activeSincePrevTick;
active.value = stats[props.domain].active;
delayed.value = stats[props.domain].delayed;
waiting.value = stats[props.domain].waiting;
chartProcess.pushData(stats[props.domain].activeSincePrevTick);
chartActive.pushData(stats[props.domain].active);
chartDelayed.pushData(stats[props.domain].delayed);
chartWaiting.pushData(stats[props.domain].waiting);
};
const onStatsLog = (statsLog) => {
const dataProcess = [];
const dataActive = [];
const dataDelayed = [];
const dataWaiting = [];
for (const stats of [...statsLog].reverse()) {
dataProcess.push(stats[props.domain].activeSincePrevTick);
dataActive.push(stats[props.domain].active);
dataDelayed.push(stats[props.domain].delayed);
dataWaiting.push(stats[props.domain].waiting);
}
chartProcess.setData(dataProcess);
chartActive.setData(dataActive);
chartDelayed.setData(dataDelayed);
chartWaiting.setData(dataWaiting);
};
onMounted(() => {
connection.on('stats', onStats);
connection.on('statsLog', onStatsLog);
connection.send('requestLog', {
id: Math.random().toString().substr(2, 8),
length: 100,
});
});
onUnmounted(() => {
connection.off('stats', onStats);
connection.off('statsLog', onStatsLog);
connection.dispose();
});
</script>
<style lang="scss" module>
.root {
&:global {
> .status {
padding: 0 0 16px 0;
}
> .charts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
> .chart {
min-width: 0;
padding: 16px;
background: var(--panel);
border-radius: var(--radius);
> .title {
font-size: 0.85em;
}
}
}
}
}
</style>