Add sorting to web interface tables

Add sort options to the slave, instance, user, role and plugins tables.

packages/web_ui/src/components/InstancesPage.jsx

@@ -11,6 +11,8 @@ import { useInstanceList } from "../model/instance";
 import { notifyErrorHandler } from "../util/notify";
 import { useSlaveList } from "../model/slave";
 
+const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
+
 
 function CreateInstanceButton(props) {
 	let control = useContext(ControlContext);
@@ -64,6 +66,14 @@ export default function InstancesPage() {
 	let [slaveList] = useSlaveList();
 	let [instanceList] = useInstanceList();
 
+	function slaveName(slaveId) {
+		let slave = slaveList.find(s => s.id === slaveId);
+		if (slave) {
+			return slave.name;
+		}
+		return String(slaveId);
+	}
+
 	return <PageLayout nav={[{ name: "Instances" }]}>
 		<PageHeader
 			className="site-page-header"
@@ -76,21 +86,19 @@ export default function InstancesPage() {
 				{
 					title: "Name",
 					dataIndex: "name",
+					defaultSortOrder: "ascend",
+					sorter: (a, b) => strcmp(a["name"], b["name"]),
 				},
 				{
 					title: "Assigned Slave",
 					key: "assigned_slave",
-					render: instance => {
-						let slave = slaveList.find(s => s.id === instance.assigned_slave);
-						if (slave) {
-							return slave.name;
-						}
-						return instance.assigned_slave;
-					},
+					render: instance => slaveName(instance["assigned_slave"]),
+					sorter: (a, b) => strcmp(slaveName(a["assigned_slave"]), slaveName(b["assigned_slave"])),
 				},
 				{
 					title: "Status",
 					dataIndex: "status",
+					sorter: (a, b) => strcmp(a["status"], b["status"]),
 				},
 			]}
 			dataSource={instanceList}

packages/web_ui/src/components/PluginsPage.jsx

@@ -6,6 +6,8 @@ import notify from "../util/notify";
 import ControlContext from "./ControlContext";
 import PageLayout from "./PageLayout";
 
+const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
+
 
 export default function PluginsPage() {
 	let plugins = useContext(ControlContext).plugins;
@@ -47,6 +49,8 @@ export default function PluginsPage() {
 					title: "Name",
 					key: "name",
 					render: plugin => (plugin.info ? plugin.info.title : plugin.meta.name),
+					defaultSortOrder: "ascend",
+					sorter: (a, b) => strcmp(a.info ? a.info.title : a.meta.name, b.info ? b.info.title : b.meta.name),
 				},
 				{
 					title: "Version",
@@ -60,11 +64,13 @@ export default function PluginsPage() {
 						}
 						return plugin.package.version;
 					},
+					sorter: (a, b) => strcmp(a.meta.version, b.meta.version),
 				},
 				{
 					title: "Loaded",
 					dataIndex: ["meta", "loaded"],
 					render: loaded => (loaded ? "Yes" : null),
+					sorter: (a, b) => a.loaded - b.loaded,
 					responsive: ["sm"],
 				},
 			]}

packages/web_ui/src/components/RolesPage.jsx

@@ -9,6 +9,8 @@ import ControlContext from "./ControlContext";
 import { notifyErrorHandler } from "../util/notify";
 import PageLayout from "./PageLayout";
 
+const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
+
 
 function CreateRoleButton() {
 	let control = useContext(ControlContext);
@@ -81,6 +83,7 @@ export default function RolesPage() {
 				{
 					title: "Name",
 					dataIndex: "name",
+					sorter: (a, b) => strcmp(a["name"], b["name"]),
 				},
 				{
 					title: "Description",

packages/web_ui/src/components/SlavesPage.jsx

@@ -9,6 +9,8 @@ import PageLayout from "./PageLayout";
 import { useSlaveList } from "../model/slave";
 import { notifyErrorHandler } from "../util/notify";
 
+const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
+
 
 function GenerateSlaveTokenButton(props) {
 	let control = useContext(ControlContext);
@@ -86,19 +88,25 @@ export default function SlavesPage() {
 				{
 					title: "Name",
 					dataIndex: "name",
+					defaultSortOrder: "ascend",
+					sorter: (a, b) => strcmp(a["name"], b["name"]),
 				},
 				{
 					title: "Agent",
 					dataIndex: "agent",
+					sorter: (a, b) => strcmp(a["agent"], b["agent"]),
+					responsive: ["lg"],
 				},
 				{
 					title: "Version",
 					dataIndex: "version",
+					sorter: (a, b) => strcmp(a["version"], b["version"]),
 				},
 				{
 					title: "Connected",
 					key: "connected",
 					render: slave => slave["connected"] && "Yes",
+					sorter: (a, b) => a["connected"] - b["connected"],
 				},
 			]}
 			dataSource={slaveList}

packages/web_ui/src/components/UsersPage.jsx

@@ -9,6 +9,8 @@ import ControlContext from "./ControlContext";
 import { notifyErrorHandler } from "../util/notify";
 import PageLayout from "./PageLayout";
 
+const strcmp = new Intl.Collator(undefined, { numerice: "true", sensitivity: "base" }).compare;
+
 
 function CreateUserButton() {
 	let control = useContext(ControlContext);
@@ -80,6 +82,8 @@ export default function UsersPage() {
 				{
 					title: "Name",
 					dataIndex: "name",
+					defaultSortOrder: "ascend",
+					sorter: (a, b) => strcmp(a["name"], b["name"]),
 				},
 				{
 					title: "Roles",
@@ -90,18 +94,21 @@ export default function UsersPage() {
 					title: "Admin",
 					key: "admin",
 					render: user => user["is_admin"] && "yes",
+					sorter: (a, b) => a["is_admin"] - b["is_admin"],
 					responsive: ["lg"],
 				},
 				{
 					title: "Whitelisted",
 					key: "whitelisted",
 					render: user => user["is_whitelisted"] && "yes",
+					sorter: (a, b) => a["is_whitelisted"] - b["is_whitelisted"],
 					responsive: ["lg"],
 				},
 				{
 					title: "Banned",
 					key: "banned",
 					render: user => user["is_banned"] && "yes",
+					sorter: (a, b) => a["is_banned"] - b["is_banned"],
 					responsive: ["lg"],
 				},
 			]}