Add start-stop button to instance list

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 => <InstanceStatusTag status={status} />,
+			key: "status",
+			render: instance => <InstanceStatusTag status={instance["status"]} />,
 			sorter: (a, b) => strcmp(a["status"], b["status"]),
 		},
+		{
+			key: "action",
+			render: instance => <StartStopInstanceButton
+				buttonProps={{ size: "small" }}
+				instance={instance}
+			/>,
+			responsive: ["sm"],
+			align: "right",
+			width: 100,
+		},
 	];
 
 	if (props.hideAssignedSlave) {

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") {