shell: TypeScript workflow demo

pkg/lib/cockpit.d.ts

@@ -33,6 +33,7 @@ declare module 'cockpit' {
     export const manifests: { [package in string]?: JsonObject };
 
     export let language: string;
+    export let language_direction: string;
 
     interface Transport {
         csrf_token: string;
@@ -98,6 +99,8 @@ declare module 'cockpit' {
         changed(): void;
     }
 
+    function event_target<T, EM extends EventMap>(obj: T): T & EventSource<EM>;
+
     /* === Channel =============================== */
 
     interface ControlMessage extends JsonObject {
@@ -188,6 +191,9 @@ declare module 'cockpit' {
         href: string;
         go(path: Location | string, options?: { [key: string]: string }): void;
         replace(path: Location | string, options?: { [key: string]: string }): void;
+
+        encode(path: string[], options?: { [key: string]: string }, with_root?: boolean): string;
+        decode(string: string, options?: { [key: string]: string }): string[];
     }
 
     export const location: Location;

pkg/shell/hosts.jsx

@@ -15,7 +15,8 @@ import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip";
 
 import 'polyfills';
 import { CockpitNav, CockpitNavItem } from "./nav.jsx";
-import { build_href, split_connection_string } from "./util.jsx";
+import { encode_location } from "./util.jsx";
+import { split_connection_string } from "./machines/machines";
 import { add_host, edit_host, connect_host } from "./hosts_dialog.jsx";
 
 const _ = cockpit.gettext;
@@ -127,8 +128,7 @@ export class CockpitHosts extends React.Component {
         const connection_string = await connect_host(host_modal_state, state, machine);
         if (connection_string) {
             const parts = split_connection_string(connection_string);
-            const addr = build_href({ host: parts.address });
-            state.jump(addr);
+            state.jump({ host: parts.address });
         }
     }
 
@@ -144,8 +144,7 @@ export class CockpitHosts extends React.Component {
 
         if (current_machine === machine) {
             // Removing machine underneath ourself - jump to localhost
-            const addr = build_href({ host: "localhost" });
-            state.jump(addr);
+            state.jump({ host: "localhost" });
         }
 
         if (state.machines.list.length <= 2)
@@ -186,14 +185,14 @@ export class CockpitHosts extends React.Component {
         const render = (m, term) => <CockpitNavItem
                 term={term}
                 keyword={m.keyword}
-                to={build_href({ host: m.address })}
+                href={encode_location({ host: m.address })}
                 active={m === current_machine}
                 key={m.key}
                 name={m.label}
                 header={(m.user ? m.user : this.state.current_user) + " @"}
                 status={m.state === "failed" ? { type: "error", title: _("Connection error") } : null}
                 className={m.state}
-                jump={() => this.onHostSwitch(m)}
+                onClick={() => this.onHostSwitch(m)}
                 actions={<>
                     <Tooltip content={_("Edit")} position="right">
                         <Button isDisabled={m.address === "localhost"} className="nav-action" hidden={!editing} onClick={e => this.onHostEdit(e, m)} key={m.label + "edit"} variant="secondary"><EditIcon /></Button>

pkg/shell/hosts_dialog.jsx

@@ -19,7 +19,9 @@
 
 import cockpit from "cockpit";
 
-import { get_init_superuser_for_options } from "./machines/machines";
+import {
+    get_init_superuser_for_options, split_connection_string, generate_connection_string
+} from "./machines/machines";
 import * as credentials from "credentials";
 import ssh_show_default_key_sh from "../lib/ssh-show-default-key.sh";
 import ssh_add_key_sh from "../lib/ssh-add-key.sh";
@@ -46,8 +48,6 @@ import { FormHelper } from "cockpit-components-form-helper";
 import { ModalError } from "cockpit-components-inline-notification.jsx";
 import { fmt_to_fragments } from "utils.js";
 
-import { build_href, split_connection_string, generate_connection_string } from "./util.jsx";
-
 const _ = cockpit.gettext;
 
 export const HostModalState = () => {
@@ -88,7 +88,7 @@ function jump_to_new_connection_string(shell_state, connection_string) {
     // manifests.
     shell_state.loader.connect(addr);
     // Navigate to it.
-    shell_state.jump(build_href({ host: addr }));
+    shell_state.jump({ host: addr });
 }
 
 export async function add_host(state, shell_state) {

pkg/shell/machines/machines.d.ts

@@ -0,0 +1,73 @@
+import { EventSource, EventMap } from "cockpit";
+
+export function generate_connection_string(user: string | null, port: string | null, addr: string) : string;
+export function split_connection_string (conn_to: string) : { address: string, user?: string, port?: number };
+
+export interface ManifestKeyword {
+    matches: string[];
+    goto?: string;
+    weight: number;
+    translate: boolean;
+}
+
+export interface ManifestDocs {
+    label: string;
+    url: string;
+}
+
+export interface ManifestEntry {
+    path?: string;
+    label?: string;
+    order?: number;
+    docs?: ManifestDocs[];
+    keywords?: ManifestKeyword[];
+}
+
+export interface ManifestSection {
+    [name: string]: ManifestEntry;
+}
+
+export interface Manifest {
+    [section: string]: ManifestSection;
+}
+
+export interface Manifests {
+    [pkg: string]: Manifest;
+}
+
+export interface Machine {
+    key: string;
+    connection_string: string;
+    address: string;
+    user?: string;
+    port?: number;
+    label: string;
+    state: null | "failed" | "connecting" | "connected";
+    manifests?: Manifests;
+    checksum?: string;
+    visible?: boolean;
+    problem: string | null;
+}
+
+interface MachinesEvents extends EventMap {
+    ready: () => void;
+    added: (machine: Machine) => void;
+    removed: (machine: Machine) => void;
+    updated: (machine: Machine) => void;
+}
+
+export interface Machines extends EventSource<MachinesEvents> {
+    ready: boolean;
+
+    lookup: (conection_string: string) => Machine;
+}
+
+interface Loader {
+    connect: (connection_string: string) => void;
+    expect_restart: (connection_string: string) => void;
+}
+
+export const machines: {
+    instance: () => Machines;
+    loader: (machines: Machines) => Loader;
+};

pkg/shell/machines/machines.js

@@ -2,8 +2,6 @@ import cockpit from "cockpit";
 
 import ssh_add_key_sh from "../../lib/ssh-add-key.sh";
 
-import { split_connection_string, generate_connection_string } from "../util.jsx";
-
 const mod = { };
 
 /*
@@ -70,6 +68,47 @@ export function get_init_superuser_for_options(options) {
     return value;
 }
 
+export function generate_connection_string(user, port, addr) {
+    let address = addr;
+    if (user)
+        address = user + "@" + address;
+
+    if (port)
+        address = address + ":" + port;
+
+    return address;
+}
+
+export function split_connection_string (conn_to) {
+    const parts = { address: "" };
+    let user_spot = -1;
+    let port_spot = -1;
+
+    if (conn_to) {
+        if (conn_to.substring(0, 6) === "ssh://")
+            conn_to = conn_to.substring(6);
+        user_spot = conn_to.lastIndexOf('@');
+        port_spot = conn_to.lastIndexOf(':');
+    }
+
+    if (user_spot > 0) {
+        parts.user = conn_to.substring(0, user_spot);
+        conn_to = conn_to.substring(user_spot + 1);
+        port_spot = conn_to.lastIndexOf(':');
+    }
+
+    if (port_spot > -1) {
+        const port = parseInt(conn_to.substring(port_spot + 1), 10);
+        if (!isNaN(port)) {
+            parts.port = port;
+            conn_to = conn_to.substring(0, port_spot);
+        }
+    }
+
+    parts.address = conn_to;
+    return parts;
+}
+
 function Machines() {
     const self = this;
 

pkg/shell/nav.jsx

@@ -9,7 +9,7 @@ import { SearchInput } from "@patternfly/react-core/dist/esm/components/SearchIn
 import { Tooltip, TooltipPosition } from "@patternfly/react-core/dist/esm/components/Tooltip/index.js";
 import { ContainerNodeIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InfoCircleIcon } from '@patternfly/react-icons';
 
-import { build_href } from "./util.jsx";
+import { encode_location } from "./util.jsx";
 
 const _ = cockpit.gettext;
 
@@ -145,10 +145,14 @@ export class CockpitNav extends React.Component {
                             <div className="nav-group-heading">
                                 <h2 className="pf-v5-c-nav__section-title" id={"section-title-" + g.name}>{g.name}</h2>
                                 { g.action &&
-                                    <a className="pf-v5-c-nav__section-title nav-item" href={g.action.path} onClick={ ev => {
-                                        this.props.jump(g.action.path);
-                                        ev.preventDefault();
-                                    }}>{g.action.label}</a>
+                                    <a className="pf-v5-c-nav__section-title nav-item"
+                                        href={encode_location(g.action.target)}
+                                        onClick={ ev => {
+                                            this.props.jump(g.action.target);
+                                            ev.preventDefault();
+                                        }}>
+                                        {g.action.label}
+                                    </a>
                                 }
                             </div>
                             <ul className="pf-v5-c-nav__list">
@@ -220,8 +224,9 @@ export function CockpitNavItem(props) {
         <li className={classes.join(" ")}>
             <a className={"pf-v5-c-nav__link" + (props.active ? " pf-m-current" : "")}
                 aria-current={props.active && "page"}
-                href={cockpit.location.encode(props.to, {}, true)} onClick={ev => {
-                    props.jump(props.to);
+                href={props.href}
+                onClick={ev => {
+                    props.onClick();
                     ev.preventDefault();
                 }}>
                 { props.header && <span className="nav-item-hint">{header_matches ? <FormattedText keyword={props.header} term={props.term} /> : props.header}</span> }
@@ -240,8 +245,8 @@ export function CockpitNavItem(props) {
 
 CockpitNavItem.propTypes = {
     name: PropTypes.string.isRequired,
-    to: PropTypes.string.isRequired,
-    jump: PropTypes.func,
+    href: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
     status: PropTypes.object,
     active: PropTypes.bool,
     keyword: PropTypes.string,
@@ -328,15 +333,17 @@ export const PageNav = ({ state }) => {
         if (page_status[current_machine.key])
             status = page_status[current_machine.key][item.path];
 
+        const target_location = { host: current_machine.address, path, hash };
+
         return (
             <CockpitNavItem key={item.label}
                             name={item.label}
                             active={active}
                             status={status}
                             keyword={item.keyword.keyword}
                             term={term}
-                            to={build_href({ host: current_machine.address, path, hash })}
-                            jump={state.jump} />
+                            href={encode_location(target_location)}
+                            onClick={() => state.jump(target_location)} />
         );
     }
 
@@ -356,10 +363,10 @@ export const PageNav = ({ state }) => {
     if (current_machine_manifest_items.items.apps && groups.length === 3)
         groups[0].action = {
             label: _("Edit"),
-            path: build_href({
+            target: {
                 host: current_machine.address,
-                path: current_machine_manifest_items.items.apps.path
-            })
+                path: current_machine_manifest_items.items.apps.path,
+            }
         };
 
     return <CockpitNav groups={groups}