feat(env): add global production context and safety indicators

This commit is contained in:
2026-02-25 20:46:00 +03:00
parent 999c0c54df
commit 3801ca13d9
11 changed files with 320 additions and 62 deletions

View File

@@ -26,6 +26,11 @@
import { addToast } from "$lib/toasts.js";
import { gitService } from "../../services/gitService.js";
import MappingTable from "$components/MappingTable.svelte";
import {
environmentContextStore,
initializeEnvironmentContext,
setSelectedEnvironment,
} from "$lib/stores/environmentContext.js";
// State
let selectedEnv = null;
@@ -81,7 +86,10 @@
// Load environments and dashboards on mount
onMount(async () => {
await loadEnvironments();
await initializeEnvironmentContext();
if (!selectedEnv && $environmentContextStore?.selectedEnvId) {
selectedEnv = $environmentContextStore.selectedEnvId;
}
await loadDashboards();
});
@@ -97,29 +105,6 @@
document.addEventListener("click", handleDocumentClick);
}
// Load environments from API
async function loadEnvironments() {
try {
const response = await api.getEnvironments();
environments = response;
// Set first environment as default if no selection
if (environments.length > 0 && !selectedEnv) {
selectedEnv = environments[0].id;
}
} catch (err) {
console.error(
"[DashboardHub][Coherence:Failed] Failed to load environments:",
err,
);
// Use fallback environments if API fails
environments = [
{ id: "development", name: "Development" },
{ id: "staging", name: "Staging" },
{ id: "production", name: "Production" },
];
}
}
// Load dashboards from API
async function loadDashboards() {
if (!selectedEnv) return;
@@ -178,6 +163,7 @@
// Handle environment change
function handleEnvChange(event) {
selectedEnv = event.target.value;
setSelectedEnvironment(selectedEnv);
currentPage = 1;
selectedIds.clear();
loadDashboards();
@@ -718,6 +704,17 @@
return range;
}
$: environments = $environmentContextStore?.environments || [];
$: if (
$environmentContextStore?.selectedEnvId &&
selectedEnv !== $environmentContextStore.selectedEnvId
) {
selectedEnv = $environmentContextStore.selectedEnvId;
currentPage = 1;
selectedIds.clear();
loadDashboards();
}
</script>
<div class="mx-auto w-full max-w-7xl space-y-6">
@@ -766,21 +763,21 @@
<div
class="grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 font-semibold text-sm text-gray-700"
>
<div class="col-span-1 skeleton h-4"></div>
<div class="col-span-3 font-medium text-gray-900 skeleton h-4"></div>
<div class="col-span-2 skeleton h-4"></div>
<div class="col-span-3 skeleton h-4"></div>
<div class="col-span-3 flex items-center skeleton h-4"></div>
<div class="col-span-1 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-2 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
</div>
{#each Array(5) as _}
<div
class="grid grid-cols-12 gap-4 px-6 py-4 border-b border-gray-200 last:border-b-0 hover:bg-gray-50 transition-colors"
>
<div class="col-span-1 skeleton h-4"></div>
<div class="col-span-3 font-medium text-gray-900 skeleton h-4"></div>
<div class="col-span-2 skeleton h-4"></div>
<div class="col-span-3 skeleton h-4"></div>
<div class="col-span-3 flex items-center skeleton h-4"></div>
<div class="col-span-1 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-2 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
<div class="col-span-3 h-4 rounded bg-gray-200 animate-pulse"></div>
</div>
{/each}
</div>