96 lines
3.0 KiB
Svelte
96 lines
3.0 KiB
Svelte
<!-- [DEF:GitDashboardPage:Component] -->
|
|
<!--
|
|
@PURPOSE: Dashboard management page for Git integration.
|
|
@LAYER: Page
|
|
@SEMANTICS: git, dashboard, management, ui
|
|
-->
|
|
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import DashboardGrid from '../../components/DashboardGrid.svelte';
|
|
import { addToast as toast } from '../../lib/toasts.js';
|
|
import type { DashboardMetadata } from '../../types/dashboard';
|
|
import { t } from '$lib/i18n';
|
|
import { Button, Card, PageHeader, Select } from '$lib/ui';
|
|
|
|
let environments: any[] = [];
|
|
let selectedEnvId = "";
|
|
let dashboards: DashboardMetadata[] = [];
|
|
let loading = true;
|
|
let fetchingDashboards = false;
|
|
|
|
// [DEF:fetchEnvironments:Function]
|
|
// @PURPOSE: Fetches the list of deployment environments from the API.
|
|
// @PRE: Component is mounted.
|
|
// @POST: `environments` array is populated with data from /api/environments.
|
|
async function fetchEnvironments() {
|
|
try {
|
|
const response = await fetch('/api/environments');
|
|
if (!response.ok) throw new Error('Failed to fetch environments');
|
|
environments = await response.json();
|
|
if (environments.length > 0) {
|
|
selectedEnvId = environments[0].id;
|
|
}
|
|
} catch (e) {
|
|
toast(e.message, 'error');
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
// [/DEF:fetchEnvironments:Function]
|
|
|
|
// [DEF:fetchDashboards:Function]
|
|
// @PURPOSE: Fetches dashboards for a specific environment.
|
|
// @PRE: `envId` is a valid environment ID.
|
|
// @POST: `dashboards` array is updated with results from the environment.
|
|
async function fetchDashboards(envId: string) {
|
|
if (!envId) return;
|
|
fetchingDashboards = true;
|
|
try {
|
|
const response = await fetch(`/api/environments/${envId}/dashboards`);
|
|
if (!response.ok) throw new Error('Failed to fetch dashboards');
|
|
dashboards = await response.json();
|
|
} catch (e) {
|
|
toast(e.message, 'error');
|
|
dashboards = [];
|
|
} finally {
|
|
fetchingDashboards = false;
|
|
}
|
|
}
|
|
// [/DEF:fetchDashboards:Function]
|
|
|
|
onMount(fetchEnvironments);
|
|
|
|
$: if (selectedEnvId) {
|
|
fetchDashboards(selectedEnvId);
|
|
localStorage.setItem('selected_env_id', selectedEnvId);
|
|
}
|
|
</script>
|
|
|
|
<div class="max-w-6xl mx-auto p-6">
|
|
<PageHeader title="Git Dashboard Management">
|
|
<div slot="actions" class="flex items-center space-x-4">
|
|
<Select
|
|
label="Environment"
|
|
bind:value={selectedEnvId}
|
|
options={environments.map(e => ({ value: e.id, label: e.name }))}
|
|
/>
|
|
</div>
|
|
</PageHeader>
|
|
|
|
{#if loading}
|
|
<div class="flex justify-center py-12">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
</div>
|
|
{:else}
|
|
<Card title="Select Dashboard to Manage">
|
|
{#if fetchingDashboards}
|
|
<p class="text-gray-500">Loading dashboards...</p>
|
|
{:else if dashboards.length > 0}
|
|
<DashboardGrid {dashboards} />
|
|
{:else}
|
|
<p class="text-gray-500 italic">No dashboards found in this environment.</p>
|
|
{/if}
|
|
</Card>
|
|
{/if}
|
|
</div>
|
|
<!-- [/DEF:GitDashboardPage:Component] --> |