From b2a55f1d6d5eb249edf7d829bbfba85c610af65b Mon Sep 17 00:00:00 2001
From: Natty <natty.sh.git@gmail.com>
Date: Wed, 10 Jan 2024 21:15:30 +0100
Subject: [PATCH] Frontend: Removed the server metrics widget

---
 .../frontend/client/src/widgets/index.ts      |   5 -
 .../src/widgets/server-metric/cpu-mem.vue     | 193 ------------------
 .../client/src/widgets/server-metric/cpu.vue  |  65 ------
 .../client/src/widgets/server-metric/disk.vue |  57 ------
 .../src/widgets/server-metric/index.vue       | 135 ------------
 .../src/widgets/server-metric/meilisearch.vue |  85 --------
 .../client/src/widgets/server-metric/mem.vue  |  73 -------
 .../client/src/widgets/server-metric/net.vue  | 153 --------------
 .../client/src/widgets/server-metric/pie.vue  |  64 ------
 9 files changed, 830 deletions(-)
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/cpu-mem.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/cpu.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/disk.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/index.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/meilisearch.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/mem.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/net.vue
 delete mode 100644 fe_calckey/frontend/client/src/widgets/server-metric/pie.vue

diff --git a/fe_calckey/frontend/client/src/widgets/index.ts b/fe_calckey/frontend/client/src/widgets/index.ts
index ca3bc1d..33986ea 100644
--- a/fe_calckey/frontend/client/src/widgets/index.ts
+++ b/fe_calckey/frontend/client/src/widgets/index.ts
@@ -61,10 +61,6 @@ export default function (app: App) {
         "MkwSlideshow",
         defineAsyncComponent(() => import("./slideshow.vue"))
     );
-    app.component(
-        "MkwServerMetric",
-        defineAsyncComponent(() => import("./server-metric/index.vue"))
-    );
     app.component(
         "MkwOnlineUsers",
         defineAsyncComponent(() => import("./online-users.vue"))
@@ -108,7 +104,6 @@ export const widgets = [
     "federation",
     "postForm",
     "slideshow",
-    "serverMetric",
     "serverInfo",
     "onlineUsers",
     "jobQueue",
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/cpu-mem.vue b/fe_calckey/frontend/client/src/widgets/server-metric/cpu-mem.vue
deleted file mode 100644
index 68e4302..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/cpu-mem.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <div class="lcfyofjk">
-        <svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
-            <defs>
-                <linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-                    <stop offset="0%" stop-color="hsl(189, 43%, 73%)"></stop>
-                    <stop offset="100%" stop-color="hsl(343, 76%, 68%)"></stop>
-                </linearGradient>
-                <mask
-                    :id="cpuMaskId"
-                    x="0"
-                    y="0"
-                    :width="viewBoxX"
-                    :height="viewBoxY"
-                >
-                    <polygon
-                        :points="cpuPolygonPoints"
-                        fill="#fff"
-                        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(189, 43%, 73%)"></stop>
-                    <stop offset="100%" stop-color="hsl(343, 76%, 68%)"></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>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from "vue";
-import { v4 as uuid } from "uuid";
-
-const props = defineProps<{
-    connection: any;
-    meta: any;
-}>();
-
-let viewBoxX: number = $ref(50);
-let viewBoxY: number = $ref(30);
-let stats: any[] = $ref([]);
-const cpuGradientId = uuid();
-const cpuMaskId = uuid();
-const memGradientId = uuid();
-const memMaskId = uuid();
-let cpuPolylinePoints: string = $ref("");
-let memPolylinePoints: string = $ref("");
-let cpuPolygonPoints: string = $ref("");
-let memPolygonPoints: string = $ref("");
-let cpuHeadX: any = $ref(null);
-let cpuHeadY: any = $ref(null);
-let memHeadX: any = $ref(null);
-let memHeadY: any = $ref(null);
-let cpuP: string = $ref("");
-let memP: string = $ref("");
-
-onMounted(() => {
-    props.connection.on("stats", onStats);
-    props.connection.on("statsLog", onStatsLog);
-    props.connection.send("requestLog", {
-        id: Math.random().toString().substr(2, 8),
-    });
-});
-
-onBeforeUnmount(() => {
-    props.connection.off("stats", onStats);
-    props.connection.off("statsLog", onStatsLog);
-});
-
-function onStats(connStats) {
-    stats.push(connStats);
-    if (stats.length > 50) stats.shift();
-
-    let cpuPolylinePointsStats = stats.map((s, i) => [
-        viewBoxX - (stats.length - 1 - i),
-        (1 - s.cpu) * viewBoxY,
-    ]);
-    let memPolylinePointsStats = stats.map((s, i) => [
-        viewBoxX - (stats.length - 1 - i),
-        (1 - s.mem.active / props.meta.mem.total) * viewBoxY,
-    ]);
-    cpuPolylinePoints = cpuPolylinePointsStats
-        .map((xy) => `${xy[0]},${xy[1]}`)
-        .join(" ");
-    memPolylinePoints = memPolylinePointsStats
-        .map((xy) => `${xy[0]},${xy[1]}`)
-        .join(" ");
-
-    cpuPolygonPoints = `${
-        viewBoxX - (stats.length - 1)
-    },${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
-    memPolygonPoints = `${
-        viewBoxX - (stats.length - 1)
-    },${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
-
-    cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
-    cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
-    memHeadX = memPolylinePointsStats[memPolylinePointsStats.length - 1][0];
-    memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
-
-    cpuP = (connStats.cpu * 100).toFixed(0);
-    memP = ((connStats.mem.active / props.meta.mem.total) * 100).toFixed(0);
-}
-
-function onStatsLog(statsLog) {
-    for (const revStats of [...statsLog].reverse()) {
-        onStats(revStats);
-    }
-}
-</script>
-
-<style lang="scss" scoped>
-.lcfyofjk {
-    display: flex;
-
-    > svg {
-        display: block;
-        padding: 10px;
-        width: 50%;
-
-        &:first-child {
-            padding-right: 5px;
-        }
-
-        &:last-child {
-            padding-left: 5px;
-        }
-
-        > text {
-            font-size: 5px;
-            fill: currentColor;
-
-            > tspan {
-                opacity: 0.5;
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/cpu.vue b/fe_calckey/frontend/client/src/widgets/server-metric/cpu.vue
deleted file mode 100644
index 83e8c4c..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/cpu.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <div class="vrvdvrys">
-        <XPie class="pie" :value="usage" />
-        <div>
-            <p><i class="ph-cpu ph-bold ph-lg"></i>CPU</p>
-            <p>{{ meta.cpu.cores }} Logical cores</p>
-            <p>{{ meta.cpu.model }}</p>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from "vue";
-import XPie from "./pie.vue";
-
-const props = defineProps<{
-    connection: any;
-    meta: any;
-}>();
-
-let usage: number = $ref(0);
-
-function onStats(stats) {
-    usage = stats.cpu;
-}
-
-onMounted(() => {
-    props.connection.on("stats", onStats);
-});
-
-onBeforeUnmount(() => {
-    props.connection.off("stats", onStats);
-});
-</script>
-
-<style lang="scss" scoped>
-.vrvdvrys {
-    display: flex;
-    padding: 16px;
-
-    > .pie {
-        height: 82px;
-        flex-shrink: 0;
-        margin-right: 16px;
-    }
-
-    > div {
-        flex: 1;
-
-        > p {
-            margin: 0;
-            font-size: 0.8em;
-
-            &:first-child {
-                font-weight: bold;
-                margin-bottom: 4px;
-
-                > i {
-                    margin-right: 4px;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/disk.vue b/fe_calckey/frontend/client/src/widgets/server-metric/disk.vue
deleted file mode 100644
index 873582e..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/disk.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <div class="zbwaqsat">
-        <XPie class="pie" :value="usage" />
-        <div>
-            <p><i class="ph-hard-drives ph-bold ph-lg"></i>Disk</p>
-            <p>Total: {{ bytes(total, 1) }}</p>
-            <p>Free: {{ bytes(available, 1) }}</p>
-            <p>Used: {{ bytes(used, 1) }}</p>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import {} from "vue";
-import XPie from "./pie.vue";
-import bytes from "@/filters/bytes";
-
-const props = defineProps<{
-    meta: any; // TODO
-}>();
-
-const usage = $computed(() => props.meta.fs.used / props.meta.fs.total);
-const total = $computed(() => props.meta.fs.total);
-const used = $computed(() => props.meta.fs.used);
-const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
-</script>
-
-<style lang="scss" scoped>
-.zbwaqsat {
-    display: flex;
-    padding: 16px;
-
-    > .pie {
-        height: 82px;
-        flex-shrink: 0;
-        margin-right: 16px;
-    }
-
-    > div {
-        flex: 1;
-
-        > p {
-            margin: 0;
-            font-size: 0.8em;
-
-            &:first-child {
-                font-weight: bold;
-                margin-bottom: 4px;
-
-                > i {
-                    margin-right: 4px;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/index.vue b/fe_calckey/frontend/client/src/widgets/server-metric/index.vue
deleted file mode 100644
index 63a1517..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/index.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-    <MkContainer
-        :show-header="widgetProps.showHeader"
-        :naked="widgetProps.transparent"
-    >
-        <template #header
-            ><i class="ph-hard-drives ph-bold ph-lg"></i
-            >{{ i18n.ts._widgets.serverMetric }}</template
-        >
-        <template #func
-            ><button class="_button" @click="toggleView()">
-                <i class="ph-sort-ascending ph-bold ph-lg"></i></button
-        ></template>
-
-        <div v-if="meta" 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"
-            />
-            <XMeili
-                v-else-if="
-                    instance.features.searchFilters && widgetProps.view === 5
-                "
-                :connection="connection"
-                :meta="meta"
-            />
-        </div>
-    </MkContainer>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
-import {
-    useWidgetPropsManager,
-    Widget,
-    WidgetComponentEmits,
-    WidgetComponentExpose,
-    WidgetComponentProps,
-} from "../widget";
-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";
-import XMeili from "./meilisearch.vue";
-import MkContainer from "@/components/MkContainer.vue";
-import { GetFormResultType } from "@/scripts/form";
-import * as os from "@/os";
-import { stream } from "@/stream";
-import { i18n } from "@/i18n";
-import { instance } from "@/instance";
-
-const name = "serverMetric";
-
-const widgetPropsDef = {
-    showHeader: {
-        type: "boolean" as const,
-        default: true,
-    },
-    transparent: {
-        type: "boolean" as const,
-        default: false,
-    },
-    view: {
-        type: "number" as const,
-        default: 0,
-        hidden: true,
-    },
-};
-
-type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
-
-// 現時点ではvueの制限によりimportしたtypeをジェネリックに渡せない
-//const props = defineProps<WidgetComponentProps<WidgetProps>>();
-//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
-const props = defineProps<{ widget?: Widget<WidgetProps> }>();
-const emit = defineEmits<{ (ev: "updateProps", props: WidgetProps) }>();
-
-const { widgetProps, configure, save } = useWidgetPropsManager(
-    name,
-    widgetPropsDef,
-    props,
-    emit
-);
-
-const meta = ref(null);
-
-os.api("server-info", {}).then((res) => {
-    meta.value = res;
-});
-
-const toggleView = () => {
-    if (
-        (widgetProps.view === 5 && instance.features.searchFilters) ||
-        (widgetProps.view === 4 && !instance.features.searchFilters)
-    ) {
-        widgetProps.view = 0;
-    } else {
-        widgetProps.view++;
-    }
-    save();
-};
-
-const connection = stream.useChannel("serverStats");
-onUnmounted(() => {
-    connection.dispose();
-});
-
-defineExpose<WidgetComponentExpose>({
-    name,
-    configure,
-    id: props.widget ? props.widget.id : null,
-});
-</script>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/meilisearch.vue b/fe_calckey/frontend/client/src/widgets/server-metric/meilisearch.vue
deleted file mode 100644
index 7899d9a..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/meilisearch.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-    <div class="verusivbr">
-        <XPie
-            v-tooltip="i18n.ts.meiliIndexCount"
-            class="pie"
-            :value="progress"
-            :reverse="true"
-        />
-        <div>
-            <p><i class="ph-file-search ph-bold ph-lg"></i>MeiliSearch</p>
-            <p>{{ i18n.ts._widgets.meiliStatus }}: {{ available }}</p>
-            <p>{{ i18n.ts._widgets.meiliSize }}: {{ bytes(totalSize, 1) }}</p>
-            <p>{{ i18n.ts._widgets.meiliIndexCount }}: {{ indexCount }}</p>
-        </div>
-    </div>
-    <br />
-</template>
-
-<script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
-import bytes from "@/filters/bytes";
-import XPie from "./pie.vue";
-import { i18n } from "@/i18n";
-import * as os from "@/os";
-
-const props = defineProps<{
-    connection: any;
-    meta: any;
-}>();
-
-let progress: number = $ref(0);
-let serverStats = $ref(null);
-let totalSize: number = $ref(0);
-let indexCount: number = $ref(0);
-let available: string = $ref("unavailable");
-
-function onStats(stats) {
-    totalSize = stats.meilisearch.size;
-    indexCount = stats.meilisearch.indexed_count;
-    available = stats.meilisearch.health;
-    progress = indexCount / serverStats.notesCount;
-}
-
-onMounted(() => {
-    os.api("stats", {}).then((res) => {
-        serverStats = res;
-    });
-    props.connection.on("stats", onStats);
-});
-
-onBeforeUnmount(() => {
-    props.connection.off("stats", onStats);
-});
-</script>
-
-<style lang="scss" scoped>
-.verusivbr {
-    display: flex;
-    padding: 16px;
-
-    > .pie {
-        height: 82px;
-        flex-shrink: 0;
-        margin-right: 16px;
-    }
-
-    > div {
-        flex: 1;
-
-        > p {
-            margin: 0;
-            font-size: 0.8em;
-
-            &:first-child {
-                font-weight: bold;
-                margin-bottom: 4px;
-
-                > i {
-                    margin-right: 4px;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/mem.vue b/fe_calckey/frontend/client/src/widgets/server-metric/mem.vue
deleted file mode 100644
index 805c5ff..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/mem.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="zlxnikvl">
-        <XPie class="pie" :value="usage" />
-        <div>
-            <p><i class="ph-microchip ph-bold ph-lg"></i>RAM</p>
-            <p>Total: {{ bytes(total, 1) }}</p>
-            <p>Used: {{ bytes(used, 1) }}</p>
-            <p>Free: {{ bytes(free, 1) }}</p>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from "vue";
-import XPie from "./pie.vue";
-import bytes from "@/filters/bytes";
-
-const props = defineProps<{
-    connection: any;
-    meta: any;
-}>();
-
-let usage: number = $ref(0);
-let total: number = $ref(0);
-let used: number = $ref(0);
-let free: number = $ref(0);
-
-function onStats(stats) {
-    usage = stats.mem.active / props.meta.mem.total;
-    total = props.meta.mem.total;
-    used = stats.mem.active;
-    free = total - used;
-}
-
-onMounted(() => {
-    props.connection.on("stats", onStats);
-});
-
-onBeforeUnmount(() => {
-    props.connection.off("stats", onStats);
-});
-</script>
-
-<style lang="scss" scoped>
-.zlxnikvl {
-    display: flex;
-    padding: 16px;
-
-    > .pie {
-        height: 82px;
-        flex-shrink: 0;
-        margin-right: 16px;
-    }
-
-    > div {
-        flex: 1;
-
-        > p {
-            margin: 0;
-            font-size: 0.8em;
-
-            &:first-child {
-                font-weight: bold;
-                margin-bottom: 4px;
-
-                > i {
-                    margin-right: 4px;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/net.vue b/fe_calckey/frontend/client/src/widgets/server-metric/net.vue
deleted file mode 100644
index 6d5dc8a..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/net.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<template>
-    <div class="oxxrhrto">
-        <svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
-            <polygon
-                :points="inPolygonPoints"
-                fill="#f6c177"
-                fill-opacity="0.5"
-            />
-            <polyline
-                :points="inPolylinePoints"
-                fill="none"
-                stroke="#f6c177"
-                stroke-width="1"
-            />
-            <circle :cx="inHeadX" :cy="inHeadY" r="1.5" fill="#f6c177" />
-            <text x="1" y="5">
-                NET rx
-                <tspan>{{ bytes(inRecent) }}</tspan>
-            </text>
-        </svg>
-        <svg :viewBox="`0 0 ${viewBoxX} ${viewBoxY}`">
-            <polygon
-                :points="outPolygonPoints"
-                fill="#31748f"
-                fill-opacity="0.5"
-            />
-            <polyline
-                :points="outPolylinePoints"
-                fill="none"
-                stroke="#31748f"
-                stroke-width="1"
-            />
-            <circle :cx="outHeadX" :cy="outHeadY" r="1.5" fill="#31748f" />
-            <text x="1" y="5">
-                NET tx
-                <tspan>{{ bytes(outRecent) }}</tspan>
-            </text>
-        </svg>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount } from "vue";
-import bytes from "@/filters/bytes";
-
-const props = defineProps<{
-    connection: any;
-    meta: any;
-}>();
-
-let viewBoxX: number = $ref(50);
-let viewBoxY: number = $ref(30);
-let stats: any[] = $ref([]);
-let inPolylinePoints: string = $ref("");
-let outPolylinePoints: string = $ref("");
-let inPolygonPoints: string = $ref("");
-let outPolygonPoints: string = $ref("");
-let inHeadX: any = $ref(null);
-let inHeadY: any = $ref(null);
-let outHeadX: any = $ref(null);
-let outHeadY: any = $ref(null);
-let inRecent: number = $ref(0);
-let outRecent: number = $ref(0);
-
-onMounted(() => {
-    props.connection.on("stats", onStats);
-    props.connection.on("statsLog", onStatsLog);
-    props.connection.send("requestLog", {
-        id: Math.random().toString().substr(2, 8),
-    });
-});
-
-onBeforeUnmount(() => {
-    props.connection.off("stats", onStats);
-    props.connection.off("statsLog", onStatsLog);
-});
-
-function onStats(connStats) {
-    stats.push(connStats);
-    if (stats.length > 50) stats.shift();
-
-    const inPeak = Math.max(1024 * 64, Math.max(...stats.map((s) => s.net.rx)));
-    const outPeak = Math.max(
-        1024 * 64,
-        Math.max(...stats.map((s) => s.net.tx))
-    );
-
-    let inPolylinePointsStats = stats.map((s, i) => [
-        viewBoxX - (stats.length - 1 - i),
-        (1 - s.net.rx / inPeak) * viewBoxY,
-    ]);
-    let outPolylinePointsStats = stats.map((s, i) => [
-        viewBoxX - (stats.length - 1 - i),
-        (1 - s.net.tx / outPeak) * viewBoxY,
-    ]);
-    inPolylinePoints = inPolylinePointsStats
-        .map((xy) => `${xy[0]},${xy[1]}`)
-        .join(" ");
-    outPolylinePoints = outPolylinePointsStats
-        .map((xy) => `${xy[0]},${xy[1]}`)
-        .join(" ");
-
-    inPolygonPoints = `${
-        viewBoxX - (stats.length - 1)
-    },${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
-    outPolygonPoints = `${
-        viewBoxX - (stats.length - 1)
-    },${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
-
-    inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
-    inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
-    outHeadX = outPolylinePointsStats[outPolylinePointsStats.length - 1][0];
-    outHeadY = outPolylinePointsStats[outPolylinePointsStats.length - 1][1];
-
-    inRecent = connStats.net.rx;
-    outRecent = connStats.net.tx;
-}
-
-function onStatsLog(statsLog) {
-    for (const revStats of [...statsLog].reverse()) {
-        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: 5px;
-            fill: currentColor;
-
-            > tspan {
-                opacity: 0.5;
-            }
-        }
-    }
-}
-</style>
diff --git a/fe_calckey/frontend/client/src/widgets/server-metric/pie.vue b/fe_calckey/frontend/client/src/widgets/server-metric/pie.vue
deleted file mode 100644
index ebcc6e5..0000000
--- a/fe_calckey/frontend/client/src/widgets/server-metric/pie.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-    <svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
-        <circle
-            :r="r"
-            cx="50%"
-            cy="50%"
-            fill="none"
-            stroke-width="0.1"
-            stroke="rgba(0, 0, 0, 0.05)"
-        />
-        <circle
-            :r="r"
-            cx="50%"
-            cy="50%"
-            :stroke-dasharray="Math.PI * (r * 2)"
-            :stroke-dashoffset="strokeDashoffset"
-            fill="none"
-            stroke-width="0.1"
-            :stroke="color"
-        />
-        <text x="50%" y="50%" dy="0.05" text-anchor="middle">
-            {{ (value * 100).toFixed(0) }}%
-        </text>
-    </svg>
-</template>
-
-<script lang="ts" setup>
-import {} from "vue";
-
-const props = defineProps<{
-    value: number;
-    reverse?: boolean;
-}>();
-
-const r = 0.45;
-
-const color = $computed(
-    () =>
-        `hsl(${
-            props.reverse ? props.value * 180 : 180 - props.value * 180
-        }, 80%, 70%)`
-);
-const strokeDashoffset = $computed(
-    () => (1 - props.value) * (Math.PI * (r * 2))
-);
-</script>
-
-<style lang="scss" scoped>
-.hsalcinq {
-    display: block;
-    height: 100%;
-
-    > circle {
-        transform-origin: center;
-        transform: rotate(-90deg);
-        transition: stroke-dashoffset 0.5s ease;
-    }
-
-    > text {
-        font-size: 0.15px;
-        fill: currentColor;
-    }
-}
-</style>