ss-tools/frontend/src/components/tasks/TaskResultPanel.svelte

<script>
  let { task = null } = $props();

  const result = $derived(task?.result || null);
  const pluginId = $derived(task?.plugin_id || '');

  function statusColor(status) {
    switch (status) {
      case 'PASS':
      case 'SUCCESS':
        return 'bg-green-100 text-green-700';
      case 'WARN':
      case 'PARTIAL_SUCCESS':
        return 'bg-yellow-100 text-yellow-700';
      case 'FAIL':
      case 'FAILED':
        return 'bg-red-100 text-red-700';
      default:
        return 'bg-slate-100 text-slate-700';
    }
  }
</script>

{#if !task}
  <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 p-6 text-sm text-slate-500">
    Выберите задачу, чтобы увидеть результат.
  </div>
{:else if !result}
  <div class="rounded-lg border border-slate-200 bg-white p-4">
    <p class="text-sm text-slate-700">Для этой задачи нет структурированного результата.</p>
  </div>
{:else if pluginId === 'llm_dashboard_validation'}
  <div class="space-y-4 rounded-lg border border-slate-200 bg-white p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-slate-900">LLM проверка дашборда</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <p class="text-sm text-slate-700">{result.summary || 'Нет summary'}</p>
    {#if result.issues?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Проблемы ({result.issues.length})</p>
        <ul class="space-y-2">
          {#each result.issues as issue}
            <li class="rounded-md border border-slate-200 bg-slate-50 p-2 text-sm">
              <div class="flex items-center gap-2">
                <span class={`rounded px-2 py-0.5 text-xs font-semibold ${statusColor(issue.severity)}`}>{issue.severity}</span>
                <span class="text-slate-700">{issue.message}</span>
              </div>
              {#if issue.location}
                <p class="mt-1 text-xs text-slate-500">Локация: {issue.location}</p>
              {/if}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else if pluginId === 'superset-backup'}
  <div class="space-y-4 rounded-lg border border-slate-200 bg-white p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-slate-900">Результат бэкапа</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-sm text-slate-700">
      <p>Environment: {result.environment || '-'}</p>
      <p>Total: {result.total_dashboards ?? 0}</p>
      <p>Успешно: {result.backed_up_dashboards ?? 0}</p>
      <p>Ошибок: {result.failed_dashboards ?? 0}</p>
    </div>
    {#if result.failures?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Ошибки</p>
        <ul class="space-y-2">
          {#each result.failures as failure}
            <li class="rounded-md border border-red-200 bg-red-50 p-2 text-sm text-red-700">
              {failure.title || failure.id}: {failure.error}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else if pluginId === 'superset-migration'}
  <div class="space-y-4 rounded-lg border border-slate-200 bg-white p-4">
    <div class="flex items-center justify-between">
      <h3 class="text-sm font-semibold text-slate-900">Результат миграции</h3>
      <span class={`rounded-full px-2 py-1 text-xs font-semibold ${statusColor(result.status)}`}>{result.status || 'UNKNOWN'}</span>
    </div>
    <div class="grid grid-cols-2 gap-2 text-sm text-slate-700">
      <p>Source: {result.source_environment || '-'}</p>
      <p>Target: {result.target_environment || '-'}</p>
      <p>Выбрано: {result.selected_dashboards ?? 0}</p>
      <p>Успешно: {result.migrated_dashboards?.length ?? 0}</p>
      <p>С ошибками: {result.failed_dashboards?.length ?? 0}</p>
      <p>Mappings: {result.mapping_count ?? 0}</p>
    </div>
    {#if result.failed_dashboards?.length}
      <div>
        <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Ошибки миграции</p>
        <ul class="space-y-2">
          {#each result.failed_dashboards as failed}
            <li class="rounded-md border border-red-200 bg-red-50 p-2 text-sm text-red-700">
              {failed.title || failed.id}: {failed.error}
            </li>
          {/each}
        </ul>
      </div>
    {/if}
  </div>
{:else}
  <div class="rounded-lg border border-slate-200 bg-white p-4">
    <pre class="overflow-auto rounded bg-slate-50 p-3 text-xs text-slate-700">{JSON.stringify(result, null, 2)}</pre>
  </div>
{/if}