@adcops/autocore-react 3.3.73 → 3.3.77

package/src/components/ams/MissingAssetsBanner.tsx

@@ -0,0 +1,124 @@
+/*
+ * <MissingAssetsBanner> — warning panel for unfilled asset roles.
+ *
+ * Lists every `by_location` asset_ref declared in project.json that
+ * has no active asset registered at its location. Each row gets a
+ * "Register" button that fires a custom DOM event the
+ * <AssetRegistryTable> picks up to open its Add dialog pre-populated
+ * with the asset_type + location.
+ *
+ * Zero-prop. Hides itself when zero missing. Drop above
+ * <AssetRegistryTable> in the AIS tab.
+ */
+
+import React, { useMemo } from 'react';
+import { Button } from 'primereact/button';
+import { useAms, type AmsRole } from './AmsProvider';
+
+/** Custom event the banner emits; <AssetRegistryTable> listens for it
+ *  and opens its Add dialog pre-populated. Decouples the two so the
+ *  banner can sit anywhere relative to the table in the layout. */
+export const PREFILL_ADD_EVENT = 'ams:prefill-add';
+export interface PrefillAddDetail {
+    assetType: string;
+    location:  string;
+}
+
+export const MissingAssetsBanner: React.FC = () => {
+    const { roles, assets, rolesLoaded } = useAms();
+
+    /** Flatten the role registry into (asset_type, AmsRole) tuples.
+     *  Skip roles that have at least one active asset registered —
+     *  those are filled and don't need attention. Also skip roles
+     *  marked `by_id_field`-only (those have no fixed slot — they're
+     *  picked per-test by the operator). */
+    const missing: Array<{ assetType: string; role: AmsRole }> = useMemo(() => {
+        const result: Array<{ assetType: string; role: AmsRole }> = [];
+        for (const [assetType, list] of Object.entries(roles)) {
+            for (const role of list) {
+                // Is there an active asset of this type at this location?
+                const filled = assets.some(a =>
+                    a.asset_type === assetType
+                    && a.location === role.location
+                    && a.status === 'active'
+                );
+                if (!filled) {
+                    result.push({ assetType, role });
+                }
+            }
+        }
+        return result;
+    }, [roles, assets]);
+
+    if (!rolesLoaded) return null;
+    if (missing.length === 0) return null;
+
+    const fireRegister = (assetType: string, location: string) => {
+        const detail: PrefillAddDetail = { assetType, location };
+        window.dispatchEvent(new CustomEvent(PREFILL_ADD_EVENT, { detail }));
+    };
+
+    const oneMany = (n: number, sing: string, plur: string) =>
+        n === 1 ? sing : plur;
+
+    return (
+        <div
+            role="alert"
+            style={{
+                borderLeft: '4px solid #f59e0b',
+                background: 'rgba(245, 158, 11, 0.08)',
+                padding: '0.75rem 1rem',
+                marginBottom: '1rem',
+                borderRadius: '4px',
+            }}
+        >
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                <i className="pi pi-exclamation-triangle" style={{ color: '#f59e0b' }} />
+                <strong>
+                    {missing.length} {oneMany(missing.length, 'role has', 'roles have')} no active asset registered.
+                </strong>
+                <span style={{ color: 'var(--text-secondary-color)', fontSize: '0.875rem' }}>
+                    Modules and tests depending on {oneMany(missing.length, 'it', 'them')} will refuse to start.
+                </span>
+            </div>
+            <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+                {missing.map(({ assetType, role }) => {
+                    const label = role.label ?? role.location;
+                    const ref_summary = [
+                        role.used_by.length > 0
+                            ? `methods: ${role.used_by.join(', ')}`
+                            : null,
+                        role.used_by_modules.length > 0
+                            ? `modules: ${role.used_by_modules.join(', ')}`
+                            : null,
+                    ].filter(Boolean).join(' • ');
+                    return (
+                        <li key={`${assetType}/${role.location}`}
+                            style={{ marginBottom: '0.25rem',
+                                     display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                            <span>
+                                <strong>{label}</strong>
+                                <span style={{ color: 'var(--text-secondary-color)' }}>
+                                    {' '}({assetType} at <code>{role.location}</code>)
+                                </span>
+                                {ref_summary && (
+                                    <span style={{ color: 'var(--text-secondary-color)',
+                                                   fontSize: '0.85em', marginLeft: '0.5rem' }}>
+                                        — {ref_summary}
+                                    </span>
+                                )}
+                            </span>
+                            <Button
+                                label="Register"
+                                icon="pi pi-plus"
+                                size="small"
+                                outlined
+                                onClick={() => fireRegister(assetType, role.location)}
+                            />
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};

package/src/components/ams/PlaceholderHealthPanel.tsx

@@ -0,0 +1,188 @@
+/*
+ * <PlaceholderHealthPanel> — pre-flight check for AMS placeholder
+ * resolution. Calls `ams.diagnose_placeholders` and lists every
+ * `${ams.by_location.*}` reference in every enabled module's config
+ * along with its resolution status. Green check = will resolve at
+ * module-spawn time. Red ✗ = will block the spawn, with the typed
+ * reason ("no active asset registered at location `tsdr_fx`") next to
+ * the offending config path.
+ *
+ * Drop into the AIS tab. Zero-prop: reads from <AmsProvider> context
+ * and the EventEmitter for IPC.
+ */
+
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAms } from './AmsProvider';
+
+interface PlaceholderRow {
+    module: string;
+    path: string;
+    placeholder: string;
+    location: string;
+    field_path: string[];
+    status: 'ok' | 'unresolved';
+    /** Present on `status: ok` rows. */
+    asset_id?: string;
+    asset_type?: string;
+    /** Present on `status: ok` rows — the rendered value the module
+     *  will receive (number / string / bool depending on the field). */
+    resolved_value?: any;
+    /** Present on `status: unresolved` rows — human-readable cause. */
+    reason?: string;
+}
+
+interface Summary {
+    total: number;
+    ok: number;
+    unresolved: number;
+}
+
+export const PlaceholderHealthPanel: React.FC = () => {
+    const { invoke } = useContext(EventEmitterContext);
+    // The panel watches AMS state mutations so refresh is automatic on
+    // create/update — the operator shouldn't have to click Refresh
+    // after registering the missing asset.
+    const { assets, refreshAssets } = useAms();
+    const [rows, setRows]       = useState<PlaceholderRow[] | null>(null);
+    const [summary, setSummary] = useState<Summary | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError]     = useState<string | null>(null);
+
+    const refresh = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const resp: any = await invoke(
+                'ams.diagnose_placeholders' as any, MessageType.Request, {} as any,
+            );
+            if (resp?.success) {
+                setRows((resp.data?.placeholders ?? []) as PlaceholderRow[]);
+                setSummary(resp.data?.summary ?? null);
+            } else {
+                setError(resp?.error_message ?? 'diagnose_placeholders failed');
+            }
+        } catch (e: any) {
+            setError(String(e?.message ?? e));
+        } finally {
+            setLoading(false);
+        }
+    }, [invoke]);
+
+    // Initial load and re-load whenever the asset registry changes.
+    // `assets` is updated by AmsProvider in response to ams.* broadcasts,
+    // so registering a missing load_cell flips its row from red to
+    // green without manual interaction.
+    useEffect(() => { void refresh(); }, [refresh, assets]);
+
+    const renderStatus = (row: PlaceholderRow) => {
+        if (row.status === 'ok') {
+            return (
+                <span style={{ color: '#34d399', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+                    <i className="pi pi-check-circle" />
+                </span>
+            );
+        }
+        return (
+            <span style={{ color: '#f59e0b', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}>
+                <i className="pi pi-exclamation-triangle" />
+            </span>
+        );
+    };
+
+    const renderValueOrReason = (row: PlaceholderRow) => {
+        if (row.status === 'unresolved') {
+            return (
+                <span style={{ color: '#f59e0b' }}>{row.reason ?? 'unresolved'}</span>
+            );
+        }
+        // Render the resolved value compactly. Numbers render bare,
+        // strings get quotes so the operator can tell "5000" (number)
+        // from "5000" (string) — relevant for EtherCAT SDO hex values
+        // which are intentionally strings.
+        const v = row.resolved_value;
+        let body: React.ReactNode;
+        if (typeof v === 'string')      body = <code>"{v}"</code>;
+        else if (typeof v === 'number') body = <code>{v}</code>;
+        else if (v === null || v === undefined) body = <em style={{ color: '#9ca3af' }}>null</em>;
+        else                            body = <code>{JSON.stringify(v)}</code>;
+        return body;
+    };
+
+    const renderAsset = (row: PlaceholderRow) => {
+        if (row.status !== 'ok' || !row.asset_id) {
+            return <span style={{ color: '#9ca3af' }}>—</span>;
+        }
+        return <code style={{ fontSize: '0.85em' }}>{row.asset_id}</code>;
+    };
+
+    const summaryLine = summary && (
+        <span>
+            {summary.total === 0 ? (
+                <span style={{ color: '#9ca3af' }}>
+                    No <code>{'${ams.*}'}</code> placeholders in any enabled module's config.
+                </span>
+            ) : summary.unresolved === 0 ? (
+                <span style={{ color: '#34d399' }}>
+                    ✓ All {summary.total} placeholder{summary.total === 1 ? '' : 's'} resolved.
+                    Modules will start cleanly.
+                </span>
+            ) : (
+                <span style={{ color: '#f59e0b' }}>
+                    {summary.unresolved} of {summary.total} placeholder
+                    {summary.total === 1 ? '' : 's'} can't be resolved.
+                    Register the missing asset{summary.unresolved === 1 ? '' : 's'} before
+                    starting the affected module{summary.unresolved === 1 ? '' : 's'}.
+                </span>
+            )}
+        </span>
+    );
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <h4 style={{ margin: 0 }}>Module Placeholder Health</h4>
+                <Button
+                    icon="pi pi-refresh"
+                    label="Refresh"
+                    onClick={() => { void refreshAssets(); void refresh(); }}
+                    loading={loading}
+                    severity="secondary"
+                    outlined
+                />
+            </div>
+
+            {error && (
+                <div style={{ color: '#ef4444', fontSize: '0.875rem' }}>
+                    Couldn't fetch placeholder diagnostic: {error}
+                </div>
+            )}
+
+            <div style={{ fontSize: '0.875rem' }}>{summaryLine}</div>
+
+            {rows && rows.length > 0 && (
+                <DataTable
+                    value={rows}
+                    size="small"
+                    stripedRows
+                    sortField="status"
+                    sortOrder={-1}
+                    emptyMessage="No placeholders to report."
+                >
+                    <Column header=""        body={renderStatus} style={{ width: '2rem' }} />
+                    <Column field="module"   header="Module"     style={{ width: '8rem' }} />
+                    <Column field="location" header="Role"       style={{ width: '10rem' }} />
+                    <Column header="Value / Reason" body={renderValueOrReason} />
+                    <Column header="Asset"   body={renderAsset}  style={{ width: '14rem' }} />
+                    <Column field="path"     header="Config path"
+                        body={(r: PlaceholderRow) => <code style={{ fontSize: '0.8em' }}>{r.path}</code>}
+                    />
+                </DataTable>
+            )}
+        </div>
+    );
+};

package/src/components/ams/index.ts

@@ -11,3 +11,5 @@ export { AssetRegistryTable } from './AssetRegistryTable';
 export { AssetDetailView } from './AssetDetailView';
 export { CalibrationEntryDialog } from './CalibrationEntryDialog';
 export { SubLocationPicker } from './SubLocationPicker';
+export { PlaceholderHealthPanel } from './PlaceholderHealthPanel';
+export { MissingAssetsBanner } from './MissingAssetsBanner';

package/src/components/index.ts

@@ -48,6 +48,9 @@ export type { TestDataViewProps, ChartAxis, ChartSeries, ChartView, RawDataShape
 export { TestRawDataView }     from './tis/TestRawDataView';
 export type { TestRawDataViewProps } from './tis/TestRawDataView';
 
+export { ProjectManager }      from './tis/ProjectManager';
+export type { ProjectManagerProps } from './tis/ProjectManager';
+
 // -----------------------------------------------------------------------
 // Asset Management System — see autocore-server/doc/ams_product_plan.md
 // Drop <AmsProvider> at the top of your HMI; the rest are zero-prop.
@@ -74,3 +77,26 @@ export { AssetDetailView }       from './ams/AssetDetailView';
 export { CalibrationEntryDialog } from './ams/CalibrationEntryDialog';
 export type { CalibrationEntryDialogProps } from './ams/CalibrationEntryDialog';
 export { SubLocationPicker }     from './ams/SubLocationPicker';
+
+// -----------------------------------------------------------------------
+// Network management — wraps the autocore-server `nw.*` IPC servelet
+// (nmcli/NetworkManager backend). Drop <NetworkProvider> at the top of
+// your HMI, render <StagedChangeBanner> in a high-z slot so the
+// revert countdown is visible on every tab, and mount <NetworkPanel>
+// on the Network tab.
+// -----------------------------------------------------------------------
+export { NetworkProvider, useNetwork } from './network/NetworkProvider';
+export type {
+    NetworkProviderProps,
+    NetworkContextValue,
+    NetworkStatus,
+    NetworkInterface,
+    NetworkConnection,
+    NetworkDeviceIp4,
+    WifiAp,
+    StagedChange,
+} from './network/NetworkProvider';
+export { NetworkPanel } from './network/NetworkPanel';
+export type { NetworkPanelProps } from './network/NetworkPanel';
+export { StagedChangeBanner } from './network/StagedChangeBanner';
+export type { StagedChangeBannerProps } from './network/StagedChangeBanner';