Merge pull request #78 from Riim/gh-pages

add Rionite
mathieuancelin · Aug 1, 2016 · bfed3bc · bfed3bc
2 parents 73e2cc2 + 12d75be
commit bfed3bc
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 1 deletion.
diff --git a/library-list.js b/library-list.js
@@ -56,7 +56,8 @@
     { type: 'naive', id: 'morphdom', url: './morphdom/index.html', label: 'DBMON Morphdom' },
     { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' },
     { type: 'naive', id: 'vidom', url: './vidom/index.html', label: 'DBMON vidom' },
-    { type: 'optimized', id: 'cycle + xstream', label: 'DBMON Cycle.js + xstream', url: './cycle-xstream'}
+    { type: 'optimized', id: 'cycle + xstream', label: 'DBMON Cycle.js + xstream', url: './cycle-xstream' },
+    { type: 'naive', id: 'rionite', url: './rionite', label: 'DBMON Rionite' }
   ];
 
   function Library() {

diff --git a/readme.md b/readme.md
@@ -37,6 +37,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/
 * [Morphdom](https://github.com/patrick-steele-idem/morphdom)
 * [FRZR](https://frzr.js.org)
 * [Vidom](https://github.com/dfilatov/vidom)
+* [Rionite](https://github.com/Riim/Rionite)
 
 ## Todo
 

diff --git a/rionite/app.js b/rionite/app.js
@@ -0,0 +1,40 @@
+var databases = new cellx.Cell();
+
+Rionite.Component.extend('db-table', {
+  Static: {
+    template: '<table class="table table-striped latest-data"><tbody>\
+      <template is="rt-repeat" for="db of databases" track-by="dbname">\
+        <tr>\
+          <td class="dbname">{db.dbname}</td>\
+          <td class="query-count">\
+            <span class="{db.lastSample.countClassName}">{db.lastSample.nbQueries}</span>\
+          </td>\
+          <template is="rt-repeat" for="q of db.lastSample.topFiveQueries" track-by="$index">\
+            <td class="{q.elapsedClassName}">\
+              {q.formatElapsed}\
+              <div class="popover left">\
+                <div class="popover-content">{q.query}</div>\
+                <div class="arrow"></div>\
+              </div>\
+            </td>\
+          </template>\
+        </tr>\
+      </template>\
+    </tbody></table>'
+  },
+
+  initialize: function() {
+    cellx.define(this, {
+      databases: databases
+    });
+  }
+});
+
+var render = function() {
+  databases.set(ENV.generateData().toArray());
+
+  Monitoring.renderRate.ping();
+  setTimeout(render, ENV.timeout);
+};
+
+render();
diff --git a/rionite/index.html b/rionite/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="DBMON RIONITE" />
+<link href="../styles.css" rel="stylesheet" type="text/css" />
+<title>DBMON (Rionite)</title>
+</head>
+<body>
+  <db-table></db-table>
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="https://npmcdn.com/cellx@1.6.28/dist/cellx.min.js"></script>
+  <script src="https://npmcdn.com/rionite@0.11.29/dist/Rionite-with-polyfills.min.js"></script>
+  <script src="./app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>