activetracker 0.4.0

data/app/jobs/active_tracker/application_job.rb

@@ -0,0 +1,4 @@
+module ActiveTracker
+  class ApplicationJob < ActiveJob::Base
+  end
+end

data/app/mailers/active_tracker/application_mailer.rb

@@ -0,0 +1,6 @@
+module ActiveTracker
+  class ApplicationMailer < ActionMailer::Base
+    default from: 'from@example.com'
+    layout 'mailer'
+  end
+end

data/app/models/active_tracker/application_record.rb

@@ -0,0 +1,5 @@
+module ActiveTracker
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/views/active_tracker/common/_empty.html.erb

@@ -0,0 +1,9 @@
+<div class="bg-gray-200 shadow mt-4 rounded-lg py-20 text-center">
+  <div class="text-blue-800">
+    <svg width="128" height="128" class="inline fill-current" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M128 64c0 35.346-28.654 64-64 64-35.346 0-64-28.654-64-64C0 28.654 28.654 0 64 0c35.346 0 64 28.654 64 64zm-37.276.816c-.775 5.69-3.425 10.786-7.285 14.668-4.65 4.659-11.076 7.539-18.163 7.539-2.058 0-4.073-.24-5.99-.706l-12.85 21.205c-2.001 3.303-6.299 4.362-9.596 2.357a7.009 7.009 0 01-2.353-9.614l12.611-20.81a25.68 25.68 0 01-7.496-18.169c0-1.2.084-2.385.24-3.543a77.805 77.805 0 009.116 3.247v.296a16.33 16.33 0 004.777 11.563 16.234 16.234 0 0011.54 4.786c4.51 0 8.596-1.836 11.54-4.786 2.002-2.005 3.481-4.518 4.228-7.327 3.128-.043 6.214-.24 9.188-.636l.479-.07h.014zM57.872 17.79c-1.722-1.02-3.269-1.935-5.236-1.935h-.014c-3.368 0-5.44 2.824-6.116 6.127-.26 1.3-.469 2.635-.68 3.99-.338 2.166-.684 4.385-1.264 6.598-7.257.805-12.936 2.725-15.36 5.648-2.578 3.12-1.042 6.889 3.847 10.517 5.186 3.854 14.105 7.51 25.519 9.897 11.85 2.47 23.574 3.007 32.55 1.807 8.835-1.172 14.584-3.981 15.232-7.963.606-3.755-3.48-7.778-10.23-11.21a61.699 61.699 0 00-4.396-1.99c-1.793-5.051-2.735-9.689-3.524-13.57a150.176 150.176 0 00-.788-3.724c-.747-3.275-2.748-6.127-6.115-6.127-2.357 0-4.224.99-6.236 2.056-2.355 1.248-4.91 2.603-8.687 2.603-3.899 0-6.339-1.444-8.502-2.724zM74.632 49.4c6.214.353 12.216.14 18.388-1.003v-.014c1.913-.35 1.654-1.087 1.389-1.843l-.008-.02c-.386-1.058-.888-2.138-1.382-3.197-.191-.411-.381-.82-.562-1.222-15.796 3.219-36.933-1.468-49.234-5.605a54.513 54.513 0 01-1.93 3.459l-.002.003c-.479.761-1.01 1.607 1.157 2.496 4.89 2.005 8.764 3.388 14.64 4.616 5.989 1.243 11.935 2.02 17.544 2.33z"/></svg>
+  </div>
+  <div class="mt-10 text-blue-800">
+    <p>We didn't find any <%= plural_type %>.</p>
+    <p class="mt-2">Please check back again later.</p>
+  </div>
+</div>

data/app/views/active_tracker/common/_pagination.html.erb

@@ -0,0 +1,22 @@
+<div class="w-full mt-4 flex justify-between">
+  <% if duration %>
+    <div class="text-sm mb-2 text-gray-700">Returned <b class="font-bold"><%= pluralize pagination[:total], "result" %></b> in <b class="font-bold"><%= duration.to_i %>ms</b></div>
+  <% end %>
+  <div>
+    <a href='<%= insert_page_to_url(url, 1) %>' class="px-2 py-1 border-gray-300 bg-white text-sm border text-gray-700 rounded">First</a>
+    <% if pagination[:page] > 1 %>
+      <a href='<%= insert_page_to_url(url, pagination[:page] - 1) %>' class="px-2 py-1 border-gray-300 bg-white text-sm border text-gray-700 rounded">Prev</a>
+    <% end %>
+    <% pagination[:window].each do |page| %>
+      <% if page == pagination[:page] %>
+        <span class="px-2 py-1 border-gray-300 bg-gray-700 text-sm border text-gray-300 rounded"><%= page %></span>
+      <% else %>
+        <a href='<%= insert_page_to_url(url, page) %>' class="px-2 py-1 border-gray-300 bg-white text-sm border text-gray-700 rounded"><%= page %></a>
+      <% end %>
+    <% end %>
+    <% if pagination[:page] < pagination[:total_pages] %>
+      <a href='<%= insert_page_to_url(url, pagination[:page] + 1) %>' class="px-2 py-1 border-gray-300 bg-white text-sm border text-gray-700 rounded">Next</a>
+    <% end %>
+    <a href='<%= insert_page_to_url(url, pagination[:total_pages]) %>' class="px-2 py-1 border-gray-300 bg-white text-sm border text-gray-700 rounded">Last</a>
+  </div>
+</div>

data/app/views/active_tracker/common/_plugin_nav.html.erb

@@ -0,0 +1,10 @@
+<% current = request.path[plugin.nav_url] %>
+<a href="<%= plugin.nav_url %>" class="flex items-center mb-3 <%= current ? "text-blue-700" : "text-gray-600" %> hover:text-blue-700">
+  <div class="">
+    <%= plugin.nav_svg %>
+  </div>
+  <div class='ml-2'>
+    <%= plugin.nav_title %>
+  </div>
+</a>
+

data/app/views/active_tracker/dashboard/index.html.erb

@@ -0,0 +1,18 @@
+<% @statistics.each do |row| %>
+  <h2 class="text-xl text-blue-900 flex items-center "><%= row.first[:plugin].nav_svg %> <span class="ml-2"><%= row.first[:plugin].nav_title %></span></h2>
+  <div class="flex -mx-2 mt-2 flex-wrap mb-10">
+    <% row.each do |statistic| %>
+      <% if statistic[:error] %>
+        <div class="w-1/4 rounded-lg shadow-lg bg-red-500 text-red-100 py-2 px-4 m-2">
+          <div class="text-5xl"><%= statistic[:value] %></div>
+          <div class="text-sm text-red-300"><%= statistic[:label] %></div>
+        </div>
+      <% else %>
+        <div class="w-1/4 rounded-lg shadow-lg bg-green-500 text-green-100 py-2 px-4 m-2">
+          <div class="text-5xl"><%= statistic[:value] %></div>
+          <div class="text-sm text-green-300"><%= statistic[:label] %></div>
+        </div>
+      <% end %>
+    <% end -%>
+  </div>
+<% end -%>

data/app/views/active_tracker/exceptions/index.html.erb

@@ -0,0 +1,44 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Exceptions</h1>
+  <form action="<%= ActiveTracker::Configuration.root_path +  "/exceptions" %>" method="get" class="js-filter-form">
+    <input type='text' name="q" class="bg-gray-100 border-2 border-gray-400 px-2 py-1 rounded-lg js-filter-input" placeholder="Search for request" value="<%= params[:q] %>">
+  </form>
+</div>
+
+<% if @exceptions && @exceptions.any? %>
+  <div class="bg-white shadow mt-4 rounded-b-lg" style="">
+    <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+      <div class="flex-1">Class / Message</div>
+      <div class="w-24 text-center">Count</div>
+      <div class="w-32 text-right">Last raised</div>
+    </div>
+
+    <% @exceptions.each do |exception| %>
+      <% actual_exception = ActiveTracker::Model.find(exception.key) %>
+      <% border_size = @exceptions.last == exception ? "none" : "2" %>
+      <a href='<%= ActiveTracker::Configuration.root_path +  "/exceptions/#{exception.id}" %>' class="flex flex-grow border-b-<%= border_size %> border-gray-200 text-gray-600 px-4 text-sm py-6 items-center">
+        <div class="flex-1 break-all">
+          <div class="font-mono text-sm text-gray-800"><%= actual_exception.tags[:class_name] %></div>
+          <div class=""><%= actual_exception.message %></div>
+          <% if actual_exception.backtrace.present? %>
+            <div class="bg-gray-200 text-gray-900 py-1 px-2 text-xs rounded no-wrap mt-1 inline-block"><%= actual_exception.backtrace.first %></div>
+          <% end %>
+        </div>
+        <% if actual_exception.count < 10 %>
+          <div class="w-24 text-center"><span class="bg-green-100 text-green-600 rounded-full px-3 py-2 font-bold"><%= actual_exception.count %></span></div>
+        <% elsif actual_exception.count < 40 %>
+          <div class="w-24 text-center"><span class="bg-yellow-100 text-yellow-700 rounded-full px-3 py-2 font-bold"><%= actual_exception.count %></span></div>
+        <% elsif actual_exception.count < 100 %>
+          <div class="w-24 text-center"><span class="bg-orange-200 text-orange-700 rounded-full px-3 py-2 font-bold"><%= actual_exception.count %></span></div>
+        <% else %>
+          <div class="w-24 text-center"><span class="bg-red-300 text-red-800 rounded-full px-3 py-2 font-bold"><%= actual_exception.count %></span></div>
+        <% end %>
+        <div class="w-32 text-right"><%= time_ago_in_words actual_exception.log_at %> ago</div>
+      </a>
+    <% end -%>
+  </div>
+
+  <%= render "active_tracker/common/pagination", pagination: @pagination, url: request.fullpath, duration: @duration %>
+<% else %>
+  <%= render "active_tracker/common/empty", plural_type: "exceptions" %>
+<% end %>

data/app/views/active_tracker/exceptions/show.html.erb

@@ -0,0 +1,56 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Exception</h1>
+</div>
+
+<div class="flex flex-grow mt-10 items-center">
+  <div class="rounded-lg bg-white text-sm text-gray-600 flex-1">
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Class</div>
+      <div class="pl-4 font-mono"><%= @exception.tags[:class_name] %></div>
+    </div>
+    <div class="flex flex-grow items-center text-gray-600">
+      <div class="bg-gray-200 uppercase w-32 p-4">Message</div>
+      <div class="ml-4 block mt-1 inline-block"><%= @exception.message %></div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Count</div>
+      <div class="pl-4">
+        <% if @exception.count < 10 %>
+          <div class="w-24"><span class="bg-green-100 text-green-600 rounded-full px-3 py-2 font-bold"><%= @exception.count %></span></div>
+        <% elsif @exception.count < 40 %>
+          <div class="w-24"><span class="bg-yellow-100 text-yellow-600 rounded-full px-3 py-2 font-bold"><%= @exception.count %></span></div>
+        <% elsif @exception.count < 100 %>
+          <div class="w-24"><span class="bg-orange-200 text-orange-700 rounded-full px-3 py-2 font-bold"><%= @exception.count %></span></div>
+        <% else %>
+          <div class="w-24"><span class="bg-red-300 text-red-800 rounded-full px-3 py-2 font-bold"><%= @exception.count %></span></div>
+        <% end %>
+      </div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Last raised</div>
+      <div class="pl-4"><%= time_ago_in_words @exception.log_at %> ago</div>
+    </div>
+  </div>
+</div>
+
+<div class="mt-10 flex-grow-0">
+  <div>
+    <a href="#" class="text-lg mr-3 text-blue-600 js-activetracker-tab" data-tab="backtrace">Backtrace</a>
+  </div>
+
+  <div class="bg-black text-white font-mono whitespace-pre-wrap text-sm rounded-lg mt-2 p-4 overflow-x-auto js-activetracker-tab-content" data-content="backtrace"><%= @exception.backtrace.join("<div class='mb-2'></div>").html_safe %></div>
+</div>
+
+
+<div class="bg-white shadow mt-10 rounded-b-lg" style="">
+  <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+    <div class="w-24">Method</div>
+    <div class="flex-1">Path</div>
+    <div class="w-24">Response</div>
+    <div class="w-32 text-right">Time</div>
+  </div>
+
+  <% @requests.each do |request| %>
+    <%= render "active_tracker/requests/request", request: request %>
+  <% end -%>
+</div>

data/app/views/active_tracker/queries/index.html.erb

@@ -0,0 +1,38 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Queries</h1>
+  <form action="<%= ActiveTracker::Configuration.root_path +  "/queries" %>" method="get" class="js-filter-form">
+    <input type='text' name="q" class="bg-gray-100 border-2 border-gray-400 px-2 py-1 rounded-lg js-filter-input" placeholder="Search for request" value="<%= params[:q] %>">
+  </form>
+</div>
+
+<% if @queries && @queries.any? %>
+  <div class="bg-white shadow mt-4 rounded-b-lg" style="">
+    <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+      <div class="flex-1">SQL</div>
+      <div class="w-24 text-right">Count</div>
+      <div class="w-32 text-right">Last response</div>
+    </div>
+
+    <% @queries.each do |query| %>
+      <% actual_query = ActiveTracker::Model.find(query.key) %>
+      <% border_size = @queries.last == query ? "none" : "2" %>
+      <a href='<%= ActiveTracker::Configuration.root_path +  "/queries/#{query.id}" %>' class="flex flex-grow border-b-<%= border_size %> border-gray-200 text-gray-600 px-4 text-sm py-6 items-center">
+        <div class="flex-1 break-all font-mono"><%= actual_query.tags[:sql] %>
+          <% if actual_query.tags[:name].present? %>
+            <br /><div class="block bg-gray-200 text-gray-900 py-1 px-2 text-xs rounded no-wrap mt-1 inline-block"><%= actual_query.tags[:name] %></div>
+          <% end %>
+        </div>
+        <div class="w-24 text-right"><%= actual_query.count %></div>
+        <% if actual_query.last_duration > ActiveTracker::Plugin::Query.min_slow_duration_ms %>
+          <div class="w-32 text-center text-red-600"><%= "%.1f" % actual_query.last_duration %>ms</div>
+        <% else %>
+          <div class="w-32 text-center"><%= "%.1f" % actual_query.last_duration %>ms</div>
+        <% end %>
+      </a>
+    <% end -%>
+  </div>
+
+  <%= render "active_tracker/common/pagination", pagination: @pagination, url: request.fullpath, duration: @duration %>
+<% else %>
+  <%= render "active_tracker/common/empty", plural_type: "queries" %>
+<% end %>

data/app/views/active_tracker/queries/show.html.erb

@@ -0,0 +1,39 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Query</h1>
+</div>
+
+<div class="flex flex-grow mt-10 items-center">
+  <div class="rounded-lg bg-white text-sm text-gray-600 flex-1">
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">SQL</div>
+      <div class="pl-4 font-mono"><%= @query.tags[:sql] %></div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Name</div>
+      <% if @query.tags[:name].present? %>
+        <div class="ml-4 block bg-gray-200 text-gray-900 py-1 px-2 text-xs rounded no-wrap mt-1 inline-block"><%= @query.tags[:name] %></div>
+      <% end %>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Count</div>
+      <div class="pl-4"><%= @query.count %></div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Duration</div>
+      <div class="pl-4"><%= "%.1f" % @query.last_duration %>ms</div>
+    </div>
+  </div>
+</div>
+
+<div class="bg-white shadow mt-4 rounded-b-lg" style="">
+  <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+    <div class="w-24">Method</div>
+    <div class="flex-1">Path</div>
+    <div class="w-24">Response</div>
+    <div class="w-32 text-right">Time</div>
+  </div>
+
+  <% @requests.each do |request| %>
+    <%= render "active_tracker/requests/request", request: request %>
+  <% end -%>
+</div>

data/app/views/active_tracker/requests/_request.html.erb

@@ -0,0 +1,30 @@
+<% border_size = @requests.last == request ? "none" : "2" %>
+<a href='<%= ActiveTracker::Configuration.root_path +  "/requests/#{request.id}" %>' class="flex flex-grow border-b-<%= border_size %> border-gray-200 text-gray-600 px-4 text-sm py-6 items-center">
+  <div class="w-24"><span class="bg-gray-200 text-gray-600 rounded-full px-3 py-2 font-bold"><%= request.tags[:method] %></span></div>
+  <div class="flex-1 break-all"><%= request.tags[:url] %>
+    <% showable_tags = request.tags.keys.reject {|k| ["url", "method", "duration", "user_avatar_url", "params", /\Aat_.*/].any? {|r| k.to_s.match(r) } } %>
+    <% if showable_tags.any? %>
+      <div class="js-tags">
+      <% showable_tags.each do |k| %>
+        <span class="bg-gray-200 text-gray-900 py-1 px-2 text-xs rounded no-wrap mt-1 inline-block"><%= "#{k}:#{request.tags[k]}" %></span>
+      <% end %>
+      </div>
+    <% end %>
+    <!--
+      TODO: make these links that further filters the results
+    -->
+  </div>
+  <% if request.tags[:status].start_with?("2") %>
+    <div class="w-24"><span class="bg-green-100 text-green-600 rounded-full px-3 py-2 font-bold"><%= request.tags[:status] %></span></div>
+  <% elsif request.tags[:status].start_with?("3") %>
+    <div class="w-24"><span class="bg-yellow-100 text-yellow-600 rounded-full px-3 py-2 font-bold"><%= request.tags[:status] %></span></div>
+  <% elsif request.tags[:status].start_with?("4") %>
+    <div class="w-24"><span class="bg-orange-200 text-orange-700 rounded-full px-3 py-2 font-bold"><%= request.tags[:status] %></span></div>
+  <% elsif request.tags[:status].start_with?("5") %>
+    <div class="w-24"><span class="bg-red-300 text-red-800 rounded-full px-3 py-2 font-bold"><%= request.tags[:status] %></span></div>
+  <% end %>
+  <div class="w-32 text-center">
+    <b class="block"><%= request.tags[:duration] %></b>
+    <%= time_ago_in_words request.log_at %> ago
+  </div>
+</a>

data/app/views/active_tracker/requests/index.html.erb

@@ -0,0 +1,26 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Requests</h1>
+  <form action="<%= ActiveTracker::Configuration.root_path +  "/requests" %>" method="get" class="js-filter-form">
+    <input type='text' name="q" class="bg-gray-100 border-2 border-gray-400 px-2 py-1 rounded-lg js-filter-input" placeholder="Search for request" value="<%= params[:q] %>">
+  </form>
+</div>
+
+<% if @requests && @requests.any? %>
+  <div class="bg-white shadow mt-4 rounded-b-lg" style="">
+    <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+      <div class="w-24">Method</div>
+      <div class="flex-1">Path</div>
+      <div class="w-24">Response</div>
+      <div class="w-32 text-right">Time</div>
+    </div>
+
+    <% @requests.each do |request| %>
+      <%= render "active_tracker/requests/request", request: request %>
+    <% end -%>
+
+  </div>
+
+  <%= render "active_tracker/common/pagination", pagination: @pagination, url: request.fullpath, duration: @duration %>
+<% else %>
+  <%= render "active_tracker/common/empty", plural_type: "requests" %>
+<% end %>

data/app/views/active_tracker/requests/show.html.erb

@@ -0,0 +1,81 @@
+<div class="flex w-full justify-between items-center">
+  <h1 class="text-xl text-blue-900 flex-1">Request</h1>
+</div>
+
+<div class="flex flex-grow mt-10 items-center">
+  <div class="rounded-lg bg-white text-sm text-gray-600 flex-1">
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Method</div>
+      <div class="pl-4"><span class="bg-gray-200 text-gray-600 rounded-full px-2 py-1 text-sm font-bold"><%= @request.tags[:method] %></span></div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Path</div>
+      <div class="pl-4"><%= @request.tags[:url] %></div>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">Status</div>
+      <% if @request.tags[:status].start_with?("2") %>
+        <div class="pl-4"><span class="bg-green-100 text-green-600 rounded-full px-2 py-1 text-sm font-bold"><%= @request.tags[:status] %></span></div>
+      <% elsif @request.tags[:status].start_with?("3") %>
+        <div class="pl-4"><span class="bg-yellow-100 text-yellow-600 rounded-full px-2 py-1 text-sm font-bold"><%= @request.tags[:status] %></span></div>
+      <% elsif @request.tags[:status].start_with?("4") %>
+        <div class="pl-4"><span class="bg-orange-100 text-orange-600 rounded-full px-2 py-1 text-sm font-bold"><%= @request.tags[:status] %></span></div>
+      <% elsif @request.tags[:status].start_with?("5") %>
+        <div class="pl-4"><span class="bg-red-100 text-red-600 rounded-full px-2 py-1 text-sm font-bold"><%= @request.tags[:status] %></span></div>
+      <% end %>
+    </div>
+    <div class="flex flex-grow items-center">
+      <div class="bg-gray-200 text-gray-600 uppercase w-32 p-4">When</div>
+      <div class="pl-4"><%= time_ago_in_words @request.log_at %> ago</div>
+    </div>
+  </div>
+
+  <% if @request.tags[:user_avatar_url] || @request.tags[:user_name] || @request.tags[:user_email] %>
+    <div class="ml-8 text-center">
+      <% if @request.tags[:user_avatar_url] %>
+        <%= image_tag @request.tags[:user_avatar_url], class:"w-20 h-20 object-cover rounded-full inline-block border-2 border-gray-500" %>
+      <% end %>
+      <% if @request.tags[:user_name] %>
+        <h2 class="text-lg text-blue-900"><%= @request.tags[:user_name] %></h2>
+      <% end %>
+      <% if @request.tags[:user_email] %>
+        <a href="mailto:<%= @request.tags[:user_email] %>" class="text-sm text-blue-600 hover:text-blue-600 hover:underline"><%= @request.tags[:user_email] %></a>
+      <% end %>
+    </div>
+  <% end %>
+</div>
+
+<div class="mt-10 flex-grow-0">
+  <div>
+    <a href="#" class="text-lg mr-3 text-blue-600 js-activetracker-tab" data-tab="logs">Logs</a>
+    <a href="#" class="text-lg mr-3 text-gray-500 js-activetracker-tab" data-tab="response">Response</a>
+    <% if ActiveTracker::Plugin::Query.registered? && @queries.any? %>
+      <a href="#" class="text-lg mr-3 text-gray-500 js-activetracker-tab" data-tab="queries">Queries</a>
+    <% end %>
+  </div>
+
+  <div class="bg-black text-white font-mono whitespace-pre-wrap text-sm rounded-lg mt-2 p-4 overflow-x-auto js-activetracker-tab-content" data-content="logs"><%= escape_ansi @request.log.strip %></div>
+  <div class="bg-black text-white font-mono whitespace-pre-wrap text-sm rounded-lg mt-2 p-4 overflow-x-auto js-activetracker-tab-content hidden" data-content="response"><%= @request.output.strip %></div>
+  <div class="bg-white rounded-b-lg mt-2 overflow-x-auto js-activetracker-tab-content hidden" data-content="queries">
+    <div class="bg-gray-200 text-gray-600 uppercase tracking-tight leading-none py-2 px-4 flex flex-grow">
+      <div class="flex-1">SQL</div>
+      <div class="w-24 text-right">Count</div>
+      <div class="w-32 text-right">Last response</div>
+    </div>
+
+    <% @queries.each do |query| %>
+      <% actual_query = ActiveTracker::Model.find(query.key) %>
+      <% border_size = @queries.last == query ? "none" : "2" %>
+      <a href='<%= ActiveTracker::Configuration.root_path +  "/queries/#{query.id}" %>' class="flex flex-grow border-b-<%= border_size %> border-gray-200 text-gray-600 px-4 text-sm py-6 items-center">
+        <div class="flex-1 break-all font-mono"><%= actual_query.tags[:sql] %>
+          <% if actual_query.tags[:name].present? %>
+            <br /><div class="block bg-gray-200 text-gray-900 py-1 px-2 text-xs rounded no-wrap mt-1 inline-block"><%= actual_query.tags[:name] %></div>
+          <% end %>
+        </div>
+        <div class="w-24 text-right"><%= actual_query.count %></div>
+        <div class="w-32 text-center"><%= "%.1f" % actual_query.last_duration %>ms</div>
+      </a>
+    <% end -%>
+  </div>
+
+</div>

data/app/views/layouts/active_tracker/active_tracker.html.erb

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ActiveTracker</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag rescue nil %>
+
+    <%= stylesheet_link_tag    'active_tracker/active_tracker', media: 'all' %>
+    <%= javascript_include_tag 'active_tracker/active_tracker' %>
+  </head>
+
+  <body class="bg-gray-300 p-3 pb-10">
+    <div class="container mx-auto">
+      <header class="border-b-2 border-gray-400 flex justify-between w-full pb-3 items-center">
+        <div class="">
+          <%= link_to image_tag("active_tracker/logo.svg"), ActiveTracker::Configuration.root_path %>
+        </div>
+        <div class="text-right">
+          <% if ActiveTracker.connection_offline? %>
+            <div class="text-red-700 inline-block flex flex-0 align-middle">
+              <div class="w-6 h-6 mr-2">
+                <svg aria-hidden="true" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"/></svg>
+              </div>
+              <span>Redis Offline</span>
+            </div>
+            <% end %>
+        </div>
+      </header>
+
+      <div class="mt-5 flex">
+        <nav class='w-48 mt-1 mr-8'>
+          <% ActiveTracker::Configuration.plugins.each do |plugin| %>
+            <%= render "active_tracker/common/plugin_nav", plugin: plugin %>
+          <% end -%>
+        </nav>
+        <article class="flex-1 min-w-0">
+          <%= yield %>
+        </article>
+      </div>
+    </div>
+
+    <div class="container mx-auto text-sm text-gray-600 text-center mt-6 pt-3 border-t-2 border-gray-400">
+      ActionTracker is an <%= link_to "open-source project", "https://github.com/civo/activetracker", class:"text-blue-600" %> from <%= link_to "Civo", "https://www.civo.com", class:"text-blue-600" %>.<br />Released under the MIT licence, but copyright &copy; 2019 Civo Ltd and the ActionTracker contributors.
+    </div>
+  </body>
+</html>