Merge pull request #45 from tbranyen/diffhtml-upstream

Adds in diffHTML example
mathieuancelin · Feb 12, 2016 · b908759 · b908759
2 parents e4324ea + c774a58
commit b908759
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 0 deletions.
diff --git a/diffhtml/app.js b/diffhtml/app.js
@@ -0,0 +1,39 @@
+const element = document.querySelector('#dbmon tbody');
+const cached = _.template(`
+  <% databases.map(function(database) { %>
+    <tr>
+      <td class="dbname">
+        <%= database.dbname %>
+      </td>
+      <td class="query-count">
+        <span class="<%= database.lastSample.countClassName %>">
+          <%= database.lastSample.nbQueries %>
+        </span>
+      </td>
+      <% database.lastSample.topFiveQueries.map(function(sample) { %>
+        <td class="Query <%= sample.elapsedClassName %>">
+          <%= sample.formatElapsed %>
+          <div class="popover left">
+            <div class="popover-content"><%- sample.query %></div>
+            <div class="arrow"></div>
+          </div>
+        </td>
+      <% }); %>
+    </tr>
+  <% }); %>
+`);
+
+function template(databases) {
+  return cached({ databases });
+}
+
+function render() {
+  var databases = ENV.generateData().toArray();
+  Monitoring.renderRate.ping();
+
+  setTimeout(render, ENV.timeout);
+
+  diff.innerHTML(element, template(databases));
+}
+
+render();
diff --git a/diffhtml/index.html b/diffhtml/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="DBMON DIFFHTML" />
+  <meta charset="utf-8">
+  <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
+  <link href="../styles.css" rel="stylesheet" type="text/css" />
+  <title>dbmon (diffHTML)</title>
+</head>
+<body>
+  <div id="dbmon">
+    <div>
+      <table class="table table-striped latest-data">
+        <tbody></tbody>
+      </table>
+    </div>
+  </div>
+
+  <script src="../lib/underscore-min.js"></script>
+  <script src="../lib/diffhtml.min.js"></script>
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="./app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>
diff --git a/lib/diffhtml.min.js b/lib/diffhtml.min.js
diff --git a/library-list.js b/library-list.js
@@ -31,6 +31,7 @@
     { type: 'naive', id: 'domvm', url: './domvm/index.html', label: 'DBMON domvm' },
     { type: 'naive', id: 'once', url: './once/index.html', label: 'DBMON once' },
     { type: 'naive', id: 'ripple', url: './ripple/index.html', label: 'DBMON ripple' },
+    { type: 'naive', id: 'diffhtml', url: './diffhtml/index.html', label: 'DBMON diffHTML' },
     { type: 'optimized', id: 'react', url: './react/opt.html', label: 'DBMON React' },
     { type: 'optimized', id: 'preact', url: './preact', label: 'DBMON Preact' },
     { type: 'naive', id: 'preact-functional', url: './preact/functional.html', label: 'DBMON Preact (Functional)' },