Merge pull request #914 from Cooldude2606/feature/view-changelog

Add viewable changelog
2026-11-12 23:04:52 +09:00 · 2026-06-12 16:14:19 +01:00
commit d35e8caa2b
@@ -3,6 +3,16 @@ declare module "*.png" {
 	export default value;
 }

+declare module "*.svg" {
+	const value: string;
+	export default value;
+}
+
+declare module "*.md" {
+	const value: string;
+	export default value;
+}
+
 declare const webRoot: string;
 declare const staticRoot: string;

@@ -37,6 +37,7 @@
 		"rc-field-form": "^1.37.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-markdown": "catalog:",
 		"react-router-dom": "^6.29.0",
 		"stream-browserify": "^3.0.0",
 		"style-loader": "^3.3.3",
@@ -0,0 +1,189 @@
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { Modal, Button, Space, Typography, message, Row, Col, Card } from "antd";
+import { ReloadOutlined, CopyOutlined, InfoCircleOutlined } from "@ant-design/icons";
+
+import { PluginWebApi } from "@clusterio/lib";
+
+import webUiPackage from "../../package.json";
+import DiscordLogo from "../images/discord.svg";
+import GitHubLogo from "../images/github.svg";
+
+import ControlContext from "./ControlContext";
+import { useAccount } from "../model/account";
+import { useHosts } from "../model/host";
+import { useInstances } from "../model/instance";
+import { useUsers } from "../model/user";
+
+const { Text } = Typography;
+
+function formatOS(os?: string) {
+	switch (os) {
+		case "win32": return "Windows";
+		case "darwin": return "macOS";
+		case "linux": return "Linux";
+		default: return os;
+	}
+}
+
+export default function AboutModal({ open, onClose, onOpenChangelog }: any) {
+	const control = useContext(ControlContext);
+	const account = useAccount();
+	const [hosts] = useHosts();
+	const [instances] = useInstances();
+	const [users] = useUsers();
+
+	const [pluginList, setPluginList] = useState<PluginWebApi[]>([]);
+
+	useEffect(() => {
+		(async () => {
+			let response = await fetch(`${webRoot}api/plugins`);
+			if (response.ok) {
+				setPluginList(await response.json());
+			}
+		})();
+	}, [webRoot]);
+
+	const browserInfo = useMemo(() => ({
+		userAgent: navigator.userAgent,
+		platform: navigator.platform,
+	}), []);
+
+	const debugText = useMemo(() => {
+		const permissions = new Set(
+			account.roles.flatMap(role => role.permissions)
+		);
+
+		const date = new Date();
+		const lines: string[] = [
+			"Clusterio Debug Info",
+			`- Timestamp: ${date.toISOString()}`,
+			`- Local Time: ${date.toString()}`,
+			"",
+
+			"Build",
+			`- Version: ${webUiPackage.version}`,
+			`- Build Date: ${process.env.BUILD_DATE}`,
+			`- Commit Hash: ${process.env.COMMIT_HASH}`,
+			`- Environment: ${process.env.BUILD_ENV}`,
+			`- System: ${process.env.BUILD_OS}`,
+			"",
+
+			"Runtime",
+			`- Platform: ${browserInfo.platform}`,
+			`- User Agent: ${browserInfo.userAgent}`,
+			`- Screen: ${window.screen.width}x${window.screen.height}`,
+			`- Viewport: ${window.innerWidth}x${window.innerHeight}`,
+			"",
+
+			"Cluster",
+			`- Url: ${new URL(webRoot, window.location.origin)}`,
+			`- Hosts: ${hosts.size}`,
+			`- Instances: ${instances.size}`,
+			`- Plugins: ${pluginList.length}`,
+			`- Users: ${users.size}`,
+			"",
+
+			"Account",
+			`- Name: ${account.name}`,
+			`- Roles: ${account.roles.map(r => r.name).sort().join(", ") || "None"}`,
+			`- Permissions: ${permissions.size}`,
+			"",
+
+			"Permission List",
+			...[...permissions].sort().map(p => `- ${p}`),
+			"",
+		];
+
+		lines.push("Plugin List");
+		for (let plugin of pluginList) {
+			lines.push(`- ${plugin.name}`);
+			lines.push(`  Version: ${plugin.version ?? "unknown"}`);
+			lines.push(`  Loaded: ${plugin.loaded ? "yes" : "no"}`);
+			lines.push(`  Controller: ${plugin.enabled ? "enabled" : "disabled"}`);
+			lines.push(`  Web: ${control.plugins.get(plugin.name) ? "enabled" : "disabled"}`);
+			if (plugin.npmPackage) {
+				lines.push(`  Package: ${plugin.npmPackage}`);
+			}
+		}
+
+		return lines.join("\n");
+	}, [account, hosts, instances, users, pluginList, browserInfo]);
+
+	async function copyDebug() {
+		await navigator.clipboard.writeText(debugText);
+		message.success("Copied debug info");
+	}
+
+	function forceRefresh() {
+		window.location.reload();
+	}
+
+	return <Modal open={open} onCancel={onClose} footer={null} title="About Clusterio" width={800}>
+
+		<Space direction="vertical" style={{ width: "100%" }} size="large">
+			<Row gutter={[24, 16]}>
+				<Col xs={24} md={12}>
+					<Card title="Build Info">
+						<Space direction="vertical">
+							<Text>Version: {`${webUiPackage.version} (${process.env.COMMIT_HASH})`}</Text>
+							<Text>Date: {new Date(process.env.BUILD_DATE ?? "").toLocaleString()}</Text>
+							<Text>Environment: {process.env.BUILD_ENV}</Text>
+							<Text>System: {formatOS(process.env.BUILD_OS)}</Text>
+						</Space>
+					</Card>
+				</Col>
+
+				<Col xs={24} md={12}>
+					<Card title="Cluster Info">
+						<Space direction="vertical">
+							<Text>Hosts: {hosts.size}</Text>
+							<Text>Instances: {instances.size}</Text>
+							<Text>Plugins: {pluginList.length}</Text>
+							<Text>Users: {users.size}</Text>
+						</Space>
+					</Card>
+				</Col>
+			</Row>
+
+			<Row>
+				<Col span={24}>
+					<Space style={{ width: "100%", justifyContent: "space-between" }} wrap>
+						<Space wrap>
+							<Button icon={<InfoCircleOutlined />} onClick={onOpenChangelog}>
+								Changelog
+							</Button>
+							<Button
+								target="_blank"
+								href="https://github.com/clusterio/clusterio/issues"
+								icon={<span style={{ display: "flex", alignItems: "center" }}>
+									<img src={GitHubLogo} style={{ width: 16 }} />
+								</span>}
+							>
+								GitHub Issues
+							</Button>
+							<Button
+								target="_blank"
+								href="https://discord.gg/mzAsgnm"
+								icon={<span style={{ display: "flex", alignItems: "center" }}>
+									<img src={DiscordLogo} style={{ width: 16}} />
+								</span>}
+							>
+								Support Server
+							</Button>
+						</Space>
+
+						<Space wrap>
+							<Button icon={<ReloadOutlined />} onClick={forceRefresh}>
+								Reload
+							</Button>
+							<Button icon={<CopyOutlined />} onClick={copyDebug} type="primary">
+								Copy Debug
+							</Button>
+						</Space>
+					</Space>
+				</Col>
+			</Row>
+		</Space>
+
+	</Modal>;
+}
@@ -0,0 +1,26 @@
+import React from "react";
+import { Modal } from "antd";
+import ReactMarkdown from "react-markdown";
+
+import changelog from "../../../../CHANGELOG.md";
+
+const cleanedChangelog = changelog
+	.replace(/<!--[\s\S]*?-->/g, "") // remove comments
+	.replace(/^#\s+Changelog\s*\n?/i, ""); // remove top-level title
+
+/**
+ * Displays a modal element which contains the change log
+ */
+export default function ChangeLogModal({ open, onClose }: any) {
+	return <Modal
+		title="Changelog"
+		open={open}
+		onCancel={onClose}
+		footer={null}
+		width={800}
+	>
+		<ReactMarkdown>
+			{cleanedChangelog}
+		</ReactMarkdown>
+	</Modal>;
+}
@@ -2,6 +2,9 @@ import React from "react";
 import { Button, Card, Flex, Image, Typography } from "antd";

 import example from "../images/console-error-edge.png";
+import DiscordLogo from "../images/discord.svg";
+import GitHubLogo from "../images/github.svg";
+
 import PageLayout from "./PageLayout";
 import type { ErrorProps } from "./App";

@@ -38,12 +41,12 @@ export default function ErrorPage(props: ErrorProps & { throw?: boolean }) {
 			<SupportLinkCard
 				name="Github Issues"
 				href="https://github.com/clusterio/clusterio/issues"
-				image="https://github.githubassets.com/favicons/favicon-dark.svg"
+				image={GitHubLogo}
 			/>
 			<SupportLinkCard
 				name="Support Server"
 				href="https://discord.gg/mzAsgnm"
-				image="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/66e3d7f4ef6498ac018f2c55_Symbol.svg"
+				image={DiscordLogo}
 			/>
 		</Flex>
 		<br/>
@@ -1,18 +1,21 @@
 import React, { Fragment, useContext, useEffect, useState } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import { Button, Dropdown, Layout, Menu, MenuProps, Tooltip } from "antd";
-import UserOutlined from "@ant-design/icons/UserOutlined";
-import webUiPackage from "../../package.json";
+import { UserOutlined, DownloadOutlined } from "@ant-design/icons";

-import { useAccount } from "../model/account";
 import ErrorBoundary from "./ErrorBoundary";
 import ErrorPage from "./ErrorPage";
 import ControlContext from "./ControlContext";
+import ChangeLogModal from "./ChangeLogModal";
+import AboutModal from "./AboutModal";
+
 import { pages } from "../pages";
-import { DraggingContext } from "../model/is_dragging";
 import { saveJson } from "../util/save_file";
+import { useAccount } from "../model/account";
+import { DraggingContext } from "../model/is_dragging";
+import webUiPackage from "../../package.json";
+
 import { ControlConfig } from "@clusterio/lib";
-import { DownloadOutlined } from "@ant-design/icons";

 type MenuItem = Required<MenuProps>["items"][number];

@@ -43,6 +46,9 @@ export default function SiteLayout() {
 	let plugins = useContext(ControlContext).plugins;
 	const control = useContext(ControlContext);
 	const [dragging, setDragging] = useState(0);
+	const [aboutOpen, setAboutOpen] = useState(false);
+	const [wasAboutOpen, setWasAboutOpen] = useState(false);
+	const [changeLogOpen, setChangeLogOpen] = useState(false);

 	function SetSidebar(props: { path: string | null }) {
 		useEffect(() => {
@@ -61,6 +67,8 @@ export default function SiteLayout() {
 					"control.controller_url": (new URL(webRoot, document.location.href)).href,
 				});
 				saveJson("config-control.json", config.toJSON());
+			} else if (key === "about") {
+				setAboutOpen(true);
 			} else if (key === "logOut") {
 				account.logOut();
 			}
@@ -73,6 +81,7 @@ export default function SiteLayout() {
 				</Tooltip>,
 				key: "ctlConfig",
 			},
+			{ label: "About", key: "about" },
 			{ type: "divider" },
 			{ label: "Log out", danger: true, key: "logOut" },
 		],
@@ -141,11 +150,42 @@ export default function SiteLayout() {
 			}
 		}}
 	>
+		<AboutModal
+			open={aboutOpen}
+			onClose={() => {
+				setAboutOpen(false);
+				setWasAboutOpen(false);
+			}}
+			onOpenChangelog={() => {
+				setChangeLogOpen(true);
+				setWasAboutOpen(aboutOpen);
+				setAboutOpen(false);
+			}}
+		/>
+		<ChangeLogModal
+			open={changeLogOpen}
+			onClose={() => {
+				setChangeLogOpen(false);
+				setAboutOpen(wasAboutOpen);
+			}}
+		/>
 		<DraggingContext.Provider value={dragging > 0}>
 			<Header className="header">
 				<div className="site-logo" />
 				<span className="site-name">Clusterio</span>
-				<span className="site-version">{webUiPackage.version}</span>
+				<Tooltip
+					title="View changelog"
+					placement="bottom"
+					align={{ offset: [0, -10] }}
+				>
+					<span
+						className="site-version"
+						style={{ cursor: "pointer" }}
+						onClick={() => setChangeLogOpen(true)}
+					>
+						{webUiPackage.version}
+					</span>
+				</Tooltip>
 				<Menu
 					theme="dark"
 					mode="horizontal"
@@ -0,0 +1,3 @@
+<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.575 0C39.9562 1.09866 39.4006 2.2352 38.8954 3.397C34.0967 2.67719 29.2096 2.67719 24.3982 3.397C23.9057 2.2352 23.3374 1.09866 22.7186 0C18.2104 0.770324 13.8157 2.12155 9.64839 4.02841C1.38951 16.2652 -0.845688 28.1863 0.265599 39.9432C5.10222 43.517 10.5197 46.2447 16.2909 47.9874C17.5916 46.2447 18.7407 44.3883 19.7257 42.4562C17.8568 41.7616 16.0509 40.8903 14.3208 39.88C14.7755 39.5517 15.2175 39.2107 15.6468 38.8824C25.7873 43.6559 37.5316 43.6559 47.6847 38.8824C48.1141 39.236 48.5561 39.577 49.0107 39.88C47.2806 40.9029 45.4748 41.7616 43.5931 42.4688C44.5781 44.4009 45.7273 46.2573 47.028 48C52.7991 46.2573 58.2167 43.5422 63.0533 39.9684C64.3666 26.3299 60.8055 14.5099 53.6452 4.04104C49.4905 2.13418 45.0959 0.782952 40.5876 0.0252565L40.575 0ZM21.1401 32.7072C18.0209 32.7072 15.4321 29.8785 15.4321 26.3804C15.4321 22.8824 17.9199 20.041 21.1275 20.041C24.3351 20.041 26.886 22.895 26.8354 26.3804C26.7849 29.8658 24.3224 32.7072 21.1401 32.7072ZM42.1788 32.7072C39.047 32.7072 36.4834 29.8785 36.4834 26.3804C36.4834 22.8824 38.9712 20.041 42.1788 20.041C45.3864 20.041 47.9246 22.895 47.8741 26.3804C47.8236 29.8658 45.3611 32.7072 42.1788 32.7072Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="white"/>
+</svg>
@@ -1,9 +1,20 @@
 "use strict";
+const os = require("os");
+const { execSync } = require("child_process");
+
 const webpack = require("webpack");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const TerserPlugin = require("terser-webpack-plugin");

+function getCommitHash() {
+	try {
+		return execSync("git rev-parse --short HEAD").toString().trim();
+	} catch {
+		return "unknown";
+	}
+}
+
 module.exports = (env = {}, argv = {}) => ({
 	mode: argv.mode ?? "development",
 	devtool: argv.mode === "production" ? "source-map" : "eval-source-map",
@@ -29,6 +40,10 @@ module.exports = (env = {}, argv = {}) => ({

 		new webpack.DefinePlugin({
 			"process.env.APP_ENV": JSON.stringify("browser"),
+			"process.env.COMMIT_HASH": JSON.stringify(getCommitHash()),
+			"process.env.BUILD_DATE": JSON.stringify(new Date().toISOString()),
+			"process.env.BUILD_ENV": JSON.stringify(process.env.NODE_ENV ?? "dev"),
+			"process.env.BUILD_OS": JSON.stringify(os.platform()),
 		}),

 		// Make sure ant-design icons use the ES variant
@@ -114,6 +129,14 @@ module.exports = (env = {}, argv = {}) => ({
 				test: /\.png$/,
 				type: "asset/resource",
 			},
+			{
+				test: /\.svg$/,
+				type: "asset/resource",
+			},
+			{
+				test: /\.md$/,
+				type: "asset/source",
+			},
 		],
 	},
 	resolve: {
@@ -22,6 +22,7 @@ catalog:
  jszip: ^3.10.1
  react: ^18.2.0
  react-dom: ^18.2.0
+  react-markdown: ^10.1.0
  react-router-dom: ^6.29.0
  set-blocking: ^2.0.0
  typescript: ^5.7.3