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

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

import libPlugin from "@clusterio/lib/plugin";
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", content: <InventoryPage /> },
        ];
    }

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

        }
    }
}