🗑️ remove net metric (packages/frontend/src/widgets/server-metric/index....)
This commit is contained in:
parent
223b325609
commit
8e5aaf6bb7
2 changed files with 4 additions and 153 deletions
|
|
@ -11,10 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<div v-if="meta" data-cy-mkw-serverMetric class="mkw-serverMetric">
|
<div v-if="meta" data-cy-mkw-serverMetric class="mkw-serverMetric">
|
||||||
<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
|
<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 === 1" :connection="connection" :meta="meta"/>
|
||||||
<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
|
<XMemory 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 === 3" :connection="connection" :meta="meta"/>
|
||||||
<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
|
|
||||||
</div>
|
</div>
|
||||||
</MkContainer>
|
</MkContainer>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -24,7 +23,6 @@ import { onUnmounted, ref } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget.js';
|
import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget.js';
|
||||||
import XCpuMemory from './cpu-mem.vue';
|
import XCpuMemory from './cpu-mem.vue';
|
||||||
import XNet from './net.vue';
|
|
||||||
import XCpu from './cpu.vue';
|
import XCpu from './cpu.vue';
|
||||||
import XMemory from './mem.vue';
|
import XMemory from './mem.vue';
|
||||||
import XDisk from './disk.vue';
|
import XDisk from './disk.vue';
|
||||||
|
|
@ -70,7 +68,7 @@ misskeyApiGet('server-info', {}).then(res => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const toggleView = () => {
|
const toggleView = () => {
|
||||||
if (widgetProps.view === 4) {
|
if (widgetProps.view === 3) {
|
||||||
widgetProps.view = 0;
|
widgetProps.view = 0;
|
||||||
} else {
|
} else {
|
||||||
widgetProps.view++;
|
widgetProps.view++;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
Loading…
Add table
Reference in a new issue