HidemaruOwO/puyoskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 edit cpu-mem like cherrypick (packages/frontend/src/widgets/server-metric/cpu-me...)

Browse source
This commit is contained in:
ひでまる 2025-01-29 10:15:14 +09:00
parent 8f0c973248
commit a3e61cb72b
1 changed files with 38 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

176
packages/frontend/src/widgets/server-metric/cpu-mem.vue
View file

@ -1,174 +1,74 @@
<!-- <!--
SPDX-FileCopyrightText: syuilo and misskey-project SPDX-FileCopyrightText: syuilo and misskey-project & noridev and misskey-project
SPDX-License-Identifier: AGPL-3.0-only SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div class="lcfyofjk"> <div :class="$style.root">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`"> <XPie :class="$style.pie" :value="cpuUsage"/>
<defs> <div :class="$style.div">
<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0"> <p>CPU</p>
<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop> <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (cpuUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop> </div>
</linearGradient> <XPie :class="$style.pie" :value="memUsage"/>
<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY"> <div :class="$style.div">
<polygon <p>RAM</p>
:points="cpuPolygonPoints" <text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (memUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
fill="#fff" </div>
fill-opacity="0.5"
/>
<polyline
:points="cpuPolylinePoints"
fill="none"
stroke="#fff"
stroke-width="1"
/>
<circle
:cx="cpuHeadX"
:cy="cpuHeadY"
r="1.5"
fill="#fff"
/>
</mask>
</defs>
<rect
x="-2" y="-2"
:width="viewBoxX + 4" :height="viewBoxY + 4"
:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
/>
<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
</svg>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<defs>
<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
</linearGradient>
<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
<polygon
:points="memPolygonPoints"
fill="#fff"
fill-opacity="0.5"
/>
<polyline
:points="memPolylinePoints"
fill="none"
stroke="#fff"
stroke-width="1"
/>
<circle
:cx="memHeadX"
:cy="memHeadY"
r="1.5"
fill="#fff"
/>
</mask>
</defs>
<rect
x="-2" y="-2"
:width="viewBoxX + 4" :height="viewBoxY + 4"
:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
/>
<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
</svg>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue'; import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { v4 as uuid } from 'uuid'; import XPie from './pie-compact.vue';
const props = defineProps<{ const props = defineProps<{
connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>, connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
meta: Misskey.entities.ServerInfoResponse meta: Misskey.entities.ServerInfoResponse
}>(); }>();
const viewBoxX = ref<number>(50); const cpuUsage = ref<number>(0);
const viewBoxY = ref<number>(30); const memUsage = ref<number>(0);
const stats = ref<Misskey.entities.ServerStats[]>([]);
const cpuGradientId = uuid();
const cpuMaskId = uuid();
const memGradientId = uuid();
const memMaskId = uuid();
const cpuPolylinePoints = ref<string>('');
const memPolylinePoints = ref<string>('');
const cpuPolygonPoints = ref<string>('');
const memPolygonPoints = ref<string>('');
const cpuHeadX = ref<number>();
const cpuHeadY = ref<number>();
const memHeadX = ref<number>();
const memHeadY = ref<number>();
const cpuP = ref<string>('');
const memP = ref<string>('');
onMounted(() => { onMounted(() => {
props.connection.on('stats', onStats); props.connection.on('stats', onStats);
props.connection.on('statsLog', onStatsLog);
props.connection.send('requestLog', {
id: Math.random().toString().substring(2, 10),
length: 50,
});
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
props.connection.off('stats', onStats); props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog);
}); });
function onStats(connStats: Misskey.entities.ServerStats) { function onStats(stats: Misskey.entities.ServerStats) {
stats.value.push(connStats); cpuUsage.value = stats.cpu;
if (stats.value.length > 50) stats.value.shift(); memUsage.value = stats.mem.active / props.meta.mem.total;
let cpuPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - s.cpu) * viewBoxY.value]);
let memPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY.value]);
cpuPolylinePoints.value = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
memPolylinePoints.value = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
cpuPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${cpuPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
memPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${memPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
cpuHeadX.value = cpuPolylinePointsStats.at(-1)![0];
cpuHeadY.value = cpuPolylinePointsStats.at(-1)![1];
memHeadX.value = memPolylinePointsStats.at(-1)![0];
memHeadY.value = memPolylinePointsStats.at(-1)![1];
cpuP.value = (connStats.cpu * 100).toFixed(0);
memP.value = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
}
function onStatsLog(statsLog: Misskey.entities.ServerStatsLog) {
for (const revStats of statsLog.toReversed()) {
onStats(revStats);
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.lcfyofjk { .root {
display: flex; display: flex;
padding: 16px 32px;
}
> svg { .pie {
display: block; height: 42px;
padding: 10px; flex-shrink: 0;
width: 50%; margin-right: 8px;
}
&:first-child { .div {
padding-right: 5px; flex: 1;
} margin: auto;
&:last-child { > p {
padding-left: 5px; margin: 0 0 2px;
} font-size: 0.8em;
> text {
font-size: 4.5px;
fill: currentColor;
> tspan {
opacity: 0.5;
}
}
} }
} }
.text {
font-weight: bold;
fill: currentColor;
}
</style> </style>