factorio-clusterio/plugins/inventory_sync/web/index.jsx

import React, { useContext, useEffect, useState } from "react";

import { libPlugin } from "@clusterio/lib";
import { PageLayout, ControlContext } from "@clusterio/web_ui";
import info from "../info";

import "./index.css";

function InventoryPage() {
	let control = useContext(ControlContext);

	let [statsData, updateStatsData] = useState();

	useEffect(() => {
		(async () => {
			// Get statistics
			updateStatsData(await info.messages.databaseStats.send(control, {}));
		})();
	}, []);

	return <PageLayout nav={[{ name: "Inventory sync" }]}>
		<h2>Inventory sync</h2>
		{statsData && <>
			<p>Database size: {Math.round(statsData.database_size / 1000)}kB</p>
			<p>Database entries: {statsData.database_entries}</p>
			<p>Largest entry is {statsData.largest_entry.name} with {(statsData.largest_entry.size / 1000)}kB</p>
		</>}
	</PageLayout>;
}

export class WebPlugin extends libPlugin.BaseWebPlugin {
	async init() {
		this.pages = [
			{
				path: "/inventory",
				sidebarName: "Inventory sync",
				permission: "inventory_sync.inventory.view",
				content: <InventoryPage />,
			},
		];
	}

	onControllerConnectionEvent(event) {
		if (event === "connect") {

		}
	}
}