redis_dashboard 0.2.0 → 0.3.0

data/lib/redis_dashboard/public/style.css

@@ -0,0 +1,185 @@
+body {
+  max-width: 1280px;
+  margin: 0px auto;
+}
+
+body > header {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.logo {
+  display: flex;
+  margin: 0 0 24px 0;
+  padding: 0;
+  box-shadow: var(--box-shadow-m);
+  line-height: 48px;
+}
+
+.logo a {
+  padding: 0 24px;
+  background: rgba(var(--color-red-500), 1);
+  color: rgba(var(--color-grey-00), 1);
+  font-size: var(--font-size-40);
+  font-weight: 500;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  box-shadow: var(--box-shadow-m);
+}
+
+body > header .server {
+  font-weight: 400;
+  display: block;
+  font-size: 1rem;
+  line-height: 48px;
+  padding: 0 24px;
+  margin: 0 0 24px 0;
+  background: rgba(var(--color-grey-00), 1);
+  box-shadow: var(--box-shadow-m);
+}
+
+.logo a:hover {
+  background: rgba(var(--color-red-600), 1);
+  color: rgba(var(--color-grey-00), 1);
+}
+
+body > header nav {
+  display: flex;
+  flex-wrap: wrap;
+  line-height: 48px;
+  margin: 0 0 24px auto;
+  background-color: rgba(var(--color-grey-00), 1);
+  box-shadow: var(--box-shadow-m);
+}
+
+body > header nav a:any-link {
+  padding: 0 24px;
+  font-weight: 500;
+  font-size: var(--font-size-40);
+  letter-spacing: 0.05em;;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+body > header nav a:any-link.active,
+body > header nav a:any-link.active:hover,
+body > header nav a:any-link.active:focus {
+  background: rgba(var(--color-red-500), 1);
+  color: rgba(var(--color-grey-00), 1);
+  cursor: initial;
+  box-shadow: var(--box-shadow-m);
+}
+
+/* main */
+
+main * + * {
+  margin-top: 24px;
+}
+
+/* table */
+
+table,
+th,
+tr {  
+  width: 100%;
+}
+
+tbody tr:nth-child(even) {
+  background: inherit;
+}
+
+th {
+  white-space: nowrap;
+}
+
+td {
+  color: rgba(var(--color-grey-700), 1);
+  font-family: var(--font-mono);
+}
+
+td small {
+  font-size: var(--font-size-40);
+  color: rgba(var(--color-grey-400), 1);
+}
+
+th,
+td.key {
+  text-transform: uppercase;
+  font-family: var(--font-sans);
+  font-weight: 400;
+  font-size: var(--font-size-40);
+  letter-spacing: 0.05em;
+  color: rgba(var(--color-grey-500), 1);
+}
+
+td.key {
+  width: 30%;
+  word-break: break-all;
+  white-space: normal;
+}
+
+td.key.no-transform {
+  text-transform: none;
+}
+
+td.date {
+  white-space: nowrap;
+}
+
+td.wrap {
+  word-break: break-all;
+  white-space: normal;
+}
+
+/* card */
+
+.card {
+  overflow-x: auto;
+  border-radius: 0;
+  padding: var(--space-3x);
+}
+
+.card p {
+  max-width: none;
+}
+
+.card > * + * {
+  margin-top: 24px;
+}
+
+.card table {
+  margin: -24px; 
+  min-width: calc(100% + 48px);
+  outline-style: none;
+}
+
+.card * + table {
+  margin: 0 -24px -24px;
+}
+
+table li {
+  margin-top: 0;
+  list-style-type: none;
+}
+
+.card div .label {
+  color: rgba(var(--color-grey-500), 1);
+  text-transform: uppercase;
+  font-size: var(--font-size-30);
+  letter-spacing: 0.05em;
+  font-weight: 500;
+  display: block;
+}
+
+/* footer */
+
+body > footer {
+  margin-top: 24px;
+  font-size: var(--font-size-40);
+  padding: 0 24px;
+}
+
+body > footer p {
+  max-width: none;
+}

data/lib/redis_dashboard/views/application.scss

@@ -1,10 +1,2 @@
-@import "stylesheets/colors";
-
-@import "stylesheets/base";
-@import "stylesheets/typography";
-@import "stylesheets/link";
-
-@import "stylesheets/table";
-
-@import "stylesheets/page";
-@import "stylesheets/server-card";
+@import "stylesheets/ariato";
+@import "stylesheets/style";

data/lib/redis_dashboard/views/clients.erb

@@ -1,26 +1,27 @@
-<div class="table">
+<div class="card">
   <table>
     <thead>
       <% for key in (keys = clients.first.keys) %>
         <th title="<%= clients_column_description key %>"><%= key %></th>
       <% end %>
     </thead>
-    <% for client in clients %>
-      <tr>
-        <% for key in keys %>
-          <% if key == "events" %>
-            <td title="<%= client_event_description client[key] %>"><%= client[key] %></td>
-          <% else %>
-            <td><%= client[key] %></td>
+    <tbody>
+      <% for client in clients %>
+        <tr>
+          <% for key in keys %>
+            <% if key == "events" %>
+              <td title="<%= client_event_description client[key] %>"><%= client[key] %></td>
+            <% else %>
+              <td><%= client[key] %></td>
+            <% end %>
           <% end %>
-        <% end %>
-      </tr>
-    <% end %>
+        </tr>
+      <% end %>
+    </tbody>
   </table>
 </div>
-
-<a href="https://redis.io/commands/client-list">
-  <svg viewBox="0 0 24 24">
-    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
-  </svg> Redis client list documentation
-</a>
+<div role="alert">
+  <a href="https://redis.io/commands/client-list" target="_blank" rel="noopener nofollower">
+    Redis client list documentation
+  </a>
+</div>

data/lib/redis_dashboard/views/config.erb

@@ -1,4 +1,4 @@
-<div class="table">
+<div class="card">
   <table>
     <% for (key, value) in config %>
       <tr>
@@ -8,9 +8,8 @@
     <% end %>
   </table>
 </div>
-
-<a href="https://raw.githubusercontent.com/antirez/redis/4.0/redis.conf">
-  <svg viewBox="0 0 24 24">
-    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
-  </svg> Redis config documentation
-</a>
+<div role="alert">
+  <a href="https://raw.githubusercontent.com/antirez/redis/4.0/redis.conf" target="_blank" rel="noopener nofollower">
+    Redis config documentation
+  </a>
+</div>

data/lib/redis_dashboard/views/index.erb

@@ -1,26 +1,26 @@
-<div class="server-list">
+<div class="grid-auto">
   <% clients.each_with_index do |client, index| %>
     <% info = client.info %>
-    <div class="server-card">
-      <div class="server-card-title">
-        <a href="<%= url("info?id=#{index}") %>"><%= URI(client.url).host %>  (<%= info["role"] %>)</a>
-      </div>
-      <div class="server-card-content">
+    <div class="card">
+      <header>
+        <a href="<%= url("/#{client.host}") %>"><%= client.host %>  (<%= info["role"] %>)</a>
+      </header>
+      <div class="grid-auto">
         <div>
           <span class="label">Connections</span>
-          <span><%= info["connected_clients"] %></span>
+          <strong><%= info["connected_clients"] %></strong>
         </div>
         <div>
           <span class="label">Memory</span>
-          <span><%= info["used_memory_human"] %></span>
+          <strong><%= info["used_memory_human"] %></strong>
         </div>
         <div>
           <span class="label">Commands per second</span>
-          <span><%= info["instantaneous_ops_per_sec"] %></span>
+          <strong><%= info["instantaneous_ops_per_sec"] %></strong>
         </div>
         <div>
           <span class="label">Cache hit ratio</span>
-          <span><%== format_impact_percentage compute_cache_hit_ratio(info) %></span>
+          <strong><%== format_impact_percentage compute_cache_hit_ratio(info) %></strong>
         </div>
       </div>
     </div>

data/lib/redis_dashboard/views/info.erb

@@ -1,4 +1,4 @@
-<div class="table">
+<div class="card">
   <table>
     <% for (key,value) in info %>
       <tr>
@@ -8,9 +8,8 @@
     <% end %>
   </table>
 </div>
-
-<a href="https://redis.io/commands/info">
-  <svg viewBox="0 0 24 24">
-    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
-  </svg> Redis documentation
-</a>
+<div role="alert">
+  <a href="https://redis.io/commands/info" target="_blank" rel="noopener nofollower">
+    Redis documentation
+  </a>
+</div>

data/lib/redis_dashboard/views/key/hash.erb

@@ -0,0 +1,12 @@
+<h3>Data</h3>
+
+<table>
+  <tbody>
+    <% for (name, value) in client.connection.hgetall(key) %>
+      <tr>
+        <td class="key no-transform"><%= name %></td>
+        <td class="wrap"><%= value %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/lib/redis_dashboard/views/key/list.erb

@@ -0,0 +1,11 @@
+<h3>Data</h3>
+
+<table>
+  <tbody>
+    <% for value in client.connection.lrange(key, 0, -1) %>
+      <tr>
+        <td><%= value %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/lib/redis_dashboard/views/key/metadata.erb

@@ -0,0 +1,47 @@
+<h3>Metadata</h3>
+
+<table>
+  <tbody>
+    <tr>
+      <td class="key">Key</td>
+      <td class="wrap"><%= key %></td>
+    </tr>
+
+    <tr>
+      <td class="key">Type</td>
+      <td class="wrap"><%= key_type = client.connection.type(key) %></td>
+    </tr>
+
+    <tr>
+      <td class="key">Bytes</td>
+      <td class="wrap"><%= mute_redis_command_error { client.connection.memory(:usage, key) } %></td>
+    </tr>
+
+    <tr>
+      <td class="key">TTL</td>
+      <td class="wrap"><%= client.connection.ttl(key) %></td>
+    </tr>
+
+    <tr>
+      <td class="key">Object refcount</td>
+      <td class="wrap"><%= client.connection.object("REFCOUNT", key) %></td>
+    </tr>
+
+    <tr>
+      <td class="key">Object encoding</td>
+      <td class="wrap"><%= client.connection.object("ENCODING", key) %></td>
+    </tr>
+
+    <tr>
+      <td class="key">Object idletime</td>
+      <td class="wrap"><%= client.connection.object("IDLETIME", key) %></td>
+    </tr>
+
+    <% if key_type == "list" %>
+      <tr>
+        <td class="key">Length</td>
+        <td class="wrap"><%= client.connection.llen(key) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/lib/redis_dashboard/views/key/set.erb

@@ -0,0 +1,11 @@
+<h3>Data</h3>
+
+<table>
+  <tbody>
+    <% for value in client.connection.smembers(key) %>
+      <tr>
+        <td><%= value %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/lib/redis_dashboard/views/key/string.erb

@@ -0,0 +1,3 @@
+<h3>Data</h3>
+
+<code><%= client.connection.get(key) %></code>

data/lib/redis_dashboard/views/key/unsupported.erb

@@ -0,0 +1,2 @@
+<h3>Data</h3>
+<p>Sorry, but <code><%= client.connection.type(params[:key]) %></code> type is not supported.</p>

data/lib/redis_dashboard/views/key/zset.erb

@@ -0,0 +1,16 @@
+<h3>Data</h3>
+
+<table>
+  <tbody>
+    <tr>
+      <td>Score</td>
+      <td>Value</td>
+    </tr>
+    <% client.connection.call([:zrange, key, 0, -1, "WITHSCORES"]).each_slice(2) do |value, score| %>
+      <tr>
+        <td><%= score %></td>
+        <td><%= value %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/lib/redis_dashboard/views/key.erb

@@ -0,0 +1,5 @@
+<div class="card">
+  <%== erb(:"key/metadata", locals: {key: params[:key]}) %>
+  <br/>
+  <%== render_key_data(params[:key]) %>
+</div>

data/lib/redis_dashboard/views/keys.erb

@@ -0,0 +1,26 @@
+<div class="card">
+  <form action="<%= url("/#{params[:server]}/keyspace/#{params[:db]}") %>" method="get">
+    <input type="text" name="query" value="<%= "#{params[:query]}" %>" placeholder="Filter key names with patterns such as foo*"/>
+  </form>
+  <% if !params[:query].to_s.empty? %>
+    <p>
+      <% if keys.size == 1 %>
+        <%= keys.size %> key found
+      <% else %>
+        <%= keys.size %> keys found
+      <% end %>
+      <% if keys.size > 1000 %>
+        <small>(only 1000 are listed)</small>
+      <% end %>
+    </p>
+    <table>
+      <tbody>
+        <% for key in keys[0..1000] %>
+          <tr>
+            <td class="wrap"><a href="<%= url("/#{params[:server]}/keyspace/#{params[:db]}/#{escape_key(key)}") %>"><%= key %></a></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  <% end %>
+</div>

data/lib/redis_dashboard/views/keyspace.erb

@@ -0,0 +1,23 @@
+<div class="card">
+  <table>
+    <thead>
+      <tr>
+        <th>db</th>
+        <th class="is-right">keys</th>
+        <th class="is-right">expires</th>
+        <th class="is-right">avg_ttl</th>
+      </tr>
+    </thead>
+    
+    <% for (db, stats) in keyspace %>
+      <tr>
+        <td>
+          <a href="<%= url(File.join(params[:server], "keyspace", db)) %>"><%= db %></a>
+        </td>
+        <td class="is-right"><%= stats["keys"] %></td>
+        <td class="is-right"><%= stats["expires"] %></td>
+        <td class="is-right"><%= stats["avg_ttl"] %></td>
+      </tr>
+    <% end %>
+  </table>
+</div>

data/lib/redis_dashboard/views/layout.erb

@@ -1,37 +1,42 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
-    <title>Redis Dashboard</title>
-    <link rel="stylesheet" href="<%= url("application.css") %>">
+    <title>
+      <% if params[:server] %>
+        <%= page_title %> | 
+      <% end %>
+      Redis Dashboard</title>
+    <link rel="stylesheet" href="<%= url("ariato.css") %>">
+    <link rel="stylesheet" href="<%= url("style.css") %>">
   </head>
 
   <body>
-    <div class="page">
-      <div class="page-header">
-        <h2 class="page-title">
-          <a href="<%= url("/") %>" class="<%= 'active' if active_page?('') %>">Redis Dashboard</a>
-          <% if params[:id] %>
-            <span><%= page_title %></span>
-          <% end %>
-        </h2>
-        <% if params[:id] %>
-          <div class="page-menu">
-            <a class="page-menu-item <%= 'active' if active_page?('info') %>" href="<%= url("/info?id=#{redis_id}") %>">Info</a>
-            <a class="page-menu-item <%= 'active' if active_page?('config') %>" href="<%= url("/config?id=#{redis_id}") %>">Config</a>
-            <a class="page-menu-item <%= 'active' if active_page?('clients') %>" href="<%= url("/clients?id=#{redis_id}") %>">Clients</a>
-            <a class="page-menu-item <%= 'active' if active_page?('stats') %>" href="<%= url("/stats?id=#{redis_id}") %>">Stats</a>
-            <a class="page-menu-item <%= 'active' if active_page?('slowlog') %>" href="<%= url("/slowlog?id=#{redis_id}") %>">Slowlog</a>
-            <a class="page-menu-item <%= 'active' if active_page?('memory') %>" href="<%= url("/memory?id=#{redis_id}") %>">Memory</a>
-          </div>
-        <% end %>
-      </div>
+    <header>
+      <h1 class="logo">
+        <a href="<%= url("/") %>">Redis Dashboard</a>
+      </h1>
+      <% if params[:server] %>
+        <span class="server"><%= page_title %></span>
+      <% end %>
+      <% if params[:server] %>
+        <nav aria-label="site">
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}") %>" href="<%= url("/#{params[:server]}") %>">Info</a>
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}/config") %>" href="<%= url("/#{params[:server]}/config") %>">Config</a>
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}/clients") %>" href="<%= url("/#{params[:server]}/clients") %>">Clients</a>
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}/stats") %>" href="<%= url("/#{params[:server]}/stats") %>">Stats</a>
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}/slowlog") %>" href="<%= url("/#{params[:server]}/slowlog") %>">Slowlog</a>
+          <a class="page-menu-item <%= active_page_css("/#{params[:server]}/memory") %>" href="<%= url("/#{params[:server]}/memory") %>">Memory</a>
+          <a class="page-menu-item <%= active_path_css("/#{params[:server]}/keyspace") %>" href="<%= url("/#{params[:server]}/keyspace") %>">Keyspace</a>
+        </nav>
+      <% end %>  
+    </header>
+    <main>
       <%== yield %>
-      <div class="page-footer">
-        Made by <a href="https://basesecrete.com/en/">Base Secrète</a>.  MIT License. <a href="https://github.com/BaseSecrete/redis_dashboard">Fork on GitHub</a>.
-        <div class="rorvswild">
-          Rails developer? Check out <a href="https://rorvswild.com">RoRvsWild</a>, our Ruby on Rails application monitoring tool.
-        </div>
-      </div>
-    </div>
+    </main>
+    <footer>
+      <p>Made by <a href="https://basesecrete.com/en/" target="_blank" rel="noopener">Base Secrète</a>.  MIT License. <a href="https://github.com/BaseSecrete/redis_dashboard" target="_blank" rel="noopener nofollower">Fork on GitHub</a>.<br>
+        <b>Rails developer?</b> Check out <a href="https://rorvswild.com" target="_blank" rel="noopener">RoRvsWild</a>, our Ruby on Rails application monitoring tool.
+      </p>
+    </footer>
   </body>
 </html>

data/lib/redis_dashboard/views/memory.erb

@@ -1,24 +1,25 @@
-<div class="table">
+<div class="card">
   <table>
-    <% for (key,value) in stats %>
-      <tr>
-        <td class="key"><%= key %></td>
-        <td>
-          <% if value.is_a?(Hash) %>
-            <% for (sub_key, sub_value) in value %>
-              <%= "#{sub_key}: #{sub_value}" %><br/>
+    <tbody>
+      <% for (key,value) in stats %>
+        <tr>
+          <td class="key"><%= key %></td>
+          <td>
+            <% if value.is_a?(Hash) %>
+              <% for (sub_key, sub_value) in value %>
+                <%= "#{sub_key}: #{sub_value}" %><br/>
+              <% end %>
+            <% else %>
+              <%= value %>
             <% end %>
-          <% else %>
-            <%= value %>
-          <% end %>
-        </td>
-      </tr>
-    <% end %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
   </table>
 </div>
-
-<a href="https://github.com/antirez/redis/blob/unstable/redis.conf">
-  <svg viewBox="0 0 24 24">
-    <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" />
-  </svg> Redis memory stats documentation
-</a>
+<div role="alert">
+  <a href="https://github.com/antirez/redis/blob/unstable/redis.conf" target="_blank" rel="noopener nofollower">
+    Redis memory stats documentation
+  </a>
+</div>