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

🗑️ remove net metric (packages/frontend/src/widgets/server-metric/index....)

Browse source
This commit is contained in:
ひでまる 2025-01-29 10:14:21 +09:00
parent 223b325609
commit 8e5aaf6bb7
2 changed files with 4 additions and 153 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/frontend/src/widgets/server-metric/index.vue
View file

@ -11,10 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="meta" data-cy-mkw-serverMetric class="mkw-serverMetric">
<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
<XCpu v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
<XMemory v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
<XDisk v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
</div>
</MkContainer>
</template>
@ -24,7 +23,6 @@ import { onUnmounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget.js';
import XCpuMemory from './cpu-mem.vue';
import XNet from './net.vue';
import XCpu from './cpu.vue';
import XMemory from './mem.vue';
import XDisk from './disk.vue';
@ -70,7 +68,7 @@ misskeyApiGet('server-info', {}).then(res => {
});
const toggleView = () => {
if (widgetProps.view === 4) {
if (widgetProps.view === 3) {
widgetProps.view = 0;
} else {
widgetProps.view++;

147
packages/frontend/src/widgets/server-metric/net.vue
View file

@ -1,147 +0,0 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div class="oxxrhrto">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<polygon
:points="inPolygonPoints"
fill="#94a029"
fill-opacity="0.5"
/>
<polyline
:points="inPolylinePoints"
fill="none"
stroke="#94a029"
stroke-width="1"
/>
<circle
:cx="inHeadX"
:cy="inHeadY"
r="1.5"
fill="#94a029"
/>
<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
</svg>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<polygon
:points="outPolygonPoints"
fill="#ff9156"
fill-opacity="0.5"
/>
<polyline
:points="outPolylinePoints"
fill="none"
stroke="#ff9156"
stroke-width="1"
/>
<circle
:cx="outHeadX"
:cy="outHeadY"
r="1.5"
fill="#ff9156"
/>
<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
</svg>
</div>
</template>
<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as Misskey from 'misskey-js';
import bytes from '@/filters/bytes.js';
const props = defineProps<{
connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
meta: Misskey.entities.ServerInfoResponse
}>();
const viewBoxX = ref<number>(50);
const viewBoxY = ref<number>(30);
const stats = ref<Misskey.entities.ServerStats[]>([]);
const inPolylinePoints = ref<string>('');
const outPolylinePoints = ref<string>('');
const inPolygonPoints = ref<string>('');
const outPolygonPoints = ref<string>('');
const inHeadX = ref<number>();
const inHeadY = ref<number>();
const outHeadX = ref<number>();
const outHeadY = ref<number>();
const inRecent = ref<number>(0);
const outRecent = ref<number>(0);
onMounted(() => {
props.connection.on('stats', onStats);
props.connection.on('statsLog', onStatsLog);
props.connection.send('requestLog', {
id: Math.random().toString().substring(2, 10),
length: 50,
});
});
onBeforeUnmount(() => {
props.connection.off('stats', onStats);
props.connection.off('statsLog', onStatsLog);
});
function onStats(connStats: Misskey.entities.ServerStats) {
stats.value.push(connStats);
if (stats.value.length > 50) stats.value.shift();
const inPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.rx)));
const outPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.tx)));
let inPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY.value]);
let outPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY.value]);
inPolylinePoints.value = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
outPolylinePoints.value = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
inPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${inPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
outPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${outPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
inHeadX.value = inPolylinePointsStats.at(-1)![0];
inHeadY.value = inPolylinePointsStats.at(-1)![1];
outHeadX.value = outPolylinePointsStats.at(-1)![0];
outHeadY.value = outPolylinePointsStats.at(-1)![1];
inRecent.value = connStats.net.rx;
outRecent.value = connStats.net.tx;
}
function onStatsLog(statsLog: Misskey.entities.ServerStatsLog) {
for (const revStats of statsLog.toReversed()) {
onStats(revStats);
}
}
</script>
<style lang="scss" scoped>
.oxxrhrto {
display: flex;
> svg {
display: block;
padding: 10px;
width: 50%;
&:first-child {
padding-right: 5px;
}
&:last-child {
padding-left: 5px;
}
> text {
font-size: 4.5px;
fill: currentColor;
> tspan {
opacity: 0.5;
}
}
}
}
</style>