diff --git a/packages/web_ui/src/components/OverviewPage.tsx b/packages/web_ui/src/components/OverviewPage.tsx index 4ee2aad1..82b02de7 100644 --- a/packages/web_ui/src/components/OverviewPage.tsx +++ b/packages/web_ui/src/components/OverviewPage.tsx @@ -9,6 +9,7 @@ import { useHosts } from "../model/host"; import { useInstances } from "../model/instance"; import { useUsers, isUserOnline } from "../model/user"; import { useSystems } from "../model/system"; +import { useSaves } from "../model/saves"; import ControlContext from "./ControlContext"; import PageHeader from "./PageHeader"; import PageLayout from "./PageLayout"; @@ -42,11 +43,13 @@ export default function OverviewPage() { const [instances] = useInstances(); const [users] = useUsers(); const [systems] = useSystems(); + const [saves] = useSaves(); const [grafanaUrl, setGrafanaUrl] = useState(null); const canHosts = account.hasPermission("core.host.list"); const canInstances = account.hasPermission("core.instance.list"); const canUsers = account.hasPermission("core.user.list"); + const canSaves = account.hasAllPermission("core.instance.save.list", "core.instance.save.subscribe"); const canLogs = account.hasPermission("core.log.follow"); const canConfig = account.hasPermission("core.controller.get_config"); @@ -72,8 +75,11 @@ export default function OverviewPage() { // Resource totals across the connected host machines (the controller is shown only for uptime). const hostSystems = [...systems.values()].filter(system => system.id !== "controller"); const controllerSystem = systems.get("controller"); + const saveList = [...saves.values()]; + const loadedSaveSize = sum(saveList.filter(save => save.loaded).map(save => save.size)); + const totalSaveSize = sum(saveList.map(save => save.size)); - const colProps = { xs: 24, sm: 12, lg: 8 }; + const colProps = { xs: 24, sm: 12, lg: 6 }; return } + {canSaves && + + } {canHosts && <> s.cpuUsed))} @@ -118,8 +128,9 @@ export default function OverviewPage() { - } /> + ( + + )} /> } diff --git a/packages/web_ui/src/components/system_metrics.tsx b/packages/web_ui/src/components/system_metrics.tsx index 9c051d12..753523c3 100644 --- a/packages/web_ui/src/components/system_metrics.tsx +++ b/packages/web_ui/src/components/system_metrics.tsx @@ -106,9 +106,13 @@ function humanAbsTimeDiff(date1: number, date2 = 0) { return `${seconds}s`; } -export function MetricRelativeDate(props: { timeMs?: number }) { +export function MetricRelativeDate(props: { timeMs?: number, compact?: boolean }) { if (!props.timeMs || props.timeMs === 0) { return "N/A"; } - return `${new Date(props.timeMs).toLocaleString()} (${humanAbsTimeDiff(props.timeMs, Date.now())})`; + const diff = humanAbsTimeDiff(props.timeMs, Date.now()); + const absolute = props.compact + ? new Date(props.timeMs).toLocaleString(undefined, { dateStyle: "short", timeStyle: "short" }) + : new Date(props.timeMs).toLocaleString(); + return `${absolute} (${diff})`; }