How to write a cockpit module using React and TypeScript

[federicovitali]

Hi there,
I'd like to use the interface currently included in cockpit distribution (pkg/lib/cockpit.d.ts) to write a simple module that monitors the properties of a systemd service exposing a d-bus interface. I've seen that the starter-kit (https://github.com/cockpit-project/starter-kit) currently uses React, but I'm getting lost, any help will be appreciated!

Federico

[martinpitt]

Can you please be more concrete where you run into trouble? Can you run starter-kit itself? Modify/build it? Run the tests? Fork it? etc.

[federicovitali]

Hi Martin, and thank you so much for your quick answer! Yes, I can build and deploy a simple app that interacts with my service, here it is:

    import React, { useState } from "react";
    import { useInit } from "hooks";
    import { Table, Thead, Tr, Th, Tbody, Td } from "@patternfly/react-table";
    import { Progress } from "@patternfly/react-core";

   import cockpit from "cockpit";

   function UpdateManager() {
    const [currentSoftwareRelease, setCurrentSoftwareRelease] =
        useState("unknown");
    const [state, setState] = useState("unknown");
    const [progress, setProgress] = useState(-1);

    useInit(() => {
        const client = cockpit.dbus("org.freedesktop.UpdateManager");
        const update_manager_proxy = client.proxy(
            "org.freedesktop.UpdateManager",
            "/com/leonardo/UpdateManager"
        );

        const package_manager_proxy = client.proxy(
            "org.freedesktop.UpdateManager.PackageManagerBackend",
            "/com/leonardo/UpdateManager/PackageManagerBackend"
        );

        update_manager_proxy.wait().then(async () => {
            console.log(update_manager_proxy);
            setCurrentSoftwareRelease(
                update_manager_proxy.CurrentSoftwareRelease
            );
            setState(update_manager_proxy.StateStr);

            update_manager_proxy.addEventListener("StateStrChanged", (data) => {
                console.log(data);
                setState(data.detail);
            });

            update_manager_proxy.addEventListener(
                "CurrentSoftwareReleaseChanged",
                (data) => {
                    console.log(data);
                    setCurrentSoftwareRelease(data.detail);
                }
            );
        });

        package_manager_proxy.wait().then(async () => {
            console.log(package_manager_proxy);
            setProgress(package_manager_proxy.Progress);

            package_manager_proxy.addEventListener(
                "ProgressChanged",
                (data) => {
                    console.log(data);
                    setProgress(data.detail);
                }
            );
        });
    });

    return (
        <Table aria-label="Clickable table">
            <Tbody>
                <Tr>
                    <Td>State</Td>
                    <Td>{state}</Td>
                </Tr>
                {state === "Downloading" && (
                    <Tr>
                        <Td>Download progress</Td>
                        <Td>
                            <Progress value={progress} />
                        </Td>
                    </Tr>
                )}
                {state === "Installing" && (
                    <Tr>
                        <Td>Install progress</Td>
                        <Td>
                            <Progress value={progress} />
                        </Td>
                    </Tr>
                )}
            </Tbody>
        </Table>
    );
}

export default UpdateManager;

And it's running quite fine, but I would like to know how can I check if my service is running and wait for the service to become available. I would like also to know why the properties are not updated when the event listener is called. I can receive the data (the parameter of the signal), but I keep reading the init value for the property after the change.

Thank you!
Federico

[martinpitt]

check if my service is running

In your current code, check if the proxy is valid. See the proxy.wait() documentation. In particular, update_manager_proxy.valid. Supposedly it is false for you. One important reason is that you try to connect to org.freedesktop.UpdateManager on the system bus, but with user privileges -- is that actually allowed? You probably need { superuser: "try" } or even "require", depending on that service. Or, if it's on the user bus (not session), { bus: "session" }. See the docs.

Note that your .wait().then() handler function doesn't need to be async -- either uses promises or async.

Admittedly the error reporting with dbus.proxy() isn't very obvious, you mostly only get errors when you try to call a method on it or check the validity.