@sukramj/fabric-ui 0.1.2 → 0.2.0

package/src/lib/i18n/en.json

@@ -12,6 +12,213 @@
   "common.save": "Save",
   "common.saving": "Saving…",
   "common.search": "Search…",
+  "controller.acl.add": "Add an entry",
+  "controller.acl.add_entry": "Add",
+  "controller.acl.any_subject": "every subject",
+  "controller.acl.discard": "Discard",
+  "controller.acl.empty": "No entry of this controller's fabric",
+  "controller.acl.invalid_subject": "A subject is not a hex id.",
+  "controller.acl.invalid_target": "The cluster is not a hex id.",
+  "controller.acl.lockout": "Lock this controller out?",
+  "controller.acl.lockout_body": "The list has no Administer entry for this controller; after the write it can no longer change the node.",
+  "controller.acl.mode.case": "CASE",
+  "controller.acl.mode.group": "Group",
+  "controller.acl.mode.pase": "PASE",
+  "controller.acl.mode_label": "Authentication",
+  "controller.acl.privilege.administer": "Administer",
+  "controller.acl.privilege.manage": "Manage",
+  "controller.acl.privilege.operate": "Operate",
+  "controller.acl.privilege.proxy_view": "Proxy view",
+  "controller.acl.privilege.view": "View",
+  "controller.acl.privilege_label": "Privilege",
+  "controller.acl.saved": "The ACL is written.",
+  "controller.acl.subjects": "Subjects (hex, comma-separated)",
+  "controller.acl.target_cluster": "Cluster (hex)",
+  "controller.acl.target_endpoint": "Endpoint",
+  "controller.acl.whole_node": "the whole node",
+  "controller.attributes.attribute": "Attribute id",
+  "controller.attributes.cluster": "Cluster",
+  "controller.attributes.endpoint": "Endpoint",
+  "controller.attributes.hint": "Read one attribute: pick the endpoint and cluster, give the attribute id in hex.",
+  "controller.attributes.invalid_json": "The value is not JSON.",
+  "controller.attributes.invalid_path": "The cluster or attribute id is not hex.",
+  "controller.attributes.read": "Read",
+  "controller.attributes.status": "The node answered status {status}.",
+  "controller.attributes.value": "Value as JSON",
+  "controller.attributes.write": "Write",
+  "controller.attributes.write_status": "The node refused the write: status {status}.",
+  "controller.attributes.written": "Written.",
+  "controller.bindings.add": "Add",
+  "controller.bindings.cluster": "Cluster (hex)",
+  "controller.bindings.empty": "No binding",
+  "controller.bindings.endpoint": "Endpoint",
+  "controller.bindings.group": "Group {group}",
+  "controller.bindings.invalid": "A target is a node id and an endpoint, or g: and a group id.",
+  "controller.bindings.none": "The node has no Binding cluster",
+  "controller.bindings.saved": "The bindings are written.",
+  "controller.bindings.target": "Node id (hex) or g:<group>",
+  "controller.commission.by_code": "Pairing code",
+  "controller.commission.by_code_hint": "Enter the QR payload (MT:…) or the manual pairing code printed on the device.",
+  "controller.commission.code": "Pairing code",
+  "controller.commission.code_placeholder": "MT:… or 11 digits",
+  "controller.commission.col_addresses": "Addresses",
+  "controller.commission.col_device": "Device",
+  "controller.commission.col_discriminator": "Discriminator",
+  "controller.commission.col_vendor": "Vendor",
+  "controller.commission.discovery": "Devices on the network",
+  "controller.commission.done": "{name} is commissioned.",
+  "controller.commission.failed": "Commissioning failed",
+  "controller.commission.network": "Network for the device",
+  "controller.commission.network_none": "No network credential",
+  "controller.commission.network_only": "On the network only (no Bluetooth)",
+  "controller.commission.none_found": "No commissionable device answered",
+  "controller.commission.pair": "Pair",
+  "controller.commission.passcode": "Passcode",
+  "controller.commission.passcode_invalid": "The passcode is 1 to 99999998.",
+  "controller.commission.running": "Commissioning…",
+  "controller.commission.search": "Search",
+  "controller.commission.searching": "Searching…",
+  "controller.commission.start": "Commission",
+  "controller.commission.succeeded": "Commissioned",
+  "controller.connection.connected": "Connected",
+  "controller.connection.disconnected": "Disconnected",
+  "controller.connection.reconnecting": "Reconnecting",
+  "controller.connection.waiting_for_discovery": "Waiting for discovery",
+  "controller.credential.kind_thread": "Thread",
+  "controller.credential.kind_wifi": "Wi-Fi",
+  "controller.endpoints.empty": "The controller knows no endpoint of this node yet",
+  "controller.endpoints.endpoint": "Endpoint {number}",
+  "controller.fabrics.col_fabric_id": "Fabric ID",
+  "controller.fabrics.own": "this controller",
+  "controller.fabrics.remove_confirm": "Remove this administrator's fabric from the node?",
+  "controller.fabrics.removed": "The fabric is removed.",
+  "controller.icd.awake": "Awake",
+  "controller.icd.forget": "Forget without the node",
+  "controller.icd.last_check_in": "Last check-in",
+  "controller.icd.lit_supported": "Supports LIT",
+  "controller.icd.mode.lit": "LIT",
+  "controller.icd.mode.sit": "SIT",
+  "controller.icd.multi_admin": "Register despite other administrators?",
+  "controller.icd.next_check_in": "Next check-in",
+  "controller.icd.register": "Register",
+  "controller.icd.registered": "Registered",
+  "controller.icd.registered_done": "This controller is registered.",
+  "controller.icd.unavailable": "Check-in overdue",
+  "controller.icd.unregister": "Unregister",
+  "controller.icd.unregistered": "Not registered",
+  "controller.icd.unregistered_done": "This controller is unregistered.",
+  "controller.icd.unsupported": "The node is not an intermittently connected device",
+  "controller.node.back": "All nodes",
+  "controller.node.tab.acl": "ACL",
+  "controller.node.tab.attributes": "Attributes",
+  "controller.node.tab.bindings": "Bindings",
+  "controller.node.tab.endpoints": "Endpoints",
+  "controller.node.tab.fabrics": "Fabrics",
+  "controller.node.tab.icd": "ICD",
+  "controller.node.tab.overview": "Overview",
+  "controller.node.tab.updates": "Updates",
+  "controller.node.tab.window": "Window",
+  "controller.node.tabs": "Node sections",
+  "controller.nodes.col_addresses": "Addresses",
+  "controller.nodes.col_connection": "Connection",
+  "controller.nodes.col_name": "Node",
+  "controller.nodes.col_node_id": "Node ID",
+  "controller.nodes.col_vendor": "Vendor",
+  "controller.nodes.commission": "Commission a device",
+  "controller.nodes.disable": "Disable",
+  "controller.nodes.disabled": "Disabled",
+  "controller.nodes.disabled_done": "The node is disabled.",
+  "controller.nodes.empty": "No node commissioned yet",
+  "controller.nodes.enable": "Enable",
+  "controller.nodes.enabled": "The node is enabled.",
+  "controller.nodes.filter_all": "All",
+  "controller.nodes.filter_connection": "Filter by connection",
+  "controller.nodes.filter_icd": "Filter by ICD",
+  "controller.nodes.filter_vendor": "Filter by vendor",
+  "controller.nodes.icd": "ICD",
+  "controller.nodes.icd_no": "No ICD",
+  "controller.nodes.icd_yes": "ICD only",
+  "controller.nodes.interview": "Interview",
+  "controller.nodes.interviewed": "The node was read again.",
+  "controller.nodes.remove_confirm": "Decommission this node?",
+  "controller.nodes.remove_confirm_body": "{name} leaves this controller's fabric; other controllers keep it.",
+  "controller.nodes.removed": "The node is decommissioned.",
+  "controller.nodes.subscribed": "Subscribed",
+  "controller.nodes.window": "Window",
+  "controller.overview.addresses": "Addresses",
+  "controller.overview.commissioned_at": "Commissioned",
+  "controller.overview.connection": "Connection",
+  "controller.overview.fabric_index": "Our fabric index on the node",
+  "controller.overview.flag.battery_powered": "Battery powered",
+  "controller.overview.flag.intermittently_connected": "Intermittently connected",
+  "controller.overview.flag.mains_powered": "Mains powered",
+  "controller.overview.flag.supports_ethernet": "Ethernet",
+  "controller.overview.flag.supports_thread": "Thread",
+  "controller.overview.flag.supports_wifi": "Wi-Fi",
+  "controller.overview.flag.thread_sleepy_end_device": "Sleepy end device",
+  "controller.overview.idle_mode": "Idle mode: {seconds} s",
+  "controller.overview.node": "Node",
+  "controller.overview.node_id": "Node ID",
+  "controller.overview.product": "Product",
+  "controller.overview.properties": "Properties",
+  "controller.overview.saved": "Saved.",
+  "controller.overview.serial": "Serial number",
+  "controller.overview.software": "Software",
+  "controller.overview.spec_version": "Specification version {version}",
+  "controller.overview.subscribe": "Subscribe",
+  "controller.overview.unsubscribe": "Stop the subscription",
+  "controller.overview.vendor": "Vendor",
+  "controller.settings.cap.ble": "Bluetooth LE",
+  "controller.settings.cap.credentials": "Credential store",
+  "controller.settings.cap.ota": "OTA provider",
+  "controller.settings.capabilities": "Capabilities",
+  "controller.settings.col_id": "ID",
+  "controller.settings.col_kind": "Kind",
+  "controller.settings.col_name": "Name",
+  "controller.settings.compressed_fabric_id": "Compressed fabric ID",
+  "controller.settings.credential_add": "Store",
+  "controller.settings.credential_remove": "Remove this credential?",
+  "controller.settings.credential_saved": "The credential is stored.",
+  "controller.settings.credentials": "Network credentials",
+  "controller.settings.credentials_empty": "No credential stored",
+  "controller.settings.dataset": "Operational dataset (hex)",
+  "controller.settings.fabric_id": "Fabric ID",
+  "controller.settings.info": "Controller",
+  "controller.settings.label": "Fabric label",
+  "controller.settings.label_hint": "Up to 32 characters; the nodes get it in the background.",
+  "controller.settings.label_saved": "The label is set.",
+  "controller.settings.no_store": "The host stores no network credentials.",
+  "controller.settings.node_id": "Node ID",
+  "controller.settings.nodes": "Nodes",
+  "controller.settings.passphrase": "Passphrase",
+  "controller.settings.ssid": "SSID",
+  "controller.settings.vendor": "Vendor",
+  "controller.settings.write_only": "A passphrase or dataset is written only; it is never shown again.",
+  "controller.subtitle": "The nodes this controller commissioned",
+  "controller.tab.commission": "Commission",
+  "controller.tab.nodes": "Nodes",
+  "controller.tab.settings": "Settings",
+  "controller.title": "Controller",
+  "controller.updates.check": "Check for updates",
+  "controller.updates.consent": "Update to {version}",
+  "controller.updates.consented": "The update is queued.",
+  "controller.updates.none_available": "No update available.",
+  "controller.updates.queue_empty": "No update queued for this node",
+  "controller.updates.status.in_progress": "In progress",
+  "controller.updates.status.queued": "Queued",
+  "controller.updates.status.stalled": "Stalled",
+  "controller.updates.unavailable": "The controller runs no OTA provider",
+  "controller.updates.version": "Version {version}",
+  "controller.window.close": "Close window",
+  "controller.window.closed": "The window is closed.",
+  "controller.window.discriminator": "Discriminator",
+  "controller.window.hint": "Open a window so another administrator (another ecosystem) can commission this node too.",
+  "controller.window.manual_code": "Manual code",
+  "controller.window.minutes": "{minutes} minutes",
+  "controller.window.open": "Open window",
+  "controller.window.qr_code": "QR payload",
+  "controller.window.seconds": "{seconds} s",
+  "controller.window.timeout": "Open for",
   "node.commissioning.closed": "Commissioning window closed",
   "node.diag.age_hours": "{n}h",
   "node.diag.age_minutes": "{n}min",
@@ -156,5 +363,9 @@
   "node.warnings.summary": "{count} configuration warnings",
   "node.warnings.title": "Configuration warnings",
   "select.placeholder": "Select…",
-  "shell.language": "Language"
+  "shell.families": "Page families",
+  "shell.family.controller": "Controller",
+  "shell.family.node": "Node",
+  "shell.language": "Language",
+  "shell.no_family": "This host serves neither a node nor a controller."
 }

package/src/lib/index.ts

@@ -5,6 +5,7 @@ export * from "./pages";
 export * from "./context";
 export * from "./api";
 export { createNodeStore, errorText, type NodeStore, type Commissioning, type CommissioningPhase } from "./store.svelte";
+export { createControllerStore, type ControllerStore, type CommissionProgress, type CommissionPhase } from "./controller-store.svelte";
 export { catalogs, createTranslator, defaultT, detectLocale, format, catalogKeys, type Catalog, type Translate, type Vars } from "./i18n";
 export * from "./theme";
 export { renderQrSvg } from "./qr";

package/src/lib/pages/controller/Commission.svelte

@@ -0,0 +1,180 @@
+<!-- Commissioning: a QR payload or a manual pairing code, or a device a
+     discovery found and its passcode; the stored credential that puts a
+     Wi-Fi or Thread device on its network; the progress from the stream
+     and the result. The camera is not used (wave U2). The code and the
+     passcode go to the admin route only and are cleared after the call. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { CommissionRequest, ControllerNodeDetail, Discovered } from "../../api/client";
+  import type { DataColumn } from "../../kit/data-table";
+  import Badge from "../../kit/Badge.svelte";
+  import Button from "../../kit/Button.svelte";
+  import Card from "../../kit/Card.svelte";
+  import DataTable from "../../kit/DataTable.svelte";
+  import Input from "../../kit/Input.svelte";
+  import Select from "../../kit/Select.svelte";
+  import Spinner from "../../kit/Spinner.svelte";
+  import { nodeName, vendorLabel } from "./format";
+
+  const { t, toast, client, controller, routes } = useFabricUI();
+
+  let code = $state("");
+  let network = $state("");
+  let networkOnly = $state(false);
+  let running = $state(false);
+  let result = $state<ControllerNodeDetail | null>(null);
+  let failure = $state<string | null>(null);
+
+  let devices = $state<Discovered[]>([]);
+  let searching = $state(false);
+  let searched = $state(false);
+  let passcodes = $state<Record<string, string>>({});
+
+  onMount(() => {
+    controller.resetProgress();
+    if (controller.status?.capabilities.credentials) void controller.loadCredentials();
+  });
+
+  const networkOptions = $derived([
+    { value: "", label: t("controller.commission.network_none") },
+    ...controller.credentials.map((c) => ({ value: `${c.kind}:${c.id}`, label: `${t(`controller.credential.kind_${c.kind}`)} · ${c.name}` })),
+  ]);
+
+  function withNetwork(req: CommissionRequest): CommissionRequest {
+    const [kind, ...rest] = network.split(":");
+    const id = rest.join(":");
+    if (kind === "wifi") req.wifi_id = id;
+    if (kind === "thread") req.thread_id = id;
+    if (networkOnly) req.network_only = true;
+    return req;
+  }
+
+  async function commission(req: CommissionRequest) {
+    running = true;
+    result = null;
+    failure = null;
+    try {
+      result = await client.commission(withNetwork(req));
+      toast.success(t("controller.commission.done", { name: nodeName(result.node) }));
+      void controller.loadNodes();
+    } catch (err) {
+      failure = errorText(err);
+    } finally {
+      running = false;
+    }
+  }
+
+  async function byCode() {
+    const c = code.trim();
+    if (!c) return;
+    await commission({ code: c });
+    code = "";
+  }
+
+  async function search() {
+    searching = true;
+    try {
+      devices = (await client.discover({ timeout: 5 })).devices;
+      searched = true;
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      searching = false;
+    }
+  }
+
+  async function pair(d: Discovered) {
+    const pin = Number((passcodes[d.instance_name] ?? "").trim());
+    if (!Number.isInteger(pin) || pin < 1 || pin > 99999998) {
+      toast.error(t("controller.commission.passcode_invalid"));
+      return;
+    }
+    await commission({ discovered: { instance_name: d.instance_name, long_discriminator: d.long_discriminator }, passcode: pin });
+    passcodes = { ...passcodes, [d.instance_name]: "" };
+    devices = devices.filter((x) => x.instance_name !== d.instance_name);
+  }
+
+  const columns: DataColumn<Discovered>[] = $derived([
+    { key: "device", label: t("controller.commission.col_device"), title: true, get: (d) => d.device_name || d.instance_name },
+    { key: "vendor", label: t("controller.commission.col_vendor"), get: (d) => vendorLabel(d.vendor_name, d.vendor_id) },
+    { key: "discriminator", label: t("controller.commission.col_discriminator"), numeric: true, get: (d) => d.long_discriminator },
+    { key: "addresses", label: t("controller.commission.col_addresses"), get: (d) => d.addresses.join(" ") },
+    { key: "action", label: "", align: "right", cellClass: "reflow-actions" },
+  ]);
+
+  const phase = $derived(controller.progress.phase);
+</script>
+
+<div class="space-y-6">
+  <Card class="p-4">
+    <h3 class="mb-1 font-medium text-[var(--ha-primary-text-color)]">{t("controller.commission.by_code")}</h3>
+    <p class="mb-3 text-sm text-[var(--ha-secondary-text-color)]">{t("controller.commission.by_code_hint")}</p>
+    <form class="flex flex-wrap items-center gap-3" onsubmit={(e) => { e.preventDefault(); void byCode(); }}>
+      <Input class="max-w-sm font-mono" bind:value={code} placeholder={t("controller.commission.code_placeholder")} aria-label={t("controller.commission.code")} autocomplete="off" />
+      <Button type="submit" disabled={running || !code.trim()}>{t("controller.commission.start")}</Button>
+    </form>
+    <div class="mt-3 flex flex-wrap items-center gap-3">
+      <Select class="w-auto" ariaLabel={t("controller.commission.network")} value={network} onValueChange={(v) => (network = v as typeof network)} options={networkOptions} />
+      <label class="inline-flex items-center gap-2 text-sm text-[var(--ha-secondary-text-color)]">
+        <input type="checkbox" bind:checked={networkOnly} />
+        {t("controller.commission.network_only")}
+      </label>
+    </div>
+  </Card>
+
+  {#if running || phase !== "idle" || result || failure}
+    <Card class="p-4" data-testid="commission-progress">
+      {#if running}
+        <span class="inline-flex items-center gap-2 text-sm text-[var(--ha-secondary-text-color)]"><Spinner size={16} />{t("controller.commission.running")}</span>
+      {:else if result}
+        <p class="text-sm text-[var(--ha-primary-text-color)]">
+          <Badge variant="success">{t("controller.commission.succeeded")}</Badge>
+          <a class="ml-2 font-medium text-[var(--ha-primary-color)] hover:underline" href={routes.controllerNode + result.node.node_id_hex}>{nodeName(result.node)}</a>
+        </p>
+      {:else if failure}
+        <p class="text-sm text-[var(--ha-error-color)]"><Badge variant="danger">{t("controller.commission.failed")}</Badge> {failure}</p>
+      {:else if phase === "failed"}
+        <p class="text-sm text-[var(--ha-error-color)]">{t("controller.commission.failed")}</p>
+      {/if}
+    </Card>
+  {/if}
+
+  <Card class="p-4">
+    <div class="mb-3 flex flex-wrap items-center gap-3">
+      <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("controller.commission.discovery")}</h3>
+      <Button variant="outline" size="sm" disabled={searching} onclick={() => void search()}>
+        {searching ? t("controller.commission.searching") : t("controller.commission.search")}
+      </Button>
+    </div>
+    {#if searched}
+      <DataTable rows={devices} {columns} rowKey={(d) => d.instance_name} emptyMessage={t("controller.commission.none_found")}>
+        {#snippet cell(d, col)}
+          {#if col.key === "device"}
+            <span class="text-[var(--ha-primary-text-color)]">{d.device_name || d.instance_name}</span>
+          {:else if col.key === "vendor"}
+            <span class="text-[var(--ha-secondary-text-color)]">{vendorLabel(d.vendor_name, d.vendor_id)}</span>
+          {:else if col.key === "discriminator"}
+            <span class="font-mono text-xs">{d.long_discriminator}</span>
+          {:else if col.key === "addresses"}
+            <span class="font-mono text-xs text-[var(--ha-secondary-text-color)]">{d.addresses.join(", ")}</span>
+          {:else if col.key === "action"}
+            <span class="inline-flex items-center gap-2">
+              <Input
+                class="w-32 font-mono"
+                inputmode="numeric"
+                autocomplete="off"
+                aria-label={t("controller.commission.passcode")}
+                placeholder={t("controller.commission.passcode")}
+                value={passcodes[d.instance_name] ?? ""}
+                oninput={(e) => (passcodes = { ...passcodes, [d.instance_name]: (e.currentTarget as HTMLInputElement).value })}
+              />
+              <Button size="sm" disabled={running} onclick={() => void pair(d)}>{t("controller.commission.pair")}</Button>
+            </span>
+          {/if}
+        {/snippet}
+      </DataTable>
+    {/if}
+  </Card>
+</div>

package/src/lib/pages/controller/Node.svelte

@@ -0,0 +1,91 @@
+<!-- One node: its record and properties, endpoints, a targeted attribute
+     reader, ACL, bindings, a commissioning window for another
+     administrator, ICD, the fabrics on it and its pending updates — one
+     tab each. The page reloads the node when the stream names it. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { ControllerNodeDetail } from "../../api/client";
+  import ErrorState from "../../kit/ErrorState.svelte";
+  import LoadingState from "../../kit/LoadingState.svelte";
+  import Tabs from "../../kit/Tabs.svelte";
+  import { nodeName } from "./format";
+  import Overview from "./node/Overview.svelte";
+  import Endpoints from "./node/Endpoints.svelte";
+  import Attributes from "./node/Attributes.svelte";
+  import Acl from "./node/Acl.svelte";
+  import Bindings from "./node/Bindings.svelte";
+  import Window from "./node/Window.svelte";
+  import Icd from "./node/Icd.svelte";
+  import Fabrics from "./node/Fabrics.svelte";
+  import Updates from "./node/Updates.svelte";
+
+  let { nodeId, tab = "overview" }: { nodeId: string; tab?: string } = $props();
+
+  const { t, client, controller, routes } = useFabricUI();
+
+  const TABS = ["overview", "endpoints", "attributes", "acl", "bindings", "window", "icd", "fabrics", "updates"] as const;
+  type Tab = (typeof TABS)[number];
+  const isTab = (v: string): v is Tab => (TABS as readonly string[]).includes(v);
+
+  // svelte-ignore state_referenced_locally
+  let active = $state<Tab>(isTab(tab) ? tab : "overview");
+  let detail = $state<ControllerNodeDetail | null>(null);
+  let error = $state<string | null>(null);
+
+  async function load() {
+    error = null;
+    try {
+      detail = await client.controllerNode(nodeId);
+    } catch (err) {
+      error = errorText(err);
+    }
+  }
+
+  $effect(() => {
+    void nodeId;
+    untrack(() => void load());
+  });
+
+  // An event about this node reloads it.
+  $effect(() => {
+    void controller.revision;
+    if (untrack(() => controller.changed) === nodeId && untrack(() => detail) !== null) untrack(() => void load());
+  });
+
+  const items = $derived(TABS.map((k) => ({ key: k, label: t(`controller.node.tab.${k}`) })));
+</script>
+
+<div class="space-y-4">
+  <a href={routes.controllerNodes} class="text-sm text-[var(--ha-primary-color)] hover:underline">← {t("controller.node.back")}</a>
+  {#if error}
+    <ErrorState message={error} onRetry={() => void load()} />
+  {:else if !detail}
+    <LoadingState message={t("common.loading")} />
+  {:else}
+    <h2 class="text-lg font-medium text-[var(--ha-primary-text-color)]" data-testid="node-title">{nodeName(detail.node)}</h2>
+    <Tabs {items} {active} onSelect={(k) => (active = isTab(k) ? k : "overview")} ariaLabel={t("controller.node.tabs")} />
+    <div class="mt-2">
+      {#if active === "overview"}
+        <Overview {detail} />
+      {:else if active === "endpoints"}
+        <Endpoints {detail} />
+      {:else if active === "attributes"}
+        <Attributes {nodeId} {detail} />
+      {:else if active === "acl"}
+        <Acl {nodeId} />
+      {:else if active === "bindings"}
+        <Bindings {nodeId} {detail} />
+      {:else if active === "window"}
+        <Window {nodeId} />
+      {:else if active === "icd"}
+        <Icd {nodeId} />
+      {:else if active === "fabrics"}
+        <Fabrics {nodeId} />
+      {:else if active === "updates"}
+        <Updates {nodeId} />
+      {/if}
+    </div>
+  {/if}
+</div>