busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

test contracts

Browse Source
This commit is contained in:
busya
2026-02-26 19:40:00 +03:00
parent 81d62c1345
commit 36173c0880
35 changed files with 1811 additions and 759 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
frontend/src/routes/dashboards/+page.svelte
View File

@@ -12,9 +12,23 @@
* @UX_STATE: Error -> Shows error banner with retry button
* @UX_STATE: Selecting -> Checkboxes checked, floating action panel appears
* @UX_STATE: BulkAction-Modal -> Migration or Backup modal open
* @UX_FEEDBACK: Clicking task status opens Task Drawer
* @UX_FEEDBACK: Floating panel slides up from bottom when items selected
* @UX_RECOVERY: Refresh button reloads dashboard list
*
* @TEST_CONTRACT Page_DashboardHub ->
* {
* required_props: {},
* optional_props: {},
* invariants: [
* "Loads specific dashboards for currently selected environment store context",
* "Reflects Git sync status explicitly via row badges",
* "Submits migration action carrying db_mappings safely"
* ]
* }
* @TEST_FIXTURE init_state -> {}
* @TEST_EDGE server_error -> shows error block and retry button
* @TEST_EDGE bulk_git_actions -> verifies modal functionality when triggered
* @TEST_INVARIANT rendering_and_selection -> verifies: [init_state]
*/
import { onMount } from "svelte";
@@ -152,7 +166,7 @@
// Update selection state
updateSelectionState();
} catch (err) {
error = err.message || $t.dashboard?.load_failed ;
error = err.message || $t.dashboard?.load_failed;
console.error("[DashboardHub][Coherence:Failed]", err);
} finally {
isLoading = false;
@@ -304,9 +318,9 @@
} catch (err) {
console.error("[DashboardHub][Coherence:Failed] Validation failed:", err);
alert(
($t.dashboard?.validation_start_failed ) +
$t.dashboard?.validation_start_failed +
": " +
(err.message || $t.dashboard?.unknown_error ),
(err.message || $t.dashboard?.unknown_error),
);
} finally {
validatingIds.delete(dashboard.id);
@@ -388,9 +402,7 @@
if (isSubmittingMigrate) return;
if (selectedIds.size === 0) return;
if (!targetEnvId) {
alert(
$t.dashboard?.target_env_required ,
);
alert($t.dashboard?.target_env_required);
return;
}
@@ -423,7 +435,7 @@
}
} catch (err) {
console.error("[DashboardHub][Coherence:Failed]", err);
alert($t.dashboard?.migration_task_failed );
alert($t.dashboard?.migration_task_failed);
} finally {
isSubmittingMigrate = false;
}
@@ -460,7 +472,7 @@
}
} catch (err) {
console.error("[DashboardHub][Coherence:Failed]", err);
alert($t.dashboard?.backup_task_failed );
alert($t.dashboard?.backup_task_failed);
} finally {
isSubmittingBackup = false;
}
@@ -546,7 +558,10 @@
try {
const configs = await ensureGitConfigs();
if (!configs.length) {
addToast($t.git?.no_servers_configured || "No Git config found", "error");
addToast(
$t.git?.no_servers_configured || "No Git config found",
"error",
);
return;
}
@@ -554,10 +569,17 @@
const defaultRemote = config?.default_repository
? `${String(config.url || "").replace(/\/$/, "")}/${config.default_repository}.git`
: "";
const remoteUrl = prompt($t.git?.remote_url || "Remote URL", defaultRemote);
const remoteUrl = prompt(
$t.git?.remote_url || "Remote URL",
defaultRemote,
);
if (!remoteUrl) return;
await gitService.initRepository(dashboard.id, config.id, remoteUrl.trim());
await gitService.initRepository(
dashboard.id,
config.id,
remoteUrl.trim(),
);
addToast($t.git?.init_success || "Repository initialized", "success");
await refreshDashboardGitState(dashboard.id);
} catch (err) {
@@ -711,14 +733,14 @@
<!-- Header -->
<div class="flex items-center justify-between">
<h1 class="text-2xl font-bold text-gray-900">
{$t.nav?.dashboards }
{$t.nav?.dashboards}
</h1>
<div class="flex items-center space-x-4">
<button
class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
on:click={loadDashboards}
>
{$t.common?.refresh }
{$t.common?.refresh}
</button>
</div>
</div>
@@ -733,7 +755,7 @@
class="px-4 py-2 bg-destructive text-white rounded hover:bg-destructive-hover transition-colors"
on:click={loadDashboards}
>
{$t.common?.retry }
{$t.common?.retry}
</button>
</div>
{/if}
@@ -775,7 +797,7 @@
>
<path d="M3 3h18v18H3V3zm16 16V5H5v14h14z" />
</svg>
<p>{$t.dashboard?.empty }</p>
<p>{$t.dashboard?.empty}</p>
</div>
{:else}
<!-- Toolbar -->
@@ -787,8 +809,8 @@
disabled={total === 0}
>
{isAllSelected
? $t.dashboard?.deselect_all
: $t.dashboard?.select_all }
? $t.dashboard?.deselect_all
: $t.dashboard?.select_all}
</button>
<button
class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
@@ -796,14 +818,15 @@
disabled={dashboards.length === 0}
>
{isAllVisibleSelected
? $t.dashboard?.deselect_visible
: $t.dashboard?.select_visible }
? $t.dashboard?.deselect_visible
: $t.dashboard?.select_visible}
</button>
{#if selectedIds.size > 0}
<span class="text-sm text-gray-600">
{(
$t.dashboard?.selected_count
).replace("{count}", String(selectedIds.size))}
{($t.dashboard?.selected_count).replace(
"{count}",
String(selectedIds.size),
)}
</span>
{/if}
</div>
@@ -811,7 +834,7 @@
<input
type="text"
class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder={$t.dashboard?.search }
placeholder={$t.dashboard?.search}
on:input={handleSearch}
value={searchQuery}
/>
@@ -826,14 +849,14 @@
>
<div class="col-span-1"></div>
<div class="col-span-3 font-medium text-gray-900">
{$t.dashboard?.title }
{$t.dashboard?.title}
</div>
<div class="col-span-2">
{$t.dashboard?.git_status }
{$t.dashboard?.git_status}
</div>
<div class="col-span-3">{$t.dashboard?.last_task }</div>
<div class="col-span-3">{$t.dashboard?.last_task}</div>
<div class="col-span-3 flex items-center">
{$t.dashboard?.actions }
{$t.dashboard?.actions}
</div>
</div>
@@ -856,7 +879,7 @@
<button
class="text-left text-blue-700 hover:text-blue-900 hover:underline transition-colors"
on:click={() => navigateToDashboardDetail(dashboard.id)}
title={$t.dashboard?.open_overview }
title={$t.dashboard?.open_overview}
>
{dashboard.title}
</button>
@@ -866,19 +889,23 @@
<div class="col-span-2">
<div class="flex flex-col gap-1">
<span
class="status-badge {dashboard.git?.hasRepo ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-700'}"
class="status-badge {dashboard.git?.hasRepo
? 'bg-blue-100 text-blue-800'
: 'bg-gray-100 text-gray-700'}"
>
{dashboard.git?.hasRepo
? ($t.dashboard?.status_repo || "Repo")
: ($t.dashboard?.status_no_repo || "No Repo")}
? $t.dashboard?.status_repo || "Repo"
: $t.dashboard?.status_no_repo || "No Repo"}
</span>
{#if dashboard.git?.hasRepo}
<span
class="status-badge {dashboard.git?.hasChangesForCommit ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'}"
class="status-badge {dashboard.git?.hasChangesForCommit
? 'bg-yellow-100 text-yellow-800'
: 'bg-green-100 text-green-800'}"
>
{dashboard.git?.hasChangesForCommit
? ($t.dashboard?.status_changes || "Diff")
: ($t.dashboard?.status_no_changes || "Synced")}
? $t.dashboard?.status_changes || "Diff"
: $t.dashboard?.status_no_changes || "Synced"}
</span>
{/if}
</div>
@@ -895,18 +922,18 @@
handleTaskStatusClick(dashboard)}
role="button"
tabindex="0"
aria-label={$t.dashboard?.view_task }
aria-label={$t.dashboard?.view_task}
>
{@html getTaskStatusIcon(dashboard.lastTask.status)}
<span class="ml-1">
{#if dashboard.lastTask.status.toLowerCase() === "running"}
{$t.dashboard?.task_running }
{$t.dashboard?.task_running}
{:else if dashboard.lastTask.status.toLowerCase() === "success"}
{$t.dashboard?.task_done }
{$t.dashboard?.task_done}
{:else if dashboard.lastTask.status.toLowerCase() === "error"}
{$t.dashboard?.task_failed }
{$t.dashboard?.task_failed}
{:else if dashboard.lastTask.status.toLowerCase() === "waiting_input"}
{$t.dashboard?.task_waiting }
{$t.dashboard?.task_waiting}
{/if}
</span>
</div>
@@ -943,7 +970,14 @@
disabled={isGitBusy(dashboard.id)}
title={$t.git?.sync || "Sync from Superset"}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 12a9 9 0 1 1-3-6.7" />
<polyline points="21 3 21 9 15 9" />
</svg>
@@ -951,10 +985,18 @@
<button
class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handleGitCommit(dashboard)}
disabled={isGitBusy(dashboard.id) || !dashboard.git?.hasChangesForCommit}
disabled={isGitBusy(dashboard.id) ||
!dashboard.git?.hasChangesForCommit}
title={$t.git?.commit || "Commit"}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 3v12" />
<path d="M7 10l5 5 5-5" />
<path d="M5 21h14" />
@@ -966,7 +1008,14 @@
disabled={isGitBusy(dashboard.id)}
title={$t.git?.pull || "Pull"}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 3v12" />
<path d="M17 10l-5 5-5-5" />
<path d="M5 21h14" />
@@ -978,7 +1027,14 @@
disabled={isGitBusy(dashboard.id)}
title={$t.git?.push || "Push"}
>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="14"
height="14"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M12 21V9" />
<path d="M7 14l5-5 5 5" />
<path d="M5 3h14" />
@@ -988,7 +1044,7 @@
<button
class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handleAction(dashboard, "migrate")}
title={$t.dashboard?.action_migrate }
title={$t.dashboard?.action_migrate}
>
<svg
width="14"
@@ -1005,7 +1061,7 @@
class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handleValidate(dashboard)}
disabled={validatingIds.has(dashboard.id)}
title={$t.dashboard?.action_validate }
title={$t.dashboard?.action_validate}
>
{#if validatingIds.has(dashboard.id)}
<svg
@@ -1042,7 +1098,7 @@
<button
class="p-2 rounded border border-gray-200 hover:bg-gray-50 hover:border-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
on:click={() => handleAction(dashboard, "backup")}
title={$t.dashboard?.action_backup }
title={$t.dashboard?.action_backup}
>
<svg
width="14"
@@ -1069,7 +1125,7 @@
class="flex items-center justify-between px-4 py-3 bg-gray-50 border-t border-gray-200"
>
<div class="text-sm text-gray-600">
{($t.dashboard?.showing )
{($t.dashboard?.showing)
.replace("{start}", String((currentPage - 1) * pageSize + 1))
.replace("{end}", String(Math.min(currentPage * pageSize, total)))
.replace("{total}", String(total))}
@@ -1080,14 +1136,14 @@
on:click={() => handlePageChange(1)}
disabled={currentPage === 1}
>
{$t.common?.first }
{$t.common?.first}
</button>
<button
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
on:click={() => handlePageChange(currentPage - 1)}
disabled={currentPage === 1}
>
{$t.dashboard?.previous }
{$t.dashboard?.previous}
</button>
{#each getPaginationRange(currentPage, totalPages) as pageNum}
{#if pageNum === "..."}
@@ -1106,14 +1162,14 @@
on:click={() => handlePageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
{$t.dashboard?.next }
{$t.dashboard?.next}
</button>
<button
class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed min-w-[32px]"
on:click={() => handlePageChange(totalPages)}
disabled={currentPage === totalPages}
>
{$t.common?.last }
{$t.common?.last}
</button>
</div>
<div>
@@ -1123,34 +1179,19 @@
on:change={handlePageSizeChange}
>
<option value={5}>
{($t.dashboard?.per_page_option ).replace(
"{count}",
"5",
)}
{($t.dashboard?.per_page_option).replace("{count}", "5")}
</option>
<option value={10}>
{($t.dashboard?.per_page_option ).replace(
"{count}",
"10",
)}
{($t.dashboard?.per_page_option).replace("{count}", "10")}
</option>
<option value={25}>
{($t.dashboard?.per_page_option ).replace(
"{count}",
"25",
)}
{($t.dashboard?.per_page_option).replace("{count}", "25")}
</option>
<option value={50}>
{($t.dashboard?.per_page_option ).replace(
"{count}",
"50",
)}
{($t.dashboard?.per_page_option).replace("{count}", "50")}
</option>
<option value={100}>
{($t.dashboard?.per_page_option ).replace(
"{count}",
"100",
)}
{($t.dashboard?.per_page_option).replace("{count}", "100")}
</option>
</select>
</div>
@@ -1165,9 +1206,10 @@
<div class="flex items-center justify-between max-w-7xl mx-auto">
<div class="flex items-center gap-4">
<span class="font-medium">
✓ {(
$t.dashboard?.selected_count
).replace("{count}", String(selectedIds.size))}
✓ {($t.dashboard?.selected_count).replace(
"{count}",
String(selectedIds.size),
)}
</span>
</div>
<div class="flex gap-3">
@@ -1183,19 +1225,19 @@
isEditingMappings = false;
}}
>
{$t.dashboard?.bulk_migrate }
{$t.dashboard?.bulk_migrate}
</button>
<button
class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors"
on:click={() => (showBackupModal = true)}
>
{$t.dashboard?.bulk_backup }
{$t.dashboard?.bulk_backup}
</button>
<button
class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
on:click={() => selectedIds.clear()}
>
{$t.common?.cancel }
{$t.common?.cancel}
</button>
</div>
</div>
@@ -1224,14 +1266,15 @@
class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
>
<h2 id="migrate-modal-title" class="text-xl font-bold">
{(
$t.dashboard?.migrate_modal_title
).replace("{count}", String(selectedIds.size))}
{($t.dashboard?.migrate_modal_title).replace(
"{count}",
String(selectedIds.size),
)}
</h2>
<button
on:click={() => (showMigrateModal = false)}
class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
aria-label={$t.common?.close_modal }
aria-label={$t.common?.close_modal}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1256,14 +1299,15 @@
<label
for="source-env"
class="block text-sm font-medium text-gray-500 mb-1"
>{$t.migration?.source_env }</label
>{$t.migration?.source_env}</label
>
<div
id="source-env"
class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
>
{environments.find((e) => e.id === selectedEnv)?.name ||
selectedEnv} {$t.dashboard?.read_only }
selectedEnv}
{$t.dashboard?.read_only}
</div>
</div>
@@ -1272,7 +1316,7 @@
<label
for="target-env"
class="block text-sm font-medium text-gray-700 mb-2"
>{$t.migration?.target_env }</label
>{$t.migration?.target_env}</label
>
<select
id="target-env"
@@ -1296,7 +1340,7 @@
<label
for="use-db-mappings"
class="block text-sm font-medium text-gray-700"
>{$t.migration?.database_mappings }</label
>{$t.migration?.database_mappings}</label
>
<label class="relative inline-flex items-center cursor-pointer">
<input
@@ -1309,9 +1353,7 @@
class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
></div>
<span class="ml-2 text-xs text-gray-500"
>{useDbMappings
? $t.common?.on
: $t.common?.off }</span
>{useDbMappings ? $t.common?.on : $t.common?.off}</span
>
</label>
</div>
@@ -1324,8 +1366,8 @@
on:click={() => (isEditingMappings = !isEditingMappings)}
>
{isEditingMappings
? $t.dashboard?.view_summary
: $t.dashboard?.edit_mappings }
? $t.dashboard?.view_summary
: $t.dashboard?.edit_mappings}
</button>
{/if}
</div>
@@ -1353,13 +1395,13 @@
<thead class="bg-gray-50 border-b border-gray-200">
<tr>
<th class="px-4 py-2 font-semibold text-gray-700"
>{$t.dashboard?.source_database }</th
>{$t.dashboard?.source_database}</th
>
<th class="px-4 py-2 font-semibold text-gray-700"
>{$t.dashboard?.target_database }</th
>{$t.dashboard?.target_database}</th
>
<th class="px-4 py-2 font-semibold text-gray-700"
>{$t.dashboard?.match_percent }</th
>{$t.dashboard?.match_percent}</th
>
</tr>
</thead>
@@ -1379,7 +1421,7 @@
)?.database_name || mapping.target_db}
{:else}
<span class="text-red-500"
>{$t.dashboard?.not_mapped }</span
>{$t.dashboard?.not_mapped}</span
>
{/if}
</td>
@@ -1445,7 +1487,7 @@
<!-- Selected Dashboards List -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>{$t.dashboard?.selected_dashboards }</label
>{$t.dashboard?.selected_dashboards}</label
>
<div
class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
@@ -1468,8 +1510,7 @@
<button
class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
on:click={() => (showMigrateModal = false)}
disabled={isSubmittingMigrate}
>{$t.common?.cancel }</button
disabled={isSubmittingMigrate}>{$t.common?.cancel}</button
>
<button
class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1478,9 +1519,7 @@
selectedIds.size === 0 ||
isSubmittingMigrate}
>
{isSubmittingMigrate
? $t.dashboard?.starting
: $t.migration?.start }
{isSubmittingMigrate ? $t.dashboard?.starting : $t.migration?.start}
</button>
</div>
</div>
@@ -1508,14 +1547,15 @@
class="px-6 py-4 border-b border-gray-200 flex items-center justify-between relative"
>
<h2 id="backup-modal-title" class="text-xl font-bold">
{(
$t.dashboard?.backup_modal_title
).replace("{count}", String(selectedIds.size))}
{($t.dashboard?.backup_modal_title).replace(
"{count}",
String(selectedIds.size),
)}
</h2>
<button
on:click={() => (showBackupModal = false)}
class="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-all"
aria-label={$t.common?.close_modal }
aria-label={$t.common?.close_modal}
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -1540,21 +1580,22 @@
<label
for="backup-env"
class="block text-sm font-medium text-gray-500 mb-1"
>{$t.dashboard?.environment }</label
>{$t.dashboard?.environment}</label
>
<div
id="backup-env"
class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700 font-medium"
>
{environments.find((e) => e.id === selectedEnv)?.name ||
selectedEnv} {$t.dashboard?.read_only }
selectedEnv}
{$t.dashboard?.read_only}
</div>
</div>
<!-- Selected Dashboards List -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2"
>{$t.dashboard?.selected_dashboards }</label
>{$t.dashboard?.selected_dashboards}</label
>
<div
class="max-h-40 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50 p-2"
@@ -1577,7 +1618,7 @@
<label
id="backup-schedule-label"
class="block text-sm font-medium text-gray-700 mb-2"
>{$t.dashboard?.schedule }</label
>{$t.dashboard?.schedule}</label
>
<div class="space-y-3" aria-labelledby="backup-schedule-label">
<label class="flex items-center">
@@ -1588,9 +1629,7 @@
bind:group={backupSchedule}
class="mr-2"
/>
<span class="text-sm"
>{$t.dashboard?.one_time_backup }</span
>
<span class="text-sm">{$t.dashboard?.one_time_backup}</span>
</label>
<label class="flex items-center">
<input
@@ -1600,16 +1639,14 @@
bind:group={backupSchedule}
class="mr-2"
/>
<span class="text-sm"
>{$t.dashboard?.schedule_backup }</span
>
<span class="text-sm">{$t.dashboard?.schedule_backup}</span>
</label>
{#if backupSchedule !== ""}
<div class="ml-6">
<label
for="cron-expression"
class="block text-xs text-gray-500 mb-1"
>{$t.dashboard?.cron_expression }</label
>{$t.dashboard?.cron_expression}</label
>
<input
id="cron-expression"
@@ -1620,7 +1657,7 @@
bind:value={backupSchedule}
/>
<button class="text-xs text-blue-600 hover:underline mt-1"
>{$t.dashboard?.cron_help }</button
>{$t.dashboard?.cron_help}</button
>
</div>
{/if}
@@ -1632,8 +1669,7 @@
<button
class="px-3 py-1 text-sm border border-gray-300 rounded hover:bg-gray-100 transition-colors"
on:click={() => (showBackupModal = false)}
disabled={isSubmittingBackup}
>{$t.common?.cancel }</button
disabled={isSubmittingBackup}>{$t.common?.cancel}</button
>
<button
class="px-3 py-1 text-sm bg-primary text-white border-primary rounded hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
@@ -1641,8 +1677,8 @@
disabled={selectedIds.size === 0 || isSubmittingBackup}
>
{isSubmittingBackup
? $t.dashboard?.starting
: $t.dashboard?.start_backup }
? $t.dashboard?.starting
: $t.dashboard?.start_backup}
</button>
</div>
</div>

337
frontend/src/routes/dashboards/[id]/+page.svelte
View File

@@ -8,6 +8,18 @@
* @INVARIANT: Shows dashboard metadata, charts, and datasets for selected environment
* @TEST_DATA: dashboard_detail_ready -> {"dashboard":{"id":11,"title":"Ops","chart_count":3,"dataset_count":2},"taskHistory":[{"id":"t-1","plugin_id":"llm_dashboard_validation","status":"SUCCESS"}],"llmStatus":{"configured":true,"reason":"ok"}}
* @TEST_DATA: llm_unconfigured -> {"llmStatus":{"configured":false,"reason":"invalid_api_key"}}
*
* @TEST_CONTRACT Page_DashboardDetail ->
* {
* required_props: {},
* optional_props: {},
* invariants: [
* "Loads specific dashboard details directly via the API leveraging the id parameter",
* "Triggers LLM validation gracefully respecting llmReady status"
* ]
* }
* @TEST_FIXTURE init_state -> {"id": "1", "env_id": "env1"}
* @TEST_INVARIANT dashboard_fetching -> verifies: [init_state]
*/
import { onMount, onDestroy } from "svelte";
@@ -55,7 +67,7 @@
async function loadDashboardDetail() {
if (!dashboardId || !envId) {
error = $t.dashboard?.missing_context ;
error = $t.dashboard?.missing_context;
isLoading = false;
return;
}
@@ -65,7 +77,7 @@
try {
dashboard = await api.getDashboardDetail(envId, dashboardId);
} catch (err) {
error = err.message || $t.dashboard?.load_detail_failed ;
error = err.message || $t.dashboard?.load_detail_failed;
console.error("[DashboardDetail][Coherence:Failed]", err);
} finally {
isLoading = false;
@@ -77,7 +89,9 @@
isTaskHistoryLoading = true;
taskHistoryError = null;
try {
const response = await api.getDashboardTaskHistory(envId, dashboardId, { limit: 30 });
const response = await api.getDashboardTaskHistory(envId, dashboardId, {
limit: 30,
});
taskHistory = response?.items || [];
} catch (err) {
taskHistoryError = err.message || "Failed to load task history";
@@ -99,14 +113,20 @@
isThumbnailLoading = true;
thumbnailError = null;
try {
const blob = await api.getDashboardThumbnail(envId, dashboardId, { force });
const blob = await api.getDashboardThumbnail(envId, dashboardId, {
force,
});
releaseThumbnailUrl();
thumbnailUrl = URL.createObjectURL(blob);
} catch (err) {
if (err?.status === 202) {
thumbnailError = $t.dashboard?.thumbnail_generating || "Thumbnail is being generated";
thumbnailError =
$t.dashboard?.thumbnail_generating || "Thumbnail is being generated";
} else {
thumbnailError = err.message || $t.dashboard?.thumbnail_failed || "Failed to load thumbnail";
thumbnailError =
err.message ||
$t.dashboard?.thumbnail_failed ||
"Failed to load thumbnail";
}
} finally {
isThumbnailLoading = false;
@@ -124,11 +144,19 @@
const taskId = response?.task_id;
if (taskId) {
openDrawerForTask(taskId);
addToast($t.dashboard?.backup_started || "Backup task started", "success");
addToast(
$t.dashboard?.backup_started || "Backup task started",
"success",
);
}
await loadTaskHistory();
} catch (err) {
addToast(err.message || $t.dashboard?.backup_task_failed || "Failed to start backup", "error");
addToast(
err.message ||
$t.dashboard?.backup_task_failed ||
"Failed to start backup",
"error",
);
} finally {
isStartingBackup = false;
}
@@ -136,7 +164,10 @@
async function runLlmValidationTask() {
if (!llmReady) {
addToast($t.dashboard?.llm_not_configured || "LLM is not configured", "error");
addToast(
$t.dashboard?.llm_not_configured || "LLM is not configured",
"error",
);
return;
}
if (isStartingValidation || !envId || !dashboardId) return;
@@ -152,14 +183,19 @@
const taskId = response?.task_id || response?.id;
if (taskId) {
openDrawerForTask(taskId);
addToast($t.dashboard?.validation_started || "LLM validation started", "success");
addToast(
$t.dashboard?.validation_started || "LLM validation started",
"success",
);
}
await Promise.all([
loadTaskHistory(),
loadThumbnail(true),
]);
await Promise.all([loadTaskHistory(), loadThumbnail(true)]);
} catch (err) {
addToast(err.message || $t.dashboard?.validation_start_failed || "Failed to start LLM validation", "error");
addToast(
err.message ||
$t.dashboard?.validation_start_failed ||
"Failed to start LLM validation",
"error",
);
} finally {
isStartingValidation = false;
}
@@ -167,21 +203,29 @@
function openLlmReport(taskId) {
if (!taskId) return;
window.open(`/reports/llm/${encodeURIComponent(String(taskId))}`, "_blank", "noopener,noreferrer");
window.open(
`/reports/llm/${encodeURIComponent(String(taskId))}`,
"_blank",
"noopener,noreferrer",
);
}
function toTaskTypeLabel(pluginId) {
if (pluginId === "superset-backup") return $t.dashboard?.backup || "Backup";
if (pluginId === "llm_dashboard_validation") return $t.dashboard?.llm_check || "LLM Check";
if (pluginId === "llm_dashboard_validation")
return $t.dashboard?.llm_check || "LLM Check";
return pluginId || "-";
}
function getTaskStatusClasses(status) {
const normalized = (status || "").toLowerCase();
if (normalized === "running" || normalized === "pending") return "bg-blue-100 text-blue-700";
if (normalized === "running" || normalized === "pending")
return "bg-blue-100 text-blue-700";
if (normalized === "success") return "bg-emerald-100 text-emerald-700";
if (normalized === "failed" || normalized === "error") return "bg-rose-100 text-rose-700";
if (normalized === "awaiting_input" || normalized === "waiting_input") return "bg-amber-100 text-amber-700";
if (normalized === "failed" || normalized === "error")
return "bg-rose-100 text-rose-700";
if (normalized === "awaiting_input" || normalized === "waiting_input")
return "bg-amber-100 text-amber-700";
return "bg-slate-100 text-slate-700";
}
@@ -205,8 +249,10 @@
function getValidationStatusClasses(level) {
if (level === "fail") return "bg-rose-100 text-rose-700 border-rose-200";
if (level === "warn") return "bg-amber-100 text-amber-700 border-amber-200";
if (level === "pass") return "bg-emerald-100 text-emerald-700 border-emerald-200";
if (level === "unknown") return "bg-slate-100 text-slate-700 border-slate-200";
if (level === "pass")
return "bg-emerald-100 text-emerald-700 border-emerald-200";
if (level === "unknown")
return "bg-slate-100 text-slate-700 border-slate-200";
return "bg-slate-50 text-slate-400 border-slate-200";
}
@@ -245,13 +291,14 @@
on:click={goBack}
>
<Icon name="chevronLeft" size={16} />
{$t.common?.back }
{$t.common?.back}
</button>
<h1 class="mt-2 text-2xl font-bold text-slate-900">
{dashboard?.title || ($t.dashboard?.overview )}
{dashboard?.title || $t.dashboard?.overview}
</h1>
<p class="mt-1 text-sm text-slate-500">
{$t.common?.id }: {dashboardId}{#if dashboard?.slug} • {dashboard.slug}{/if}
{$t.common?.id}: {dashboardId}{#if dashboard?.slug}
• {dashboard.slug}{/if}
</p>
</div>
<div class="flex flex-wrap items-center gap-2">
@@ -260,45 +307,65 @@
on:click={runBackupTask}
disabled={isStartingBackup}
>
{isStartingBackup ? ($t.common?.loading || "Loading...") : ($t.dashboard?.run_backup || "Run backup")}
{isStartingBackup
? $t.common?.loading || "Loading..."
: $t.dashboard?.run_backup || "Run backup"}
</button>
<button
class="inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition-colors {llmReady ? 'border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100' : 'border-rose-300 bg-rose-50 text-rose-700 opacity-70 cursor-not-allowed'}"
class="inline-flex items-center justify-center rounded-lg border px-4 py-2 text-sm font-medium transition-colors {llmReady
? 'border-indigo-300 bg-indigo-50 text-indigo-700 hover:bg-indigo-100'
: 'border-rose-300 bg-rose-50 text-rose-700 opacity-70 cursor-not-allowed'}"
on:click={runLlmValidationTask}
disabled={isStartingValidation || !llmReady}
title={!llmReady ? ($t.dashboard?.llm_not_configured || "LLM is not configured") : ""}
title={!llmReady
? $t.dashboard?.llm_not_configured || "LLM is not configured"
: ""}
>
{isStartingValidation ? ($t.common?.loading || "Loading...") : ($t.dashboard?.run_llm_check || "Run LLM check")}
{isStartingValidation
? $t.common?.loading || "Loading..."
: $t.dashboard?.run_llm_check || "Run LLM check"}
</button>
<button
class="inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover"
on:click={loadDashboardPage}
>
{$t.common?.refresh }
{$t.common?.refresh}
</button>
</div>
</div>
{#if !llmReady}
<div class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800">
<div class="font-semibold">{$t.dashboard?.llm_not_configured || "LLM is not configured"}</div>
<div
class="rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-800"
>
<div class="font-semibold">
{$t.dashboard?.llm_not_configured || "LLM is not configured"}
</div>
<div class="mt-1 text-rose-700">
{#if llmStatusReason === "no_active_provider"}
{$t.dashboard?.llm_configure_provider || "No active LLM provider. Configure it in Admin -> LLM Settings."}
{$t.dashboard?.llm_configure_provider ||
"No active LLM provider. Configure it in Admin -> LLM Settings."}
{:else if llmStatusReason === "invalid_api_key"}
{$t.dashboard?.llm_configure_key || "Invalid LLM API key. Update and save a real key in Admin -> LLM Settings."}
{$t.dashboard?.llm_configure_key ||
"Invalid LLM API key. Update and save a real key in Admin -> LLM Settings."}
{:else}
{$t.dashboard?.llm_status_unavailable || "LLM status is unavailable. Check settings and backend logs."}
{$t.dashboard?.llm_status_unavailable ||
"LLM status is unavailable. Check settings and backend logs."}
{/if}
</div>
</div>
{/if}
{#if error}
<div class="flex items-center justify-between rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-700">
<div
class="flex items-center justify-between rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-700"
>
<span>{error}</span>
<button class="rounded bg-red-600 px-3 py-1.5 text-white hover:bg-red-700" on:click={loadDashboardDetail}>
{$t.common?.retry }
<button
class="rounded bg-red-600 px-3 py-1.5 text-white hover:bg-red-700"
on:click={loadDashboardDetail}
>
{$t.common?.retry}
</button>
</div>
{/if}
@@ -306,15 +373,23 @@
{#if isLoading}
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
{#each Array(3) as _}
<div class="h-24 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
<div
class="h-24 animate-pulse rounded-xl border border-slate-200 bg-white"
></div>
{/each}
</div>
<div class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"></div>
<div
class="h-64 animate-pulse rounded-xl border border-slate-200 bg-white"
></div>
{:else if dashboard}
<div class="grid grid-cols-1 gap-6 xl:grid-cols-5">
<div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-2">
<div
class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-2"
>
<div class="mb-3 flex items-center justify-between">
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
<h2
class="text-sm font-semibold uppercase tracking-wide text-slate-500"
>
{$t.dashboard?.api_thumbnail || "Dashboard thumbnail"}
</h2>
<button
@@ -334,14 +409,22 @@
class="h-56 w-full rounded-lg border border-slate-200 object-cover"
/>
{:else}
<div class="flex h-56 items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50 text-sm text-slate-500">
{thumbnailError || ($t.dashboard?.thumbnail_unavailable || "Thumbnail is unavailable")}
<div
class="flex h-56 items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50 text-sm text-slate-500"
>
{thumbnailError ||
$t.dashboard?.thumbnail_unavailable ||
"Thumbnail is unavailable"}
</div>
{/if}
</div>
<div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
<div
class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3"
>
<div class="mb-3 flex items-center justify-between">
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
<h2
class="text-sm font-semibold uppercase tracking-wide text-slate-500"
>
{$t.tasks?.recent || "Recent tasks"}
</h2>
<button
@@ -359,9 +442,15 @@
{/each}
</div>
{:else if taskHistoryError}
<div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{taskHistoryError}</div>
<div
class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700"
>
{taskHistoryError}
</div>
{:else if taskHistory.length === 0}
<div class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-center text-sm text-slate-500">
<div
class="rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-center text-sm text-slate-500"
>
{$t.tasks?.select_task || "No backup/LLM tasks yet"}
</div>
{:else}
@@ -369,36 +458,60 @@
<table class="min-w-full divide-y divide-slate-200 text-sm">
<thead class="bg-slate-50">
<tr>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.type || "Type"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.status || "Status"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.tasks?.result || "Check"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.started || "Started"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.finished || "Finished"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600">{$t.common?.actions || "Actions"}</th>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.common?.type || "Type"}</th
>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.common?.status || "Status"}</th
>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.tasks?.result || "Check"}</th
>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.common?.started || "Started"}</th
>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.common?.finished || "Finished"}</th
>
<th class="px-3 py-2 text-left font-semibold text-slate-600"
>{$t.common?.actions || "Actions"}</th
>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
{#each taskHistory as task}
{@const validation = getValidationStatus(task)}
<tr>
<td class="px-3 py-2 text-slate-800">{toTaskTypeLabel(task.plugin_id)}</td>
<td class="px-3 py-2 text-slate-800"
>{toTaskTypeLabel(task.plugin_id)}</td
>
<td class="px-3 py-2">
<span class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}>
<span
class={`rounded-full px-2 py-1 text-xs font-semibold uppercase ${getTaskStatusClasses(task.status)}`}
>
{task.status}
</span>
</td>
<td class="px-3 py-2">
<span class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}>
<span
class={`inline-flex items-center gap-1 rounded-full border px-2 py-1 text-xs font-semibold uppercase ${getValidationStatusClasses(validation.level)}`}
>
{#if validation.icon}
<span class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold">
<span
class="inline-flex min-w-[18px] items-center justify-center rounded-full bg-white/70 px-1 text-[10px] font-bold"
>
{validation.icon}
</span>
{/if}
{validation.label}
</span>
</td>
<td class="px-3 py-2 text-slate-700">{formatDate(task.started_at)}</td>
<td class="px-3 py-2 text-slate-700">{formatDate(task.finished_at)}</td>
<td class="px-3 py-2 text-slate-700"
>{formatDate(task.started_at)}</td
>
<td class="px-3 py-2 text-slate-700"
>{formatDate(task.finished_at)}</td
>
<td class="px-3 py-2">
<div class="flex flex-wrap items-center gap-1">
{#if task.plugin_id === "llm_dashboard_validation"}
@@ -422,39 +535,65 @@
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.dashboard?.last_modified }</p>
<p class="mt-2 text-lg font-semibold text-slate-900">{formatDate(dashboard.last_modified)}</p>
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
{$t.dashboard?.last_modified}
</p>
<p class="mt-2 text-lg font-semibold text-slate-900">
{formatDate(dashboard.last_modified)}
</p>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.dashboard?.charts }</p>
<p class="mt-2 text-lg font-semibold text-slate-900">{dashboard.chart_count || 0}</p>
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
{$t.dashboard?.charts}
</p>
<p class="mt-2 text-lg font-semibold text-slate-900">
{dashboard.chart_count || 0}
</p>
</div>
<div class="rounded-xl border border-slate-200 bg-white p-4">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.nav?.datasets }</p>
<p class="mt-2 text-lg font-semibold text-slate-900">{dashboard.dataset_count || 0}</p>
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">
{$t.nav?.datasets}
</p>
<p class="mt-2 text-lg font-semibold text-slate-900">
{dashboard.dataset_count || 0}
</p>
</div>
</div>
{#if dashboard.description}
<div class="rounded-xl border border-slate-200 bg-white p-4">
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">{$t.dashboard?.overview }</h2>
<h2
class="text-sm font-semibold uppercase tracking-wide text-slate-500"
>
{$t.dashboard?.overview}
</h2>
<p class="mt-2 text-sm text-slate-700">{dashboard.description}</p>
</div>
{/if}
<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div class="border-b border-slate-200 px-4 py-3">
<h2 class="text-lg font-semibold text-slate-900">{$t.dashboard?.charts }</h2>
<h2 class="text-lg font-semibold text-slate-900">
{$t.dashboard?.charts}
</h2>
</div>
{#if dashboard.charts && dashboard.charts.length > 0}
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-slate-200 text-sm">
<thead class="bg-slate-50">
<tr>
<th class="px-4 py-2 text-left font-semibold text-slate-600">{$t.settings?.type_chart }</th>
<th class="px-4 py-2 text-left font-semibold text-slate-600">{$t.nav?.datasets }</th>
<th class="px-4 py-2 text-left font-semibold text-slate-600">{$t.dashboard?.overview }</th>
<th class="px-4 py-2 text-left font-semibold text-slate-600">{$t.dashboard?.last_modified }</th>
<th class="px-4 py-2 text-left font-semibold text-slate-600"
>{$t.settings?.type_chart}</th
>
<th class="px-4 py-2 text-left font-semibold text-slate-600"
>{$t.nav?.datasets}</th
>
<th class="px-4 py-2 text-left font-semibold text-slate-600"
>{$t.dashboard?.overview}</th
>
<th class="px-4 py-2 text-left font-semibold text-slate-600"
>{$t.dashboard?.last_modified}</th
>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
@@ -462,37 +601,51 @@
<tr class="hover:bg-slate-50">
<td class="px-4 py-3">
<div class="font-medium text-slate-900">{chart.title}</div>
<div class="text-xs text-slate-500">ID: {chart.id}{#if chart.viz_type} • {chart.viz_type}{/if}</div>
<div class="text-xs text-slate-500">
ID: {chart.id}{#if chart.viz_type}
• {chart.viz_type}{/if}
</div>
</td>
<td class="px-4 py-3">
{#if chart.dataset_id}
<button
class="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-blue-700 hover:bg-blue-50 hover:text-blue-800"
on:click={() => openDataset(chart.dataset_id)}
title={`${$t.datasets?.table_name } ${chart.dataset_id}`}
title={`${$t.datasets?.table_name} ${chart.dataset_id}`}
>
{$t.nav?.datasets } {chart.dataset_id}
<Icon name="chevronRight" size={12} className="text-blue-500" />
{$t.nav?.datasets}
{chart.dataset_id}
<Icon
name="chevronRight"
size={12}
className="text-blue-500"
/>
</button>
{:else}
<span class="text-xs text-slate-400">-</span>
{/if}
</td>
<td class="px-4 py-3 text-slate-700">{chart.overview || "-"}</td>
<td class="px-4 py-3 text-slate-700">{formatDate(chart.last_modified)}</td>
<td class="px-4 py-3 text-slate-700"
>{chart.overview || "-"}</td
>
<td class="px-4 py-3 text-slate-700"
>{formatDate(chart.last_modified)}</td
>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<div class="px-4 py-8 text-sm text-slate-500">{$t.dashboard?.no_charts }</div>
<div class="px-4 py-8 text-sm text-slate-500">
{$t.dashboard?.no_charts}
</div>
{/if}
</div>
<div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
<div class="border-b border-slate-200 px-4 py-3">
<h2 class="text-lg font-semibold text-slate-900">{$t.nav?.datasets }</h2>
<h2 class="text-lg font-semibold text-slate-900">{$t.nav?.datasets}</h2>
</div>
{#if dashboard.datasets && dashboard.datasets.length > 0}
<div class="divide-y divide-slate-100">
@@ -502,21 +655,33 @@
on:click={() => openDataset(dataset.id)}
>
<div class="min-w-0">
<div class="truncate font-medium text-slate-900">{dataset.table_name}</div>
<div class="truncate font-medium text-slate-900">
{dataset.table_name}
</div>
<div class="truncate text-xs text-slate-500">
{dataset.overview || `${dataset.schema || ""}.${dataset.table_name}`}
{#if dataset.database} • {dataset.database}{/if}
{dataset.overview ||
`${dataset.schema || ""}.${dataset.table_name}`}
{#if dataset.database}
• {dataset.database}{/if}
</div>
</div>
<div class="flex items-center gap-3">
<span class="text-xs text-slate-500">{formatDate(dataset.last_modified)}</span>
<Icon name="chevronRight" size={16} className="text-slate-400" />
<span class="text-xs text-slate-500"
>{formatDate(dataset.last_modified)}</span
>
<Icon
name="chevronRight"
size={16}
className="text-slate-400"
/>
</div>
</button>
{/each}
</div>
{:else}
<div class="px-4 py-8 text-sm text-slate-500">{$t.dashboard?.no_datasets }</div>
<div class="px-4 py-8 text-sm text-slate-500">
{$t.dashboard?.no_datasets}
</div>
{/if}
</div>
{/if}