mirror of
https://github.com/Drop-OSS/drop.git
synced 2026-01-31 15:37:09 +01:00
Adds new tile on the admin home page with system data. (#301)
* Adds new tile on the admin home page with system data. Also fixes the active users bug in the pie chart * Fixes missing parentheses * Updates user stats cache when signing in * Reads active number of users from session provider * Removes unused variable * Small improvements * Removes acl properties from system data websocket and performs initial push of data * fix: remove acl fetch --------- Co-authored-by: DecDuck <declanahofmeyr@gmail.com>
This commit is contained in:
@@ -105,6 +105,61 @@
|
||||
<PieChart :data="pieChartData" />
|
||||
</TileWithLink>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6 row-span-1 lg:col-span-2 lg:row-span-2">
|
||||
<TileWithLink title="System">
|
||||
<div class="h-full pb-15 content-center">
|
||||
<div class="grid grid-cols-1 text-center gap-4">
|
||||
<h3 class="col-span-1 text-lg font-semibold flex">
|
||||
<div class="flex-1 text-left">
|
||||
{{ $t("home.admin.cpuUsage") }}
|
||||
</div>
|
||||
<div class="flex-1 text-sm grow text-right self-center">
|
||||
{{ $t("home.admin.numberCores", systemData.cpuCores) }}
|
||||
</div>
|
||||
</h3>
|
||||
<div class="col-span-1">
|
||||
<ProgressBar
|
||||
:color="getBarColor(systemData.cpuLoad)"
|
||||
:percentage="systemData.cpuLoad"
|
||||
/>
|
||||
</div>
|
||||
<h3 class="col-span-1 text-lg font-semibold my-2 flex">
|
||||
<div class="flex-none text-left">
|
||||
{{ $t("home.admin.ramUsage") }}
|
||||
</div>
|
||||
<div class="flex-1 text-sm grow text-right self-center">
|
||||
{{
|
||||
$t("home.admin.availableRam", {
|
||||
freeRam: formatBytes(systemData.freeRam),
|
||||
totalRam: formatBytes(systemData.totalRam),
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</h3>
|
||||
<div class="col-span-1">
|
||||
<ProgressBar
|
||||
:color="
|
||||
getBarColor(
|
||||
getPercentage(
|
||||
systemData.totalRam - systemData.freeRam,
|
||||
systemData.totalRam,
|
||||
),
|
||||
)
|
||||
"
|
||||
:percentage="
|
||||
getPercentage(
|
||||
systemData.totalRam - systemData.freeRam,
|
||||
systemData.totalRam,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TileWithLink>
|
||||
</div>
|
||||
|
||||
<div class="col-span-6">
|
||||
<TileWithLink
|
||||
title="Library"
|
||||
@@ -139,6 +194,8 @@ import { formatBytes } from "~/server/internal/utils/files";
|
||||
import GamepadIcon from "~/components/Icons/GamepadIcon.vue";
|
||||
import DropLogo from "~/components/DropLogo.vue";
|
||||
import { ServerStackIcon, UserGroupIcon } from "@heroicons/vue/24/outline";
|
||||
import { getPercentage } from "~/utils/utils";
|
||||
import { getBarColor } from "~/utils/colors";
|
||||
import type { GameSize } from "~/server/internal/gamesize";
|
||||
import type { RankItem } from "~/components/RankingList.vue";
|
||||
|
||||
@@ -152,6 +209,8 @@ useHead({
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const systemData = useSystemData();
|
||||
|
||||
const {
|
||||
version,
|
||||
gameCount,
|
||||
|
||||
Reference in New Issue
Block a user