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