diff options
Diffstat (limited to 'packages/frontend/src/widgets/server-metric')
6 files changed, 78 insertions, 78 deletions
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue index c656d75429..9196ae209f 100644 --- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue +++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue @@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onBeforeUnmount } from 'vue'; +import { onMounted, onBeforeUnmount, ref } from 'vue'; import { v4 as uuid } from 'uuid'; const props = defineProps<{ @@ -83,23 +83,23 @@ const props = defineProps<{ meta: any }>(); -let viewBoxX: number = $ref(50); -let viewBoxY: number = $ref(30); -let stats: any[] = $ref([]); +const viewBoxX = ref<number>(50); +const viewBoxY = ref<number>(30); +const stats = ref<any[]>([]); 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(''); +const cpuPolylinePoints = ref<string>(''); +const memPolylinePoints = ref<string>(''); +const cpuPolygonPoints = ref<string>(''); +const memPolygonPoints = ref<string>(''); +const cpuHeadX = ref<any>(null); +const cpuHeadY = ref<any>(null); +const memHeadX = ref<any>(null); +const memHeadY = ref<any>(null); +const cpuP = ref<string>(''); +const memP = ref<string>(''); onMounted(() => { props.connection.on('stats', onStats); @@ -115,24 +115,24 @@ onBeforeUnmount(() => { }); function onStats(connStats) { - stats.push(connStats); - if (stats.length > 50) stats.shift(); + stats.value.push(connStats); + if (stats.value.length > 50) stats.value.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(' '); + 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 = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`; - memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`; + 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 = cpuPolylinePointsStats.at(-1)![0]; - cpuHeadY = cpuPolylinePointsStats.at(-1)![1]; - memHeadX = memPolylinePointsStats.at(-1)![0]; - memHeadY = memPolylinePointsStats.at(-1)![1]; + 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 = (connStats.cpu * 100).toFixed(0); - memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0); + cpuP.value = (connStats.cpu * 100).toFixed(0); + memP.value = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0); } function onStatsLog(statsLog) { diff --git a/packages/frontend/src/widgets/server-metric/cpu.vue b/packages/frontend/src/widgets/server-metric/cpu.vue index 1c9cce8598..0aeba518c0 100644 --- a/packages/frontend/src/widgets/server-metric/cpu.vue +++ b/packages/frontend/src/widgets/server-metric/cpu.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onBeforeUnmount } from 'vue'; +import { onMounted, onBeforeUnmount, ref } from 'vue'; import XPie from './pie.vue'; const props = defineProps<{ @@ -23,10 +23,10 @@ const props = defineProps<{ meta: any }>(); -let usage: number = $ref(0); +const usage = ref<number>(0); function onStats(stats) { - usage = stats.cpu; + usage.value = stats.cpu; } onMounted(() => { diff --git a/packages/frontend/src/widgets/server-metric/disk.vue b/packages/frontend/src/widgets/server-metric/disk.vue index 079b326fd6..ef88cae9f6 100644 --- a/packages/frontend/src/widgets/server-metric/disk.vue +++ b/packages/frontend/src/widgets/server-metric/disk.vue @@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { } from 'vue'; +import { computed } from 'vue'; import XPie from './pie.vue'; import bytes from '@/filters/bytes.js'; @@ -24,10 +24,10 @@ 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); +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> diff --git a/packages/frontend/src/widgets/server-metric/mem.vue b/packages/frontend/src/widgets/server-metric/mem.vue index 47f5a70a7e..11d0c156c1 100644 --- a/packages/frontend/src/widgets/server-metric/mem.vue +++ b/packages/frontend/src/widgets/server-metric/mem.vue @@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onBeforeUnmount } from 'vue'; +import { onMounted, onBeforeUnmount, ref } from 'vue'; import XPie from './pie.vue'; import bytes from '@/filters/bytes.js'; @@ -25,16 +25,16 @@ const props = defineProps<{ meta: any }>(); -let usage: number = $ref(0); -let total: number = $ref(0); -let used: number = $ref(0); -let free: number = $ref(0); +const usage = ref<number>(0); +const total = ref<number>(0); +const used = ref<number>(0); +const free = ref<number>(0); function onStats(stats) { - usage = stats.mem.active / props.meta.mem.total; - total = props.meta.mem.total; - used = stats.mem.active; - free = total - used; + usage.value = stats.mem.active / props.meta.mem.total; + total.value = props.meta.mem.total; + used.value = stats.mem.active; + free.value = total.value - used.value; } onMounted(() => { diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue index 5593128660..e6a8bfc22a 100644 --- a/packages/frontend/src/widgets/server-metric/net.vue +++ b/packages/frontend/src/widgets/server-metric/net.vue @@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onBeforeUnmount } from 'vue'; +import { onMounted, onBeforeUnmount, ref } from 'vue'; import bytes from '@/filters/bytes.js'; const props = defineProps<{ @@ -57,19 +57,19 @@ const props = defineProps<{ 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); +const viewBoxX = ref<number>(50); +const viewBoxY = ref<number>(30); +const stats = ref<any[]>([]); +const inPolylinePoints = ref<string>(''); +const outPolylinePoints = ref<string>(''); +const inPolygonPoints = ref<string>(''); +const outPolygonPoints = ref<string>(''); +const inHeadX = ref<any>(null); +const inHeadY = ref<any>(null); +const outHeadX = ref<any>(null); +const outHeadY = ref<any>(null); +const inRecent = ref<number>(0); +const outRecent = ref<number>(0); onMounted(() => { props.connection.on('stats', onStats); @@ -85,27 +85,27 @@ onBeforeUnmount(() => { }); function onStats(connStats) { - stats.push(connStats); - if (stats.length > 50) stats.shift(); + stats.value.push(connStats); + if (stats.value.length > 50) stats.value.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))); + 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.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(' '); + 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 = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`; - outPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`; + 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 = inPolylinePointsStats.at(-1)![0]; - inHeadY = inPolylinePointsStats.at(-1)![1]; - outHeadX = outPolylinePointsStats.at(-1)![0]; - outHeadY = outPolylinePointsStats.at(-1)![1]; + 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 = connStats.net.rx; - outRecent = connStats.net.tx; + inRecent.value = connStats.net.rx; + outRecent.value = connStats.net.tx; } function onStatsLog(statsLog) { diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue index c8a1496101..fd18a6a4f2 100644 --- a/packages/frontend/src/widgets/server-metric/pie.vue +++ b/packages/frontend/src/widgets/server-metric/pie.vue @@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { } from 'vue'; +import { computed } from 'vue'; const props = defineProps<{ value: number; @@ -36,8 +36,8 @@ const props = defineProps<{ const r = 0.45; -const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`); -const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2))); +const color = computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`); +const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2))); </script> <style lang="scss" module> |