diff --git a/packages/web_ui/src/components/InstanceList.jsx b/packages/web_ui/src/components/InstanceList.jsx index 7163608a..19f17b32 100644 --- a/packages/web_ui/src/components/InstanceList.jsx +++ b/packages/web_ui/src/components/InstanceList.jsx @@ -1,10 +1,11 @@ import React from "react"; import { useHistory } from "react-router-dom"; -import { message, Button, Table } from "antd"; +import { message, Button, Space, Table } from "antd"; import CopyOutlined from "@ant-design/icons/CopyOutlined"; import { useSlaveList } from "../model/slave"; import InstanceStatusTag from "./InstanceStatusTag"; +import StartStopInstanceButton from "./StartStopInstanceButton"; const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare; @@ -43,6 +44,7 @@ export default function InstanceList(props) { key: "assigned_slave", render: instance => slaveName(instance["assigned_slave"]), sorter: (a, b) => strcmp(slaveName(a["assigned_slave"]), slaveName(b["assigned_slave"])), + responsive: ["sm"], }, { title: "Public address", @@ -63,13 +65,24 @@ export default function InstanceList(props) { : ""; }, sorter: (a, b) => strcmp(slavePublicAddress(a["assigned_slave"]), slavePublicAddress(b["assigned_slave"])), + responsive: ["lg"], }, { title: "Status", - dataIndex: "status", - render: status => , + key: "status", + render: instance => , sorter: (a, b) => strcmp(a["status"], b["status"]), }, + { + key: "action", + render: instance => , + responsive: ["sm"], + align: "right", + width: 100, + }, ]; if (props.hideAssignedSlave) { diff --git a/packages/web_ui/src/components/StartStopInstanceButton.jsx b/packages/web_ui/src/components/StartStopInstanceButton.jsx index 89a58eac..00def970 100644 --- a/packages/web_ui/src/components/StartStopInstanceButton.jsx +++ b/packages/web_ui/src/components/StartStopInstanceButton.jsx @@ -11,7 +11,8 @@ export default function StartStopInstanceButton(props) { let control = useContext(ControlContext); let [switching, setSwitching] = useState(false); - function onClick() { + function onClick(event) { + event.stopPropagation(); setSwitching(true); let action; if (props.instance["status"] === "stopped") {