semantic update

2026-02-08 22:53:54 +03:00
parent e6087bd3c1
commit 235b0e3c9f
71 changed files with 68034 additions and 62417 deletions
--- a/frontend/src/components/tasks/LogEntryRow.svelte
+++ b/frontend/src/components/tasks/LogEntryRow.svelte
@@ -0,0 +1,196 @@
+<!-- [DEF:LogEntryRow:Component] -->
+<!-- @SEMANTICS: log, entry, row, ui, svelte -->
+<!-- @PURPOSE: Optimized row rendering for a single log entry with color coding and progress bar support. -->
+<!-- @TIER: STANDARD -->
+<!-- @LAYER: UI -->
+<!-- @UX_STATE: Idle -> (displays log entry) -->
+
+<script>
+  /** @type {Object} log - The log entry object */
+  export let log;
+  /** @type {boolean} showSource - Whether to show the source tag */
+  export let showSource = true;
+
+  // Format timestamp for display
+  $: formattedTime = formatTime(log.timestamp);
+
+  function formatTime(timestamp) {
+    if (!timestamp) return '';
+    const date = new Date(timestamp);
+    return date.toLocaleTimeString('en-US', { 
+      hour12: false, 
+      hour: '2-digit', 
+      minute: '2-digit', 
+      second: '2-digit' 
+    });
+  }
+
+  // Get level class for styling
+  $: levelClass = getLevelClass(log.level);
+
+  function getLevelClass(level) {
+    switch (level?.toUpperCase()) {
+      case 'DEBUG': return 'level-debug';
+      case 'INFO': return 'level-info';
+      case 'WARNING': return 'level-warning';
+      case 'ERROR': return 'level-error';
+      default: return 'level-info';
+    }
+  }
+
+  // Get source class for styling
+  $: sourceClass = getSourceClass(log.source);
+
+  function getSourceClass(source) {
+    if (!source) return 'source-default';
+    return `source-${source.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
+  }
+
+  // Check if log has progress metadata
+  $: hasProgress = log.metadata?.progress !== undefined;
+  $: progressPercent = log.metadata?.progress || 0;
+</script>
+
+<div class="log-entry-row {levelClass}" class:has-progress={hasProgress}>
+  <span class="log-time">{formattedTime}</span>
+  <span class="log-level {levelClass}">{log.level || 'INFO'}</span>
+  {#if showSource}
+    <span class="log-source {sourceClass}">{log.source || 'system'}</span>
+  {/if}
+  <span class="log-message">
+    {log.message}
+    {#if hasProgress}
+      <div class="progress-bar-container">
+        <div class="progress-bar" style="width: {progressPercent}%"></div>
+        <span class="progress-text">{progressPercent.toFixed(0)}%</span>
+      </div>
+    {/if}
+  </span>
+</div>
+
+<style>
+  .log-entry-row {
+    display: grid;
+    grid-template-columns: 80px 70px auto 1fr;
+    gap: 0.75rem;
+    padding: 0.375rem 0.75rem;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace;
+    font-size: 0.8125rem;
+    border-bottom: 1px solid #1e293b;
+    align-items: start;
+  }
+
+  .log-entry-row.has-progress {
+    grid-template-columns: 80px 70px auto 1fr;
+  }
+
+  .log-entry-row:hover {
+    background-color: rgba(30, 41, 59, 0.5);
+  }
+
+  /* Alternating row backgrounds handled by parent */
+
+  .log-time {
+    color: #64748b;
+    font-size: 0.75rem;
+    white-space: nowrap;
+  }
+
+  .log-level {
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    text-align: center;
+  }
+
+  .level-debug {
+    color: #64748b;
+    background-color: rgba(100, 116, 139, 0.2);
+  }
+
+  .level-info {
+    color: #3b82f6;
+    background-color: rgba(59, 130, 246, 0.15);
+  }
+
+  .level-warning {
+    color: #f59e0b;
+    background-color: rgba(245, 158, 11, 0.15);
+  }
+
+  .level-error {
+    color: #ef4444;
+    background-color: rgba(239, 68, 68, 0.15);
+  }
+
+  .log-source {
+    font-size: 0.6875rem;
+    padding: 0.125rem 0.375rem;
+    border-radius: 0.25rem;
+    background-color: rgba(100, 116, 139, 0.2);
+    color: #94a3b8;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 120px;
+  }
+
+  .source-plugin {
+    background-color: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+  }
+
+  .source-superset-api, .source-superset_api {
+    background-color: rgba(168, 85, 247, 0.15);
+    color: #a855f7;
+  }
+
+  .source-git {
+    background-color: rgba(249, 115, 22, 0.15);
+    color: #f97316;
+  }
+
+  .source-system {
+    background-color: rgba(59, 130, 246, 0.15);
+    color: #3b82f6;
+  }
+
+  .log-message {
+    color: #e2e8f0;
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+
+  .progress-bar-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+    background-color: #1e293b;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    height: 1rem;
+  }
+
+  .progress-bar {
+    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+
+  .progress-text {
+    font-size: 0.625rem;
+    color: #94a3b8;
+    padding: 0 0.25rem;
+    position: absolute;
+    right: 0.25rem;
+  }
+
+  .progress-bar-container {
+    position: relative;
+  }
+</style>
+
+<!-- [/DEF:LogEntryRow:Component] -->
--- a/frontend/src/components/tasks/LogFilterBar.svelte
+++ b/frontend/src/components/tasks/LogFilterBar.svelte
@@ -0,0 +1,161 @@
+<!-- [DEF:LogFilterBar:Component] -->
+<!-- @SEMANTICS: log, filter, ui, svelte -->
+<!-- @PURPOSE: UI component for filtering logs by level, source, and text search. -->
+<!-- @TIER: STANDARD -->
+<!-- @LAYER: UI -->
+<!-- @UX_STATE: Idle -> FilterChanged -> (parent applies filter) -->
+
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  // Props
+  /** @type {string[]} availableSources - List of available source options */
+  export let availableSources = [];
+  /** @type {string} selectedLevel - Currently selected log level filter */
+  export let selectedLevel = '';
+  /** @type {string} selectedSource - Currently selected source filter */
+  export let selectedSource = '';
+  /** @type {string} searchText - Current search text */
+  export let searchText = '';
+
+  const dispatch = createEventDispatcher();
+
+  // Log level options
+  const levelOptions = [
+    { value: '', label: 'All Levels' },
+    { value: 'DEBUG', label: 'Debug' },
+    { value: 'INFO', label: 'Info' },
+    { value: 'WARNING', label: 'Warning' },
+    { value: 'ERROR', label: 'Error' }
+  ];
+
+  // Handle filter changes
+  function handleLevelChange(event) {
+    selectedLevel = event.target.value;
+    dispatch('filter-change', { level: selectedLevel, source: selectedSource, search: searchText });
+  }
+
+  function handleSourceChange(event) {
+    selectedSource = event.target.value;
+    dispatch('filter-change', { level: selectedLevel, source: selectedSource, search: searchText });
+  }
+
+  function handleSearchChange(event) {
+    searchText = event.target.value;
+    dispatch('filter-change', { level: selectedLevel, source: selectedSource, search: searchText });
+  }
+
+  function clearFilters() {
+    selectedLevel = '';
+    selectedSource = '';
+    searchText = '';
+    dispatch('filter-change', { level: '', source: '', search: '' });
+  }
+</script>
+
+<div class="log-filter-bar">
+  <div class="filter-group">
+    <label for="level-filter" class="filter-label">Level:</label>
+    <select id="level-filter" class="filter-select" value={selectedLevel} on:change={handleLevelChange}>
+      {#each levelOptions as option}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="filter-group">
+    <label for="source-filter" class="filter-label">Source:</label>
+    <select id="source-filter" class="filter-select" value={selectedSource} on:change={handleSourceChange}>
+      <option value="">All Sources</option>
+      {#each availableSources as source}
+        <option value={source}>{source}</option>
+      {/each}
+    </select>
+  </div>
+
+  <div class="filter-group search-group">
+    <label for="search-filter" class="filter-label">Search:</label>
+    <input 
+      id="search-filter" 
+      type="text" 
+      class="filter-input" 
+      placeholder="Search logs..." 
+      value={searchText}
+      on:input={handleSearchChange}
+    />
+  </div>
+
+  {#if selectedLevel || selectedSource || searchText}
+    <button class="clear-btn" on:click={clearFilters}>
+      Clear Filters
+    </button>
+  {/if}
+</div>
+
+<style>
+  .log-filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    padding: 0.75rem;
+    background-color: #1e293b;
+    border-radius: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .filter-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .filter-label {
+    font-size: 0.875rem;
+    color: #94a3b8;
+    font-weight: 500;
+  }
+
+  .filter-select, .filter-input {
+    background-color: #334155;
+    color: #e2e8f0;
+    border: 1px solid #475569;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    min-width: 120px;
+  }
+
+  .filter-select:focus, .filter-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+  }
+
+  .search-group {
+    flex: 1;
+    min-width: 200px;
+  }
+
+  .filter-input {
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .clear-btn {
+    background-color: #475569;
+    color: #e2e8f0;
+    border: none;
+    border-radius: 0.375rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .clear-btn:hover {
+    background-color: #64748b;
+  }
+</style>
+
+<!-- [/DEF:LogFilterBar:Component] -->
--- a/frontend/src/components/tasks/TaskLogPanel.svelte
+++ b/frontend/src/components/tasks/TaskLogPanel.svelte
@@ -0,0 +1,119 @@
+<!-- [DEF:TaskLogPanel:Component] -->
+<!--
+@TIER: STANDARD
+@SEMANTICS: task, log, panel, filter, list
+@PURPOSE: Combines log filtering and display into a single cohesive panel.
+@LAYER: UI
+@RELATION: USES -> frontend/src/components/tasks/LogFilterBar.svelte
+@RELATION: USES -> frontend/src/components/tasks/LogEntryRow.svelte
+@INVARIANT: Must always display logs in chronological order and respect auto-scroll preference.
+-->
+<script>
+  import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
+  import LogFilterBar from './LogFilterBar.svelte';
+  import LogEntryRow from './LogEntryRow.svelte';
+
+  /**
+   * @PURPOSE: Component properties and state.
+   * @PRE: taskId is a valid string, logs is an array of LogEntry objects.
+   * @UX_STATE: [Empty] -> Displays "No logs available" message.
+   * @UX_STATE: [Populated] -> Displays list of LogEntryRow components.
+   * @UX_STATE: [AutoScroll] -> Automatically scrolls to bottom on new logs.
+   */
+  export let taskId = '';
+  export let logs = [];
+  export let autoScroll = true;
+
+  const dispatch = createEventDispatcher();
+  let scrollContainer;
+  let selectedSource = 'all';
+  let selectedLevel = 'all';
+
+  /**
+   * @PURPOSE: Handles filter changes from LogFilterBar.
+   * @PRE: event.detail contains source and level.
+   * @POST: Dispatches filterChange event to parent.
+   * @SIDE_EFFECT: Updates local filter state.
+   */
+  function handleFilterChange(event) {
+    const { source, level } = event.detail;
+    selectedSource = source;
+    selectedLevel = level;
+    console.log(`[TaskLogPanel][STATE] Filter changed: source=${source}, level=${level}`);
+    dispatch('filterChange', { source, level });
+  }
+
+  /**
+   * @PURPOSE: Scrolls the log container to the bottom.
+   * @PRE: autoScroll is true and scrollContainer is bound.
+   * @POST: scrollContainer.scrollTop is set to scrollHeight.
+   */
+  function scrollToBottom() {
+    if (autoScroll && scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  }
+
+  afterUpdate(() => {
+    scrollToBottom();
+  });
+
+  onMount(() => {
+    scrollToBottom();
+  });
+</script>
+
+<div class="flex flex-col h-full bg-gray-900 text-gray-100 rounded-lg overflow-hidden border border-gray-700">
+  <!-- Header / Filter Bar -->
+  <div class="p-2 bg-gray-800 border-b border-gray-700">
+    <LogFilterBar 
+      {taskId}
+      on:filter={handleFilterChange}
+    />
+  </div>
+
+  <!-- Log List -->
+  <div 
+    bind:this={scrollContainer}
+    class="flex-1 overflow-y-auto p-2 font-mono text-sm space-y-0.5"
+  >
+    {#if logs.length === 0}
+      <div class="text-gray-500 italic text-center py-4">
+        No logs available for this task.
+      </div>
+    {:else}
+      {#each logs as log}
+        <LogEntryRow {log} />
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Footer / Stats -->
+  <div class="px-3 py-1 bg-gray-800 border-t border-gray-700 text-xs text-gray-400 flex justify-between items-center">
+    <span>Total: {logs.length} entries</span>
+    {#if autoScroll}
+      <span class="text-green-500 flex items-center gap-1">
+        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+        Auto-scroll active
+      </span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Custom scrollbar for the log container */
+  div::-webkit-scrollbar {
+    width: 8px;
+  }
+  div::-webkit-scrollbar-track {
+    background: #1f2937;
+  }
+  div::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+  }
+  div::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+  }
+</style>
+<!-- [/DEF:TaskLogPanel:Component] -->