Make the instance console log filter discoverable

The filter was a Switch showing only the label of the mode it was already
in, so with the default of chat mode it read as a button labelled "Chat"
with no hint that a Log mode existed or that anything was being hidden.

Swap it for a Segmented control listing both Chat and Log, so the mode that
is not active is always visible, and add a tooltip describing what each one
covers.

Fixes #853

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
bbassieandClaude Opus 4.8 committed 2026-08-12 10:58:21 +00:00
1 parent 42dc83df80
commit 16092ec967
1 file changed
+19 -8
@@ -1,7 +1,8 @@
import React, { useContext, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
Alert, Button, Descriptions, Dropdown, Flex, MenuProps, Modal, Space, Spin, Switch, Typography, message,
Alert, Button, Descriptions, Dropdown, Flex, MenuProps, Modal, Segmented, Space, Spin, Tooltip, Typography,
message,
} from "antd";
import CopyOutlined from "@ant-design/icons/CopyOutlined";
import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
@@ -34,7 +35,7 @@ import { MetricRelativeDate } from "./system_metrics";
type MenuItem = Required<MenuProps>["items"][number];
const { Title } = Typography;
// Remembers the console "Chat/Log" toggle across reloads (defaults to on).
// Remembers the console "Game/Instance" selection across reloads (defaults to game).
const consoleActionsOnlyKey = "instance-console-actions-only";
type InstanceDescriptionProps = {
@@ -249,12 +250,22 @@ export default function InstanceViewPage() {
{
account.hasPermission("core.log.follow")
&& <Flex align="center" gap="middle">
<Switch
checkedChildren="Chat"
unCheckedChildren="Log"
checked={actionsOnly}
onChange={setActionsOnly}
/>
<Tooltip
title={
"Game shows what happened on the server: player chat, joins, leaves, " +
"commands and the replies to them, plus anything that went wrong. Instance " +
"adds the Factorio engine log and Clusterio's own account of running it."
}
>
<Segmented
value={actionsOnly ? "game" : "instance"}
onChange={value => setActionsOnly(value === "game")}
options={[
{ label: "Game", value: "game" },
{ label: "Instance", value: "instance" },
]}
/>
</Tooltip>
<SelectMaxLogLevel
value={maxLevel}
onChange={setMaxLevel}