Add hostname to the breadcrumb

cockpit-project · Jan 31, 2024 · f24b567 · f24b567
1 parent 5db12bf
commit f24b567
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/src/cockpit.d.ts b/src/cockpit.d.ts
@@ -104,6 +104,33 @@ declare module 'cockpit' {
 
     export const location: Location;
 
+    /* === cockpit.dbus ========================== */
+
+    interface DBusProxyEvents extends EventMap {
+        changed(changes: { [property: string]: unknown }): void;
+    }
+
+    interface DBusProxy extends EventSource<DBusProxyEvents> {
+        valid: boolean;
+        [property: string]: unknown;
+    }
+
+    interface DBusOptions {
+        bus?: string;
+        address?: string;
+        superuser?: "require" | "try";
+        track?: boolean;
+    }
+
+    interface DBusClient {
+        readonly unique_name: string;
+        readonly options: DBusOptions;
+        proxy(interface: string, path: string, options?: { watch?: boolean }): DBusProxy;
+        close(): void;
+    }
+
+    function dbus(name: string | null, options?: DBusOptions): DBusClient;
+
     /* === cockpit.file ========================== */
 
     interface FileSyntaxObject<T, B> {

diff --git a/src/navigator-breadcrumbs.tsx b/src/navigator-breadcrumbs.tsx
@@ -18,17 +18,46 @@
  */
 import cockpit from "cockpit";
 import React from "react";
+import { ServerIcon } from "@patternfly/react-icons";
 
 import { Button, Flex, PageBreadcrumb } from "@patternfly/react-core";
 
+function useHostname() {
+    const [hostname, setHostname] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        const client = cockpit.dbus('org.freedesktop.hostname1');
+        const hostname1 = client.proxy('org.freedesktop.hostname1', '/org/freedesktop/hostname1');
+
+        function changed() {
+            if (hostname1.valid && typeof hostname1.Hostname === 'string') {
+                setHostname(hostname1.Hostname);
+            }
+        }
+
+        hostname1.addEventListener("changed", changed);
+        return () => {
+            hostname1.removeEventListener("changed", changed);
+            client.close();
+        };
+    }, []);
+
+    return hostname;
+}
+
 export function NavigatorBreadcrumbs({ path }: { path: string[] }) {
+    const hostname = useHostname();
+
     function navigate(n_parts: number) {
         cockpit.location.go("/", { path: encodeURIComponent(path.slice(0, n_parts).join("/")) });
     }
 
     return (
         <PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
             <Flex spaceItems={{ default: "spaceItemsXs" }}>
+                <React.Fragment key="//hostname">
+                    <ServerIcon /> {hostname}
+                </React.Fragment>
                 {path.map((dir, i) => {
                     return (
                         <React.Fragment key={dir || "/"}>