@alliance-droid/status-feedback-system 2.3.2 → 3.0.0

package/dist/components/StatusPage.svelte

@@ -1,244 +1,244 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
-	import { createStatusClient, type StatusClient } from '../api.js';
-	import { deriveOverallStatus } from '../utils.js';
-	import StatusIndicator from './shared/StatusIndicator.svelte';
-	import SystemCard from './shared/SystemCard.svelte';
-	import IncidentTimeline from './shared/IncidentTimeline.svelte';
-
-	interface Props {
-		/** Project display name */
-		projectName: string;
-		/** API URL for fetching data (self-fetching mode) */
-		apiUrl?: string;
-		/** API key for fetching data (self-fetching mode) */
-		apiKey?: string;
-		/** Systems data (pass-through mode — overrides API fetching) */
-		systems?: System[];
-		/** Incidents data (pass-through mode) */
-		incidents?: Incident[];
-		/** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
-		statusHistory?: Record<string, StatusHistoryEntry[]>;
-		showUptime?: boolean;
-		/** Auto-refresh interval in seconds. 0 = disabled. Default: 0 */
-		refreshInterval?: number;
-	}
-
-	let {
-		projectName,
-		apiUrl,
-		apiKey,
-		systems: systemsProp,
-		incidents: incidentsProp,
-		statusHistory: statusHistoryProp,
-		showUptime = true,
-		refreshInterval = 0,
-	}: Props = $props();
-
-	// ── State ──
-	let systems = $derived(systemsProp ?? []);
-	let incidents = $derived(incidentsProp ?? []);
-	let statusHistory = $derived(statusHistoryProp ?? {});
-	let loading = $derived(!systemsProp);
-	let error = $state('');
-
-	// ── Self-fetching mode ──
-	const usesApi = $derived(!!apiUrl && !!apiKey && !systemsProp);
-	let refreshTimer: ReturnType<typeof setInterval> | null = null;
-
-	let cachedClient: StatusClient | null = null;
-	let cachedApiUrl = '';
-	let cachedApiKey = '';
-
-	function getClient(): StatusClient {
-		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
-			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
-			cachedApiUrl = apiUrl!;
-			cachedApiKey = apiKey!;
-		}
-		return cachedClient;
-	}
-
-	async function fetchData() {
-		if (!usesApi) return;
-
-		try {
-			const client = getClient();
-
-			const [statusData, incidentData, uptimeData] = await Promise.all([
-				client.getStatus(),
-				client.getIncidents(),
-				client.getUptime(),
-			]);
-
-			systems = statusData.systems;
-			incidents = incidentData.incidents;
-			statusHistory = uptimeData.history;
-			error = '';
-		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to load status data';
-		} finally {
-			loading = false;
-		}
-	}
-
-	onMount(() => {
-		fetchData();
-
-		if (refreshInterval > 0) {
-			refreshTimer = setInterval(fetchData, refreshInterval * 1000);
-		}
-
-		return () => {
-			if (refreshTimer) clearInterval(refreshTimer);
-		};
-	});
-
-	// ── Derived state ──
-
-	let overallStatus = $derived(deriveOverallStatus(systems));
-
-	const overallMessages: Record<SystemStatus, string> = {
-		operational: 'All Systems Operational',
-		degraded: 'Partial System Degradation',
-		outage: 'Partial System Outage',
-		maintenance: 'Scheduled Maintenance',
-	};
-
-	const overallBgClasses: Record<SystemStatus, string> = {
-		operational: 'bg-green-500/10 border-green-500/30',
-		degraded: 'bg-yellow-500/10 border-yellow-500/30',
-		outage: 'bg-red-500/10 border-red-500/30',
-		maintenance: 'bg-blue-500/10 border-blue-500/30',
-	};
-
-	let activeIncidents = $derived(incidents.filter((i) => i.status !== 'resolved'));
-	let recentResolved = $derived(
-		incidents.filter((i) => i.status === 'resolved').slice(0, 10)
-	);
-
-	function formatDate(timestamp: number): string {
-		return new Date(timestamp).toLocaleDateString(undefined, {
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
-		});
-	}
-</script>
-
-<div class="mx-auto max-w-3xl space-y-8">
-	<!-- Header -->
-	<div class="text-center">
-		<h1 class="text-2xl font-semibold text-foreground">{projectName} Status</h1>
-	</div>
-
-	{#if loading}
-		<div class="rounded-lg border border-border bg-surface p-12 text-center">
-			<div class="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-foreground-tertiary border-t-primary"></div>
-			<p class="text-sm text-foreground-secondary">Loading status...</p>
-		</div>
-	{:else if error}
-		<div class="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center">
-			<i class="fa-solid fa-circle-exclamation mb-2 text-2xl text-red-500"></i>
-			<p class="text-sm text-red-400">{error}</p>
-			{#if usesApi}
-				<button
-					onclick={() => { loading = true; fetchData(); }}
-					class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
-				>
-					<i class="fa-solid fa-rotate-right mr-1"></i> Retry
-				</button>
-			{/if}
-		</div>
-	{:else}
-		<!-- Overall Status Banner -->
-		<div class="rounded-lg border p-4 text-center {overallBgClasses[overallStatus]}">
-			<div class="flex items-center justify-center gap-2">
-				<StatusIndicator status={overallStatus} size="lg" />
-				<span class="text-lg font-semibold text-foreground">{overallMessages[overallStatus]}</span>
-			</div>
-		</div>
-
-		<!-- Systems -->
-		{#if systems.length > 0}
-			<section>
-				<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
-				<div class="space-y-3">
-					{#each systems as system (system.id)}
-						<SystemCard
-							{system}
-							history={statusHistory[system.id] || []}
-							{showUptime}
-						/>
-					{/each}
-				</div>
-			</section>
-		{/if}
-
-		<!-- Active Incidents -->
-		{#if activeIncidents.length > 0}
-			<section>
-				<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
-				<div class="space-y-4">
-					{#each activeIncidents as incident (incident.id)}
-						<div class="rounded-lg border border-border bg-surface p-4">
-							<div class="flex items-start justify-between">
-								<div>
-									<h3 class="font-semibold text-foreground">{incident.title}</h3>
-									<div class="mt-1 flex items-center gap-2 text-xs text-foreground-tertiary">
-										<span class="rounded bg-red-500/10 px-1.5 py-0.5 text-red-500">
-											{incident.severity}
-										</span>
-										<span>{formatDate(incident.createdAt)}</span>
-									</div>
-								</div>
-								<StatusIndicator status={incident.status === 'resolved' ? 'operational' : 'outage'} size="sm" />
-							</div>
-							{#if incident.updates && incident.updates.length > 0}
-								<div class="mt-4 border-t border-border pt-4">
-									<IncidentTimeline updates={incident.updates} />
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			</section>
-		{/if}
-
-		<!-- Resolved Incidents -->
-		{#if recentResolved.length > 0}
-			<section>
-				<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
-				<div class="space-y-4">
-					{#each recentResolved as incident (incident.id)}
-						<div class="rounded-lg border border-border bg-surface p-4">
-							<div class="flex items-start justify-between">
-								<div>
-									<h3 class="font-semibold text-foreground">{incident.title}</h3>
-									<p class="mt-1 text-xs text-foreground-tertiary">
-										Resolved {incident.resolvedAt ? formatDate(incident.resolvedAt) : ''}
-									</p>
-								</div>
-								<StatusIndicator status="operational" size="sm" />
-							</div>
-							{#if incident.updates && incident.updates.length > 0}
-								<div class="mt-4 border-t border-border pt-4">
-									<IncidentTimeline updates={incident.updates} />
-								</div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			</section>
-		{/if}
-
-		<!-- No Incidents -->
-		{#if activeIncidents.length === 0 && recentResolved.length === 0}
-			<div class="rounded-lg border border-border bg-surface p-8 text-center">
-				<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
-				<p class="text-sm text-foreground-secondary">No incidents reported</p>
-			</div>
-		{/if}
-	{/if}
-</div>
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { System, Incident, StatusHistoryEntry, SystemStatus } from '../types.js';
+	import { createStatusClient, type StatusClient } from '../api.js';
+	import { deriveOverallStatus } from '../utils.js';
+	import StatusIndicator from './shared/StatusIndicator.svelte';
+	import SystemCard from './shared/SystemCard.svelte';
+	import IncidentTimeline from './shared/IncidentTimeline.svelte';
+
+	interface Props {
+		/** Project display name */
+		projectName: string;
+		/** API URL for fetching data (self-fetching mode) */
+		apiUrl?: string;
+		/** API key for fetching data (self-fetching mode) */
+		apiKey?: string;
+		/** Systems data (pass-through mode — overrides API fetching) */
+		systems?: System[];
+		/** Incidents data (pass-through mode) */
+		incidents?: Incident[];
+		/** Map of systemId → StatusHistoryEntry[] for uptime bars (pass-through mode) */
+		statusHistory?: Record<string, StatusHistoryEntry[]>;
+		showUptime?: boolean;
+		/** Auto-refresh interval in seconds. 0 = disabled. Default: 0 */
+		refreshInterval?: number;
+	}
+
+	let {
+		projectName,
+		apiUrl,
+		apiKey,
+		systems: systemsProp,
+		incidents: incidentsProp,
+		statusHistory: statusHistoryProp,
+		showUptime = true,
+		refreshInterval = 0,
+	}: Props = $props();
+
+	// ── State ──
+	let systems = $derived(systemsProp ?? []);
+	let incidents = $derived(incidentsProp ?? []);
+	let statusHistory = $derived(statusHistoryProp ?? {});
+	let loading = $derived(!systemsProp);
+	let error = $state('');
+
+	// ── Self-fetching mode ──
+	const usesApi = $derived(!!apiUrl && !!apiKey && !systemsProp);
+	let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+	let cachedClient: StatusClient | null = null;
+	let cachedApiUrl = '';
+	let cachedApiKey = '';
+
+	function getClient(): StatusClient {
+		if (!cachedClient || cachedApiUrl !== apiUrl || cachedApiKey !== apiKey) {
+			cachedClient = createStatusClient({ apiUrl: apiUrl!, apiKey: apiKey! });
+			cachedApiUrl = apiUrl!;
+			cachedApiKey = apiKey!;
+		}
+		return cachedClient;
+	}
+
+	async function fetchData() {
+		if (!usesApi) return;
+
+		try {
+			const client = getClient();
+
+			const [statusData, incidentData, uptimeData] = await Promise.all([
+				client.getStatus(),
+				client.getIncidents(),
+				client.getUptime(),
+			]);
+
+			systems = statusData.systems;
+			incidents = incidentData.incidents;
+			statusHistory = uptimeData.history;
+			error = '';
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to load status data';
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		fetchData();
+
+		if (refreshInterval > 0) {
+			refreshTimer = setInterval(fetchData, refreshInterval * 1000);
+		}
+
+		return () => {
+			if (refreshTimer) clearInterval(refreshTimer);
+		};
+	});
+
+	// ── Derived state ──
+
+	let overallStatus = $derived(deriveOverallStatus(systems));
+
+	const overallMessages: Record<SystemStatus, string> = {
+		operational: 'All Systems Operational',
+		degraded: 'Partial System Degradation',
+		outage: 'Partial System Outage',
+		maintenance: 'Scheduled Maintenance',
+	};
+
+	const overallBgClasses: Record<SystemStatus, string> = {
+		operational: 'bg-green-500/10 border-green-500/30',
+		degraded: 'bg-yellow-500/10 border-yellow-500/30',
+		outage: 'bg-red-500/10 border-red-500/30',
+		maintenance: 'bg-blue-500/10 border-blue-500/30',
+	};
+
+	let activeIncidents = $derived(incidents.filter((i) => i.status !== 'resolved'));
+	let recentResolved = $derived(
+		incidents.filter((i) => i.status === 'resolved').slice(0, 10)
+	);
+
+	function formatDate(timestamp: number): string {
+		return new Date(timestamp).toLocaleDateString(undefined, {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric',
+		});
+	}
+</script>
+
+<div class="mx-auto max-w-3xl space-y-8">
+	<!-- Header -->
+	<div class="text-center">
+		<h1 class="text-2xl font-semibold text-foreground">{projectName} Status</h1>
+	</div>
+
+	{#if loading}
+		<div class="rounded-lg border border-border bg-surface p-12 text-center">
+			<div class="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-foreground-tertiary border-t-primary"></div>
+			<p class="text-sm text-foreground-secondary">Loading status...</p>
+		</div>
+	{:else if error}
+		<div class="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center">
+			<i class="fa-solid fa-circle-exclamation mb-2 text-2xl text-red-500"></i>
+			<p class="text-sm text-red-400">{error}</p>
+			{#if usesApi}
+				<button
+					onclick={() => { loading = true; fetchData(); }}
+					class="mt-3 rounded-md bg-surface-hover px-4 py-2 text-sm text-foreground-secondary transition-colors hover:bg-border"
+				>
+					<i class="fa-solid fa-rotate-right mr-1"></i> Retry
+				</button>
+			{/if}
+		</div>
+	{:else}
+		<!-- Overall Status Banner -->
+		<div class="rounded-lg border p-4 text-center {overallBgClasses[overallStatus]}">
+			<div class="flex items-center justify-center gap-2">
+				<StatusIndicator status={overallStatus} size="lg" />
+				<span class="text-lg font-semibold text-foreground">{overallMessages[overallStatus]}</span>
+			</div>
+		</div>
+
+		<!-- Systems -->
+		{#if systems.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Systems</h2>
+				<div class="space-y-3">
+					{#each systems as system (system.id)}
+						<SystemCard
+							{system}
+							history={statusHistory[system.id] || []}
+							{showUptime}
+						/>
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Active Incidents -->
+		{#if activeIncidents.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Active Incidents</h2>
+				<div class="space-y-4">
+					{#each activeIncidents as incident (incident.id)}
+						<div class="rounded-lg border border-border bg-surface p-4">
+							<div class="flex items-start justify-between">
+								<div>
+									<h3 class="font-semibold text-foreground">{incident.title}</h3>
+									<div class="mt-1 flex items-center gap-2 text-xs text-foreground-tertiary">
+										<span class="rounded bg-red-500/10 px-1.5 py-0.5 text-red-500">
+											{incident.severity}
+										</span>
+										<span>{formatDate(incident.createdAt)}</span>
+									</div>
+								</div>
+								<StatusIndicator status={incident.status === 'resolved' ? 'operational' : 'outage'} size="sm" />
+							</div>
+							{#if incident.updates && incident.updates.length > 0}
+								<div class="mt-4 border-t border-border pt-4">
+									<IncidentTimeline updates={incident.updates} />
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- Resolved Incidents -->
+		{#if recentResolved.length > 0}
+			<section>
+				<h2 class="mb-4 text-lg font-semibold text-foreground">Past Incidents</h2>
+				<div class="space-y-4">
+					{#each recentResolved as incident (incident.id)}
+						<div class="rounded-lg border border-border bg-surface p-4">
+							<div class="flex items-start justify-between">
+								<div>
+									<h3 class="font-semibold text-foreground">{incident.title}</h3>
+									<p class="mt-1 text-xs text-foreground-tertiary">
+										Resolved {incident.resolvedAt ? formatDate(incident.resolvedAt) : ''}
+									</p>
+								</div>
+								<StatusIndicator status="operational" size="sm" />
+							</div>
+							{#if incident.updates && incident.updates.length > 0}
+								<div class="mt-4 border-t border-border pt-4">
+									<IncidentTimeline updates={incident.updates} />
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			</section>
+		{/if}
+
+		<!-- No Incidents -->
+		{#if activeIncidents.length === 0 && recentResolved.length === 0}
+			<div class="rounded-lg border border-border bg-surface p-8 text-center">
+				<i class="fa-solid fa-circle-check mb-2 text-2xl text-green-500"></i>
+				<p class="text-sm text-foreground-secondary">No incidents reported</p>
+			</div>
+		{/if}
+	{/if}
+</div>