111 lines
3.5 KiB
Svelte
111 lines
3.5 KiB
Svelte
<!-- [DEF:frontend.src.routes.storage.repos.+page:Module] -->
|
|
<!--
|
|
@TIER: STANDARD
|
|
@SEMANTICS: git, dashboard, management, ui
|
|
@PURPOSE: Dashboard management page for Git integration (moved from /git).
|
|
@LAYER: UI (Page)
|
|
@RELATION: DEPENDS_ON -> DashboardGrid
|
|
@RELATION: DEPENDS_ON -> api
|
|
@INVARIANT: Dashboard grid is always shown when an environment is selected.
|
|
-->
|
|
|
|
<!-- [DEF:StorageReposPage:Page] -->
|
|
<script lang="ts">
|
|
/**
|
|
* @UX_STATE: Loading -> Showing spinner while fetching environments/dashboards.
|
|
* @UX_STATE: Idle -> Showing dashboard grid with actions.
|
|
* @UX_FEEDBACK: Toast -> Error messages on fetch failure.
|
|
* @UX_RECOVERY: Environment Selection -> Switch environment to retry loading.
|
|
*/
|
|
import { onMount } from 'svelte';
|
|
import DashboardGrid from '../../../components/DashboardGrid.svelte';
|
|
import { addToast as toast } from '$lib/toasts.js';
|
|
import { api } from '$lib/api.js';
|
|
import type { DashboardMetadata } from '$lib/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 available environments.
|
|
* @PRE: None.
|
|
* @POST: environments array is populated, selectedEnvId is set to first env if available.
|
|
*/
|
|
async function fetchEnvironments() {
|
|
try {
|
|
environments = await api.getEnvironmentsList();
|
|
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 populated with metadata for the selected environment.
|
|
*/
|
|
async function fetchDashboards(envId: string) {
|
|
if (!envId) return;
|
|
fetchingDashboards = true;
|
|
try {
|
|
dashboards = await api.requestApi(`/environments/${envId}/dashboards`);
|
|
} 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={$t.nav?.repositories || "Git Repositories"}>
|
|
<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:StorageReposPage:Page] -->
|
|
<!-- [/DEF:frontend.src.routes.storage.repos.+page:Module] -->
|