gust_web

<Layouts.app flash={@flash}>
  <.live_component
    module={GustWeb.DagSummaryComponent}
    dag={@dag}
    dag_def={@dag_def}
    id={@dag.id}
    on_run_triggered={fn -> send(self(), :trigger_run) end}
  />
  <div class="p-3 border-b bg-gray-50">
    <div class="flex justify-between items-center">
      <h2 class="font-semibold text-gray-80">Run History</h2>
    </div>
  </div>

  <div class="bg-white rounded shadow-sm overflow-hidden mb-4">
    <div class="p-3 overflow-x-auto">
      <div class="min-w-max">
        <!-- Task Grid -->
        <div class="flex">
          <!-- Task names column -->
          <div class="pr-2 border-r border-gray-200 pt-2">
            <div class="flex items-center h-6 mb-2 border-b-2">
              <span class="text-xs font-medium text-gray-800 ">Run</span>
            </div>

            <div :for={name <- @dag_def.task_list} class="flex items-center h-6 mb-2">
              <span class="text-xs font-medium text-gray-800">{name}</span>
            </div>
          </div>
          
<!-- Run columns -->
          <div class="flex" phx-update="stream" id="run_history">
            <%= for {id, %Run{status: status, id: run_id, tasks: tasks} = run} <- @streams.runs do %>
              <div class="px-1 rounded" id={id}>
                <.link navigate={~p"/dags/#{@dag_def.name}/runs?run_id=#{run_id}"}>
                  <div class="flex justify-center mb-2 pt-2">
                    <.task_cell id={"run-status-cell-#{run_id}"} status={status} />
                  </div>
                </.link>

                <div :for={name <- @dag_def.task_list} class="flex justify-center mb-2">
                  <.interactive_task_cell
                    name={name}
                    ran_tasks={tasks}
                    run_id={run_id}
                    selected_task={@selected_task}
                    navigate={~p"/dags/#{@dag_def.name}/runs?run_id=#{run_id}&task_name=#{name}"}
                    data-testid={"#{name}-at-run-#{run_id}-link"}
                  />
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>

  <% current = @selected_task || @selected_run %>

  <div
    :if={@selected_run}
    id="selected-run"
    class="bg-white rounded shadow-sm overflow-hidden mb-4"
  >
    <div class="p-3 border-b flex justify-between items-center">
      <nav
        id="dag-breadcrumb"
        class="breadcrumbs text-sm"
        aria-label="Breadcrumb"
        data-testid="breadcrumb"
      >
        <ul>
          <li>
            <.link id="dag-name-breadcrumb" navigate={~p"/dags/#{@dag_def.name}/runs"}>
              {@dag_def.name}
            </.link>
          </li>
          <li>
            <.link navigate={~p"/dags/#{@dag_def.name}/runs?run_id=#{@selected_run.id}"}>
              {@selected_run.id}
            </.link>
          </li>
          <li :if={@selected_task}><strong>{@selected_task.name}</strong></li>
        </ul>
      </nav>

      <.status_badge status={current.status} data-testid="status-badge" />
    </div>

    <div :if={@selected_task} class="p-3">
      <h4 class=" text-sm font-semibold text-gray-500">Result</h4>
      <pre
        id="task-result"
        data-testid="task-result"
        class="language-json rounded-md overflow-x-auto"
      >
<%= pretty_json!(@selected_task.result) %>
      </pre>
    </div>

    <div
      :if={@selected_task}
      class="bg-white rounded shadow-sm overflow-hidden mb-4"
    >
      <div class="p-3 border-b"></div>
      <div class="overflow-x-auto overflow-y-auto max-h-96">
        <h4 class="p-3 text-sm font-semibold text-gray-500">Logs</h4>
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th
                scope="col"
                class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
              >
                Timestamp
              </th>
              <th
                scope="col"
                class="px-3 py-2 text-left text-xs font-medium text-gray-5stream_insert00 uppercase tracking-wider w-20"
              >
                Level
              </th>
              <th
                scope="col"
                class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
              >
                Content
              </th>
            </tr>
          </thead>

          <tbody
            id="log-list"
            class="bg-white divide-y divide-gray-200"
            phx-update="stream"
          >
            <tr
              :for={
                {id, %Flows.Log{inserted_at: inserted_at, level: level, content: content}} <-
                  @streams.logs
              }
              id={"log-#{id}"}
            >
              <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-800 font-mono">
                {inserted_at}
              </td>
              <td class="px-3 py-2 whitespace-nowrap">
                <.log_badge level={level} />
              </td>
              <td class="px-3 py-2 text-xs text-gray-800 bg-slate-100">
                {content}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="bg-white rounded shadow-sm overflow-hidden mb-4">
    <div class="p-3 border-b">
      <h3 class="text-sm font-semibold text-gray-800">Graph</h3>
    </div>
    <div class="p-3">
      <div class="bg-gray-50 p-3 rounded border border-gray-200 overflow-auto">
        <pre class="mermaid" phx-hook="Mermaid" id="mermaid-chart">
{"""
---
config:
  theme: 'base'
  themeVariables:
    primaryColor: '#e5e6ea'
    primaryTextColor: '#18181b'
    primaryBorderColor: '#2563eb'
    lineColor: '#676876'
    secondaryColor: '#6a65ab'
    tertiaryColor: '#fbfbfc'
---
    #{mermaid_chart(@dag_def.tasks)}
"""}
       </pre>
      </div>
    </div>
  </div>

  <div class="bg-white rounded shadow-sm overflow-hidden mb-4">
    <div class="p-3 border-b flex justify-between items-center">
      <h3 class="text-sm font-semibold text-gray-800">Code</h3>
      <span id="reload-time" class="badge">{reload_time(@reload_dag_file)}</span>
    </div>

    <div class="p-3">
      <pre class="language-elixir rounded-md overflow-x-auto">
          <code id="code-highlight" class={"language-elixir code-block p-3 text-xs leading-relaxed"} phx-hook="CodeHighlight">
{read_code(@reload_dag_file)}
          </code>
        </pre>
    </div>
  </div>
</Layouts.app>