Use consistent semi-colon placment

Add semicolons to web interface code to be consistent with project
standard.

packages/master/web/basename.jsx

@@ -1,6 +1,6 @@
 // Calculate basedir of application based on current location and
 // the provided web_root from master server.
-const location = new URL(window.web_root, document.location)
+const location = new URL(window.web_root, document.location);
 const basename = location.pathname !== "/" ? location.pathname : "";
 
 export default basename;

packages/master/web/components/data-table.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import { Collapse, Row, Col, Modal, Table, Form, Input, Button, Popover } from "antd";
-import PlusOutlined from "@ant-design/icons/PlusOutlined"
+import PlusOutlined from "@ant-design/icons/PlusOutlined";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
 import notify from "../util/notify";
@@ -21,7 +21,7 @@ const { Panel } = Collapse;
 class DataTable extends Component {
 	constructor(props) {
 		super(props);
-		if (!this.props.DataFunction) throw new Error("DataFunction not defined")
+		if (!this.props.DataFunction) throw new Error("DataFunction not defined");
 		this.state = {
 			pagination: {
 				pageSize: 100,
@@ -32,11 +32,11 @@ class DataTable extends Component {
 			tableData: [],
 			showEditModal: false,
 			record: {},
-		}
+		};
 	}
 
 	componentDidMount() {
-		this.getData()
+		this.getData();
 	}
 
 	async getData(pagination, filters, sorter) {
@@ -51,12 +51,12 @@ class DataTable extends Component {
             }
             sorter = {}
         */
-		pagination = pagination || this.state.pagination
-		filters = filters || this.state.filters
-		sorter = sorter || this.state.sorter
+		pagination = pagination || this.state.pagination;
+		filters = filters || this.state.filters;
+		sorter = sorter || this.state.sorter;
 		// console.log(pagination, filters, sorter)
 
-		let data = await this.props.DataFunction()
+		let data = await this.props.DataFunction();
 		// await fetchApi(this.state.dataUrl, "post", {
 		//     database: this.props.Database,
 		//     table: this.props.Table,
@@ -66,14 +66,14 @@ class DataTable extends Component {
 		//     sorter,
 		//     recordIdField: this.props.RecordIdField || "Id", // Sort by this
 		// })
-		console.log(data)
-		data = data || {}
+		console.log(data);
+		data = data || {};
 		this.setState({
 			tableData: this.props.CustomDataFilterFunction ? this.props.CustomDataFilterFunction(data) : data,
 			pagination: { ...pagination, ...data.pagination },
 			sorter,
 			filters,
-		})
+		});
 	}
 
 	showEditModal(record, index) {
@@ -81,40 +81,40 @@ class DataTable extends Component {
 			this.setState({
 				record: record,
 				showEditModal: true,
-			})
+			});
 	}
 	hideEditModal() {
 		this.setState({
 			showEditModal: false,
 			inserting: false,
 			record: {}
-		})
+		});
 	}
 	async onEditFinish(values) {
-		console.log("Finished editing", values)
+		console.log("Finished editing", values);
 
 		if (this.state.inserting) { // Create new record
-			var status = {}
-			await this.props.AddRecord.insert(values)
+			var status = {};
+			await this.props.AddRecord.insert(values);
 		} else { // Edit existing record, capable of doing sparse updates
-			var status = {}
-			await this.props.Editable.insert(values)
+			var status = {};
+			await this.props.Editable.insert(values);
 		}
 		this.setState({
 			showEditModal: false,
 			inserting: false,
 			record: {},
-		})
+		});
 		// Force refresh of data
-		this.getData()
+		this.getData();
 	}
 	async deleteRecord(record) {
-		delete record.key
+		delete record.key;
 		// Delete "null" values as they seem to cause deletes to fail silently when the value is null and field type is float
 		for (let key in record) {
-			if (record[key] === null) delete record[key]
+			if (record[key] === null) delete record[key];
 		}
-		var status = {}
+		var status = {};
 		//  await fetchApi(`/api/${this.props.Server}/tableData/record`, "delete", {
 		//     database: this.props.Database,
 		//     table: this.props.Table,
@@ -122,13 +122,13 @@ class DataTable extends Component {
 		//     record,
 		// }, undefined, true)
 
-		console.log("Deleted record", status)
+		console.log("Deleted record", status);
 
-		if (status.ok) notify("success", status.msg, "success")
-		if (!status.ok) notify("error", status.msg, "error")
+		if (status.ok) notify("success", status.msg, "success");
+		if (!status.ok) notify("error", status.msg, "error");
 
 		// Force refresh of data
-		this.getData()
+		this.getData();
 	}
 	render() {
 		let tableProps = {
@@ -141,31 +141,31 @@ class DataTable extends Component {
                 */
 				let externalOnRow = {
 					...(this.props.TableProps && this.props.TableProps.onRow && this.props.TableProps.onRow(record, rowIndex)),
-				}
+				};
 				return {
 					onClick: event => {
 						if (event.target.type !== "button") {
-							console.log("onRow", record, rowIndex)
-							if (this.props.Editable) this.showEditModal(record, rowIndex)
-							if (externalOnRow.onClick) externalOnRow.onClick(event)
+							console.log("onRow", record, rowIndex);
+							if (this.props.Editable) this.showEditModal(record, rowIndex);
+							if (externalOnRow.onClick) externalOnRow.onClick(event);
 						}
 					},
 					onDoubleClick: event => {
-						if (externalOnRow.onDoubleClick) externalOnRow.onDoubleClick(event)
+						if (externalOnRow.onDoubleClick) externalOnRow.onDoubleClick(event);
 					},
 					onContextMenu: event => {
-						if (externalOnRow.onContextMenu) externalOnRow.onContextMenu(event)
+						if (externalOnRow.onContextMenu) externalOnRow.onContextMenu(event);
 					},
 					onMouseEnter: event => {
-						if (externalOnRow.onMouseEnter) externalOnRow.onMouseEnter(event)
+						if (externalOnRow.onMouseEnter) externalOnRow.onMouseEnter(event);
 					},
 					onMouseLeave: event => {
-						if (externalOnRow.onMouseLeave) externalOnRow.onMouseLeave(event)
+						if (externalOnRow.onMouseLeave) externalOnRow.onMouseLeave(event);
 					},
-				}
+				};
 			}
-		}
-		let columns = this.props.columns || this.inferColumns(this.state.tableData)
+		};
+		let columns = this.props.columns || this.inferColumns(this.state.tableData);
 		if (this.props.DeleteRecord && !columns.find(x => x.dataIndex === "notInUse")) columns.push({
 			// Add delete button on the right
 			dataIndex: "notInUse",
@@ -176,7 +176,7 @@ class DataTable extends Component {
 						type="primary"
 						danger
 						onClick={() => {
-							this.deleteRecord(record)
+							this.deleteRecord(record);
 						}}
 					>
                         Slett permanent
@@ -188,7 +188,7 @@ class DataTable extends Component {
 					<DeleteOutlined />
 				</Button>
 			</Popover>
-		})
+		});
 
 		return <>
 			<Row>
@@ -207,7 +207,7 @@ class DataTable extends Component {
 							return {
 								...x, // Add a 4th parameter to the stock render function with all of our table data
 								render: x.render ? (...originalParams) => x.render(...originalParams, this.state.tableData) : undefined
-							}
+							};
 						})}
 						dataSource={this.state.tableData}
 						pagination={this.state.pagination.total > 10 ? this.state.pagination : false}
@@ -245,12 +245,12 @@ class DataTable extends Component {
 								(this.state.inserting && this.props.AddRecord && this.props.AddRecord.fields) // Use externally supplied form input fields
                                 || this.props.columns.filter && this.props.columns.filter(x => x.dataIndex !== "notInUse") // Generate input fields from external columns
                                 || this.inferColumns(this.state.tableData)).map(col => { // Generate input fields from autogenerated columns (only works with existing data)
-								console.log(this.state.record)
+								console.log(this.state.record);
 								return <Form.Item key={col.dataIndex} label={col.title} name={col.dataIndex}>
 									{col.renderEdit && col.renderEdit(this.state.record[col.dataIndex], this.state.record, undefined /* Non spec compliant, is supposed to be index of record */, this.state.tableData) || <Input
 										placeholder={this.state.record[col.dataIndex]}
 									/>}
-								</Form.Item>
+								</Form.Item>;
 							})
 						}
 						<Form.Item>
@@ -261,24 +261,24 @@ class DataTable extends Component {
 					</Form>}
 				</Modal>
 			</Row>
-		</>
+		</>;
 	}
 	inferColumns(data) {
 		// Look at the data and find columns and how to display them. Can be overridden by props.Columns if more customization is needed
-		let columns = []
+		let columns = [];
 		data.forEach(row => {
 			Object.keys(row).filter(x => x !== "key").forEach(key => {
-				let existing = columns.find(col => col.key === key)
+				let existing = columns.find(col => col.key === key);
 				if (!existing) {
 					columns.push({
 						key: key,
 						title: key,
 						dataIndex: key,
-					})
+					});
 				}
-			})
-		})
-		return columns
+			});
+		});
+		return columns;
 	}
 }
 

packages/master/web/index.jsx

@@ -1,7 +1,7 @@
-import "./index.css"
+import "./index.css";
 
-import React from "react"
-import ReactDOM from "react-dom"
+import React from "react";
+import ReactDOM from "react-dom";
 
 import App from "./components/App";
 

packages/master/web/layout/index.jsx

@@ -5,7 +5,7 @@ import { Route, Link, withRouter } from "react-router-dom";
 import React, { Component } from "react";
 import { Dashboard } from "../pages/dashboard";
 import { InstancesTable } from "../pages/instances/instancesTable";
-import { SlavesTable } from "../pages/slaves/slavesTable"
+import { SlavesTable } from "../pages/slaves/slavesTable";
 import { UsersTable } from "../pages/users/usersTable";
 import { RolesTable } from "../pages/roles/rolesTable";
 import { PermissionsTable } from "../pages/permissions/permissionsTable";
@@ -35,7 +35,7 @@ class SiteLayout extends Component {
 	}
 
 	onCollapse() {
-		this.setState({ collapsed: !this.state.collapsed })
+		this.setState({ collapsed: !this.state.collapsed });
 	}
 
 	titleCase(text) {
@@ -44,10 +44,10 @@ class SiteLayout extends Component {
 
 	replaceParametersInUrl({ endpoint, params }) {
 		let path = endpoint;
-		console.log("endpoint", params)
+		console.log("endpoint", params);
 		Object.keys(params).forEach(key => {
-			path = path.replace(":" + key, params[key])
-		})
+			path = path.replace(":" + key, params[key]);
+		});
 
 		return path;
 	}

packages/master/web/pages/dashboard.jsx

@@ -1,10 +1,10 @@
-import React, {Component} from "react"
+import React, {Component} from "react";
 
 export class Dashboard extends Component {
 	constructor(props){
-		super(props)
+		super(props);
 	}
 	render(){
-		return <h2>Dashboard</h2>
+		return <h2>Dashboard</h2>;
 	}
 }

packages/master/web/pages/instances/instance.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react"
-import { Card, Button, Popover, Select, Divider, Input, Form, Col, Row, Checkbox, Space } from "antd"
+import React, { Component } from "react";
+import { Card, Button, Popover, Select, Divider, Input, Form, Col, Row, Checkbox, Space } from "antd";
 import {
 	listSlaves,
 	listInstances,
@@ -12,146 +12,146 @@ import {
 	getInstanceConfig,
 	setInstanceConfigField,
 	sendRcon,
-} from "../../util/wslink"
-import DataTable from "../../components/data-table"
-import notify from "../../util/notify"
-import DeleteOutlined from "@ant-design/icons/DeleteOutlined"
-import EditOutlined from "@ant-design/icons/EditOutlined"
-import PlusOutlined from "@ant-design/icons/PlusOutlined"
+} from "../../util/wslink";
+import DataTable from "../../components/data-table";
+import notify from "../../util/notify";
+import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
+import EditOutlined from "@ant-design/icons/EditOutlined";
+import PlusOutlined from "@ant-design/icons/PlusOutlined";
 
-const { Option } = Select
+const { Option } = Select;
 
 export class InstanceView extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 		this.state = {
 			instance: {},
 			slaves: [],
 			logLines: [{ message: "Logviewer. Follows the latest logs if you scroll to the bottom. Does not store logs past the lifetime of this tab" }],
-		}
-		this.messagesEndRef = React.createRef()
+		};
+		this.messagesEndRef = React.createRef();
 	}
 	navigate(url) {
 		this.props.history.push(url);
 	}
 	async componentDidMount() {
-		let id = this.props.match.params.id
+		let id = this.props.match.params.id;
 
-		await this.getData()
+		await this.getData();
 
 		await setInstanceOutputSubscriptions({
 			instance_id: Number(id),
-		})
+		});
 		window.instanceOutputEventHandler = ({ instance_id, output }) => {
 			if (instance_id === Number(id)) {
 				this.setState({
 					logLines: [...this.state.logLines, output],
-				})
+				});
 			}
 			// Automatically scroll to bottom on new line.
 			// this.messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
-		}
+		};
 	}
 	async getData() {
-		let id = this.props.match.params.id
+		let id = this.props.match.params.id;
 
-		let instances = await listInstances()
-		let slaves = await listSlaves()
+		let instances = await listInstances();
+		let slaves = await listSlaves();
 
 		this.setState({
 			instance: instances.find(x => x.id === Number(id)),
 			slaves,
-		})
+		});
 
-		let config = await getInstanceConfig({ instance_id: Number(id) })
-		console.log(config)
+		let config = await getInstanceConfig({ instance_id: Number(id) });
+		console.log(config);
 		this.setState({
 			config
-		})
+		});
 	}
 	async start() {
 		this.setState({
 			starting: true,
-		})
+		});
 		try {
 			await startInstance({
 				instance_id: this.state.instance.id,
 				save: null,
-			})
+			});
 		} catch (e) {
-			notify("Error starting instance", "error", e.message)
+			notify("Error starting instance", "error", e.message);
 			return this.setState({
 				starting: false,
-			})
+			});
 		}
-		notify("Instance started")
+		notify("Instance started");
 		this.setState({
 			starting: false,
-		})
-		this.getData()
+		});
+		this.getData();
 	}
 	async stop() {
 		this.setState({
 			stopping: true,
-		})
+		});
 		try {
 			await stopInstance({
 				instance_id: this.state.instance.id,
-			})
+			});
 		} catch (e) {
-			notify("Error stopping instance", "error", e.message)
+			notify("Error stopping instance", "error", e.message);
 			return this.setState({
 				stopping: false,
-			})
+			});
 		}
-		notify("Instance stopped")
+		notify("Instance stopped");
 		this.setState({
 			stopping: false,
-		})
-		this.getData()
+		});
+		this.getData();
 	}
 	async createSave() {
 		this.setState({
 			creatingSave: true,
-		})
+		});
 		try {
 			await createSave({
 				instance_id: this.state.instance.id,
-			})
+			});
 		} catch (e) {
-			notify("Error creating save", "error", e.message)
+			notify("Error creating save", "error", e.message);
 			return this.setState({
 				creatingSave: false,
-			})
+			});
 		}
-		notify("Save created", "success")
+		notify("Save created", "success");
 		this.setState({
 			creatingSave: false,
-		})
+		});
 	}
 	async onConfigEditFinish(values) {
-		console.log("Completed config edit with", values)
+		console.log("Completed config edit with", values);
 		for (let k in values) {
 			if (values[k] !== this.getInstanceConfigAsKvObject(this.state.config)[k]) {
-				let value = values[k]
-				if (typeof value === "boolean") value = value.toString()
-				console.log("Setting", k, value)
+				let value = values[k];
+				if (typeof value === "boolean") value = value.toString();
+				console.log("Setting", k, value);
 				await setInstanceConfigField({
 					instance_id: this.state.instance.id,
 					field: k,
 					value: value,
-				})
+				});
 			}
 		}
-		notify("Set configuration fields", "success")
+		notify("Set configuration fields", "success");
 		this.setState({
 			editingConfig: false
-		})
-		this.getData()
+		});
+		this.getData();
 	}
 	render() {
-		console.log(this.state)
-		let { instance, slaves } = this.state
+		console.log(this.state);
+		let { instance, slaves } = this.state;
 		let slave = slaves && slaves.find(x => x.id === instance.assigned_slave);
 		return <Card>
 			<h2>{instance.name}</h2>
@@ -184,9 +184,9 @@ export class InstanceView extends Component {
 						width: "200px"
 					}}
 					onChange={async newSlaveId => {
-						let result = await assignInstance({ instance_id: instance.id, slave_id: newSlaveId })
-						notify("Assigned to slave", "success")
-						this.getData()
+						let result = await assignInstance({ instance_id: instance.id, slave_id: newSlaveId });
+						notify("Assigned to slave", "success");
+						this.getData();
 					}}
 					>
 						{this.state.slaves.map(slave => <Option defaultValue={instance.assigned_slave} value={slave.id} key={slave.id}>
@@ -208,8 +208,8 @@ export class InstanceView extends Component {
 						danger
 						onClick={async () => {
 							await deleteInstance({ instance_id: instance.id });
-							notify("Deleted instance " + instance.id, "success")
-							this.navigate("/instances")
+							notify("Deleted instance " + instance.id, "success");
+							this.navigate("/instances");
 						}}
 					>
                         Delete this instance permanently
@@ -245,7 +245,7 @@ export class InstanceView extends Component {
 			{/* rcon input field */}
 			<Form
 				onFinish={async values => {
-					await sendRcon({ instance_id: instance.id, command: values.command })
+					await sendRcon({ instance_id: instance.id, command: values.command });
 				}}
 			>
 				<Form.Item
@@ -256,16 +256,16 @@ export class InstanceView extends Component {
 				</Form.Item>
 			</Form>
 			{this.state.config && this.renderConfig(this.state.config)}
-		</Card>
+		</Card>;
 	}
 	getInstanceConfigAsKvObject(config) {
-		let object = {}
+		let object = {};
 		for (let group of config.serialized_config.groups) {
 			for (let fieldName in group.fields) {
-				object[group.name + "." + fieldName] = group.fields[fieldName]
+				object[group.name + "." + fieldName] = group.fields[fieldName];
 			}
 		}
-		return object
+		return object;
 	}
 	renderConfig(config) {
 		const layout = {
@@ -316,33 +316,33 @@ export class InstanceView extends Component {
 					</>)}
 				</Row>
 			</Form>
-		</Card>
+		</Card>;
 	}
 }
 
 function renderDisplayField(value) {
 	if (typeof value === "object") {
-		return JSON.stringify(value)
+		return JSON.stringify(value);
 	}
 	if (typeof value === "boolean") {
-		return <Checkbox />
+		return <Checkbox />;
 	}
-	return value.toString()
+	return value.toString();
 }
 function renderFormField(value) {
 	if (typeof value === "object") {
-		return <ObjectInput />
+		return <ObjectInput />;
 	}
 	if (typeof value === "boolean") {
-		return <Checkbox />
+		return <Checkbox />;
 	}
-	return <Input />
+	return <Input />;
 }
 
 class ObjectInput extends Component {
 	constructor(props) {
-		super(props)
-		console.log(this.props)
+		super(props);
+		console.log(this.props);
 		/*
             value: {
                 auto_pause: false,
@@ -351,26 +351,26 @@ class ObjectInput extends Component {
             id: "factorio.settings",
             onChange: f()
         */
-		this.state = {}
+		this.state = {};
 	}
 	onChange(e, key) {
 		if (e.target.type === "checkbox") {
 			// if (e.target.checked !== undefined) {
 			// Its a checkbox, set value to true/false
-			let value = { ...this.props.value }
-			value[key] = e.target.checked || false
-			this.props.onChange(value)
+			let value = { ...this.props.value };
+			value[key] = e.target.checked || false;
+			this.props.onChange(value);
 		} else if (e.target.type === "text") {
 			// } else if (e.target.value !== undefined) {
 			// its probably a text input
-			let value = { ...this.props.value }
-			value[key] = e.target.value || ""
-			this.props.onChange(value)
+			let value = { ...this.props.value };
+			value[key] = e.target.value || "";
+			this.props.onChange(value);
 		}
 	}
 	render() {
-		let { value } = this.props
-		let ret = []
+		let { value } = this.props;
+		let ret = [];
 		for (let key in value) {
 			if (typeof value[key] === "boolean") {
 				ret.push(<Checkbox
@@ -380,7 +380,7 @@ class ObjectInput extends Component {
 				>
 					{key}
 				</Checkbox>
-				)
+				);
 			} else if (typeof value[key] === "string") {
 				ret.push(<div
 					key={key}
@@ -388,7 +388,7 @@ class ObjectInput extends Component {
 						value={value[key]}
 						onChange={e => this.onChange(e, key)}
 					/></div>
-				)
+				);
 			}
 		}
 		ret.push(<Popover
@@ -397,11 +397,11 @@ class ObjectInput extends Component {
 				<Input onChange={e => this.setState({ newInput: e.target.value })} />
 				<Button
 					onClick={e => {
-						this.onChange({ target: { value: "", type: "text" } }, this.state.newInput)
+						this.onChange({ target: { value: "", type: "text" } }, this.state.newInput);
 						this.setState({
 							newInput: undefined,
 							addPopoverVisible: false,
-						})
+						});
 					}}
 				><PlusOutlined />Add property</Button>
 			</>}
@@ -414,16 +414,16 @@ class ObjectInput extends Component {
 			>
 				<PlusOutlined />Add property
 			</Button>
-		</Popover>)
-		return <Space direction="vertical">{ret}</Space>
+		</Popover>);
+		return <Space direction="vertical">{ret}</Space>;
 	}
 }
 class ConfigFormItem extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	render() {
-		let { field, group, editingConfig } = this.props
+		let { field, group, editingConfig } = this.props;
 		return <Form.Item
 			label={field}
 			name={group.name + "." + field}
@@ -434,6 +434,6 @@ class ConfigFormItem extends Component {
 				:
 				renderDisplayField(group.fields[field])
 			}
-		</Form.Item>
+		</Form.Item>;
 	}
 }

packages/master/web/pages/instances/instancesTable.jsx

@@ -1,12 +1,12 @@
-import React, { Component } from "react"
-import { Card } from "antd"
-import { listSlaves, listInstances, createInstance } from "../../util/wslink"
-import DataTable from "../../components/data-table"
-const config = require("@clusterio/lib/config")
+import React, { Component } from "react";
+import { Card } from "antd";
+import { listSlaves, listInstances, createInstance } from "../../util/wslink";
+import DataTable from "../../components/data-table";
+const config = require("@clusterio/lib/config");
 
 export class InstancesTable extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	navigate(url) {
 		this.props.history.push(url);
@@ -23,11 +23,11 @@ export class InstancesTable extends Component {
 					insert: async args => {
 						let instanceConfig = new config.InstanceConfig();
 						await instanceConfig.init();
-						console.log("Base config", instanceConfig)
+						console.log("Base config", instanceConfig);
 						instanceConfig.set("instance.name", args.name);
 						let serialized_config = instanceConfig.serialize();
-						let response = await createInstance(serialized_config)
-						console.log("Created instance", response)
+						let response = await createInstance(serialized_config);
+						console.log("Created instance", response);
 					}
 				}}
 				DataFunction={listInstances}
@@ -35,12 +35,12 @@ export class InstancesTable extends Component {
 					onRow: (record, rowIndex) => {
 						return {
 							onClick: event => {
-								this.navigate(`/instances/${record.id}/view`)
+								this.navigate(`/instances/${record.id}/view`);
 							}
-						}
+						};
 					}
 				}}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/permissions/permissionsTable.jsx

@@ -1,11 +1,11 @@
-import React, { Component } from "react"
-import { Card } from "antd"
-import { listSlaves, listInstances, listPermissions } from "../../util/wslink"
-import DataTable from "../../components/data-table"
+import React, { Component } from "react";
+import { Card } from "antd";
+import { listSlaves, listInstances, listPermissions } from "../../util/wslink";
+import DataTable from "../../components/data-table";
 
 export class PermissionsTable extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	navigate(url) {
 		this.props.history.push(url);
@@ -19,12 +19,12 @@ export class PermissionsTable extends Component {
 					onRow: (record, rowIndex) => {
 						return {
 							onClick: event => {
-								this.navigate(`/permissions/${record.id}/view`)
+								this.navigate(`/permissions/${record.id}/view`);
 							}
-						}
+						};
 					}
 				}}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/roles/role.jsx

@@ -1,7 +1,7 @@
-import React, { Component } from "react"
+import React, { Component } from "react";
 
-import { Card, Button, Popover, Select, Transfer } from "antd"
-import DeleteOutlined from "@ant-design/icons/DeleteOutlined"
+import { Card, Button, Popover, Select, Transfer } from "antd";
+import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
 import {
 	listSlaves,
@@ -21,36 +21,36 @@ import {
 	setRoles,
 	listPermissions,
 	updateRole,
-} from "../../util/wslink"
-import DataTable from "../../components/data-table"
-import notify from "../../util/notify"
+} from "../../util/wslink";
+import DataTable from "../../components/data-table";
+import notify from "../../util/notify";
 
-const { Option } = Select
+const { Option } = Select;
 
 export class RoleView extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 		this.state = {
 			role: {}
-		}
-		this.messagesEndRef = React.createRef()
+		};
+		this.messagesEndRef = React.createRef();
 	}
 	navigate(url) {
 		this.props.history.push(url);
 	}
 	async componentDidMount() {
-		await this.getData()
+		await this.getData();
 	}
 	async getData() {
-		let id = this.props.match.params.id
+		let id = this.props.match.params.id;
 
-		let roles = await listRoles()
-		let permissions = await listPermissions()
+		let roles = await listRoles();
+		let permissions = await listPermissions();
 
 		this.setState({
 			role: roles.find(x => x.id === Number(id)),
 			permissions,
-		})
+		});
 	}
 	async handleChange(targetKeys) {
 		this.setState({
@@ -62,12 +62,12 @@ export class RoleView extends Component {
 		let response = await updateRole({
 			...this.state.role,
 			permissions: targetKeys,
-		})
-		console.log("Updated user roles", response)
+		});
+		console.log("Updated user roles", response);
 	}
 	render() {
-		console.log(this.state)
-		let { role, permissions } = this.state
+		console.log(this.state);
+		let { role, permissions } = this.state;
 		return <Card>
 			<Popover
 				content={
@@ -75,9 +75,9 @@ export class RoleView extends Component {
 						type="primary"
 						danger
 						onClick={async () => {
-							await deleteUser({ role: role.name })
-							notify("Deleted role " + role.name, "success")
-							this.navigate("/roles")
+							await deleteUser({ role: role.name });
+							notify("Deleted role " + role.name, "success");
+							this.navigate("/roles");
 						}}
 					>
                         Delete this role permanently
@@ -108,6 +108,6 @@ export class RoleView extends Component {
 				onChange={this.handleChange.bind(this)}
 				render={item => item.name}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/roles/rolesTable.jsx

@@ -1,11 +1,11 @@
-import React, { Component } from "react"
-import { Card } from "antd"
-import { listSlaves, listInstances, listRoles, createRole } from "../../util/wslink"
-import DataTable from "../../components/data-table"
+import React, { Component } from "react";
+import { Card } from "antd";
+import { listSlaves, listInstances, listRoles, createRole } from "../../util/wslink";
+import DataTable from "../../components/data-table";
 
 export class RolesTable extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	navigate(url) {
 		this.props.history.push(url);
@@ -23,8 +23,8 @@ export class RolesTable extends Component {
 						title: "Description"
 					}],
 					insert: async args => {
-						let response = await createRole({name: args.name, description: args.description})
-						console.log("Created role",response)
+						let response = await createRole({name: args.name, description: args.description});
+						console.log("Created role",response);
 					}
 				}}
 				DataFunction={listRoles}
@@ -32,12 +32,12 @@ export class RolesTable extends Component {
 					onRow: (record, rowIndex) => {
 						return {
 							onClick: event => {
-								this.navigate(`/roles/${record.id}/view`)
+								this.navigate(`/roles/${record.id}/view`);
 							}
-						}
+						};
 					}
 				}}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/settings/settings.jsx

@@ -1,5 +1,5 @@
-import React, { Component } from "react"
-import { Card, Button, Input, Form } from "antd"
+import React, { Component } from "react";
+import { Card, Button, Input, Form } from "antd";
 
 const layout = {
 	labelCol: {
@@ -18,16 +18,16 @@ const tailLayout = {
 
 export class Settings extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 		this.state = {
 			role: {}
-		}
+		};
 	}
 	navigate(url) {
 		this.props.history.push(url);
 	}
 	render() {
-		console.log(this.state)
+		console.log(this.state);
 		return <Card>
 			<h2>Web interface settings</h2>
 			<Form
@@ -38,12 +38,12 @@ export class Settings extends Component {
 					master_token: localStorage.getItem("master_token"),
 				}}
 				onFinish={values => {
-					console.log("Saving settings",values)
+					console.log("Saving settings",values);
 					for(let key of Object.keys(values)){
-						localStorage.setItem(key, values[key].replace("https://", "wss://").replace("http://", "ws://"))
+						localStorage.setItem(key, values[key].replace("https://", "wss://").replace("http://", "ws://"));
 					}
 					// Force refresh to apply changes
-					document.location = document.location
+					document.location = document.location;
 				}}
 			>
 				<Form.Item
@@ -76,6 +76,6 @@ export class Settings extends Component {
 					</Button>
 				</Form.Item>
 			</Form>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/slaves/slavesTable.jsx

@@ -1,11 +1,11 @@
-import React, { Component } from "react"
+import React, { Component } from "react";
 import { Card } from "antd";
-import { listSlaves, listInstances } from "../../util/wslink"
-import DataTable from "../../components/data-table"
+import { listSlaves, listInstances } from "../../util/wslink";
+import DataTable from "../../components/data-table";
 
 export class SlavesTable extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	navigate(url) {
 		this.props.history.push(url);
@@ -19,12 +19,12 @@ export class SlavesTable extends Component {
 					onRow: (record, rowIndex) => {
 						return {
 							onClick: event => {
-								this.navigate(`/slaves/${record.id}/view`)
+								this.navigate(`/slaves/${record.id}/view`);
 							}
-						}
+						};
 					}
 				}}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/users/user.jsx

@@ -1,41 +1,41 @@
-import React, { Component } from "react"
+import React, { Component } from "react";
 import { Card, Button, Popover, Select, Transfer } from "antd";
 import {
 	deleteUser,
 	listUsers,
 	listRoles,
 	setRoles,
-} from "../../util/wslink"
-import DataTable from "../../components/data-table"
-import notify from "../../util/notify"
-import DeleteOutlined from "@ant-design/icons/DeleteOutlined"
+} from "../../util/wslink";
+import DataTable from "../../components/data-table";
+import notify from "../../util/notify";
+import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
 
-const { Option } = Select
+const { Option } = Select;
 
 export class UserView extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 		this.state = {
 			user: {}
-		}
+		};
 		this.messagesEndRef = React.createRef();
 	}
 	navigate(url) {
 		this.props.history.push(url);
 	}
 	async componentDidMount() {
-		await this.getData()
+		await this.getData();
 	}
 	async getData() {
-		let name = this.props.match.params.id
+		let name = this.props.match.params.id;
 
-		let users = await listUsers()
-		let roles = await listRoles()
+		let users = await listUsers();
+		let roles = await listRoles();
 
 		this.setState({
 			user: users.find(x => x.name === name),
 			roles,
-		})
+		});
 	}
 	async handleChange(targetKeys) {
 		this.setState({
@@ -47,12 +47,12 @@ export class UserView extends Component {
 		let response = await setRoles({
 			name: this.state.user.name,
 			roles: targetKeys,
-		})
-		console.log("Updated user roles",response)
+		});
+		console.log("Updated user roles",response);
 	};
 	render() {
-		console.log(this.state)
-		let { user, roles } = this.state
+		console.log(this.state);
+		let { user, roles } = this.state;
 		return <Card>
 			<h2>{user.name}</h2>
 			<h3>Assign roles</h3>
@@ -71,9 +71,9 @@ export class UserView extends Component {
 						type="primary"
 						danger
 						onClick={async () => {
-							await deleteUser({ name: user.name })
-							notify("Deleted user " + user.name, "success")
-							this.navigate("/users")
+							await deleteUser({ name: user.name });
+							notify("Deleted user " + user.name, "success");
+							this.navigate("/users");
 						}}
 					>
                         Delete this user from the cluster
@@ -85,6 +85,6 @@ export class UserView extends Component {
 					<DeleteOutlined />
 				</Button>
 			</Popover>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/pages/users/usersTable.jsx

@@ -1,11 +1,11 @@
-import React, { Component } from "react"
-import { Card } from "antd"
-import { listSlaves, listInstances, listUsers, createUser } from "../../util/wslink"
-import DataTable from "../../components/data-table"
+import React, { Component } from "react";
+import { Card } from "antd";
+import { listSlaves, listInstances, listUsers, createUser } from "../../util/wslink";
+import DataTable from "../../components/data-table";
 
 export class UsersTable extends Component {
 	constructor(props) {
-		super(props)
+		super(props);
 	}
 	navigate(url) {
 		this.props.history.push(url);
@@ -20,8 +20,8 @@ export class UsersTable extends Component {
 						title: "Name"
 					}],
 					insert: async args => {
-						let response = await createUser({name: args.name})
-						console.log("Created user",response)
+						let response = await createUser({name: args.name});
+						console.log("Created user",response);
 					}
 				}}
 				DataFunction={listUsers}
@@ -29,12 +29,12 @@ export class UsersTable extends Component {
 					onRow: (record, rowIndex) => {
 						return {
 							onClick: event => {
-								this.navigate(`/users/${record.name}/view`)
+								this.navigate(`/users/${record.name}/view`);
 							}
-						}
+						};
 					}
 				}}
 			/>
-		</Card>
+		</Card>;
 	}
 }

packages/master/web/util/notify.jsx

@@ -11,5 +11,5 @@ export default function notify(message, type = "info", description) {
 		description,
 		placement: "bottomRight",
 	});
-	if (typeof message !== "string") console.error(message)
+	if (typeof message !== "string") console.error(message);
 }

packages/master/web/util/websocket.jsx

@@ -75,7 +75,7 @@ export class Control extends link.Link {
 	async instanceOutputEventHandler(message) {
 		let { instance_id, output } = message.data;
 		console.log(formatOutput(output));
-		window.instanceOutputEventHandler && window.instanceOutputEventHandler({instance_id, output})
+		window.instanceOutputEventHandler && window.instanceOutputEventHandler({instance_id, output});
 	}
 
 	async debugWsMessageEventHandler(message) {

packages/master/web/util/wslink.jsx

@@ -1,9 +1,9 @@
-import { Control, ControlConnector } from "./../util/websocket"
-import * as errors from "@clusterio/lib/errors"
-import * as link from "@clusterio/lib/link"
-import config from "@clusterio/lib/config"
+import { Control, ControlConnector } from "./../util/websocket";
+import * as errors from "@clusterio/lib/errors";
+import * as link from "@clusterio/lib/link";
+import config from "@clusterio/lib/config";
 
-let control, controlConnector
+let control, controlConnector;
 
 // Create WS connection to master. Used by all components through the interface exported here.
 (async () => {
@@ -17,47 +17,47 @@ let control, controlConnector
 	try {
 		await controlConnector.connect();
 	} catch (err) {
-		console.log(err)
+		console.log(err);
 	}
-})()
+})();
 
-let listSlaves = createListFunction("listSlaves")
-let listInstances = createListFunction("listInstances")
-let listUsers = createListFunction("listUsers", "name")
-let listRoles = createListFunction("listRoles")
-let listPermissions = createListFunction("listPermissions", "name")
+let listSlaves = createListFunction("listSlaves");
+let listInstances = createListFunction("listInstances");
+let listUsers = createListFunction("listUsers", "name");
+let listRoles = createListFunction("listRoles");
+let listPermissions = createListFunction("listPermissions", "name");
 
 let startInstance = async function ({ instance_id, save = null }) {
-	return await link.messages.startInstance.send(control, { instance_id, save })
-}
+	return await link.messages.startInstance.send(control, { instance_id, save });
+};
 let stopInstance = async function ({ instance_id }) {
-	return await link.messages.stopInstance.send(control, { instance_id })
-}
+	return await link.messages.stopInstance.send(control, { instance_id });
+};
 let createInstance = async function (serialized_config) {
 	return await link.messages.createInstance.send(control, { serialized_config });
-}
+};
 let deleteInstance = async function ({ instance_id }) {
 	return await link.messages.deleteInstance.send(control, { instance_id });
-}
+};
 let assignInstance = async function ({ instance_id, slave_id }) {
 	return await link.messages.assignInstanceCommand.send(control, {
 		instance_id,
 		slave_id,
 	});
-}
+};
 let createSave = async function ({ instance_id }) {
 	return await link.messages.createSave.send(control, { instance_id });
-}
+};
 let getInstanceConfig = async function ({ instance_id }) {
 	return await link.messages.getInstanceConfig.send(control, { instance_id });
-}
+};
 let setInstanceConfigField = async function ({ instance_id, field, value }) {
 	return await link.messages.setInstanceConfigField.send(control, {
 		instance_id,
 		field,
 		value: typeof value === "object" ? JSON.stringify(value) : value,
 	});
-}
+};
 let setInstanceConfigProp = async function ({ instance_id, field, prop, value }) {
 	return await link.messages.setInstanceConfigProp.send(control, {
 		instance_id,
@@ -65,35 +65,35 @@ let setInstanceConfigProp = async function ({ instance_id, field, prop, value })
 		prop,
 		value, // JSON Object
 	});
-}
+};
 let sendRcon = async function ({ instance_id, command }) {
-	return await link.messages.sendRcon.send(control, { instance_id, command })
-}
+	return await link.messages.sendRcon.send(control, { instance_id, command });
+};
 let setInstanceOutputSubscriptions = async function ({ instance_id }) {
-	return await link.messages.setInstanceOutputSubscriptions.send(control, { instance_ids: [instance_id] })
-}
+	return await link.messages.setInstanceOutputSubscriptions.send(control, { instance_ids: [instance_id] });
+};
 
 let createUser = async function ({ name }) {
-	return await link.messages.createUser.send(control, { name })
-}
+	return await link.messages.createUser.send(control, { name });
+};
 let deleteUser = async function ({ name }) {
-	return await link.messages.deleteUser.send(control, { name })
-}
+	return await link.messages.deleteUser.send(control, { name });
+};
 let setRoles = async function ({ name, roles }) {
 	return await link.messages.updateUserRoles.send(control, {
 		name,
 		roles,
-	})
-}
+	});
+};
 
 let createRole = async function ({ name, description, permissions = [] }) {
-	return await link.messages.createRole.send(control, { name, description, permissions })
-}
+	return await link.messages.createRole.send(control, { name, description, permissions });
+};
 let updateRole = async function ({ id, name, description, permissions }) {
 	return await link.messages.updateRole.send(control, {
 		id, name, description, permissions
-	})
-}
+	});
+};
 
 export {
 	listSlaves,
@@ -117,18 +117,18 @@ export {
 	setInstanceConfigProp,
 	sendRcon,
 	setInstanceOutputSubscriptions,
-}
+};
 
 function createListFunction(name, key) {
 	return async () => {
 		return (await link.messages[name].send(control)).list.map(addKey(key || "id"));
-	}
+	};
 }
 function addKey(key) {
 	return function (el) {
 		return {
 			...el,
 			key: el[key]
-		}
-	}
+		};
+	};
 }