aperx/factorio-clusterio
1
0 Fork 0
mirror of https://github.com/clusterio/clusterio.git synced 2026-11-15 23:24:52 +09:00
Code Issues Packages Projects Releases Wiki Activity

Rename SystemMetrics to SystemInfo

Browse Source 
There are more pieces of information about a system than just its CPU,
Memory and disk metrics.  To avoid having to build a separate collection
and subscription for metrics and system info, rename the existing system
metrics to system info in anticipation of providing additonal static
system information such as CPU model in it.
This commit is contained in:
Hornwitser committed 2024-01-16 21:27:02 +01:00
1 parent 5f25aad273
commit 4e36fa1b4e
14 files changed
+128 -128
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/web_ui/src/components/ControllerPage.tsx
+9 -9
View File
@@ -8,7 +8,7 @@ import {
MetricDiskUsed, MetricDiskRatio,
} from "./system_metrics";
import { useAccount } from "../model/account";
import { useSystemMetrics } from "../model/system_metrics";
import { useSystems } from "../model/system";
import ControllerConfigTree from "./ControllerConfigTree";
import PageLayout from "./PageLayout";
@@ -17,18 +17,18 @@ const { Title } = Typography;
export default function ControllerPage() {
let account = useAccount();
const [systemMetrics] = useSystemMetrics();
const metrics = systemMetrics.get("controller");
const [systems] = useSystems();
const system = systems.get("controller");
return <PageLayout nav={[{ name: "Controller" }]}>
<h2>Controller</h2>
<Descriptions bordered size="small" column={{ xs: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}>
<Descriptions.Item label="CPU Usage"><MetricCpuRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Cores"><MetricCpuUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Memory Usage"><MetricMemoryRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Memory"><MetricMemoryUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Disk Usage"><MetricDiskRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Disk"><MetricDiskUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="CPU Usage"><MetricCpuRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Cores"><MetricCpuUsed system={system} /></Descriptions.Item>
<Descriptions.Item label="Memory Usage"><MetricMemoryRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Memory"><MetricMemoryUsed system={system} /></Descriptions.Item>
<Descriptions.Item label="Disk Usage"><MetricDiskRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Disk"><MetricDiskUsed system={system} /></Descriptions.Item>
</Descriptions>
{account.hasPermission("core.log.follow") && <>
<Title level={5} style={{ marginTop: 16 }}>Console</Title>
packages/web_ui/src/components/HostViewPage.tsx
+10 -10
View File
@@ -19,7 +19,7 @@ import {
MetricDiskUsed, MetricDiskRatio,
} from "./system_metrics";
import { formatTimestamp } from "../util/time_format";
import { useSystemMetrics } from "../model/system_metrics";
import { useSystems } from "../model/system";
const { Title } = Typography;
@@ -29,8 +29,8 @@ export default function HostViewPage() {
let control = useContext(ControlContext);
let account = useAccount();
let [instances] = useInstances();
const [systemMetrics] = useSystemMetrics();
const metrics = systemMetrics.get(hostId);
const [systems] = useSystems();
const system = systems.get(hostId);
const [host, synced] = useHost(hostId);
const hostInstances = new Map([...instances].filter(([_id, instance]) => instance.assignedHost === hostId));
@@ -78,13 +78,13 @@ export default function HostViewPage() {
{host["connected"] ? "Connected" : "Disconnected"}
</Tag>
</Descriptions.Item>
<Descriptions.Item label="CPU Usage"><MetricCpuRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Cores"><MetricCpuUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Memory Usage"><MetricMemoryRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Memory"><MetricMemoryUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Disk Usage"><MetricDiskRatio metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Disk"><MetricDiskUsed metrics={metrics} /></Descriptions.Item>
<Descriptions.Item label="Version">{host["version"]}</Descriptions.Item>
<Descriptions.Item label="CPU Usage"><MetricCpuRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Cores"><MetricCpuUsed system={system} /></Descriptions.Item>
<Descriptions.Item label="Memory Usage"><MetricMemoryRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Memory"><MetricMemoryUsed system={system} /></Descriptions.Item>
<Descriptions.Item label="Disk Usage"><MetricDiskRatio system={system} /></Descriptions.Item>
<Descriptions.Item label="Disk"><MetricDiskUsed system={system} /></Descriptions.Item>
<Descriptions.Item label="Public Address">{host.publicAddress}</Descriptions.Item>
{
host.tokenValidAfter
? <Descriptions.Item label="Tokens valid after:">
packages/web_ui/src/components/HostsPage.tsx
+14 -14
View File
@@ -15,7 +15,7 @@ import {
MetricDiskUsed, MetricDiskRatio,
} from "./system_metrics";
import { useHosts } from "../model/host";
import { useSystemMetrics } from "../model/system_metrics";
import { useSystems } from "../model/system";
import notify, { notifyErrorHandler } from "../util/notify";
const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
@@ -189,7 +189,7 @@ export default function HostsPage() {
let account = useAccount();
let navigate = useNavigate();
let [hosts] = useHosts();
const [metrics] = useSystemMetrics();
const [systems] = useSystems();
const [showRatios, setShowRatios] = useState(true);
const [showNumbers, setShowNumbers] = useState(false);
@@ -209,46 +209,46 @@ export default function HostsPage() {
},
{
title: "CPU%",
sorter: (a, b) => (metrics.get(a.id)?.cpuRatio ?? 0) - (metrics.get(b.id)?.cpuRatio ?? 0),
render: (_, host) => <MetricCpuRatio metrics={metrics.get(host.id)} />,
sorter: (a, b) => (systems.get(a.id)?.cpuRatio ?? 0) - (systems.get(b.id)?.cpuRatio ?? 0),
render: (_, host) => <MetricCpuRatio system={systems.get(host.id)} />,
hidden: !showRatios,
},
{
title: "Cores",
sorter: (a, b) => (
(metrics.get(a.id)?.cpuUsed ?? 0) - (metrics.get(b.id)?.cpuUsed ?? 0)
(systems.get(a.id)?.cpuUsed ?? 0) - (systems.get(b.id)?.cpuUsed ?? 0)
),
render: (_, host) => <MetricCpuUsed metrics={metrics.get(host.id)} />,
render: (_, host) => <MetricCpuUsed system={systems.get(host.id)} />,
hidden: !showNumbers,
},
{
title: "Mem%",
sorter: (a, b) => (
(metrics.get(a.id)?.memoryRatio ?? 0) - (metrics.get(b.id)?.memoryRatio ?? 0)
(systems.get(a.id)?.memoryRatio ?? 0) - (systems.get(b.id)?.memoryRatio ?? 0)
),
render: (_, host) => <MetricMemoryRatio metrics={metrics.get(host.id)} />,
render: (_, host) => <MetricMemoryRatio system={systems.get(host.id)} />,
hidden: !showRatios,
},
{
title: "Memory",
sorter: (a, b) => (
(metrics.get(a.id)?.memoryUsed ?? 0) - (metrics.get(b.id)?.memoryUsed ?? 0)
(systems.get(a.id)?.memoryUsed ?? 0) - (systems.get(b.id)?.memoryUsed ?? 0)
),
render: (_, host) => <MetricMemoryUsed metrics={metrics.get(host.id)} />,
render: (_, host) => <MetricMemoryUsed system={systems.get(host.id)} />,
hidden: !showNumbers,
},
{
title: "Disk%",
sorter: (a, b) => (metrics.get(a.id)?.diskAvailable ?? 0) - (metrics.get(b.id)?.diskAvailable ?? 0),
render: (_, host) => <MetricDiskRatio metrics={metrics.get(host.id)} />,
sorter: (a, b) => (systems.get(a.id)?.diskAvailable ?? 0) - (systems.get(b.id)?.diskAvailable ?? 0),
render: (_, host) => <MetricDiskRatio system={systems.get(host.id)} />,
hidden: !showRatios,
},
{
title: "Disk",
sorter: (a, b) => (
(metrics.get(a.id)?.diskUsed ?? 0) - (metrics.get(b.id)?.diskUsed ?? 0)
(systems.get(a.id)?.diskUsed ?? 0) - (systems.get(b.id)?.diskUsed ?? 0)
),
render: (_, host) => <MetricDiskUsed metrics={metrics.get(host.id)} />,
render: (_, host) => <MetricDiskUsed system={systems.get(host.id)} />,
hidden: !showNumbers,
},
{
packages/web_ui/src/components/system_metrics.tsx
+21 -21
View File
@@ -3,53 +3,53 @@ import React from "react";
import * as lib from "@clusterio/lib";
import { Progress } from "antd";
export function MetricCpuRatio(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricCpuRatio(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const ratio = props.metrics.cpuRatio;
const ratio = props.system.cpuRatio;
return <Progress status="normal" percent={Math.ceil(ratio * 100)}/>;
}
export function MetricCpuUsed(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricCpuUsed(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const used = props.metrics.cpuUsed.toLocaleString(undefined, { maximumFractionDigits: 1 });
const capacity = props.metrics.cpuCapacity;
const used = props.system.cpuUsed.toLocaleString(undefined, { maximumFractionDigits: 1 });
const capacity = props.system.cpuCapacity;
return `${used} / ${capacity}`;
}
export function MetricMemoryRatio(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricMemoryRatio(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const ratio = props.metrics.memoryRatio;
const ratio = props.system.memoryRatio;
return <Progress status="normal" percent={Math.ceil(ratio * 100)}/>;
}
export function MetricMemoryUsed(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricMemoryUsed(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const used = lib.formatBytes(props.metrics.memoryUsed, "binary");
const capacity = lib.formatBytes(props.metrics.memoryCapacity, "binary");
const used = lib.formatBytes(props.system.memoryUsed, "binary");
const capacity = lib.formatBytes(props.system.memoryCapacity, "binary");
return `${used} / ${capacity}`;
}
export function MetricDiskRatio(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricDiskRatio(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const ratio = props.metrics.diskRatio;
const ratio = props.system.diskRatio;
return <Progress status="normal" percent={Math.ceil(ratio * 100)}/>;
}
export function MetricDiskUsed(props: { metrics?: lib.SystemMetrics }) {
if (!props.metrics) {
export function MetricDiskUsed(props: { system?: lib.SystemInfo }) {
if (!props.system) {
return "N/A";
}
const used = lib.formatBytes(props.metrics.diskUsed);
const capacity = lib.formatBytes(props.metrics.diskCapacity);
const used = lib.formatBytes(props.system.diskUsed);
const capacity = lib.formatBytes(props.system.diskCapacity);
return `${used} / ${capacity}`;
}
packages/web_ui/src/model/system_metrics.ts → packages/web_ui/src/model/system.ts
+3 -3
View File
@@ -1,8 +1,8 @@
import { useCallback, useContext, useSyncExternalStore } from "react";
import ControlContext from "../components/ControlContext";
export function useSystemMetrics() {
export function useSystems() {
const control = useContext(ControlContext);
const subscribe = useCallback((callback: () => void) => control.systemMetrics.subscribe(callback), [control]);
return useSyncExternalStore(subscribe, () => control.systemMetrics.getSnapshot());
const subscribe = useCallback((callback: () => void) => control.systems.subscribe(callback), [control]);
return useSyncExternalStore(subscribe, () => control.systems.getSnapshot());
}
packages/web_ui/src/util/websocket.ts
+1 -1
View File
@@ -59,7 +59,7 @@ export class Control extends lib.Link {
logHandlers: Map<lib.LogFilter, logHandler[]> = new Map();
/** Updates handled by the subscription service */
systemMetrics = new lib.EventSubscriber(lib.SystemMetricsUpdateEvent, this);
systems = new lib.EventSubscriber(lib.SystemInfoUpdateEvent, this);
hosts = new lib.EventSubscriber(lib.HostUpdatesEvent, this);
instances = new lib.EventSubscriber(lib.InstanceDetailsUpdatesEvent, this);
saves = new lib.EventSubscriber(lib.InstanceSaveDetailsUpdatesEvent, this);