Add hostname to the breadcrumb

Co-authored-by: Jelle van der Waa <[email protected]>
allisonkarlitskaya · Feb 5, 2024 · 8f25bde · 8f25bde
1 parent 3950d89
commit 8f25bde
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 9 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,28 +18,57 @@
  */
 import cockpit from "cockpit";
 import React from "react";
+import { HddIcon } 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("/")) });
     }
 
+    const fullPath = path.slice(1);
+    fullPath.unshift(hostname || "server");
+
     return (
         <PageBreadcrumb stickyOnBreakpoint={{ default: "top" }}>
             <Flex spaceItems={{ default: "spaceItemsXs" }}>
-                {path.map((dir, i) => {
+                {fullPath.map((dir, i) => {
                     return (
                         <React.Fragment key={dir || "/"}>
-                            {i !== path.length - 1 &&
-                                <Button
-                                  variant="link" onClick={() => { navigate(i + 1) }}
-                                  key={dir} className="breadcrumb-button"
-                                >
-                                    {dir || "/"}
-                                </Button>}
-                            {i === path.length - 1 && <p className="last-breadcrumb-button">{dir || "/"}</p>}
+                            <Button
+                              isDisabled={i === path.length - 1}
+                              icon={i === 0 ? <HddIcon /> : null}
+                              variant="link" onClick={() => { navigate(i + 1) }}
+                              key={dir} className="breadcrumb-button"
+                            >
+                                {dir || "/"}
+                            </Button>
                             {dir !== "" && <p key={i}>/</p>}
                         </React.Fragment>
                     );