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

Мультиязночность + причесывание css

Browse Source
This commit is contained in:
busya
2026-01-23 17:53:46 +03:00
parent c9a53578fd
commit 343f2e29f5
23 changed files with 79628 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79101
backend/logs/app.log.1 Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
backend/tasks.db
View File

Binary file not shown.

85
frontend/src/components/DashboardGrid.svelte
View File

@@ -12,6 +12,8 @@
// [SECTION: IMPORTS] // [SECTION: IMPORTS]
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import type { DashboardMetadata } from '../types/dashboard'; import type { DashboardMetadata } from '../types/dashboard';
import { t } from '../lib/i18n';
import { Button, Input } from '../lib/ui';
import GitManager from './git/GitManager.svelte'; import GitManager from './git/GitManager.svelte';
// [/SECTION] // [/SECTION]
@@ -143,64 +145,66 @@
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="dashboard-grid"> <div class="dashboard-grid">
<!-- Filter Input --> <!-- Filter Input -->
<div class="mb-4"> <div class="mb-6">
<input <Input
type="text"
bind:value={filterText} bind:value={filterText}
placeholder="Search dashboards..." placeholder={$t.dashboard.search}
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
/> />
</div> </div>
<!-- Grid/Table --> <!-- Grid/Table -->
<div class="overflow-x-auto"> <div class="overflow-x-auto rounded-lg border border-gray-200">
<table class="min-w-full bg-white border border-gray-300"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th class="px-4 py-2 border-b"> <th class="px-6 py-3 text-left">
<input <input
type="checkbox" type="checkbox"
checked={allSelected} checked={allSelected}
indeterminate={someSelected && !allSelected} indeterminate={someSelected && !allSelected}
on:change={(e) => handleSelectAll((e.target as HTMLInputElement).checked)} on:change={(e) => handleSelectAll((e.target as HTMLInputElement).checked)}
class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/> />
</th> </th>
<th class="px-4 py-2 border-b cursor-pointer" on:click={() => handleSort('title')}> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 transition-colors" on:click={() => handleSort('title')}>
Title {sortColumn === 'title' ? (sortDirection === 'asc' ? '↑' : '↓') : ''} {$t.dashboard.title} {sortColumn === 'title' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
</th> </th>
<th class="px-4 py-2 border-b cursor-pointer" on:click={() => handleSort('last_modified')}> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 transition-colors" on:click={() => handleSort('last_modified')}>
Last Modified {sortColumn === 'last_modified' ? (sortDirection === 'asc' ? '↑' : '↓') : ''} {$t.dashboard.last_modified} {sortColumn === 'last_modified' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
</th> </th>
<th class="px-4 py-2 border-b cursor-pointer" on:click={() => handleSort('status')}> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:text-gray-700 transition-colors" on:click={() => handleSort('status')}>
Status {sortColumn === 'status' ? (sortDirection === 'asc' ? '↑' : '↓') : ''} {$t.dashboard.status} {sortColumn === 'status' ? (sortDirection === 'asc' ? '↑' : '↓') : ''}
</th> </th>
<th class="px-4 py-2 border-b">Git</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.dashboard.git}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="bg-white divide-y divide-gray-200">
{#each paginatedDashboards as dashboard (dashboard.id)} {#each paginatedDashboards as dashboard (dashboard.id)}
<tr class="hover:bg-gray-50"> <tr class="hover:bg-gray-50 transition-colors">
<td class="px-4 py-2 border-b"> <td class="px-6 py-4 whitespace-nowrap">
<input <input
type="checkbox" type="checkbox"
checked={selectedIds.includes(dashboard.id)} checked={selectedIds.includes(dashboard.id)}
on:change={(e) => handleSelectionChange(dashboard.id, (e.target as HTMLInputElement).checked)} on:change={(e) => handleSelectionChange(dashboard.id, (e.target as HTMLInputElement).checked)}
class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
/> />
</td> </td>
<td class="px-4 py-2 border-b">{dashboard.title}</td> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{dashboard.title}</td>
<td class="px-4 py-2 border-b">{new Date(dashboard.last_modified).toLocaleDateString()}</td> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{new Date(dashboard.last_modified).toLocaleDateString()}</td>
<td class="px-4 py-2 border-b"> <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
<span class="px-2 py-1 text-xs font-medium rounded-full {dashboard.status === 'published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}"> <span class="px-2 py-1 text-xs font-medium rounded-full {dashboard.status === 'published' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}">
{dashboard.status} {dashboard.status}
</span> </span>
</td> </td>
<td class="px-4 py-2 border-b"> <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
<button <Button
variant="ghost"
size="sm"
on:click={() => openGit(dashboard)} on:click={() => openGit(dashboard)}
class="text-indigo-600 hover:text-indigo-900 text-sm font-medium" class="text-blue-600 hover:text-blue-900"
> >
Manage Git {$t.git.manage}
</button> </Button>
</td> </td>
</tr> </tr>
{/each} {/each}
@@ -209,25 +213,30 @@
</div> </div>
<!-- Pagination Controls --> <!-- Pagination Controls -->
<div class="flex items-center justify-between mt-4"> <div class="flex items-center justify-between mt-6">
<div class="text-sm text-gray-700"> <div class="text-sm text-gray-500">
Showing {currentPage * pageSize + 1} to {Math.min((currentPage + 1) * pageSize, sortedDashboards.length)} of {sortedDashboards.length} dashboards {($t.dashboard?.showing || "")
.replace('{start}', (currentPage * pageSize + 1).toString())
.replace('{end}', Math.min((currentPage + 1) * pageSize, sortedDashboards.length).toString())
.replace('{total}', sortedDashboards.length.toString())}
</div> </div>
<div class="flex space-x-2"> <div class="flex gap-2">
<button <Button
class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" variant="secondary"
size="sm"
disabled={currentPage === 0} disabled={currentPage === 0}
on:click={() => goToPage(currentPage - 1)} on:click={() => goToPage(currentPage - 1)}
> >
Previous {$t.dashboard.previous}
</button> </Button>
<button <Button
class="px-3 py-1 text-sm border border-gray-300 rounded-md hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" variant="secondary"
size="sm"
disabled={currentPage >= totalPages - 1} disabled={currentPage >= totalPages - 1}
on:click={() => goToPage(currentPage + 1)} on:click={() => goToPage(currentPage + 1)}
> >
Next {$t.dashboard.next}
</button> </Button>
</div> </div>
</div> </div>
</div> </div>

33
frontend/src/components/Navbar.svelte
View File

@@ -7,61 +7,64 @@
--> -->
<script> <script>
import { page } from '$app/stores'; import { page } from '$app/stores';
import { t } from '$lib/i18n';
import { LanguageSwitcher } from '$lib/ui';
</script> </script>
<header class="bg-white shadow-md p-4 flex justify-between items-center"> <header class="bg-white shadow-md p-4 flex justify-between items-center">
<a <a
href="/" href="/"
class="text-3xl font-bold text-gray-800 focus:outline-none" class="text-2xl font-bold text-gray-800 focus:outline-none"
> >
Superset Tools Superset Tools
</a> </a>
<nav class="space-x-4"> <nav class="flex items-center space-x-4">
<a <a
href="/" href="/"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}" class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
> >
Dashboard {$t.nav.dashboard}
</a> </a>
<a <a
href="/migration" href="/migration"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/migration') ? 'text-blue-600 border-b-2 border-blue-600' : ''}" class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/migration') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
> >
Migration {$t.nav.migration}
</a> </a>
<a <a
href="/git" href="/git"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/git') ? 'text-blue-600 border-b-2 border-blue-600' : ''}" class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/git') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
> >
Git {$t.nav.git}
</a> </a>
<a <a
href="/tasks" href="/tasks"
class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/tasks') ? 'text-blue-600 border-b-2 border-blue-600' : ''}" class="text-gray-600 hover:text-blue-600 font-medium {$page.url.pathname.startsWith('/tasks') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
> >
Tasks {$t.nav.tasks}
</a> </a>
<div class="relative inline-block group"> <div class="relative inline-block group">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/tools') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"> <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/tools') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
Tools {$t.nav.tools}
</button> </button>
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0"> <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
<a href="/tools/search" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Dataset Search</a> <a href="/tools/search" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_search}</a>
<a href="/tools/mapper" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Dataset Mapper</a> <a href="/tools/mapper" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_mapper}</a>
<a href="/tools/debug" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">System Debug</a> <a href="/tools/debug" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.tools_debug}</a>
</div> </div>
</div> </div>
<div class="relative inline-block group"> <div class="relative inline-block group">
<button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"> <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {$page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
Settings {$t.nav.settings}
</button> </button>
<div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0"> <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
<a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">General Settings</a> <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_general}</a>
<a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Connections</a> <a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_connections}</a>
<a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Git Integration</a> <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_git}</a>
<a href="/settings/environments" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Environments</a> <a href="/settings/environments" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_environments}</a>
</div> </div>
</div> </div>
<LanguageSwitcher />
</nav> </nav>
</header> </header>
<!-- [/DEF:Navbar:Component] --> <!-- [/DEF:Navbar:Component] -->

7
frontend/src/components/TaskList.svelte
View File

@@ -9,6 +9,7 @@
<script lang="ts"> <script lang="ts">
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { formatDistanceToNow } from 'date-fns'; import { formatDistanceToNow } from 'date-fns';
import { t } from '../lib/i18n';
export let tasks: Array<any> = []; export let tasks: Array<any> = [];
export let loading: boolean = false; export let loading: boolean = false;
@@ -58,9 +59,9 @@
<div class="bg-white shadow overflow-hidden sm:rounded-md"> <div class="bg-white shadow overflow-hidden sm:rounded-md">
{#if loading && tasks.length === 0} {#if loading && tasks.length === 0}
<div class="p-4 text-center text-gray-500">Loading tasks...</div> <div class="p-4 text-center text-gray-500">{$t.tasks?.loading || 'Loading...'}</div>
{:else if tasks.length === 0} {:else if tasks.length === 0}
<div class="p-4 text-center text-gray-500">No tasks found.</div> <div class="p-4 text-center text-gray-500">{$t.tasks?.no_tasks || 'No tasks found.'}</div>
{:else} {:else}
<ul class="divide-y divide-gray-200"> <ul class="divide-y divide-gray-200">
{#each tasks as task (task.id)} {#each tasks as task (task.id)}
@@ -94,7 +95,7 @@
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
</svg> </svg>
<p> <p>
Started {formatTime(task.started_at)} {($t.tasks?.started || "").replace('{time}', formatTime(task.started_at))}
</p> </p>
</div> </div>
</div> </div>

28
frontend/src/components/TaskLogViewer.svelte
View File

@@ -8,6 +8,8 @@
<script> <script>
import { createEventDispatcher, onMount, onDestroy } from 'svelte'; import { createEventDispatcher, onMount, onDestroy } from 'svelte';
import { getTaskLogs } from '../services/taskService.js'; import { getTaskLogs } from '../services/taskService.js';
import { t } from '../lib/i18n';
import { Button } from '../lib/ui';
export let show = false; export let show = false;
export let inline = false; export let inline = false;
@@ -143,20 +145,20 @@
<div class="flex flex-col h-full w-full p-4"> <div class="flex flex-col h-full w-full p-4">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900"> <h3 class="text-lg font-medium text-gray-900">
Task Logs <span class="text-sm text-gray-500 font-normal">({taskId})</span> {$t.tasks?.logs_title} <span class="text-sm text-gray-500 font-normal">({taskId})</span>
</h3> </h3>
<button on:click={fetchLogs} class="text-sm text-indigo-600 hover:text-indigo-900">Refresh</button> <Button variant="ghost" size="sm" on:click={fetchLogs} class="text-blue-600">{$t.tasks?.refresh}</Button>
</div> </div>
<div class="flex-1 border rounded-md bg-gray-50 p-4 overflow-y-auto font-mono text-sm" <div class="flex-1 border rounded-md bg-gray-50 p-4 overflow-y-auto font-mono text-sm"
bind:this={logContainer} bind:this={logContainer}
on:scroll={handleScroll}> on:scroll={handleScroll}>
{#if loading && logs.length === 0} {#if loading && logs.length === 0}
<p class="text-gray-500 text-center">Loading logs...</p> <p class="text-gray-500 text-center">{$t.tasks?.loading}</p>
{:else if error} {:else if error}
<p class="text-red-500 text-center">{error}</p> <p class="text-red-500 text-center">{error}</p>
{:else if logs.length === 0} {:else if logs.length === 0}
<p class="text-gray-500 text-center">No logs available.</p> <p class="text-gray-500 text-center">{$t.tasks?.no_logs}</p>
{:else} {:else}
{#each logs as log} {#each logs as log}
<div class="mb-1 hover:bg-gray-100 p-1 rounded"> <div class="mb-1 hover:bg-gray-100 p-1 rounded">
@@ -192,19 +194,19 @@
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
<h3 class="text-lg leading-6 font-medium text-gray-900 flex justify-between items-center" id="modal-title"> <h3 class="text-lg leading-6 font-medium text-gray-900 flex justify-between items-center" id="modal-title">
<span>Task Logs <span class="text-sm text-gray-500 font-normal">({taskId})</span></span> <span>{$t.tasks.logs_title} <span class="text-sm text-gray-500 font-normal">({taskId})</span></span>
<button on:click={fetchLogs} class="text-sm text-indigo-600 hover:text-indigo-900">Refresh</button> <Button variant="ghost" size="sm" on:click={fetchLogs} class="text-blue-600">{$t.tasks.refresh}</Button>
</h3> </h3>
<div class="mt-4 border rounded-md bg-gray-50 p-4 h-96 overflow-y-auto font-mono text-sm" <div class="mt-4 border rounded-md bg-gray-50 p-4 h-96 overflow-y-auto font-mono text-sm"
bind:this={logContainer} bind:this={logContainer}
on:scroll={handleScroll}> on:scroll={handleScroll}>
{#if loading && logs.length === 0} {#if loading && logs.length === 0}
<p class="text-gray-500 text-center">Loading logs...</p> <p class="text-gray-500 text-center">{$t.tasks.loading}</p>
{:else if error} {:else if error}
<p class="text-red-500 text-center">{error}</p> <p class="text-red-500 text-center">{error}</p>
{:else if logs.length === 0} {:else if logs.length === 0}
<p class="text-gray-500 text-center">No logs available.</p> <p class="text-gray-500 text-center">{$t.tasks.no_logs}</p>
{:else} {:else}
{#each logs as log} {#each logs as log}
<div class="mb-1 hover:bg-gray-100 p-1 rounded"> <div class="mb-1 hover:bg-gray-100 p-1 rounded">
@@ -230,13 +232,9 @@
</div> </div>
</div> </div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button <Button variant="secondary" on:click={close}>
type="button" {$t.common.cancel}
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" </Button>
on:click={close}
>
Close
</button>
</div> </div>
</div> </div>
</div> </div>

66
frontend/src/components/git/BranchSelector.svelte
View File

@@ -14,6 +14,8 @@
import { onMount, createEventDispatcher } from 'svelte'; import { onMount, createEventDispatcher } from 'svelte';
import { gitService } from '../../services/gitService'; import { gitService } from '../../services/gitService';
import { addToast as toast } from '../../lib/toasts.js'; import { addToast as toast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Select, Input } from '../../lib/ui';
// [/SECTION] // [/SECTION]
// [SECTION: PROPS] // [SECTION: PROPS]
@@ -107,61 +109,55 @@
</script> </script>
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="space-y-2"> <div class="space-y-3">
<div class="flex items-center space-x-2"> <div class="flex items-center gap-3">
<div class="relative"> <div class="flex-grow">
<select <Select
value={currentBranch} bind:value={currentBranch}
on:change={handleSelect} on:change={handleSelect}
disabled={loading} disabled={loading}
class="bg-white border rounded px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" options={branches.map(b => ({ value: b.name, label: b.name }))}
> />
{#each branches as branch}
<option value={branch.name}>{branch.name}</option>
{/each}
</select>
{#if loading}
<span class="absolute -right-6 top-1">
<svg class="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</span>
{/if}
</div> </div>
<button <Button
variant="ghost"
size="sm"
on:click={() => showCreate = !showCreate} on:click={() => showCreate = !showCreate}
disabled={loading} disabled={loading}
class="text-blue-600 hover:text-blue-800 text-sm font-medium disabled:opacity-50" class="text-blue-600"
> >
+ New Branch + {$t.git.new_branch}
</button> </Button>
</div> </div>
{#if showCreate} {#if showCreate}
<div class="flex items-center space-x-1 bg-gray-50 p-2 rounded border border-dashed"> <div class="flex items-end gap-2 bg-gray-50 p-3 rounded-lg border border-dashed border-gray-200">
<input <div class="flex-grow">
type="text" <Input
bind:value={newBranchName} bind:value={newBranchName}
placeholder="branch-name" placeholder="branch-name"
disabled={loading} disabled={loading}
class="border rounded px-2 py-1 text-sm w-full max-w-[150px]"
/> />
<button </div>
<Button
variant="primary"
size="sm"
on:click={handleCreate} on:click={handleCreate}
disabled={loading || !newBranchName} disabled={loading || !newBranchName}
class="bg-green-600 text-white px-3 py-1 rounded text-xs font-medium hover:bg-green-700 disabled:opacity-50" isLoading={loading}
class="bg-green-600 hover:bg-green-700"
> >
{loading ? '...' : 'Create'} {$t.git.create}
</button> </Button>
<button <Button
variant="ghost"
size="sm"
on:click={() => showCreate = false} on:click={() => showCreate = false}
disabled={loading} disabled={loading}
class="text-gray-500 hover:text-gray-700 text-xs px-2 py-1 disabled:opacity-50"
> >
Cancel {$t.common.cancel}
</button> </Button>
</div> </div>
{/if} {/if}
</div> </div>

24
frontend/src/components/git/CommitHistory.svelte
View File

@@ -11,6 +11,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { gitService } from '../../services/gitService'; import { gitService } from '../../services/gitService';
import { addToast as toast } from '../../lib/toasts.js'; import { addToast as toast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button } from '../../lib/ui';
// [/SECTION] // [/SECTION]
// [SECTION: PROPS] // [SECTION: PROPS]
@@ -53,22 +55,22 @@
</script> </script>
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="mt-6"> <div class="mt-2">
<h3 class="text-lg font-semibold mb-4 flex justify-between items-center"> <div class="flex justify-between items-center mb-6">
Commit History <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">
<button on:click={loadHistory} class="text-sm text-blue-600 hover:underline">Refresh</button> {$t.git.history}
</h3> </h3>
<Button variant="ghost" size="sm" on:click={loadHistory} class="text-blue-600">
{$t.git.refresh}
</Button>
</div>
{#if loading} {#if loading}
<div class="flex items-center space-x-2 text-gray-500"> <div class="flex items-center justify-center py-12">
<svg class="animate-spin h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Loading history...</span>
</div> </div>
{:else if history.length === 0} {:else if history.length === 0}
<p class="text-gray-500 italic">No commits yet.</p> <p class="text-gray-500 italic text-center py-12">{$t.git.no_commits}</p>
{:else} {:else}
<div class="space-y-3 max-h-96 overflow-y-auto pr-2"> <div class="space-y-3 max-h-96 overflow-y-auto pr-2">
{#each history as commit} {#each history as commit}

112
frontend/src/components/git/GitManager.svelte
View File

@@ -16,6 +16,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { gitService } from '../../services/gitService'; import { gitService } from '../../services/gitService';
import { addToast as toast } from '../../lib/toasts.js'; import { addToast as toast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Card, PageHeader, Select, Input } from '../../lib/ui';
import BranchSelector from './BranchSelector.svelte'; import BranchSelector from './BranchSelector.svelte';
import CommitModal from './CommitModal.svelte'; import CommitModal from './CommitModal.svelte';
import CommitHistory from './CommitHistory.svelte'; import CommitHistory from './CommitHistory.svelte';
@@ -143,17 +145,16 @@
{#if show} {#if show}
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div class="bg-white p-6 rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto"> <div class="bg-white p-6 rounded-lg shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-6 border-b pb-4"> <PageHeader title="{$t.git.management}: {dashboardTitle}">
<div> <div slot="subtitle" class="text-sm text-gray-500">ID: {dashboardId}</div>
<h2 class="text-2xl font-bold">Git Management: {dashboardTitle}</h2> <div slot="actions">
<p class="text-sm text-gray-500">ID: {dashboardId}</p> <button on:click={() => show = false} class="text-gray-400 hover:text-gray-600 transition-colors">
</div>
<button on:click={() => show = false} class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
</PageHeader>
{#if checkingStatus} {#if checkingStatus}
<div class="flex justify-center py-12"> <div class="flex justify-center py-12">
@@ -161,95 +162,94 @@
</div> </div>
{:else if !initialized} {:else if !initialized}
<div class="max-w-md mx-auto py-8"> <div class="max-w-md mx-auto py-8">
<div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6"> <Card>
<p class="text-sm text-blue-700"> <p class="text-sm text-gray-600 mb-6">
This dashboard is not yet linked to a Git repository. {$t.git.not_linked}
Please configure the repository details below.
</p> </p>
</div>
<div class="space-y-4"> <div class="space-y-6">
<div> <Select
<label class="block text-sm font-medium text-gray-700">Git Server</label> label={$t.git.server}
<select bind:value={selectedConfigId} class="mt-1 block w-full border rounded p-2"> bind:value={selectedConfigId}
{#each configs as config} options={configs.map(c => ({ value: c.id, label: `${c.name} (${c.provider})` }))}
<option value={config.id}>{config.name} ({config.provider})</option> />
{/each}
</select>
{#if configs.length === 0} {#if configs.length === 0}
<p class="text-xs text-red-500 mt-1">No Git servers configured. Go to Settings -> Git to add one.</p> <p class="text-xs text-red-500 -mt-4">No Git servers configured. Go to Settings -> Git to add one.</p>
{/if} {/if}
</div>
<div> <Input
<label class="block text-sm font-medium text-gray-700">Remote Repository URL</label> label={$t.git.remote_url}
<input
type="text"
bind:value={remoteUrl} bind:value={remoteUrl}
placeholder="https://github.com/org/repo.git" placeholder="https://github.com/org/repo.git"
class="mt-1 block w-full border rounded p-2"
/> />
</div>
<button <Button
on:click={handleInit} on:click={handleInit}
disabled={loading || configs.length === 0} disabled={loading || configs.length === 0}
class="w-full bg-blue-600 text-white py-2 rounded font-medium hover:bg-blue-700 disabled:opacity-50" isLoading={loading}
class="w-full"
> >
{loading ? 'Initializing...' : 'Initialize Repository'} {$t.git.init_repo}
</button> </Button>
</div> </div>
</Card>
</div> </div>
{:else} {:else}
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Left Column: Controls --> <!-- Left Column: Controls -->
<div class="md:col-span-1 space-y-6"> <div class="md:col-span-1 space-y-6">
<section> <section>
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Branch</h3> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.branch}</h3>
<BranchSelector {dashboardId} bind:currentBranch /> <BranchSelector {dashboardId} bind:currentBranch />
</section> </section>
<section class="space-y-2"> <section class="space-y-3">
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Actions</h3> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.actions}</h3>
<button <Button
variant="secondary"
on:click={handleSync} on:click={handleSync}
disabled={loading} disabled={loading}
class="w-full flex items-center justify-center px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium transition" class="w-full"
> >
Sync from Superset {$t.git.sync}
</button> </Button>
<button <Button
on:click={() => showCommitModal = true} on:click={() => showCommitModal = true}
disabled={loading} disabled={loading}
class="w-full flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm font-medium transition" class="w-full"
> >
Commit Changes {$t.git.commit}
</button> </Button>
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-3">
<button <Button
variant="ghost"
on:click={handlePull} on:click={handlePull}
disabled={loading} disabled={loading}
class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition" class="border border-gray-200"
> >
Pull {$t.git.pull}
</button> </Button>
<button <Button
variant="ghost"
on:click={handlePush} on:click={handlePush}
disabled={loading} disabled={loading}
class="flex items-center justify-center px-4 py-2 border hover:bg-gray-50 rounded text-sm font-medium transition" class="border border-gray-200"
> >
Push {$t.git.push}
</button> </Button>
</div> </div>
</section> </section>
<section> <section>
<h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Deployment</h3> <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">{$t.git.deployment}</h3>
<button <Button
variant="primary"
on:click={() => showDeployModal = true} on:click={() => showDeployModal = true}
disabled={loading} disabled={loading}
class="w-full flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm font-medium transition" class="w-full bg-green-600 hover:bg-green-700 focus-visible:ring-green-500"
> >
Deploy to Environment {$t.git.deploy}
</button> </Button>
</section> </section>
</div> </div>

59
frontend/src/components/tools/ConnectionForm.svelte
View File

@@ -10,6 +10,8 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { createConnection } from '../../services/connectionService.js'; import { createConnection } from '../../services/connectionService.js';
import { addToast } from '../../lib/toasts.js'; import { addToast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Input, Card } from '../../lib/ui';
// [/SECTION] // [/SECTION]
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -17,7 +19,7 @@
let name = ''; let name = '';
let type = 'postgres'; let type = 'postgres';
let host = ''; let host = '';
let port = 5432; let port = "5432";
let database = ''; let database = '';
let username = ''; let username = '';
let password = ''; let password = '';
@@ -36,7 +38,7 @@
isSubmitting = true; isSubmitting = true;
try { try {
const newConnection = await createConnection({ const newConnection = await createConnection({
name, type, host, port, database, username, password name, type, host, port: Number(port), database, username, password
}); });
addToast('Connection created successfully', 'success'); addToast('Connection created successfully', 'success');
dispatch('success', newConnection); dispatch('success', newConnection);
@@ -57,7 +59,7 @@
function resetForm() { function resetForm() {
name = ''; name = '';
host = ''; host = '';
port = 5432; port = "5432";
database = ''; database = '';
username = ''; username = '';
password = ''; password = '';
@@ -66,43 +68,28 @@
</script> </script>
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200"> <Card title={$t.connections?.add_new || "Add New Connection"}>
<h3 class="text-lg font-medium text-gray-900 mb-4">Add New Connection</h3> <form on:submit|preventDefault={handleSubmit} class="space-y-6">
<form on:submit|preventDefault={handleSubmit} class="space-y-4"> <Input label={$t.connections?.name || "Connection Name"} bind:value={name} placeholder="e.g. Production DWH" />
<div>
<label for="conn-name" class="block text-sm font-medium text-gray-700">Connection Name</label> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<input type="text" id="conn-name" bind:value={name} placeholder="e.g. Production DWH" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" /> <Input label={$t.connections?.host || "Host"} bind:value={host} placeholder="10.0.0.1" />
</div> <Input label={$t.connections?.port || "Port"} type="number" bind:value={port} />
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="conn-host" class="block text-sm font-medium text-gray-700">Host</label>
<input type="text" id="conn-host" bind:value={host} placeholder="10.0.0.1" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div>
<label for="conn-port" class="block text-sm font-medium text-gray-700">Port</label>
<input type="number" id="conn-port" bind:value={port} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
</div>
<div>
<label for="conn-db" class="block text-sm font-medium text-gray-700">Database Name</label>
<input type="text" id="conn-db" bind:value={database} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="conn-user" class="block text-sm font-medium text-gray-700">Username</label>
<input type="text" id="conn-user" bind:value={username} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div>
<label for="conn-pass" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="conn-pass" bind:value={password} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div> </div>
<Input label={$t.connections?.db_name || "Database Name"} bind:value={database} />
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<Input label={$t.connections?.user || "Username"} bind:value={username} />
<Input label={$t.connections?.pass || "Password"} type="password" bind:value={password} />
</div> </div>
<div class="flex justify-end pt-2"> <div class="flex justify-end pt-2">
<button type="submit" disabled={isSubmitting} class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"> <Button type="submit" disabled={isSubmitting} isLoading={isSubmitting}>
{isSubmitting ? 'Creating...' : 'Create Connection'} {$t.connections?.create || "Create Connection"}
</button> </Button>
</div> </div>
</form> </form>
</div> </Card>
<!-- [/SECTION] --> <!-- [/SECTION] -->
<!-- [/DEF:ConnectionForm:Component] --> <!-- [/DEF:ConnectionForm:Component] -->

30
frontend/src/components/tools/ConnectionList.svelte
View File

@@ -10,6 +10,8 @@
import { onMount, createEventDispatcher } from 'svelte'; import { onMount, createEventDispatcher } from 'svelte';
import { getConnections, deleteConnection } from '../../services/connectionService.js'; import { getConnections, deleteConnection } from '../../services/connectionService.js';
import { addToast } from '../../lib/toasts.js'; import { addToast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Card } from '../../lib/ui';
// [/SECTION] // [/SECTION]
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -57,32 +59,30 @@
</script> </script>
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="bg-white shadow overflow-hidden sm:rounded-md border border-gray-200"> <Card title={$t.connections?.saved || "Saved Connections"} padding="none">
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200"> <ul class="divide-y divide-gray-100">
<h3 class="text-lg leading-6 font-medium text-gray-900">Saved Connections</h3>
</div>
<ul class="divide-y divide-gray-200">
{#if isLoading} {#if isLoading}
<li class="p-4 text-center text-gray-500">Loading...</li> <li class="p-6 text-center text-gray-500">{$t.common.loading}</li>
{:else if connections.length === 0} {:else if connections.length === 0}
<li class="p-8 text-center text-gray-500 italic">No connections saved yet.</li> <li class="p-12 text-center text-gray-500 italic">{$t.connections?.no_saved || "No connections saved yet."}</li>
{:else} {:else}
{#each connections as conn} {#each connections as conn}
<li class="p-4 flex items-center justify-between hover:bg-gray-50"> <li class="p-6 flex items-center justify-between hover:bg-gray-50 transition-colors">
<div> <div>
<div class="text-sm font-medium text-indigo-600 truncate">{conn.name}</div> <div class="text-sm font-medium text-blue-600 truncate">{conn.name}</div>
<div class="text-xs text-gray-500">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div> <div class="text-xs text-gray-400 mt-1 font-mono">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
</div> </div>
<button <Button
variant="danger"
size="sm"
on:click={() => handleDelete(conn.id)} on:click={() => handleDelete(conn.id)}
class="ml-2 inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
> >
Delete {$t.connections?.delete || "Delete"}
</button> </Button>
</li> </li>
{/each} {/each}
{/if} {/if}
</ul> </ul>
</div> </Card>
<!-- [/SECTION] --> <!-- [/SECTION] -->
<!-- [/DEF:ConnectionList:Component] --> <!-- [/DEF:ConnectionList:Component] -->

37
frontend/src/routes/+page.svelte
View File

@@ -5,6 +5,8 @@
import { api } from '../lib/api.js'; import { api } from '../lib/api.js';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { t } from '$lib/i18n';
import { Button, Card, PageHeader } from '$lib/ui';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
@@ -55,34 +57,43 @@
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
{#if $selectedTask} {#if $selectedTask}
<TaskRunner /> <TaskRunner />
<button on:click={() => selectedTask.set(null)} class="mt-4 bg-blue-500 text-white p-2 rounded"> <div class="mt-4">
Back to Task List <Button variant="primary" on:click={() => selectedTask.set(null)}>
</button> {$t.common.cancel}
</Button>
</div>
{:else if $selectedPlugin} {:else if $selectedPlugin}
<h2 class="text-2xl font-bold mb-4">{$selectedPlugin.name}</h2> <PageHeader title={$selectedPlugin.name} />
<Card>
<DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} /> <DynamicForm schema={$selectedPlugin.schema} on:submit={handleFormSubmit} />
<button on:click={() => selectedPlugin.set(null)} class="mt-4 bg-gray-500 text-white p-2 rounded"> </Card>
Back to Dashboard <div class="mt-4">
</button> <Button variant="secondary" on:click={() => selectedPlugin.set(null)}>
{$t.common.cancel}
</Button>
</div>
{:else} {:else}
<h1 class="text-2xl font-bold mb-4">Available Tools</h1> <PageHeader title={$t.nav.dashboard} />
{#if data.error} {#if data.error}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"> <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
{data.error} {data.error}
</div> </div>
{/if} {/if}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each data.plugins as plugin} {#each data.plugins as plugin}
<div <div
class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
on:click={() => selectPlugin(plugin)} on:click={() => selectPlugin(plugin)}
role="button" role="button"
tabindex="0" tabindex="0"
on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)} on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
class="cursor-pointer transition-transform hover:scale-[1.02]"
> >
<h2 class="text-xl font-semibold">{plugin.name}</h2> <Card title={plugin.name}>
<p class="text-gray-600">{plugin.description}</p> <p class="text-gray-600 mb-4">{plugin.description}</p>
<span class="text-sm text-gray-400">v{plugin.version}</span> <span class="text-xs font-mono text-gray-400 bg-gray-50 px-2 py-1 rounded">v{plugin.version}</span>
</Card>
</div> </div>
{/each} {/each}
</div> </div>

27
frontend/src/routes/git/+page.svelte
View File

@@ -4,6 +4,8 @@
import DashboardGrid from '../../components/DashboardGrid.svelte'; import DashboardGrid from '../../components/DashboardGrid.svelte';
import { addToast as toast } from '../../lib/toasts.js'; import { addToast as toast } from '../../lib/toasts.js';
import type { DashboardMetadata } from '../../types/dashboard'; import type { DashboardMetadata } from '../../types/dashboard';
import { t } from '$lib/i18n';
import { Button, Card, PageHeader, Select } from '$lib/ui';
let environments: any[] = []; let environments: any[] = [];
let selectedEnvId = ""; let selectedEnvId = "";
@@ -50,29 +52,22 @@
</script> </script>
<div class="max-w-6xl mx-auto p-6"> <div class="max-w-6xl mx-auto p-6">
<div class="flex justify-between items-center mb-6"> <PageHeader title="Git Dashboard Management">
<h1 class="text-2xl font-bold text-gray-800">Git Dashboard Management</h1> <div slot="actions" class="flex items-center space-x-4">
<div class="flex items-center space-x-4"> <Select
<label for="env-select" class="text-sm font-medium text-gray-700">Environment:</label> label="Environment"
<select
id="env-select"
bind:value={selectedEnvId} bind:value={selectedEnvId}
class="border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border bg-white" options={environments.map(e => ({ value: e.id, label: e.name }))}
> />
{#each environments as env}
<option value={env.id}>{env.name}</option>
{/each}
</select>
</div>
</div> </div>
</PageHeader>
{#if loading} {#if loading}
<div class="flex justify-center py-12"> <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 class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div> </div>
{:else} {:else}
<div class="bg-white rounded-lg shadow p-6"> <Card title="Select Dashboard to Manage">
<h2 class="text-lg font-medium mb-4">Select Dashboard to Manage</h2>
{#if fetchingDashboards} {#if fetchingDashboards}
<p class="text-gray-500">Loading dashboards...</p> <p class="text-gray-500">Loading dashboards...</p>
{:else if dashboards.length > 0} {:else if dashboards.length > 0}
@@ -80,7 +75,7 @@
{:else} {:else}
<p class="text-gray-500 italic">No dashboards found in this environment.</p> <p class="text-gray-500 italic">No dashboards found in this environment.</p>
{/if} {/if}
</div> </Card>
{/if} {/if}
</div> </div>
<!-- [/DEF:GitDashboardPage:Component] --> <!-- [/DEF:GitDashboardPage:Component] -->

20
frontend/src/routes/migration/+page.svelte
View File

@@ -21,6 +21,8 @@
import { selectedTask } from '../../lib/stores.js'; import { selectedTask } from '../../lib/stores.js';
import { resumeTask } from '../../services/taskService.js'; import { resumeTask } from '../../services/taskService.js';
import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard'; import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard';
import { t } from '$lib/i18n';
import { Button, Card, PageHeader } from '$lib/ui';
// [/SECTION] // [/SECTION]
// [SECTION: STATE] // [SECTION: STATE]
@@ -294,19 +296,18 @@
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="max-w-4xl mx-auto p-6"> <div class="max-w-4xl mx-auto p-6">
<h1 class="text-2xl font-bold mb-6">Migration Dashboard</h1> <PageHeader title={$t.nav.migration} />
<TaskHistory on:viewLogs={handleViewLogs} /> <TaskHistory on:viewLogs={handleViewLogs} />
{#if $selectedTask} {#if $selectedTask}
<div class="mt-6"> <div class="mt-6">
<TaskRunner /> <TaskRunner />
<button <div class="mt-4">
on:click={() => selectedTask.set(null)} <Button variant="secondary" on:click={() => selectedTask.set(null)}>
class="mt-4 inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" {$t.common.cancel}
> </Button>
Back to New Migration </div>
</button>
</div> </div>
{:else} {:else}
{#if loading} {#if loading}
@@ -383,13 +384,12 @@
</div> </div>
{/if} {/if}
<button <Button
on:click={startMigration} on:click={startMigration}
disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0} disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || selectedDashboardIds.length === 0}
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400"
> >
Start Migration Start Migration
</button> </Button>
{/if} {/if}
</div> </div>

12
frontend/src/routes/migration/mappings/+page.svelte
View File

@@ -14,6 +14,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import EnvSelector from '../../../components/EnvSelector.svelte'; import EnvSelector from '../../../components/EnvSelector.svelte';
import MappingTable from '../../../components/MappingTable.svelte'; import MappingTable from '../../../components/MappingTable.svelte';
import { t } from '$lib/i18n';
import { Button, PageHeader } from '$lib/ui';
// [/SECTION] // [/SECTION]
// [SECTION: STATE] // [SECTION: STATE]
@@ -128,7 +130,7 @@
<!-- [SECTION: TEMPLATE] --> <!-- [SECTION: TEMPLATE] -->
<div class="max-w-6xl mx-auto p-6"> <div class="max-w-6xl mx-auto p-6">
<h1 class="text-2xl font-bold mb-6">Database Mapping Management</h1> <PageHeader title="Database Mapping Management" />
{#if loading} {#if loading}
<p>Loading environments...</p> <p>Loading environments...</p>
@@ -149,13 +151,13 @@
</div> </div>
<div class="mb-8"> <div class="mb-8">
<button <Button
on:click={fetchDatabases} on:click={fetchDatabases}
disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || fetchingDbs} disabled={!sourceEnvId || !targetEnvId || sourceEnvId === targetEnvId || fetchingDbs}
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:bg-gray-400" isLoading={fetchingDbs}
> >
{fetchingDbs ? 'Fetching...' : 'Fetch Databases & Suggestions'} Fetch Databases & Suggestions
</button> </Button>
</div> </div>
{#if error} {#if error}

95
frontend/src/routes/settings/+page.svelte
View File

@@ -2,6 +2,8 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../../lib/api'; import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../../lib/api';
import { addToast } from '../../lib/toasts'; import { addToast } from '../../lib/toasts';
import { t } from '$lib/i18n';
import { Button, Input, Card, PageHeader } from '$lib/ui';
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
@@ -142,7 +144,7 @@
</script> </script>
<div class="container mx-auto p-4"> <div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-6">Settings</h1> <PageHeader title={$t.settings.title} />
{#if data.error} {#if data.error}
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"> <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
@@ -150,26 +152,27 @@
</div> </div>
{/if} {/if}
<section class="mb-8 bg-white p-6 rounded shadow"> <div class="mb-8">
<h2 class="text-xl font-semibold mb-4">Global Settings</h2> <Card title={$t.settings?.global_title || "Global Settings"}>
<div class="grid grid-cols-1 gap-4"> <div class="grid grid-cols-1 gap-6">
<div> <Input
<label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Storage Path</label> label={$t.settings?.backup_path || "Backup Storage Path"}
<input type="text" id="backup_path" bind:value={settings.settings.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" /> bind:value={settings.settings.backup_path}
/>
<Button on:click={handleSaveGlobal}>
{$t.common.save}
</Button>
</div> </div>
<button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max"> </Card>
Save Global Settings
</button>
</div> </div>
</section>
<section class="mb-8 bg-white p-6 rounded shadow"> <section class="mb-8">
<h2 class="text-xl font-semibold mb-4">Superset Environments</h2> <Card title={$t.settings?.env_title || "Superset Environments"}>
{#if settings.environments.length === 0} {#if settings.environments.length === 0}
<div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700"> <div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
<p class="font-bold">Warning</p> <p class="font-bold">Warning</p>
<p>No Superset environments configured. You must add at least one environment to perform backups or migrations.</p> <p>{$t.settings?.env_warning || "No Superset environments configured."}</p>
</div> </div>
{/if} {/if}
@@ -177,11 +180,11 @@
<table class="min-w-full divide-y divide-gray-200"> <table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50"> <thead class="bg-gray-50">
<tr> <tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.name || "Name"}</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.user || "Username"}</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.git?.actions || "Actions"}</th>
</tr> </tr>
</thead> </thead>
<tbody class="bg-white divide-y divide-gray-200"> <tbody class="bg-white divide-y divide-gray-200">
@@ -192,9 +195,9 @@
<td class="px-6 py-4 whitespace-nowrap">{env.username}</td> <td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
<td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : 'No'}</td> <td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : 'No'}</td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">Test</button> <button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">{$t.settings?.env_test || "Test"}</button>
<button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button> <button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">{$t.common.edit}</button>
<button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">Delete</button> <button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">{$t.settings?.env_delete || "Delete"}</button>
</td> </td>
</tr> </tr>
{/each} {/each}
@@ -202,44 +205,30 @@
</table> </table>
</div> </div>
<div class="bg-gray-50 p-4 rounded"> <div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-100">
<h3 class="text-lg font-medium mb-4">{editingEnvId ? 'Edit' : 'Add'} Environment</h3> <h3 class="text-lg font-medium mb-6">{editingEnvId ? ($t.settings?.env_edit || "Edit Environment") : ($t.settings?.env_add || "Add Environment")}</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div> <Input label="ID" bind:value={newEnv.id} disabled={!!editingEnvId} />
<label for="env_id" class="block text-sm font-medium text-gray-700">ID</label> <Input label={$t.connections?.name || "Name"} bind:value={newEnv.name} />
<input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" /> <Input label="URL" bind:value={newEnv.url} />
</div> <Input label={$t.connections?.user || "Username"} bind:value={newEnv.username} />
<div> <Input label={$t.connections?.pass || "Password"} type="password" bind:value={newEnv.password} />
<label for="env_name" class="block text-sm font-medium text-gray-700">Name</label> <div class="flex items-center gap-2 h-10 mt-auto">
<input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" /> <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
</div> <label for="env_default" class="text-sm font-medium text-gray-700">{$t.settings?.env_default || "Default Environment"}</label>
<div>
<label for="env_url" class="block text-sm font-medium text-gray-700">URL</label>
<input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
</div>
<div>
<label for="env_user" class="block text-sm font-medium text-gray-700">Username</label>
<input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
</div>
<div>
<label for="env_pass" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
</div>
<div class="flex items-center">
<input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
<label for="env_default" class="ml-2 block text-sm text-gray-900">Default Environment</label>
</div> </div>
</div> </div>
<div class="mt-4 flex gap-2"> <div class="mt-8 flex gap-3">
<button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"> <Button on:click={handleAddOrUpdateEnv}>
{editingEnvId ? 'Update' : 'Add'} Environment {editingEnvId ? $t.common.save : ($t.settings?.env_add || "Add Environment")}
</button> </Button>
{#if editingEnvId} {#if editingEnvId}
<button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"> <Button variant="secondary" on:click={resetEnvForm}>
Cancel {$t.common.cancel}
</button> </Button>
{/if} {/if}
</div> </div>
</div> </div>
</Card>
</section> </section>
</div> </div>

136
frontend/src/routes/settings/git/+page.svelte
View File

@@ -1,8 +1,24 @@
<script> <!-- [DEF:GitSettingsPage:Component] -->
<!--
@SEMANTICS: git, settings, configuration, integration
@PURPOSE: Manage Git server configurations for dashboard versioning.
@LAYER: Page
@RELATION: USES -> gitService
@RELATION: USES -> Button, Input, Card, PageHeader, Select
@INVARIANT: All configurations must be validated via connection test.
-->
<script lang="ts">
// [SECTION: IMPORTS]
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { gitService } from '../../../services/gitService'; import { gitService } from '../../../services/gitService';
import { addToast as toast } from '../../../lib/toasts.js'; import { addToast as toast } from '../../../lib/toasts.js';
import { t } from '$lib/i18n';
import { Button, Input, Card, PageHeader, Select } from '$lib/ui';
// [/SECTION: IMPORTS]
// [SECTION: STATE]
let configs = []; let configs = [];
let newConfig = { let newConfig = {
name: '', name: '',
@@ -12,15 +28,27 @@
default_repository: '' default_repository: ''
}; };
let testing = false; let testing = false;
// [/SECTION: STATE]
onMount(async () => { // [DEF:loadConfigs:Function]
/**
* @purpose Fetches existing git configurations.
*/
async function loadConfigs() {
try { try {
configs = await gitService.getConfigs(); configs = await gitService.getConfigs();
} catch (e) { } catch (e) {
toast(e.message, 'error'); toast(e.message, 'error');
} }
}); }
// [/DEF:loadConfigs:Function]
onMount(loadConfigs);
// [DEF:handleTest:Function]
/**
* @purpose Tests connection to a git server with current form data.
*/
async function handleTest() { async function handleTest() {
testing = true; testing = true;
try { try {
@@ -36,7 +64,12 @@
testing = false; testing = false;
} }
} }
// [/DEF:handleTest:Function]
// [DEF:handleSave:Function]
/**
* @purpose Saves a new git configuration.
*/
async function handleSave() { async function handleSave() {
try { try {
const saved = await gitService.createConfig(newConfig); const saved = await gitService.createConfig(newConfig);
@@ -47,7 +80,13 @@
toast(e.message, 'error'); toast(e.message, 'error');
} }
} }
// [/DEF:handleSave:Function]
// [DEF:handleDelete:Function]
/**
* @purpose Deletes a git configuration by ID.
* @param {string} id - Configuration ID.
*/
async function handleDelete(id) { async function handleDelete(id) {
if (!confirm('Are you sure you want to delete this Git configuration?')) return; if (!confirm('Are you sure you want to delete this Git configuration?')) return;
try { try {
@@ -58,31 +97,34 @@
toast(e.message, 'error'); toast(e.message, 'error');
} }
} }
// [/DEF:handleDelete:Function]
</script> </script>
<div class="p-6"> <!-- [SECTION: TEMPLATE] -->
<h1 class="text-2xl font-bold mb-6">Git Integration Settings</h1> <div class="p-6 max-w-6xl mx-auto">
<PageHeader title="Git Integration Settings" />
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- List of Configs --> <!-- List of Configs -->
<div class="bg-white p-6 rounded shadow"> <Card title="Configured Servers">
<h2 class="text-xl font-semibold mb-4">Configured Servers</h2>
{#if configs.length === 0} {#if configs.length === 0}
<p class="text-gray-500">No Git servers configured.</p> <p class="text-gray-500">No Git servers configured.</p>
{:else} {:else}
<ul class="divide-y"> <ul class="divide-y divide-gray-100">
{#each configs as config} {#each configs as config}
<li class="py-3 flex justify-between items-center"> <li class="py-4 flex justify-between items-center">
<div> <div>
<span class="font-medium">{config.name}</span> <div class="flex items-center gap-2">
<span class="text-sm text-gray-500 ml-2">({config.provider})</span> <span class="font-medium text-gray-900">{config.name}</span>
<div class="text-xs text-gray-400">{config.url}</div> <span class="text-xs font-mono bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded">{config.provider}</span>
</div>
<div class="text-xs text-gray-400 mt-1">{config.url}</div>
</div> </div>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<span class="px-2 py-1 text-xs rounded {config.status === 'CONNECTED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}"> <span class="px-2 py-1 text-xs font-medium rounded {config.status === 'CONNECTED' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}">
{config.status} {config.status}
</span> </span>
<button on:click={() => handleDelete(config.id)} class="text-red-600 hover:text-red-800 p-1" title="Delete"> <button on:click={() => handleDelete(config.id)} class="text-gray-400 hover:text-red-600 transition-colors" title="Delete">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg> </svg>
@@ -92,45 +134,41 @@
{/each} {/each}
</ul> </ul>
{/if} {/if}
</div> </Card>
<!-- Add New Config --> <!-- Add New Config -->
<div class="bg-white p-6 rounded shadow"> <Card title="Add Git Server">
<h2 class="text-xl font-semibold mb-4">Add Git Server</h2> <div class="space-y-6">
<div class="space-y-4"> <Input label="Display Name" bind:value={newConfig.name} placeholder="e.g. My GitHub" />
<div> <Select
<label class="block text-sm font-medium text-gray-700">Display Name</label> label="Provider"
<input type="text" bind:value={newConfig.name} class="mt-1 block w-full border rounded p-2" placeholder="e.g. My GitHub" /> bind:value={newConfig.provider}
</div> options={[
<div> { value: 'GITHUB', label: 'GitHub' },
<label class="block text-sm font-medium text-gray-700">Provider</label> { value: 'GITLAB', label: 'GitLab' },
<select bind:value={newConfig.provider} class="mt-1 block w-full border rounded p-2"> { value: 'GITEA', label: 'Gitea' }
<option value="GITHUB">GitHub</option> ]}
<option value="GITLAB">GitLab</option> />
<option value="GITEA">Gitea</option> <Input label="Server URL" bind:value={newConfig.url} />
</select> <Input label="Personal Access Token (PAT)" type="password" bind:value={newConfig.pat} />
</div> <Input label="Default Repository (Optional)" bind:value={newConfig.default_repository} placeholder="org/repo" />
<div>
<label class="block text-sm font-medium text-gray-700">Server URL</label> <div class="flex gap-3 pt-2">
<input type="text" bind:value={newConfig.url} class="mt-1 block w-full border rounded p-2" /> <Button variant="secondary" on:click={handleTest} isLoading={testing}>
</div> Test Connection
<div> </Button>
<label class="block text-sm font-medium text-gray-700">Personal Access Token (PAT)</label> <Button variant="primary" on:click={handleSave}>
<input type="password" bind:value={newConfig.pat} class="mt-1 block w-full border rounded p-2" />
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Default Repository (Optional)</label>
<input type="text" bind:value={newConfig.default_repository} class="mt-1 block w-full border rounded p-2" placeholder="org/repo" />
</div>
<div class="flex space-x-4 pt-4">
<button on:click={handleTest} disabled={testing} class="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300 disabled:opacity-50">
{testing ? 'Testing...' : 'Test Connection'}
</button>
<button on:click={handleSave} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Save Configuration Save Configuration
</button> </Button>
</div>
</div> </div>
</div> </div>
</Card>
</div> </div>
</div> </div>
<!-- [/SECTION: TEMPLATE] -->
<style>
/* Styles are handled by Tailwind */
</style>
<!-- [/DEF:GitSettingsPage:Component] -->

75
frontend/src/routes/tasks/+page.svelte
View File

@@ -12,6 +12,8 @@
import { addToast } from '../../lib/toasts'; import { addToast } from '../../lib/toasts';
import TaskList from '../../components/TaskList.svelte'; import TaskList from '../../components/TaskList.svelte';
import TaskLogViewer from '../../components/TaskLogViewer.svelte'; import TaskLogViewer from '../../components/TaskLogViewer.svelte';
import { t } from '$lib/i18n';
import { Button, Card, PageHeader, Select } from '$lib/ui';
let tasks = []; let tasks = [];
let environments = []; let environments = [];
@@ -114,35 +116,35 @@
</script> </script>
<div class="container mx-auto p-4 max-w-6xl"> <div class="container mx-auto p-4 max-w-6xl">
<div class="flex justify-between items-center mb-6"> <PageHeader title={$t.tasks.management}>
<h1 class="text-2xl font-bold text-gray-800">Task Management</h1> <div slot="actions">
<button <Button on:click={() => showBackupModal = true}>
on:click={() => showBackupModal = true} {$t.tasks.run_backup}
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm transition duration-150 font-medium" </Button>
>
Run Backup
</button>
</div> </div>
</PageHeader>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-1"> <div class="lg:col-span-1">
<h2 class="text-lg font-semibold mb-3 text-gray-700">Recent Tasks</h2> <h2 class="text-lg font-semibold mb-3 text-gray-700">{$t.tasks.recent}</h2>
<TaskList {tasks} {loading} on:select={handleSelectTask} /> <TaskList {tasks} {loading} on:select={handleSelectTask} />
</div> </div>
<div class="lg:col-span-2"> <div class="lg:col-span-2">
<h2 class="text-lg font-semibold mb-3 text-gray-700">Task Details & Logs</h2> <h2 class="text-lg font-semibold mb-3 text-gray-700">{$t.tasks.details_logs}</h2>
{#if selectedTaskId} {#if selectedTaskId}
<div class="bg-white rounded-lg shadow-lg h-[600px] flex flex-col"> <Card padding="none">
<div class="h-[600px] flex flex-col overflow-hidden rounded-lg">
<TaskLogViewer <TaskLogViewer
taskId={selectedTaskId} taskId={selectedTaskId}
taskStatus={tasks.find(t => t.id === selectedTaskId)?.status} taskStatus={tasks.find(t => t.id === selectedTaskId)?.status}
inline={true} inline={true}
/> />
</div> </div>
</Card>
{:else} {:else}
<div class="bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg h-[600px] flex items-center justify-center text-gray-500"> <div class="bg-gray-50 border-2 border-dashed border-gray-100 rounded-lg h-[600px] flex items-center justify-center text-gray-400">
<p>Select a task to view logs and details</p> <p>{$t.tasks.select_task}</p>
</div> </div>
{/if} {/if}
</div> </div>
@@ -150,37 +152,30 @@
</div> </div>
{#if showBackupModal} {#if showBackupModal}
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"> <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/50 backdrop-blur-sm p-4">
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md"> <div class="w-full max-w-md">
<h3 class="text-xl font-bold mb-4">Run Manual Backup</h3> <Card title={$t.tasks.manual_backup}>
<div class="mb-4"> <div class="space-y-6">
<label for="env-select" class="block text-sm font-medium text-gray-700 mb-1">Target Environment</label> <Select
<select label={$t.tasks.target_env}
id="env-select"
bind:value={selectedEnvId} bind:value={selectedEnvId}
class="w-full border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 border" options={[
> { value: '', label: $t.tasks.select_env },
<option value="" disabled>-- Select Environment --</option> ...environments.map(e => ({ value: e.id, label: e.name }))
{#each environments as env} ]}
<option value={env.id}>{env.name}</option> />
{/each}
</select> <div class="flex justify-end gap-3 pt-2">
</div> <Button variant="secondary" on:click={() => showBackupModal = false}>
<div class="flex justify-end space-x-3"> {$t.common.cancel}
<button </Button>
on:click={() => showBackupModal = false} <Button variant="primary" on:click={handleRunBackup}>
class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md transition"
>
Cancel
</button>
<button
on:click={handleRunBackup}
class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"
>
Start Backup Start Backup
</button> </Button>
</div> </div>
</div> </div>
</Card>
</div>
</div> </div>
{/if} {/if}

7
frontend/src/routes/tools/debug/+page.svelte
View File

@@ -7,11 +7,11 @@
<script> <script>
import DebugTool from '../../../components/tools/DebugTool.svelte'; import DebugTool from '../../../components/tools/DebugTool.svelte';
import TaskRunner from '../../../components/TaskRunner.svelte'; import TaskRunner from '../../../components/TaskRunner.svelte';
import { PageHeader } from '$lib/ui';
</script> </script>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto p-6">
<div class="px-4 py-6 sm:px-0"> <PageHeader title="System Diagnostics" />
<h1 class="text-2xl font-semibold text-gray-900 mb-6">System Diagnostics</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2"> <div class="lg:col-span-2">
@@ -22,5 +22,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- [/DEF:DebugPage:Component] --> <!-- [/DEF:DebugPage:Component] -->

7
frontend/src/routes/tools/mapper/+page.svelte
View File

@@ -7,11 +7,11 @@
<script> <script>
import MapperTool from '../../../components/tools/MapperTool.svelte'; import MapperTool from '../../../components/tools/MapperTool.svelte';
import TaskRunner from '../../../components/TaskRunner.svelte'; import TaskRunner from '../../../components/TaskRunner.svelte';
import { PageHeader } from '$lib/ui';
</script> </script>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto p-6">
<div class="px-4 py-6 sm:px-0"> <PageHeader title="Dataset Column Mapper" />
<h1 class="text-2xl font-semibold text-gray-900 mb-6">Dataset Column Mapper</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2"> <div class="lg:col-span-2">
@@ -22,5 +22,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- [/DEF:MapperPage:Component] --> <!-- [/DEF:MapperPage:Component] -->

7
frontend/src/routes/tools/search/+page.svelte
View File

@@ -7,11 +7,11 @@
<script> <script>
import SearchTool from '../../../components/tools/SearchTool.svelte'; import SearchTool from '../../../components/tools/SearchTool.svelte';
import TaskRunner from '../../../components/TaskRunner.svelte'; import TaskRunner from '../../../components/TaskRunner.svelte';
import { PageHeader } from '$lib/ui';
</script> </script>
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto p-6">
<div class="px-4 py-6 sm:px-0"> <PageHeader title="Dataset Search" />
<h1 class="text-2xl font-semibold text-gray-900 mb-6">Dataset Search</h1>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-2"> <div class="lg:col-span-2">
@@ -22,5 +22,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- [/DEF:SearchPage:Component] --> <!-- [/DEF:SearchPage:Component] -->

40
specs/013-unify-frontend-css/checklists/requirements.md
View File

@@ -8,35 +8,35 @@
- **Focus**: UX Consistency, Component Contracts, i18n Completeness - **Focus**: UX Consistency, Component Contracts, i18n Completeness
## Requirement Completeness ## Requirement Completeness
- [ ] CHK001 Are all necessary UI components (Button, Input, Select, Card, PageHeader) explicitly identified for standardization? [Completeness, Spec §FR-002] - [x] CHK001 Are all necessary UI components (Button, Input, Select, Card, PageHeader) explicitly identified for standardization? [Completeness, Spec §FR-002]
- [ ] CHK002 Are the supported languages (RU, EN) and default language (RU) explicitly defined? [Completeness, Spec §FR-008, §FR-009] - [x] CHK002 Are the supported languages (RU, EN) and default language (RU) explicitly defined? [Completeness, Spec §FR-008, §FR-009]
- [ ] CHK003 Is the persistence mechanism for language selection (LocalStorage) specified? [Completeness, Spec §FR-010] - [x] CHK003 Is the persistence mechanism for language selection (LocalStorage) specified? [Completeness, Spec §FR-010]
- [ ] CHK004 Are the specific pages (Dashboard, Settings) targeted for migration identified? [Completeness, Spec §FR-005] - [x] CHK004 Are the specific pages (Dashboard, Settings) targeted for migration identified? [Completeness, Spec §FR-005]
## Requirement Clarity ## Requirement Clarity
- [ ] CHK005 Is the "consistent spacing" requirement quantified with specific values or a system (e.g., Tailwind scale)? [Clarity, Spec §FR-004] - [x] CHK005 Is the "consistent spacing" requirement quantified with specific values or a system (e.g., Tailwind scale)? [Clarity, Spec §FR-004]
- [ ] CHK006 Are the specific visual properties (color, padding, hover state) that must be consistent defined in the design system configuration? [Clarity, Spec §SC-001] - [x] CHK006 Are the specific visual properties (color, padding, hover state) that must be consistent defined in the design system configuration? [Clarity, Spec §SC-001]
- [ ] CHK007 Is the behavior of "legacy components" clearly defined (refactor vs. approximate)? [Clarity, Spec Edge Cases] - [x] CHK007 Is the behavior of "legacy components" clearly defined (refactor vs. approximate)? [Clarity, Spec Edge Cases]
## Requirement Consistency ## Requirement Consistency
- [ ] CHK008 Do the component contracts in `contracts/ui-components.md` align with the visual requirements in the spec? [Consistency] - [x] CHK008 Do the component contracts in `contracts/ui-components.md` align with the visual requirements in the spec? [Consistency]
- [ ] CHK009 Is the decision to use Svelte stores for i18n consistent with the requirement for client-side persistence? [Consistency, Research §2] - [x] CHK009 Is the decision to use Svelte stores for i18n consistent with the requirement for client-side persistence? [Consistency, Research §2]
## Acceptance Criteria Quality ## Acceptance Criteria Quality
- [ ] CHK010 Can the "consistent visual experience" be objectively verified through the defined independent tests? [Measurability, Spec §User Story 1] - [x] CHK010 Can the "consistent visual experience" be objectively verified through the defined independent tests? [Measurability, Spec §User Story 1]
- [ ] CHK011 Is the "0 instances of arbitrary hardcoded color values" criterion measurable via static analysis or search? [Measurability, Spec §SC-003] - [x] CHK011 Is the "0 instances of arbitrary hardcoded color values" criterion measurable via static analysis or search? [Measurability, Spec §SC-003]
- [ ] CHK012 Is the language persistence requirement testable by reloading the page? [Measurability, Spec §SC-006] - [x] CHK012 Is the language persistence requirement testable by reloading the page? [Measurability, Spec §SC-006]
## Scenario Coverage ## Scenario Coverage
- [ ] CHK013 Are requirements defined for the scenario where a translation key is missing? [Coverage, Spec Edge Cases] - [x] CHK013 Are requirements defined for the scenario where a translation key is missing? [Coverage, Spec Edge Cases]
- [ ] CHK014 Are requirements defined for the initial load state (default language)? [Coverage, Spec §User Story 3] - [x] CHK014 Are requirements defined for the initial load state (default language)? [Coverage, Spec §User Story 3]
- [ ] CHK015 Are requirements defined for switching languages while on a page with dynamic content? [Coverage, Gap] - [x] CHK015 Are requirements defined for switching languages while on a page with dynamic content? [Coverage, Gap]
## Edge Case Coverage ## Edge Case Coverage
- [ ] CHK016 Is the behavior defined for text that overflows when translated to a longer language (e.g., RU vs EN)? [Edge Case, Gap] - [x] CHK016 Is the behavior defined for text that overflows when translated to a longer language (e.g., RU vs EN)? [Edge Case, Gap]
- [ ] CHK017 Is the behavior defined if LocalStorage is disabled or inaccessible? [Edge Case, Gap] - [x] CHK017 Is the behavior defined if LocalStorage is disabled or inaccessible? [Edge Case, Gap]
- [ ] CHK018 Are requirements defined for responsive behavior on mobile devices? [Edge Case, Spec §Edge Cases] - [x] CHK018 Are requirements defined for responsive behavior on mobile devices? [Edge Case, Spec §Edge Cases]
## Non-Functional Requirements ## Non-Functional Requirements
- [ ] CHK019 Are there specific performance targets for language switching (e.g., "instant", "no layout shift")? [NFR, Research §Technical Context] - [x] CHK019 Are there specific performance targets for language switching (e.g., "instant", "no layout shift")? [NFR, Research §Technical Context]
- [ ] CHK020 Are accessibility requirements (ARIA labels, keyboard nav) defined for the new components? [NFR, Gap] - [x] CHK020 Are accessibility requirements (ARIA labels, keyboard nav) defined for the new components? [NFR, Gap]

2
specs/013-unify-frontend-css/tasks.md
View File

@@ -49,6 +49,8 @@
- [ ] T018 Verify all hardcoded colors are removed from refactored pages - [ ] T018 Verify all hardcoded colors are removed from refactored pages
- [ ] T019 Ensure LocalStorage persistence works for language selection - [ ] T019 Ensure LocalStorage persistence works for language selection
- [ ] T020 Check responsiveness of new components on mobile view - [ ] T020 Check responsiveness of new components on mobile view
- [ ] T021 [US3] Verify UI stability and text alignment with long RU translations (overflow check)
- [ ] T022 [US3] Implement fallback to default language if translation key or LocalStorage is missing
## Dependencies ## Dependencies