refactor:control-panel

Author: sosweetham

dev-docker-compose.yaml

@@ -557,6 +557,18 @@ services:
       - metastate-network
     <<: *common-host-access
 
+  # Loki for log aggregation
+  loki:
+    profiles:
+      - all
+    image: grafana/loki:latest
+    ports:
+      - "3100:3100"
+    command: -config.file=/etc/loki/local-config.yaml
+    networks:
+      - metastate-network
+    <<: *common-host-access
+
 volumes:
   postgres_data:
   neo4j_data:

infrastructure/control-panel/src/lib/components/EVaultList.svelte

@@ -138,7 +138,7 @@
 		<div class="py-8 text-center">
 			<p class="text-gray-500">No eVaults found</p>
 			<p class="mt-1 text-sm text-gray-400">
-				Try refreshing or check your Kubernetes connection
+				Try refreshing or check your registry connection
 			</p>
 		</div>
 	{:else}
@@ -155,7 +155,7 @@
 						<th
 							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
 						>
-							Namespace
+							eName (w3id)
 						</th>
 						<th
 							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
@@ -165,12 +165,7 @@
 						<th
 							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
 						>
-							Age
-						</th>
-						<th
-							class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
-						>
-							Service URL
+							URI
 						</th>
 					</tr>
 				</thead>
@@ -180,38 +175,35 @@
 							<td
 								class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900"
 							>
-								{evault.name}
+								{evault.name || evault.ename || evault.evault}
 							</td>
 							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-								{evault.namespace}
+								{evault.ename || 'N/A'}
 							</td>
 							<td class="px-6 py-4 whitespace-nowrap">
 								<span
 									class="inline-flex rounded-full px-2 py-1 text-xs font-semibold {evault.status ===
-									'Running'
+									'Active'
 										? 'bg-green-100 text-green-800'
-										: evault.status === 'Pending'
-											? 'bg-yellow-100 text-yellow-800'
-											: 'bg-red-100 text-red-800'}"
+										: evault.status === 'Inactive'
+											? 'bg-red-100 text-red-800'
+											: 'bg-gray-100 text-gray-800'}"
 								>
-									{evault.status}
+									{evault.status || 'Unknown'}
 								</span>
 							</td>
 							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-								{evault.age || 'Unknown'}
-							</td>
-							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
-								{#if evault.serviceUrl}
+								{#if evault.uri || evault.serviceUrl}
 									<a
-										href={evault.serviceUrl}
+										href={evault.uri || evault.serviceUrl}
 										target="_blank"
 										rel="noopener noreferrer"
 										class="text-blue-600 underline hover:text-blue-800"
 									>
-										{evault.serviceUrl}
+										{evault.uri || evault.serviceUrl}
 									</a>
 								{:else}
-									<span class="text-gray-400">No external access</span>
+									<span class="text-gray-400">No URI available</span>
 								{/if}
 							</td>
 						</tr>

infrastructure/control-panel/src/lib/services/evaultService.ts

@@ -75,16 +75,15 @@ export class EVaultService {
 	}
 
 	/**
-	 * Get logs for a specific eVault pod
+	 * Get logs for a specific eVault by evaultId
 	 */
-	/**
-	 * Get logs for a specific eVault pod
-	 */
-	static async getEVaultLogs(namespace: string, podName: string): Promise<string[]> {
+	static async getEVaultLogs(evaultId: string, tail?: number): Promise<string[]> {
 		try {
-			const response = await fetch(
-				`/api/evaults/${encodeURIComponent(namespace)}/${encodeURIComponent(podName)}/logs`
-			);
+			const url = new URL(`/api/evaults/${encodeURIComponent(evaultId)}/logs`, window.location.origin);
+			if (tail) {
+				url.searchParams.set('tail', tail.toString());
+			}
+			const response = await fetch(url.toString());
 			if (!response.ok) {
 				throw new Error(`HTTP error! status: ${response.status}`);
 			}
@@ -97,20 +96,20 @@ export class EVaultService {
 	}
 
 	/**
-	 * Get metrics for a specific eVault pod
+	 * Get details for a specific eVault by evaultId
 	 */
-	static async getEVaultMetrics(namespace: string, podName: string): Promise<any> {
+	static async getEVaultDetails(evaultId: string): Promise<any> {
 		try {
 			const response = await fetch(
-				`/api/evaults/${encodeURIComponent(namespace)}/${encodeURIComponent(podName)}/metrics`
+				`/api/evaults/${encodeURIComponent(evaultId)}/details`
 			);
 			if (!response.ok) {
 				throw new Error(`HTTP error! status: ${response.status}`);
 			}
 			const data = await response.json();
-			return data.metrics || {};
+			return data.evault || {};
 		} catch (error) {
-			console.error('Failed to fetch eVault metrics:', error);
+			console.error('Failed to fetch eVault details:', error);
 			throw error;
 		}
 	}

infrastructure/control-panel/src/lib/services/loki.ts

@@ -98,6 +98,49 @@ export class LokiService {
 			.filter((event): event is FlowEvent => event !== null);
 	}
 
+	/**
+	 * Query logs for a specific evault by identifier
+	 * Supports querying by evault field or ename (w3id) in log labels
+	 */
+	async getEVaultLogs(
+		evaultId: string,
+		ename?: string,
+		limit: number = 100,
+		start?: string,
+		end?: string
+	): Promise<string[]> {
+		// Try multiple query patterns to find logs for this evault
+		// First try by evault field, then by ename/w3id
+		const queries = [
+			`{evault="${evaultId}"}`,
+			...(ename ? [`{ename="${ename}"}`, `{w3id="${ename}"}`] : [])
+		];
+
+		const allLogs: LogEntry[] = [];
+
+		// Try each query pattern
+		for (const query of queries) {
+			try {
+				const logs = await this.queryLogs(query, start, end);
+				allLogs.push(...logs);
+			} catch (error) {
+				console.log(`Query ${query} failed, trying next pattern`);
+			}
+		}
+
+		// Remove duplicates and sort by timestamp
+		const uniqueLogs = Array.from(
+			new Map(allLogs.map((log) => [`${log.timestamp}-${log.line}`, log])).values()
+		).sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime());
+
+		// Extract log lines and limit to requested number
+		const logLines = uniqueLogs
+			.map((log) => log.line)
+			.slice(-limit); // Get last N lines
+
+		return logLines;
+	}
+
 	parseLogEntry(log: LogEntry): FlowEvent | null {
 		try {
 			// Parse the JSON log line

infrastructure/control-panel/src/lib/services/registry.ts

@@ -7,13 +7,37 @@ export interface Platform {
 	uptime: string;
 }
 
+export interface RegistryVault {
+	ename: string;
+	uri: string;
+	evault: string;
+	originalUri?: string;
+	resolved?: boolean;
+}
+
 export class RegistryService {
 	private baseUrl: string;
 
 	constructor() {
 		this.baseUrl = env.PUBLIC_REGISTRY_URL || 'https://registry.staging.metastate.foundation';
 	}
 
+	async getEVaults(): Promise<RegistryVault[]> {
+		try {
+			const response = await fetch(`${this.baseUrl}/list`);
+
+			if (!response.ok) {
+				throw new Error(`HTTP error! status: ${response.status}`);
+			}
+
+			const vaults: RegistryVault[] = await response.json();
+			return vaults;
+		} catch (error) {
+			console.error('Error fetching evaults from registry:', error);
+			return [];
+		}
+	}
+
 	async getPlatforms(): Promise<Platform[]> {
 		try {
 			const response = await fetch(`${this.baseUrl}/platforms`);

infrastructure/control-panel/src/routes/+page.svelte

@@ -30,13 +30,14 @@
 	let selectedPlatforms = $state<string[]>([]);
 
 	// Filtered data for search
-	let filteredEVaults = $derived(() => {
+		let filteredEVaults = $derived(() => {
 		if (!evaultsSearchValue.trim()) return evaults;
 		return evaults.filter(
 			(evault) =>
-				evault.name.toLowerCase().includes(evaultsSearchValue.toLowerCase()) ||
-				evault.evaultId.toLowerCase().includes(evaultsSearchValue.toLowerCase()) ||
-				evault.namespace.toLowerCase().includes(evaultsSearchValue.toLowerCase())
+				evault.name?.toLowerCase().includes(evaultsSearchValue.toLowerCase()) ||
+				evault.ename?.toLowerCase().includes(evaultsSearchValue.toLowerCase()) ||
+				evault.evault?.toLowerCase().includes(evaultsSearchValue.toLowerCase()) ||
+				evault.id?.toLowerCase().includes(evaultsSearchValue.toLowerCase())
 		);
 	});
 
@@ -70,23 +71,23 @@
 	let mappedEVaultsData = $derived(() => {
 		const paginated = paginatedEVaults();
 		return paginated.map((evault) => ({
-			eName: {
+			Name: {
 				type: 'text',
-				value: evault.evaultId,
+				value: evault.name || evault.ename || evault.evault,
 				className: 'cursor-pointer text-blue-600 hover:text-blue-800 hover:underline'
 			},
-			Uptime: {
+			eName: {
 				type: 'text',
-				value: evault.age
+				value: evault.ename || 'N/A'
 			},
-			IP: {
+			Status: {
 				type: 'text',
-				value: evault.ip
+				value: evault.status || 'Unknown'
 			},
 			URI: {
 				type: 'link',
-				value: evault.serviceUrl || 'N/A',
-				link: evault.serviceUrl || '#',
+				value: evault.uri || evault.serviceUrl || 'N/A',
+				link: evault.uri || evault.serviceUrl || '#',
 				external: true
 			}
 		}));
@@ -142,14 +143,16 @@
 		}
 
 		if (checked) {
-			selectedEVaults = [...selectedEVaults, selectedEVault.evaultId];
+			const evaultId = selectedEVault.evault || selectedEVault.ename || selectedEVault.id;
+			selectedEVaults = [...selectedEVaults, evaultId];
 		} else {
-			selectedEVaults = selectedEVaults.filter((id) => id !== selectedEVault.evaultId);
+			const evaultId = selectedEVault.evault || selectedEVault.ename || selectedEVault.id;
+			selectedEVaults = selectedEVaults.filter((id) => id !== evaultId);
 		}
 
 		// Store selections immediately in sessionStorage
 		const selectedEVaultData = selectedEVaults
-			.map((id) => evaults.find((e) => e.evaultId === id))
+			.map((id) => evaults.find((e) => (e.evault || e.ename || e.id) === id))
 			.filter(Boolean);
 		sessionStorage.setItem('selectedEVaults', JSON.stringify(selectedEVaultData));
 	}
@@ -189,8 +192,8 @@
 		console.log('filtered eVaults length:', filtered.length);
 
 		if (checked) {
-			// Select all filtered eVaults by their evaultId
-			selectedEVaults = filtered.map((evault) => evault.evaultId);
+			// Select all filtered eVaults by their ID (evault or ename)
+			selectedEVaults = filtered.map((evault) => evault.evault || evault.ename || evault.id);
 			console.log('✅ Selected all filtered eVaults, selectedEVaults:', selectedEVaults);
 		} else {
 			// Deselect all eVaults
@@ -290,7 +293,7 @@
 					const mapped = {
 						eName: {
 							type: 'text',
-							value: evault.evaultId,
+							value: evault.evault || evault.ename || evault.id,
 							className:
 								'cursor-pointer text-blue-600 hover:text-blue-800 hover:underline'
 						},
@@ -349,7 +352,9 @@
 		const paginated = paginatedEVaults();
 		const evault = paginated[index];
 		if (evault) {
-			goto(`/monitoring/${evault.namespace}/${evault.name}`);
+			// Use evault ID (evault field or ename) for navigation
+			const evaultId = evault.evault || evault.ename || evault.id;
+			goto(`/evaults/${encodeURIComponent(evaultId)}`);
 		}
 	}
 
@@ -403,9 +408,10 @@
 					onSelectionChange={handleEVaultSelectionChange}
 					onSelectAllChange={handleSelectAllEVaults}
 					selectedIndices={paginatedEVaults()
-						.map((evault, index) =>
-							selectedEVaults.includes(evault.evaultId) ? index : -1
-						)
+						.map((evault, index) => {
+							const evaultId = evault.evault || evault.ename || evault.id;
+							return selectedEVaults.includes(evaultId) ? index : -1;
+						})
 						.filter((index) => index !== -1)}
 				/>