refactor(dashboards): extract dashboard detail components
Split the large dashboard detail page into smaller, focused components: DashboardHeader, DashboardGitManager, DashboardLinkedResources, and DashboardTaskHistory to improve maintainability.
This commit is contained in:
@@ -46,16 +46,20 @@
|
|||||||
import BranchSelector from "../../../components/git/BranchSelector.svelte";
|
import BranchSelector from "../../../components/git/BranchSelector.svelte";
|
||||||
import CommitHistory from "../../../components/git/CommitHistory.svelte";
|
import CommitHistory from "../../../components/git/CommitHistory.svelte";
|
||||||
import GitManager from "../../../components/git/GitManager.svelte";
|
import GitManager from "../../../components/git/GitManager.svelte";
|
||||||
|
import DashboardHeader from "./components/DashboardHeader.svelte";
|
||||||
|
import DashboardGitManager from "./components/DashboardGitManager.svelte";
|
||||||
|
import DashboardLinkedResources from "./components/DashboardLinkedResources.svelte";
|
||||||
|
import DashboardTaskHistory from "./components/DashboardTaskHistory.svelte";
|
||||||
|
|
||||||
let dashboardRef = $derived(page.params.id);
|
let dashboardRef = $derived(page.params.id);
|
||||||
let envId = $derived(page.url.searchParams.get("env_id") || "");
|
let envId = $derived(page.url.searchParams.get("env_id") || "");
|
||||||
|
let dashboard = $state(null);
|
||||||
let gitDashboardRef = $derived(dashboard?.slug || dashboardRef || "");
|
let gitDashboardRef = $derived(dashboard?.slug || dashboardRef || "");
|
||||||
let resolvedDashboardId = $derived(
|
let resolvedDashboardId = $derived(
|
||||||
dashboard?.id ??
|
dashboard?.id ??
|
||||||
(/^\d+$/.test(String(dashboardRef || "")) ? Number(dashboardRef) : null),
|
(/^\d+$/.test(String(dashboardRef || "")) ? Number(dashboardRef) : null),
|
||||||
);
|
);
|
||||||
|
|
||||||
let dashboard = $state(null);
|
|
||||||
let isLoading = $state(true);
|
let isLoading = $state(true);
|
||||||
let error = $state(null);
|
let error = $state(null);
|
||||||
let taskHistory = $state([]);
|
let taskHistory = $state([]);
|
||||||
@@ -531,87 +535,26 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="mx-auto w-full max-w-7xl space-y-6">
|
<div class="mx-auto w-full max-w-7xl space-y-6">
|
||||||
<div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
|
<DashboardHeader
|
||||||
<div class="min-w-0 space-y-2">
|
{dashboard}
|
||||||
<button
|
{resolvedDashboardId}
|
||||||
class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
|
{dashboardRef}
|
||||||
onclick={goBack}
|
{envId}
|
||||||
>
|
{gitDashboardRef}
|
||||||
<Icon name="chevronLeft" size={16} />
|
hasGitRepo={hasGitRepository()}
|
||||||
{$t.common?.back}
|
bind:currentBranch
|
||||||
</button>
|
{gitMeta}
|
||||||
|
{gitStatus}
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
{llmReady}
|
||||||
<h1 class="text-2xl font-bold text-slate-900">
|
{isStartingBackup}
|
||||||
{dashboard?.title || $t.dashboard?.overview}
|
{isStartingValidation}
|
||||||
</h1>
|
bind:showGitManager
|
||||||
{#if hasGitRepository() && gitDashboardRef}
|
{goBack}
|
||||||
<div
|
{handleBranchChange}
|
||||||
class="w-full max-w-xs rounded-lg border border-slate-200 bg-slate-50 px-3 py-2"
|
{runBackupTask}
|
||||||
>
|
{runLlmValidationTask}
|
||||||
<BranchSelector
|
{loadDashboardPage}
|
||||||
dashboardId={gitDashboardRef}
|
/>
|
||||||
envId={envId || null}
|
|
||||||
bind:currentBranch
|
|
||||||
onchange={handleBranchChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
|
|
||||||
<span>{$t.common?.id}: {resolvedDashboardId ?? dashboardRef}{#if dashboard?.slug} • {dashboard.slug}{/if}</span>
|
|
||||||
<span class="text-slate-300">|</span>
|
|
||||||
<span
|
|
||||||
class={`inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-semibold ${gitMeta.pillClass}`}
|
|
||||||
>
|
|
||||||
<span class={`h-2 w-2 rounded-full ${gitMeta.dotClass}`}></span>
|
|
||||||
Git: {gitMeta.label}
|
|
||||||
{#if gitStatus?.ahead_count > 0}
|
|
||||||
({gitStatus.ahead_count})
|
|
||||||
{/if}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
|
||||||
onclick={() => (showGitManager = true)}
|
|
||||||
>
|
|
||||||
{$t.git?.management || "Manage Git"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
|
||||||
onclick={runBackupTask}
|
|
||||||
disabled={isStartingBackup}
|
|
||||||
>
|
|
||||||
{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'}"
|
|
||||||
onclick={runLlmValidationTask}
|
|
||||||
disabled={isStartingValidation || !llmReady}
|
|
||||||
title={!llmReady
|
|
||||||
? $t.dashboard?.llm_not_configured || "LLM is not configured"
|
|
||||||
: ""}
|
|
||||||
>
|
|
||||||
{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"
|
|
||||||
onclick={loadDashboardPage}
|
|
||||||
>
|
|
||||||
{$t.common?.refresh}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if !llmReady}
|
{#if !llmReady}
|
||||||
<div
|
<div
|
||||||
@@ -694,112 +637,28 @@
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4 xl:col-span-3">
|
<DashboardGitManager
|
||||||
<div class="mb-3 flex items-center justify-between gap-2">
|
{isGitStatusLoading}
|
||||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
{gitStatusError}
|
||||||
{$t.git?.management || "Git Repository"}
|
hasGitRepo={hasGitRepository()}
|
||||||
</h2>
|
{gitSyncState}
|
||||||
<button
|
{gitStatus}
|
||||||
class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
|
{changedChartsCount}
|
||||||
onclick={loadGitStatus}
|
{changedDatasetsCount}
|
||||||
disabled={isGitStatusLoading}
|
allChangedFiles={allChangedFiles()}
|
||||||
>
|
{runGitSyncAndOpenCommit}
|
||||||
{$t.common?.refresh || "Refresh"}
|
{isSyncingGit}
|
||||||
</button>
|
{hasChangesToCommit}
|
||||||
</div>
|
{loadGitDiffPreview}
|
||||||
|
{isGitDiffLoading}
|
||||||
{#if isGitStatusLoading}
|
{runGitPull}
|
||||||
<div class="space-y-2">
|
{isPullingGit}
|
||||||
{#each Array(3) as _}
|
{runGitPush}
|
||||||
<div class="h-10 animate-pulse rounded bg-slate-100"></div>
|
{isPushingGit}
|
||||||
{/each}
|
{gitDiffPreview}
|
||||||
</div>
|
{loadGitStatus}
|
||||||
{:else if gitStatusError}
|
bind:showGitManager
|
||||||
<div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
|
/>
|
||||||
{gitStatusError}
|
|
||||||
</div>
|
|
||||||
{:else if !hasGitRepository()}
|
|
||||||
<div class="space-y-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
|
|
||||||
<div>
|
|
||||||
{$t.git?.not_linked || "Этот дашборд еще не привязан к Git-репозиторию."}
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800"
|
|
||||||
onclick={() => (showGitManager = true)}
|
|
||||||
>
|
|
||||||
Инициализировать Git-репозиторий
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="space-y-4">
|
|
||||||
<p class="text-sm text-slate-700">
|
|
||||||
{#if gitSyncState === "CHANGES"}
|
|
||||||
Обнаружены изменения конфигурации в Superset.
|
|
||||||
{:else}
|
|
||||||
Конфигурация Superset совпадает с веткой {gitStatus?.current_branch || "main"}.
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-2 text-xs text-slate-600">
|
|
||||||
<span class="rounded-full bg-slate-100 px-2 py-1">
|
|
||||||
charts: {changedChartsCount}
|
|
||||||
</span>
|
|
||||||
<span class="rounded-full bg-slate-100 px-2 py-1">
|
|
||||||
datasets: {changedDatasetsCount}
|
|
||||||
</span>
|
|
||||||
<span class="rounded-full bg-slate-100 px-2 py-1">
|
|
||||||
files: {allChangedFiles().length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid gap-2 md:grid-cols-2">
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
|
|
||||||
onclick={runGitSyncAndOpenCommit}
|
|
||||||
disabled={isSyncingGit || !hasChangesToCommit}
|
|
||||||
>
|
|
||||||
{isSyncingGit
|
|
||||||
? $t.common?.loading || "Loading..."
|
|
||||||
: "Синхронизировать и зафиксировать"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
|
||||||
onclick={loadGitDiffPreview}
|
|
||||||
disabled={isGitDiffLoading || !hasChangesToCommit}
|
|
||||||
>
|
|
||||||
{isGitDiffLoading ? $t.common?.loading || "Loading..." : "Показать diff"}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid gap-2 md:grid-cols-2">
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
|
||||||
onclick={runGitPull}
|
|
||||||
disabled={isPullingGit}
|
|
||||||
>
|
|
||||||
{isPullingGit ? $t.common?.loading || "Loading..." : $t.git?.pull || "Pull"}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
|
||||||
onclick={runGitPush}
|
|
||||||
disabled={isPushingGit}
|
|
||||||
>
|
|
||||||
{#if isPushingGit}
|
|
||||||
{$t.common?.loading || "Loading..."}
|
|
||||||
{:else}
|
|
||||||
{$t.git?.push || "Push"}{#if gitStatus?.ahead_count > 0} ({gitStatus.ahead_count}){/if}
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if gitDiffPreview}
|
|
||||||
<div class="max-h-52 overflow-auto rounded-lg border border-slate-200 bg-slate-900 p-3 text-xs text-slate-100">
|
|
||||||
<pre class="whitespace-pre-wrap font-mono">{gitDiffPreview}</pre>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||||
@@ -853,111 +712,11 @@
|
|||||||
|
|
||||||
<div class="space-y-4 p-4">
|
<div class="space-y-4 p-4">
|
||||||
{#if activeTab === "resources"}
|
{#if activeTab === "resources"}
|
||||||
{#if dashboard.description}
|
<DashboardLinkedResources
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
{dashboard}
|
||||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
{openDataset}
|
||||||
{$t.dashboard?.overview}
|
{formatDate}
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-slate-100">
|
|
||||||
{#each dashboard.charts as chart}
|
|
||||||
<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>
|
|
||||||
</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"
|
|
||||||
onclick={() => openDataset(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" />
|
|
||||||
</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>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
{#if dashboard.datasets && dashboard.datasets.length > 0}
|
|
||||||
<div class="divide-y divide-slate-100">
|
|
||||||
{#each dashboard.datasets as dataset}
|
|
||||||
<button
|
|
||||||
class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
|
|
||||||
onclick={() => openDataset(dataset.id)}
|
|
||||||
>
|
|
||||||
<div class="min-w-0">
|
|
||||||
<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}
|
|
||||||
</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" />
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="px-4 py-8 text-sm text-slate-500">
|
|
||||||
{$t.dashboard?.no_datasets}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if activeTab === "git-history"}
|
{:else if activeTab === "git-history"}
|
||||||
{#if hasGitRepository() && gitDashboardRef}
|
{#if hasGitRepository() && gitDashboardRef}
|
||||||
<CommitHistory dashboardId={gitDashboardRef} envId={envId || null} />
|
<CommitHistory dashboardId={gitDashboardRef} envId={envId || null} />
|
||||||
@@ -967,87 +726,18 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
<DashboardTaskHistory
|
||||||
<div class="mb-3 flex items-center justify-between">
|
{isTaskHistoryLoading}
|
||||||
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
{taskHistoryError}
|
||||||
{$t.tasks?.recent || "Recent tasks"}
|
{taskHistory}
|
||||||
</h2>
|
{loadTaskHistory}
|
||||||
<button
|
{getValidationStatus}
|
||||||
class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
|
{toTaskTypeLabel}
|
||||||
onclick={loadTaskHistory}
|
{getTaskStatusClasses}
|
||||||
disabled={isTaskHistoryLoading}
|
{getValidationStatusClasses}
|
||||||
>
|
{formatDate}
|
||||||
{$t.common?.refresh || "Refresh"}
|
{openLlmReport}
|
||||||
</button>
|
/>
|
||||||
</div>
|
|
||||||
{#if isTaskHistoryLoading}
|
|
||||||
<div class="space-y-2">
|
|
||||||
{#each Array(4) as _}
|
|
||||||
<div class="h-10 animate-pulse rounded bg-slate-100"></div>
|
|
||||||
{/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>
|
|
||||||
{: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">
|
|
||||||
{$t.tasks?.select_task || "No backup/LLM tasks yet"}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<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-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">
|
|
||||||
<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)}`}>
|
|
||||||
{#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">
|
|
||||||
{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">
|
|
||||||
<div class="flex flex-wrap items-center gap-1">
|
|
||||||
{#if task.plugin_id === "llm_dashboard_validation"}
|
|
||||||
<button
|
|
||||||
class="inline-flex items-center gap-1 rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 hover:bg-indigo-100"
|
|
||||||
onclick={() => openLlmReport(task.id)}
|
|
||||||
>
|
|
||||||
{$t.tasks?.open_llm_report || "LLM report"}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,138 @@
|
|||||||
|
<!-- [DEF:DashboardGitManager:Component] -->
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @COMPLEXITY: 2
|
||||||
|
* @PURPOSE: Git Repository block (status, ahead/behind, changes count, push/pull/sync buttons, and diff preview).
|
||||||
|
* @LAYER: UI
|
||||||
|
*/
|
||||||
|
import { t } from "$lib/i18n";
|
||||||
|
|
||||||
|
let {
|
||||||
|
isGitStatusLoading,
|
||||||
|
gitStatusError,
|
||||||
|
hasGitRepo,
|
||||||
|
gitSyncState,
|
||||||
|
gitStatus,
|
||||||
|
changedChartsCount,
|
||||||
|
changedDatasetsCount,
|
||||||
|
allChangedFiles,
|
||||||
|
runGitSyncAndOpenCommit,
|
||||||
|
isSyncingGit,
|
||||||
|
hasChangesToCommit,
|
||||||
|
loadGitDiffPreview,
|
||||||
|
isGitDiffLoading,
|
||||||
|
runGitPull,
|
||||||
|
isPullingGit,
|
||||||
|
runGitPush,
|
||||||
|
isPushingGit,
|
||||||
|
gitDiffPreview,
|
||||||
|
loadGitStatus,
|
||||||
|
showGitManager = $bindable()
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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 gap-2">
|
||||||
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||||
|
{$t.git?.management || "Git Repository"}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
|
||||||
|
onclick={loadGitStatus}
|
||||||
|
disabled={isGitStatusLoading}
|
||||||
|
>
|
||||||
|
{$t.common?.refresh || "Refresh"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if isGitStatusLoading}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each Array(3) as _}
|
||||||
|
<div class="h-10 animate-pulse rounded bg-slate-100"></div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else if gitStatusError}
|
||||||
|
<div class="rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">
|
||||||
|
{gitStatusError}
|
||||||
|
</div>
|
||||||
|
{:else if !hasGitRepo}
|
||||||
|
<div class="space-y-3 rounded-lg border border-slate-200 bg-slate-50 px-3 py-6 text-sm text-slate-600">
|
||||||
|
<div>
|
||||||
|
{$t.git?.not_linked || "Этот дашборд еще не привязан к Git-репозиторию."}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800"
|
||||||
|
onclick={() => (showGitManager = true)}
|
||||||
|
>
|
||||||
|
Инициализировать Git-репозиторий
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="text-sm text-slate-700">
|
||||||
|
{#if gitSyncState === "CHANGES"}
|
||||||
|
Обнаружены изменения конфигурации в Superset.
|
||||||
|
{:else}
|
||||||
|
Конфигурация Superset совпадает с веткой {gitStatus?.current_branch || "main"}.
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap gap-2 text-xs text-slate-600">
|
||||||
|
<span class="rounded-full bg-slate-100 px-2 py-1">
|
||||||
|
charts: {changedChartsCount}
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-slate-100 px-2 py-1">
|
||||||
|
datasets: {changedDatasetsCount}
|
||||||
|
</span>
|
||||||
|
<span class="rounded-full bg-slate-100 px-2 py-1">
|
||||||
|
files: {allChangedFiles.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-2 md:grid-cols-2">
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
|
||||||
|
onclick={runGitSyncAndOpenCommit}
|
||||||
|
disabled={isSyncingGit || !hasChangesToCommit}
|
||||||
|
>
|
||||||
|
{isSyncingGit ? $t.common?.loading || "Loading..." : "Синхронизировать и зафиксировать"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
||||||
|
onclick={loadGitDiffPreview}
|
||||||
|
disabled={isGitDiffLoading || !hasChangesToCommit}
|
||||||
|
>
|
||||||
|
{isGitDiffLoading ? $t.common?.loading || "Loading..." : "Показать diff"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid gap-2 md:grid-cols-2">
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
||||||
|
onclick={runGitPull}
|
||||||
|
disabled={isPullingGit}
|
||||||
|
>
|
||||||
|
{isPullingGit ? $t.common?.loading || "Loading..." : $t.git?.pull || "Pull"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-60"
|
||||||
|
onclick={runGitPush}
|
||||||
|
disabled={isPushingGit}
|
||||||
|
>
|
||||||
|
{#if isPushingGit}
|
||||||
|
{$t.common?.loading || "Loading..."}
|
||||||
|
{:else}
|
||||||
|
{$t.git?.push || "Push"}{#if gitStatus?.ahead_count > 0} ({gitStatus.ahead_count}){/if}
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if gitDiffPreview}
|
||||||
|
<div class="max-h-52 overflow-auto rounded-lg border border-slate-200 bg-slate-900 p-3 text-xs text-slate-100">
|
||||||
|
<pre class="whitespace-pre-wrap font-mono">{gitDiffPreview}</pre>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<!-- [/DEF:DashboardGitManager:Component] -->
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
<!-- [DEF:DashboardHeader:Component] -->
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @COMPLEXITY: 2
|
||||||
|
* @PURPOSE: Top title area, breadcrumb, git branch selector, and action buttons for dashboard detail.
|
||||||
|
* @LAYER: UI
|
||||||
|
*/
|
||||||
|
import { t } from "$lib/i18n";
|
||||||
|
import Icon from "$lib/ui/Icon.svelte";
|
||||||
|
import BranchSelector from "../../../../components/git/BranchSelector.svelte";
|
||||||
|
|
||||||
|
let {
|
||||||
|
dashboard,
|
||||||
|
resolvedDashboardId,
|
||||||
|
dashboardRef,
|
||||||
|
envId,
|
||||||
|
gitDashboardRef,
|
||||||
|
hasGitRepo,
|
||||||
|
currentBranch = $bindable(),
|
||||||
|
gitMeta,
|
||||||
|
gitStatus,
|
||||||
|
llmReady,
|
||||||
|
isStartingBackup,
|
||||||
|
isStartingValidation,
|
||||||
|
showGitManager = $bindable(),
|
||||||
|
goBack,
|
||||||
|
handleBranchChange,
|
||||||
|
runBackupTask,
|
||||||
|
runLlmValidationTask,
|
||||||
|
loadDashboardPage
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
|
||||||
|
<div class="min-w-0 space-y-2">
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center gap-2 rounded-lg px-2 py-1 text-sm text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900"
|
||||||
|
onclick={goBack}
|
||||||
|
>
|
||||||
|
<Icon name="chevronLeft" size={16} />
|
||||||
|
{$t.common?.back}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center gap-3">
|
||||||
|
<h1 class="text-2xl font-bold text-slate-900">
|
||||||
|
{dashboard?.title || $t.dashboard?.overview}
|
||||||
|
</h1>
|
||||||
|
{#if hasGitRepo && gitDashboardRef}
|
||||||
|
<div class="w-full max-w-xs rounded-lg border border-slate-200 bg-slate-50 px-3 py-2">
|
||||||
|
<BranchSelector
|
||||||
|
dashboardId={gitDashboardRef}
|
||||||
|
{envId}
|
||||||
|
bind:currentBranch
|
||||||
|
onchange={handleBranchChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
|
||||||
|
<span>{$t.common?.id}: {resolvedDashboardId ?? dashboardRef}{#if dashboard?.slug} • {dashboard.slug}{/if}</span>
|
||||||
|
<span class="text-slate-300">|</span>
|
||||||
|
<span class={`inline-flex items-center gap-2 rounded-full border px-2 py-1 text-xs font-semibold ${gitMeta.pillClass}`}>
|
||||||
|
<span class={`h-2 w-2 rounded-full ${gitMeta.dotClass}`}></span>
|
||||||
|
Git: {gitMeta.label}
|
||||||
|
{#if gitStatus?.ahead_count > 0}
|
||||||
|
({gitStatus.ahead_count})
|
||||||
|
{/if}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap items-center gap-2">
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||||
|
onclick={() => (showGitManager = true)}
|
||||||
|
>
|
||||||
|
{$t.git?.management || "Manage Git"}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 transition-colors hover:bg-slate-50"
|
||||||
|
onclick={runBackupTask}
|
||||||
|
disabled={isStartingBackup}
|
||||||
|
>
|
||||||
|
{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'}"
|
||||||
|
onclick={runLlmValidationTask}
|
||||||
|
disabled={isStartingValidation || !llmReady}
|
||||||
|
title={!llmReady ? $t.dashboard?.llm_not_configured || "LLM is not configured" : ""}
|
||||||
|
>
|
||||||
|
{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"
|
||||||
|
onclick={loadDashboardPage}
|
||||||
|
>
|
||||||
|
{$t.common?.refresh}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- [/DEF:DashboardHeader:Component] -->
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
<!-- [DEF:DashboardLinkedResources:Component] -->
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @COMPLEXITY: 2
|
||||||
|
* @PURPOSE: Block for overview, charts table, and datasets list.
|
||||||
|
* @LAYER: UI
|
||||||
|
*/
|
||||||
|
import { t } from "$lib/i18n";
|
||||||
|
import Icon from "$lib/ui/Icon.svelte";
|
||||||
|
|
||||||
|
let {
|
||||||
|
dashboard,
|
||||||
|
openDataset,
|
||||||
|
formatDate
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-slate-100">
|
||||||
|
{#each dashboard.charts as chart}
|
||||||
|
<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>
|
||||||
|
</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"
|
||||||
|
onclick={() => openDataset(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" />
|
||||||
|
</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>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
{#if dashboard.datasets && dashboard.datasets.length > 0}
|
||||||
|
<div class="divide-y divide-slate-100">
|
||||||
|
{#each dashboard.datasets as dataset}
|
||||||
|
<button
|
||||||
|
class="flex w-full items-center justify-between gap-4 px-4 py-3 text-left transition-colors hover:bg-slate-50"
|
||||||
|
onclick={() => openDataset(dataset.id)}
|
||||||
|
>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<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}
|
||||||
|
</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" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="px-4 py-8 text-sm text-slate-500">
|
||||||
|
{$t.dashboard?.no_datasets}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<!-- [/DEF:DashboardLinkedResources:Component] -->
|
||||||
@@ -0,0 +1,105 @@
|
|||||||
|
<!-- [DEF:DashboardTaskHistory:Component] -->
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @COMPLEXITY: 2
|
||||||
|
* @PURPOSE: Block for recent tasks table.
|
||||||
|
* @LAYER: UI
|
||||||
|
*/
|
||||||
|
import { t } from "$lib/i18n";
|
||||||
|
|
||||||
|
let {
|
||||||
|
isTaskHistoryLoading,
|
||||||
|
taskHistoryError,
|
||||||
|
taskHistory,
|
||||||
|
loadTaskHistory,
|
||||||
|
getValidationStatus,
|
||||||
|
toTaskTypeLabel,
|
||||||
|
getTaskStatusClasses,
|
||||||
|
getValidationStatusClasses,
|
||||||
|
formatDate,
|
||||||
|
openLlmReport
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="rounded-xl border border-slate-200 bg-white p-4">
|
||||||
|
<div class="mb-3 flex items-center justify-between">
|
||||||
|
<h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">
|
||||||
|
{$t.tasks?.recent || "Recent tasks"}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
class="rounded-md border border-slate-300 px-2 py-1 text-xs text-slate-700 hover:bg-slate-50"
|
||||||
|
onclick={loadTaskHistory}
|
||||||
|
disabled={isTaskHistoryLoading}
|
||||||
|
>
|
||||||
|
{$t.common?.refresh || "Refresh"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{#if isTaskHistoryLoading}
|
||||||
|
<div class="space-y-2">
|
||||||
|
{#each Array(4) as _}
|
||||||
|
<div class="h-10 animate-pulse rounded bg-slate-100"></div>
|
||||||
|
{/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>
|
||||||
|
{: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">
|
||||||
|
{$t.tasks?.select_task || "No backup/LLM tasks yet"}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<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-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">
|
||||||
|
<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)}`}>
|
||||||
|
{#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">
|
||||||
|
{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">
|
||||||
|
<div class="flex flex-wrap items-center gap-1">
|
||||||
|
{#if task.plugin_id === "llm_dashboard_validation"}
|
||||||
|
<button
|
||||||
|
class="inline-flex items-center gap-1 rounded-md border border-indigo-300 bg-indigo-50 px-2 py-1 text-xs text-indigo-700 hover:bg-indigo-100"
|
||||||
|
onclick={() => openLlmReport(task.id)}
|
||||||
|
>
|
||||||
|
{$t.tasks?.open_llm_report || "LLM report"}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<!-- [/DEF:DashboardTaskHistory:Component] -->
|
||||||
Reference in New Issue
Block a user