lula2 0.0.5 → 0.0.6

package/src/lib/websocket.ts

@@ -0,0 +1,359 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2023-Present The Lula Authors
+
+import { browser } from '$app/environment';
+import { writable } from 'svelte/store';
+import type { Control, Mapping } from './types';
+
+export interface WSMessage {
+	type:
+		| 'state-update'
+		| 'connected'
+		| 'error'
+		| 'metadata-update'
+		| 'controls-update'
+		| 'mappings-update'
+		| 'control-details'
+		| 'control-sets-list'
+		| 'control-updated'
+		| 'mapping-created'
+		| 'mapping-updated'
+		| 'mapping-deleted';
+	payload?: any;
+}
+
+export interface AppState {
+	// Control set properties are spread at root level
+	id?: string;
+	name?: string;
+	title?: string;
+	version?: string;
+	description?: string;
+	fieldSchema?: any;
+	field_schema?: any;
+	control_id_field?: string;
+	project?: {
+		framework?: {
+			baseline?: string;
+		};
+	};
+	// State properties
+	currentPath: string;
+	controls: Control[];
+	mappings: Mapping[];
+	families: string[];
+	totalControls: number;
+	totalMappings: number;
+	isConnected: boolean;
+	isSwitchingControlSet?: boolean;
+}
+
+// Create a writable store for the complete app state
+export const appState = writable<AppState>({
+	id: 'unknown',
+	name: 'Unknown Control Set',
+	currentPath: '',
+	controls: [],
+	mappings: [],
+	families: [],
+	totalControls: 0,
+	totalMappings: 0,
+	isConnected: false
+});
+
+class WebSocketClient {
+	private ws: WebSocket | null = null;
+	private reconnectTimer: number | null = null;
+	private reconnectAttempts = 0;
+	private maxReconnectAttempts = 5;
+	private reconnectDelay = 1000; // Start with 1 second
+
+	connect() {
+		if (!browser) return;
+
+		// Don't create a new connection if one already exists
+		if (
+			this.ws &&
+			(this.ws.readyState === WebSocket.CONNECTING || this.ws.readyState === WebSocket.OPEN)
+		) {
+			console.log('WebSocket already connected or connecting');
+			return;
+		}
+
+		const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+		// In development, WebSocket is on port 3000, not the dev server port
+		const host =
+			browser && window.location.hostname === 'localhost' ? 'localhost:3000' : window.location.host;
+		const wsUrl = `${protocol}//${host}/ws`;
+
+		console.log('Connecting to WebSocket:', wsUrl);
+
+		try {
+			this.ws = new WebSocket(wsUrl);
+
+			this.ws.onopen = () => {
+				console.log('WebSocket connected');
+				this.reconnectAttempts = 0;
+				this.reconnectDelay = 1000;
+			};
+
+			this.ws.onmessage = (event) => {
+				try {
+					const message: WSMessage = JSON.parse(event.data);
+					this.handleMessage(message);
+				} catch (error) {
+					console.error('Failed to parse WebSocket message:', error);
+				}
+			};
+
+			this.ws.onerror = (error) => {
+				console.error('WebSocket error:', error);
+			};
+
+			this.ws.onclose = () => {
+				console.log('WebSocket disconnected');
+				appState.update((state) => ({ ...state, isConnected: false }));
+				this.ws = null;
+				this.scheduleReconnect();
+			};
+		} catch (error) {
+			console.error('Failed to create WebSocket:', error);
+			this.scheduleReconnect();
+		}
+	}
+
+	private handleMessage(message: WSMessage) {
+		console.log('WebSocket message received:', message);
+
+		switch (message.type) {
+			case 'connected':
+				console.log('WebSocket connection confirmed');
+				appState.update((state) => ({ ...state, isConnected: true }));
+				break;
+
+			case 'state-update':
+				console.log('State update received');
+				// Update the entire app state with the payload
+				if (message.payload) {
+					appState.set({
+						...message.payload,
+						isConnected: true,
+						isSwitchingControlSet: false // Clear switching flag after state update
+					});
+				}
+				break;
+
+			case 'metadata-update':
+				console.log('Metadata update received');
+				// Update metadata and control set info
+				if (message.payload) {
+					appState.update((state) => ({
+						...state,
+						...message.payload,
+						isConnected: true,
+						isSwitchingControlSet: false // Clear switching flag
+					}));
+				}
+				break;
+
+			case 'controls-update':
+				console.log('Controls update received');
+				// Update just the controls array
+				if (message.payload) {
+					appState.update((state) => ({
+						...state,
+						controls: message.payload
+					}));
+				}
+				break;
+
+			case 'mappings-update':
+				console.log('Mappings update received');
+				// Update just the mappings array
+				if (message.payload) {
+					appState.update((state) => ({
+						...state,
+						mappings: message.payload
+					}));
+				}
+				break;
+
+			case 'control-details':
+				console.log('Control details received:', message.payload);
+				// Emit a custom event for control details
+				if (message.payload) {
+					window.dispatchEvent(
+						new CustomEvent('control-details', {
+							detail: message.payload
+						})
+					);
+				}
+				break;
+
+			case 'control-sets-list':
+				console.log('Control sets list received');
+				// Emit a custom event for control sets list
+				if (message.payload) {
+					window.dispatchEvent(
+						new CustomEvent('control-sets-list', {
+							detail: message.payload
+						})
+					);
+				}
+				break;
+
+			case 'control-updated':
+				console.log('Control updated successfully:', message.payload);
+				// Don't trigger any state updates - the component already has the updated data
+				// This just confirms the save was successful
+				break;
+
+			case 'mapping-created':
+			case 'mapping-updated':
+			case 'mapping-deleted':
+				console.log(`Mapping operation successful: ${message.type}`, message.payload);
+				// Emit an event so the control details panel can refresh its mappings
+				window.dispatchEvent(
+					new CustomEvent('mappings-changed', {
+						detail: message.payload
+					})
+				);
+				break;
+
+			case 'error':
+				console.error('WebSocket error:', message.payload);
+				break;
+
+			default:
+				console.warn('Unknown WebSocket message type:', message.type);
+		}
+	}
+
+	private scheduleReconnect() {
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+		}
+
+		if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+			console.error('Max reconnection attempts reached');
+			return;
+		}
+
+		this.reconnectAttempts++;
+		console.log(
+			`Scheduling reconnect attempt ${this.reconnectAttempts} in ${this.reconnectDelay}ms`
+		);
+
+		this.reconnectTimer = window.setTimeout(() => {
+			this.connect();
+		}, this.reconnectDelay);
+
+		// Exponential backoff
+		this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000); // Max 30 seconds
+	}
+
+	disconnect() {
+		if (this.reconnectTimer) {
+			clearTimeout(this.reconnectTimer);
+			this.reconnectTimer = null;
+		}
+
+		if (this.ws) {
+			this.ws.close();
+			this.ws = null;
+		}
+
+		appState.update((state) => ({ ...state, isConnected: false }));
+	}
+
+	// Check if WebSocket is connected without subscribing to store
+	isConnected(): boolean {
+		return this.ws !== null && this.ws.readyState === WebSocket.OPEN;
+	}
+
+	// Send a command to the backend
+	async sendCommand(type: string, payload?: any) {
+		console.log(`Sending WebSocket command: ${type}`, payload);
+
+		// Wait for connection if not ready
+		if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+			console.log('WebSocket not ready, waiting for connection...');
+			try {
+				await this.waitForConnection();
+			} catch (error) {
+				console.error('Failed to connect:', error);
+				throw error;
+			}
+		}
+
+		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+			const message = JSON.stringify({ type, payload });
+			console.log('Sending message:', message);
+			this.ws.send(message);
+		} else {
+			const error = new Error('WebSocket not connected after waiting');
+			console.error(error);
+			throw error;
+		}
+	}
+
+	// Wait for WebSocket to be connected
+	private waitForConnection(timeout = 5000): Promise<void> {
+		return new Promise((resolve, reject) => {
+			const startTime = Date.now();
+
+			const checkConnection = () => {
+				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+					resolve();
+				} else if (Date.now() - startTime > timeout) {
+					reject(new Error('WebSocket connection timeout'));
+				} else {
+					setTimeout(checkConnection, 100);
+				}
+			};
+
+			checkConnection();
+		});
+	}
+
+	// High-level command methods
+	async updateControl(control: Control) {
+		return this.sendCommand('update-control', control);
+	}
+
+	async createMapping(mapping: Mapping) {
+		return this.sendCommand('create-mapping', mapping);
+	}
+
+	async updateMapping(mapping: Mapping) {
+		return this.sendCommand('update-mapping', mapping);
+	}
+
+	async deleteMapping(uuid: string) {
+		return this.sendCommand('delete-mapping', { uuid });
+	}
+
+	async switchControlSet(path: string) {
+		// Set switching flag to prevent redirect
+		appState.update((state) => ({ ...state, isSwitchingControlSet: true }));
+		return this.sendCommand('switch-control-set', { path });
+	}
+
+	async getControlDetails(id: string) {
+		return this.sendCommand('get-control', { id });
+	}
+
+	async scanControlSets() {
+		return this.sendCommand('scan-control-sets');
+	}
+
+	send(message: any) {
+		if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+			this.ws.send(JSON.stringify(message));
+		} else {
+			console.warn('WebSocket not connected, cannot send message');
+		}
+	}
+}
+
+export const wsClient = new WebSocketClient();

package/src/routes/+layout.svelte

@@ -0,0 +1,236 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { ControlSetInfo } from '$components/control-sets';
+	import { Dropdown } from '$components/ui';
+	import { appState, wsClient } from '$lib/websocket';
+	import { Code, DocumentExport, Download, LogoGithub } from 'carbon-icons-svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import '../app.css';
+
+	let { children } = $props();
+
+	let hasCheckedInitialRedirect = false;
+
+	// Export controls function
+	async function exportControls(format: string) {
+		try {
+			// Build the export URL
+			const exportUrl = `/api/export-controls?format=${format}`;
+
+			// Create a temporary link and trigger download
+			const link = document.createElement('a');
+			link.href = exportUrl;
+			link.download = ''; // Let the server set the filename
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		} catch (error) {
+			console.error('Export failed:', error);
+		}
+	}
+
+	onMount(() => {
+		// Connect WebSocket - this will get the initial state
+		wsClient.connect();
+
+		// Only check for redirect once on initial mount
+		// We need to wait for the WebSocket to connect and send initial state
+		let checkTimeoutId: number | null = null;
+
+		const checkForRedirect = async () => {
+			// Skip if we've already checked, we're on the setup page, or switching control sets
+			if (
+				hasCheckedInitialRedirect ||
+				$page.url.pathname === '/setup' ||
+				$appState.isSwitchingControlSet
+			) {
+				return;
+			}
+
+			const state = $appState;
+
+			// If connected and we have the initial state
+			if (state.isConnected) {
+				hasCheckedInitialRedirect = true;
+
+				// Check if we have a valid control set
+				if (
+					!state.name ||
+					state.name === 'Unknown Control Set' ||
+					state.id === 'unknown' ||
+					state.id === 'default'
+				) {
+					// Only redirect if we don't have controls (not just switching)
+					if (!state.controls || state.controls.length === 0) {
+						// Scan for available control sets
+						await wsClient.scanControlSets();
+
+						// Wait for the control sets list to arrive
+						const controlSets = await new Promise((resolve) => {
+							const handler = (event: CustomEvent) => {
+								window.removeEventListener('control-sets-list', handler as EventListener);
+								resolve(event.detail);
+							};
+							window.addEventListener('control-sets-list', handler as EventListener);
+
+							// Timeout after 2 seconds
+							setTimeout(() => {
+								window.removeEventListener('control-sets-list', handler as EventListener);
+								resolve(null);
+							}, 2000);
+						});
+
+						if (controlSets && Array.isArray(controlSets) && controlSets.length === 1) {
+							// Only one control set available - auto-load it
+							console.log('Auto-loading single control set:', controlSets[0].path);
+							await wsClient.switchControlSet(controlSets[0].path);
+						} else {
+							// Multiple control sets or none - show setup
+							goto('/setup');
+						}
+					}
+				}
+			} else {
+				// Not connected yet, check again in a moment
+				checkTimeoutId = window.setTimeout(checkForRedirect, 500);
+			}
+		};
+
+		// Start checking after a short delay to let WebSocket connect
+		checkTimeoutId = window.setTimeout(checkForRedirect, 100);
+
+		return () => {
+			if (checkTimeoutId) {
+				clearTimeout(checkTimeoutId);
+			}
+		};
+	});
+
+	onDestroy(() => {
+		// Disconnect WebSocket when component is destroyed
+		wsClient.disconnect();
+	});
+</script>
+
+<div class="h-screen flex flex-col">
+	{#if $page.url.pathname !== '/setup'}
+		<!-- Fixed Header -->
+		<header
+			class="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-700 flex-shrink-0"
+		>
+			<div class="w-full px-6 lg:px-8">
+				<div class="flex justify-between items-center h-16">
+					<!-- Left: Logo and Brand -->
+					<div class="flex items-center">
+						<a href="/" class="flex items-center space-x-3 hover:opacity-80 transition-opacity">
+							<img src="/lula.png" class="h-8 w-8" alt="Lula Logo" />
+							<div class="flex flex-col">
+								<span class="text-xl font-bold text-gray-900 dark:text-white"> Lula </span>
+								<span class="text-xs text-gray-500 dark:text-gray-400 -mt-1">
+									Gitops for Compliance
+								</span>
+							</div>
+						</a>
+					</div>
+
+					<!-- Right: Control Set Info and Actions -->
+					<div class="flex items-center space-x-4">
+						<!-- Control Set Info Badge -->
+						<ControlSetInfo />
+
+						{#if $appState.isConnected && $appState.controls && $appState.controls.length > 0}
+							<!-- Export Dropdown -->
+							<Dropdown
+								buttonLabel="Export"
+								buttonIcon={Download}
+								buttonClass="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+								dropdownClass="w-48"
+							>
+								{#snippet children()}
+									<div class="space-y-1 p-1">
+										<button
+											onclick={() => exportControls('csv')}
+											class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+										>
+											<div class="flex items-center gap-2">
+												<DocumentExport class="w-4 h-4" />
+												<span>Export as CSV</span>
+											</div>
+										</button>
+										<button
+											onclick={() => exportControls('excel')}
+											class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+										>
+											<div class="flex items-center gap-2">
+												<Download class="w-4 h-4" />
+												<span>Export as Excel</span>
+											</div>
+										</button>
+										<button
+											onclick={() => exportControls('json')}
+											class="w-full text-left px-3 py-2 text-sm rounded-md transition-colors duration-200 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"
+										>
+											<div class="flex items-center gap-2">
+												<Code class="w-4 h-4" />
+												<span>Export as JSON</span>
+											</div>
+										</button>
+									</div>
+								{/snippet}
+							</Dropdown>
+						{/if}
+
+						<!-- Github -->
+						<a
+							class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+							title="Github"
+							href="https://github.com/defenseunicorns/lula"
+							target="_blank"
+						>
+							<LogoGithub class="w-5 h-5" />
+						</a>
+					</div>
+				</div>
+			</div>
+		</header>
+
+		<!-- Split Pane Layout with Cards -->
+		<div class="flex-1 flex gap-6 p-6 overflow-hidden">
+			{#if $appState.isSwitchingControlSet}
+				<!-- Show loading during control set switch -->
+				<div class="flex-1 flex justify-center items-center">
+					<div class="text-center">
+						<div
+							class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"
+						></div>
+						<p class="text-gray-500 dark:text-gray-400">Switching control set...</p>
+					</div>
+				</div>
+			{:else if !$appState.isConnected || !$appState.controls || $appState.controls.length === 0 || !$appState.fieldSchema}
+				<div class="flex-1 flex justify-center items-center">
+					<div class="text-center">
+						<div
+							class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"
+						></div>
+						<p class="text-gray-500 dark:text-gray-400">
+							{!$appState.isConnected
+								? 'Connecting...'
+								: !$appState.fieldSchema
+									? 'Loading schema...'
+									: 'Loading controls...'}
+						</p>
+					</div>
+				</div>
+			{:else}
+				{@render children()}
+			{/if}
+		</div>
+	{:else}
+		<!-- Setup page gets full screen -->
+		{@render children()}
+	{/if}
+</div>

package/src/routes/+page.svelte

@@ -0,0 +1,38 @@
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+<!-- SPDX-FileCopyrightText: 2023-Present The Lula Authors -->
+
+<script lang="ts">
+	import { ControlDetailsPanel, ControlsList } from '$components/controls';
+	import { selectedControl } from '$stores/compliance';
+	import { Document } from 'carbon-icons-svelte';
+</script>
+
+<!-- Left Pane: Controls List Card -->
+<div class="w-1/2 flex flex-col">
+	<div
+		class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm h-full flex flex-col"
+	>
+		<ControlsList />
+	</div>
+</div>
+
+<!-- Right Pane: Control Details -->
+<div class="w-1/2 flex flex-col">
+	{#if $selectedControl}
+		<ControlDetailsPanel control={$selectedControl} />
+	{:else}
+		<div class=" h-full flex flex-col">
+			<div class="flex-1 flex items-center justify-center p-8">
+				<div class="text-center text-gray-500 dark:text-gray-400">
+					<Document class="mx-auto h-16 w-16 mb-4" />
+					<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+						No Control Selected
+					</h3>
+					<p class="text-gray-600 dark:text-gray-400">
+						Select a control from the list to view and edit its details
+					</p>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>