redux-scraper/app/views/log_entries/show.html.erb

<% content_for :head do %>
  <% if is_flash_content_type?(@log_entry.content_type) %>
    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
  <% end %>
  <style type="text/css" data-turbolinks-track>
    iframe {
      width: 100%;
      height: 100%;
      border: none;
      box-shadow: 0 0 5px 1px black;
    }
    embed,
    ruffle-embed {
      width: 100%;
      height: 100%;
    }
  </style>
<% end %>
<div class="bg-slate-50">
  <div class="mx-auto flex flex-col sm:flex-row max-w-screen-md py-4">
    <div class="ml-4 flex min-w-[150px] items-center pr-4 mb-2 sm:mb-0 justify-between">
      <%= link_to log_entries_path,
                  class:
                    "px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-md hover:bg-slate-50" do %>
        <span class="mr-1">&larr;</span>
        <span>Log Entries</span>
      <% end %>
      <button type="button"
              onclick="toggleDetails(this)"
        class="sm:hidden ml-2 px-2 py-1 text-sm text-slate-700 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
        <span id="expandIcon" class="hidden">▼</span>
        <span id="collapseIcon">▲</span>
      </button>
      <script>
        function toggleDetails(button) {
          const expandIcon = button.querySelector('#expandIcon');
          const collapseIcon = button.querySelector('#collapseIcon');
          const details = document.getElementById('log-entry-details');
          expandIcon.classList.toggle('hidden');
          collapseIcon.classList.toggle('hidden');
          details.classList.toggle('shadow-[inset_0_-5px_5px_-5px_rgba(0,0,0,0.2)]');

          if (expandIcon.classList.contains('hidden')) {
            details.style.maxHeight = details.scrollHeight + 'px';
          } else {
            details.style.maxHeight = '100px';
          }
        }

        window.addEventListener('DOMContentLoaded', () => {
          const details = document.getElementById('log-entry-details');
          details.style.maxHeight = details.scrollHeight + 'px';
        });
      </script>
    </div>
    <div id="log-entry-details" class="sm:rounded-lg bg-white p-4 shadow transition-[max-height] duration-300 overflow-hidden">
      <div class="grid grid-cols-[auto_1fr] items-center gap-x-4 gap-y-2">
        <div class="text-right text-sm text-slate-500">URL</div>
        <div>
          <div class="flex items-center">
            <%= link_to(
                  @log_entry.uri.to_s,
                  class: "text-blue-600 hover:text-blue-800 underline decoration-dotted",
                  target: "_blank",
                  rel: "noopener",
                ) do %>
              <span class="inline-block max-w-[40rem] truncate align-middle"
                ><%= @log_entry.uri.to_s %></span
              >
              <%= render partial: "shared/icons/external_link",
                         locals: {
                           class_name: "inline h-4 w-4 ml-0.5",
                         } %>
            <% end %>
            <span
              class="<%= if @log_entry.status_code >= 400
                    "bg-red-100 text-red-800"
                  else
                    "bg-green-100 text-green-800"
                  end %> ml-2 rounded-full px-2 py-0.5 text-sm"
            >
              <%= @log_entry.status_code %>
            </span>
          </div>
          <div class="mt-1 text-sm text-slate-500">
            <% rtms = @log_entry.response_time_ms %>
            <span
              ><%= rtms == -1 ? "Response time not recorded" : "#{rtms}ms" %></span
            >
            <span class="mx-2">•</span>
            <span><%= HexUtil.humansize(@log_entry.response.size_bytes) %></span>
            <span class="mx-2">•</span>
            <span>Performed by <%= @log_entry.performed_by %></span>
            <span class="mx-2">•</span>
            <span
              ><%= time_ago_in_words(@log_entry.requested_at, include_seconds: true) %>
              ago</span
            >
          </div>
        </div>
        <div class="text-right text-sm text-slate-500">Content</div>
        <div class="text-sm">
          <span class="font-mono"><%= @log_entry.content_type %></span>
        </div>
        <div class="text-right text-sm text-slate-500">Headers</div>
        <div class="grid grid-cols-2 gap-x-4 font-mono text-sm">
          <% %w[cf-ray cf-cache-status].each do |header_name| %>
            <div class="text-slate-500"><%= header_name %></div>
            <div>
              <%= @log_entry.response_headers.headers[header_name] || "(empty)" %>
            </div>
          <% end %>
        </div>
        <% if @log_entry.caused_by_entry %>
          <div class="text-right text-sm text-slate-500">Caused By</div>
          <div class="overflow-hidden rounded border border-slate-200">
            <%= render partial: "log_entry_table_row_mini",
                       locals: {
                         entry: @log_entry.caused_by_entry,
                       } %>
          </div>
        <% end %>
        <% triggered = @log_entry.triggered_entries %>
        <% if triggered.length > 0 %>
          <div class="text-right text-sm text-slate-500">Triggered</div>
          <div class="overflow-hidden rounded border border-slate-200">
            <div class="scroll-shadows max-h-48 overflow-y-auto bg-white">
              <% triggered.each do |entry| %>
                <%= render partial: "log_entry_table_row_mini", locals: { entry: entry } %>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
<div class="flex w-full grow border-t shadow-inner">
  <%= render partial: "content_container", locals: { log_entry: @log_entry } %>
</div>