mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 10:03:31 +01:00
feat(sprint-2): UBA-006 UBAPanel + UBA-007 DebugStreamView
UBA-006 — UBAPanel (views/panels/UBAPanel): - useUBASchema hook: loads schema URL from project metadata, fetches + parses - SchemaLoader UI: URL input with Enter/click + error banner - ConfigPanel wired with onSave: stores in project metadata + UBAClient.configure() - useEventListener for importComplete/instanceHasChanged UBA-007 — DebugStreamView: - SSE viewer via UBAClient.openDebugStream() - Connect/Disconnect toggle, Clear, auto-scroll + manual override - Max 500 events (oldest dropped), per-type colour coding - Jump to latest sticky button UBAPanel.module.scss: all design tokens, no hardcoded colors Tech note: TS doesn't narrow ParseResult<T> discriminated unions inside async IIFEs — explicit cast with inline FailResult type as workaround.
This commit is contained in:
Richard Osborne
@@ -0,0 +1,200 @@
|
||||
/**
|
||||
* UBA-007: DebugStreamView
|
||||
*
|
||||
* SSE-based live debug log viewer for UBA backends.
|
||||
* Connects to the backend's debug_stream endpoint via UBAClient.openDebugStream()
|
||||
* and renders a scrollable, auto-scrolling event log.
|
||||
*
|
||||
* Features:
|
||||
* - Connect / Disconnect toggle button
|
||||
* - Auto-scroll to bottom on new events (can be overridden by manual scroll)
|
||||
* - Max 500 events in memory (oldest are dropped)
|
||||
* - Clear button to reset the log
|
||||
* - Per-event type colour coding (log/info/warn/error)
|
||||
*/
|
||||
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
|
||||
import type { AuthConfig } from '@noodl-models/UBA/types';
|
||||
|
||||
import { UBAClient, type DebugEvent, type DebugStreamHandle } from '../../../services/UBA/UBAClient';
|
||||
import css from './UBAPanel.module.scss';
|
||||
|
||||
const MAX_EVENTS = 500;
|
||||
|
||||
export interface DebugStreamViewProps {
|
||||
endpoint: string;
|
||||
auth?: AuthConfig;
|
||||
credentials?: { token?: string; username?: string; password?: string };
|
||||
}
|
||||
|
||||
type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
|
||||
|
||||
function eventTypeClass(type: string): string {
|
||||
switch (type) {
|
||||
case 'error':
|
||||
return css.eventError;
|
||||
case 'warn':
|
||||
return css.eventWarn;
|
||||
case 'info':
|
||||
return css.eventInfo;
|
||||
case 'metric':
|
||||
return css.eventMetric;
|
||||
default:
|
||||
return css.eventLog;
|
||||
}
|
||||
}
|
||||
|
||||
function formatEventData(data: unknown): string {
|
||||
if (typeof data === 'string') return data;
|
||||
try {
|
||||
return JSON.stringify(data, null, 2);
|
||||
} catch {
|
||||
return String(data);
|
||||
}
|
||||
}
|
||||
|
||||
export function DebugStreamView({ endpoint, auth, credentials }: DebugStreamViewProps) {
|
||||
const [events, setEvents] = useState<DebugEvent[]>([]);
|
||||
const [status, setStatus] = useState<ConnectionStatus>('disconnected');
|
||||
const [statusMsg, setStatusMsg] = useState<string>('');
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
|
||||
const handleRef = useRef<DebugStreamHandle | null>(null);
|
||||
const logRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Auto-scroll to bottom when new events arrive
|
||||
useEffect(() => {
|
||||
if (autoScroll && logRef.current) {
|
||||
logRef.current.scrollTop = logRef.current.scrollHeight;
|
||||
}
|
||||
}, [events, autoScroll]);
|
||||
|
||||
const connect = useCallback(() => {
|
||||
if (handleRef.current) return; // already connected
|
||||
|
||||
setStatus('connecting');
|
||||
setStatusMsg('');
|
||||
|
||||
handleRef.current = UBAClient.openDebugStream(
|
||||
endpoint,
|
||||
{
|
||||
onOpen: () => {
|
||||
setStatus('connected');
|
||||
setStatusMsg('');
|
||||
},
|
||||
onEvent: (event) => {
|
||||
setEvents((prev) => {
|
||||
const next = [...prev, event];
|
||||
return next.length > MAX_EVENTS ? next.slice(next.length - MAX_EVENTS) : next;
|
||||
});
|
||||
},
|
||||
onError: (err) => {
|
||||
setStatus('error');
|
||||
setStatusMsg(err.message);
|
||||
handleRef.current = null;
|
||||
}
|
||||
},
|
||||
auth,
|
||||
credentials
|
||||
);
|
||||
}, [endpoint, auth, credentials]);
|
||||
|
||||
const disconnect = useCallback(() => {
|
||||
handleRef.current?.close();
|
||||
handleRef.current = null;
|
||||
setStatus('disconnected');
|
||||
setStatusMsg('');
|
||||
}, []);
|
||||
|
||||
// Clean up on unmount or endpoint change
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
handleRef.current?.close();
|
||||
handleRef.current = null;
|
||||
};
|
||||
}, [endpoint]);
|
||||
|
||||
const handleScrollLog = useCallback(() => {
|
||||
const el = logRef.current;
|
||||
if (!el) return;
|
||||
// If user scrolled up more than 40px from bottom, disable auto-scroll
|
||||
const distFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
|
||||
setAutoScroll(distFromBottom < 40);
|
||||
}, []);
|
||||
|
||||
const isConnected = status === 'connected';
|
||||
|
||||
return (
|
||||
<div className={css.debugStream}>
|
||||
{/* Toolbar */}
|
||||
<div className={css.debugToolbar}>
|
||||
<span className={`${css.statusDot} ${css[`statusDot_${status}`]}`} aria-hidden="true" />
|
||||
<span className={css.statusLabel}>
|
||||
{status === 'connecting'
|
||||
? 'Connecting…'
|
||||
: status === 'connected'
|
||||
? 'Live'
|
||||
: status === 'error'
|
||||
? 'Error'
|
||||
: 'Disconnected'}
|
||||
</span>
|
||||
{statusMsg && <span className={css.statusDetail}>{statusMsg}</span>}
|
||||
|
||||
<div className={css.debugToolbarSpacer} />
|
||||
|
||||
<button type="button" className={css.clearBtn} onClick={() => setEvents([])} disabled={events.length === 0}>
|
||||
Clear
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={isConnected ? css.disconnectBtn : css.connectBtn}
|
||||
onClick={isConnected ? disconnect : connect}
|
||||
disabled={status === 'connecting'}
|
||||
>
|
||||
{isConnected ? 'Disconnect' : 'Connect'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Event log */}
|
||||
<div ref={logRef} className={css.debugLog} onScroll={handleScrollLog}>
|
||||
{events.length === 0 ? (
|
||||
<div className={css.debugEmpty}>
|
||||
{isConnected ? 'Waiting for events…' : 'Connect to start receiving events.'}
|
||||
</div>
|
||||
) : (
|
||||
events.map((event, i) => (
|
||||
<div
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
key={i}
|
||||
className={`${css.debugEvent} ${eventTypeClass(event.type)}`}
|
||||
>
|
||||
<span className={css.debugEventTime}>
|
||||
{event.receivedAt.toLocaleTimeString(undefined, { hour12: false })}
|
||||
</span>
|
||||
<span className={css.debugEventType}>{event.type.toUpperCase()}</span>
|
||||
<pre className={css.debugEventData}>{formatEventData(event.data)}</pre>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Auto-scroll indicator */}
|
||||
{!autoScroll && (
|
||||
<button
|
||||
type="button"
|
||||
className={css.scrollToBottomBtn}
|
||||
onClick={() => {
|
||||
setAutoScroll(true);
|
||||
if (logRef.current) {
|
||||
logRef.current.scrollTop = logRef.current.scrollHeight;
|
||||
}
|
||||
}}
|
||||
>
|
||||
Jump to latest
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
// UBAPanel + DebugStreamView styles
|
||||
// All colors use CSS design tokens — no hardcoded values
|
||||
|
||||
// ─── Schema Loader ────────────────────────────────────────────────────────────
|
||||
|
||||
.schemaLoader {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.schemaLoaderHint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.schemaLoaderRow {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.schemaLoaderInput {
|
||||
flex: 1;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: var(--theme-color-bg-1);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: 4px;
|
||||
color: var(--theme-color-fg-default);
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--theme-color-primary);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.schemaLoaderBtn {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
background: var(--theme-color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.schemaLoaderError {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-danger, #e05454);
|
||||
}
|
||||
|
||||
// ─── Status / Error states ────────────────────────────────────────────────────
|
||||
|
||||
.statusMsg {
|
||||
padding: 24px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.errorState {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.errorMsg {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--theme-color-danger, #e05454);
|
||||
}
|
||||
|
||||
.clearBtn {
|
||||
align-self: flex-start;
|
||||
height: 24px;
|
||||
padding: 0 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: 4px;
|
||||
color: var(--theme-color-fg-default);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-color-fg-default);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Debug Stream ─────────────────────────────────────────────────────────────
|
||||
|
||||
.debugStream {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.debugToolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-bottom: 1px solid var(--theme-color-border-default);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.statusDot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.statusDot_connected {
|
||||
background: var(--theme-color-success, #4ade80);
|
||||
}
|
||||
|
||||
&.statusDot_connecting {
|
||||
background: var(--theme-color-warning, #facc15);
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
&.statusDot_error {
|
||||
background: var(--theme-color-danger, #e05454);
|
||||
}
|
||||
|
||||
&.statusDot_disconnected {
|
||||
background: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.statusLabel {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default);
|
||||
}
|
||||
|
||||
.statusDetail {
|
||||
font-size: 11px;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.debugToolbarSpacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.connectBtn {
|
||||
height: 22px;
|
||||
padding: 0 10px;
|
||||
background: var(--theme-color-primary);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.disconnectBtn {
|
||||
height: 22px;
|
||||
padding: 0 10px;
|
||||
background: transparent;
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
color: var(--theme-color-fg-default);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-color-danger, #e05454);
|
||||
color: var(--theme-color-danger, #e05454);
|
||||
}
|
||||
}
|
||||
|
||||
.debugLog {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
min-height: 0;
|
||||
font-family: monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.debugEmpty {
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
|
||||
.debugEvent {
|
||||
display: grid;
|
||||
grid-template-columns: 70px 52px 1fr;
|
||||
gap: 6px;
|
||||
padding: 2px 10px;
|
||||
align-items: baseline;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
&:hover {
|
||||
background: var(--theme-color-bg-3);
|
||||
}
|
||||
}
|
||||
|
||||
.debugEventTime {
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.debugEventType {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
padding-right: 4px;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.debugEventData {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
color: var(--theme-color-fg-default);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// Event type colours
|
||||
.eventLog .debugEventType {
|
||||
color: var(--theme-color-fg-default-shy);
|
||||
}
|
||||
.eventInfo .debugEventType {
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
.eventWarn .debugEventType {
|
||||
color: var(--theme-color-warning, #facc15);
|
||||
}
|
||||
.eventError {
|
||||
background: color-mix(in srgb, var(--theme-color-danger, #e05454) 8%, transparent);
|
||||
|
||||
.debugEventType {
|
||||
color: var(--theme-color-danger, #e05454);
|
||||
}
|
||||
}
|
||||
.eventMetric .debugEventType {
|
||||
color: var(--theme-color-success, #4ade80);
|
||||
}
|
||||
|
||||
.scrollToBottomBtn {
|
||||
position: sticky;
|
||||
bottom: 8px;
|
||||
align-self: center;
|
||||
margin: 4px auto;
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
background: var(--theme-color-bg-3);
|
||||
border: 1px solid var(--theme-color-border-default);
|
||||
border-radius: 12px;
|
||||
color: var(--theme-color-fg-default);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--theme-color-primary);
|
||||
color: var(--theme-color-primary);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
/**
|
||||
* UBA-006 + UBA-007: UBAPanel
|
||||
*
|
||||
* Editor-side panel for the Universal Backend Adapter system.
|
||||
* Provides two tabs:
|
||||
* - Configure: Schema-driven config form backed by project metadata + UBAClient
|
||||
* - Debug: Live SSE event stream from the backend's debug_stream endpoint
|
||||
*
|
||||
* Schema discovery flow:
|
||||
* 1. Read `ubaSchemaUrl` from project metadata
|
||||
* 2. If absent → show SchemaLoader UI (URL input field)
|
||||
* 3. Fetch + parse the schema with SchemaParser
|
||||
* 4. On parse success → render ConfigPanel
|
||||
*
|
||||
* Config persistence flow:
|
||||
* 1. Load `ubaConfig` from project metadata as initialValues
|
||||
* 2. ConfigPanel.onSave → store in metadata + POST via UBAClient.configure()
|
||||
*
|
||||
* Project metadata keys:
|
||||
* - 'ubaSchemaUrl' — URL or local path to the UBA schema JSON
|
||||
* - 'ubaConfig' — saved config values (nested object)
|
||||
*/
|
||||
|
||||
import { useEventListener } from '@noodl-hooks/useEventListener';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { ProjectModel } from '@noodl-models/projectmodel';
|
||||
import { SchemaParser } from '@noodl-models/UBA/SchemaParser';
|
||||
import type { UBASchema } from '@noodl-models/UBA/types';
|
||||
|
||||
import { Tabs, TabsVariant } from '@noodl-core-ui/components/layout/Tabs';
|
||||
import { BasePanel } from '@noodl-core-ui/components/sidebar/BasePanel';
|
||||
|
||||
import { UBAClient } from '../../../services/UBA/UBAClient';
|
||||
import { ConfigPanel } from '../../UBA/ConfigPanel';
|
||||
import { DebugStreamView } from './DebugStreamView';
|
||||
import css from './UBAPanel.module.scss';
|
||||
|
||||
const METADATA_SCHEMA_URL = 'ubaSchemaUrl';
|
||||
const METADATA_CONFIG = 'ubaConfig';
|
||||
|
||||
// ─── Schema Loader ────────────────────────────────────────────────────────────
|
||||
|
||||
interface SchemaLoaderProps {
|
||||
onLoad: (url: string) => void;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function SchemaLoader({ onLoad, loading, error }: SchemaLoaderProps) {
|
||||
const [url, setUrl] = useState('');
|
||||
|
||||
return (
|
||||
<div className={css.schemaLoader}>
|
||||
<p className={css.schemaLoaderHint}>
|
||||
Paste the URL or local path to your backend's UBA schema JSON to get started.
|
||||
</p>
|
||||
<div className={css.schemaLoaderRow}>
|
||||
<input
|
||||
className={css.schemaLoaderInput}
|
||||
type="url"
|
||||
placeholder="http://localhost:3210/uba-schema.json"
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && url.trim()) onLoad(url.trim());
|
||||
}}
|
||||
disabled={loading}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={css.schemaLoaderBtn}
|
||||
onClick={() => url.trim() && onLoad(url.trim())}
|
||||
disabled={loading || !url.trim()}
|
||||
>
|
||||
{loading ? 'Loading…' : 'Load'}
|
||||
</button>
|
||||
</div>
|
||||
{error && (
|
||||
<p className={css.schemaLoaderError} role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── useUBASchema ─────────────────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
* Manages schema URL storage + fetching + parsing from project metadata.
|
||||
*/
|
||||
function useUBASchema() {
|
||||
const [schemaUrl, setSchemaUrl] = useState<string | null>(null);
|
||||
const [schema, setSchema] = useState<UBASchema | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Reload when project changes
|
||||
const reload = useCallback(() => {
|
||||
const project = ProjectModel.instance;
|
||||
if (!project) {
|
||||
setSchemaUrl(null);
|
||||
setSchema(null);
|
||||
return;
|
||||
}
|
||||
const savedUrl = project.getMetaData(METADATA_SCHEMA_URL) as string | null;
|
||||
setSchemaUrl(savedUrl ?? null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [reload]);
|
||||
|
||||
useEventListener(ProjectModel.instance, 'importComplete', reload);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
useEventListener(ProjectModel.instance as any, 'instanceHasChanged', reload);
|
||||
|
||||
// Fetch + parse schema when URL changes
|
||||
useEffect(() => {
|
||||
if (!schemaUrl) {
|
||||
setSchema(null);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
setLoading(true);
|
||||
setLoadError(null);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await fetch(schemaUrl);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
const raw = await res.json();
|
||||
const parseResult = new SchemaParser().parse(raw);
|
||||
if (parseResult.success) {
|
||||
if (!cancelled) {
|
||||
setSchema(parseResult.data);
|
||||
setLoadError(null);
|
||||
}
|
||||
} else {
|
||||
// Explicit cast: TS doesn't narrow discriminated unions inside async IIFEs
|
||||
type FailResult = { success: false; errors: Array<{ path: string; message: string }> };
|
||||
const fail = parseResult as FailResult;
|
||||
throw new Error(fail.errors.map((e) => `${e.path}: ${e.message}`).join('; ') || 'Schema parse failed');
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setLoadError(err instanceof Error ? err.message : String(err));
|
||||
setSchema(null);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [schemaUrl]);
|
||||
|
||||
const loadSchema = useCallback((url: string) => {
|
||||
const project = ProjectModel.instance;
|
||||
if (project) {
|
||||
project.setMetaData(METADATA_SCHEMA_URL, url);
|
||||
}
|
||||
setSchemaUrl(url);
|
||||
}, []);
|
||||
|
||||
const clearSchema = useCallback(() => {
|
||||
const project = ProjectModel.instance;
|
||||
if (project) {
|
||||
project.setMetaData(METADATA_SCHEMA_URL, null);
|
||||
}
|
||||
setSchemaUrl(null);
|
||||
setSchema(null);
|
||||
setLoadError(null);
|
||||
}, []);
|
||||
|
||||
return { schemaUrl, schema, loadError, loading, loadSchema, clearSchema };
|
||||
}
|
||||
|
||||
// ─── UBAPanel ────────────────────────────────────────────────────────────────
|
||||
|
||||
export function UBAPanel() {
|
||||
const { schemaUrl, schema, loadError, loading, loadSchema, clearSchema } = useUBASchema();
|
||||
|
||||
// Load saved config from project metadata
|
||||
const getSavedConfig = useCallback((): Record<string, unknown> => {
|
||||
const project = ProjectModel.instance;
|
||||
if (!project) return {};
|
||||
return (project.getMetaData(METADATA_CONFIG) as Record<string, unknown>) ?? {};
|
||||
}, []);
|
||||
|
||||
// Save config to project metadata AND push to backend
|
||||
const handleSave = useCallback(
|
||||
async (values: Record<string, unknown>) => {
|
||||
const project = ProjectModel.instance;
|
||||
if (project) {
|
||||
project.setMetaData(METADATA_CONFIG, values);
|
||||
}
|
||||
|
||||
// POST to backend if schema is loaded
|
||||
if (schema) {
|
||||
await UBAClient.configure(schema.backend.endpoints.config, values, schema.backend.auth);
|
||||
}
|
||||
},
|
||||
[schema]
|
||||
);
|
||||
|
||||
const renderConfigureTab = () => {
|
||||
if (!schemaUrl && !loading) {
|
||||
return <SchemaLoader onLoad={loadSchema} loading={loading} error={loadError} />;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <div className={css.statusMsg}>Loading schema…</div>;
|
||||
}
|
||||
|
||||
if (loadError) {
|
||||
return (
|
||||
<div className={css.errorState}>
|
||||
<p className={css.errorMsg}>Failed to load schema: {loadError}</p>
|
||||
<button type="button" className={css.clearBtn} onClick={clearSchema}>
|
||||
Try a different URL
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!schema) {
|
||||
return <div className={css.statusMsg}>No schema loaded.</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<ConfigPanel
|
||||
schema={schema}
|
||||
initialValues={getSavedConfig()}
|
||||
onSave={handleSave}
|
||||
onReset={() => {
|
||||
/* noop — reset is handled inside ConfigPanel */
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderDebugTab = () => {
|
||||
if (!schema?.backend.endpoints.debug_stream) {
|
||||
return (
|
||||
<div className={css.statusMsg}>
|
||||
{schema
|
||||
? 'This backend does not expose a debug stream endpoint.'
|
||||
: 'Load a schema first to use debug stream.'}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <DebugStreamView endpoint={schema.backend.endpoints.debug_stream} auth={schema.backend.auth} />;
|
||||
};
|
||||
|
||||
return (
|
||||
<BasePanel title="Backend Adapter">
|
||||
<Tabs
|
||||
variant={TabsVariant.Sidebar}
|
||||
tabs={[
|
||||
{
|
||||
label: 'Configure',
|
||||
content: renderConfigureTab()
|
||||
},
|
||||
{
|
||||
label: 'Debug',
|
||||
content: renderDebugTab()
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</BasePanel>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export { UBAPanel } from './UBAPanel';
|
||||
export { DebugStreamView } from './DebugStreamView';
|
||||
Reference in New Issue
Block a user