Adds vue 2

mathieuancelin · Jan 22, 2017 · 8bbbe73 · 8bbbe73
1 parent fb95e85
commit 8bbbe73
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 0 deletions.
diff --git a/lib/vue2.min.js b/lib/vue2.min.js
diff --git a/library-list.js b/library-list.js
@@ -25,6 +25,7 @@
     { type: 'naive', id: 'react-canvas', url: './react-canvas', label: 'DBMON react-canvas' },
     { type: 'naive', id: 'sammy', url: './sammy', label: 'DBMON sammy' },
     { type: 'naive', id: 'vue', url: './vue', label: 'DBMON Vue.js' },
+    { type: 'naive', id: 'vue2', url: './vue2', label: 'DBMON vue2.js' },
     { type: 'naive', id: 'backbone', url: './backbone', label: 'DBMON Backbone' },
     { type: 'naive', id: 'backbone-marionette', url: './marionette', label: 'DBMON Backbone Marionette' },
     { type: 'optimized', id: 'backbone-marionette', url: './marionette/opt.html', label: 'DBMON Backbone Marionette' },
@@ -51,6 +52,7 @@
     { type: 'optimized', id: 'vanilla', url: './vanilla-optimized', label: 'DBMON vanilla' },
     { type: 'optimized', id: 'maskjs', url: './mask/index_opt.html', label: 'DBMON MaskJS' },
     { type: 'optimized', id: 'vue', url: './vue/opt.html', label: 'DBMON Vue.js' },
+    { type: 'optimized', id: 'vue2', url: './vue2/opt.html', label: 'DBMON vue2.js' },
     { type: 'optimized', id: 'rotorjs', url: './rotorjs/with_thunks.html', label: 'DBMON RotorJS (with using VnodeImmutableThunk)' },
     { type: 'naive', id: 're-frame', url: './re-frame/index.html', label: 're-frame (Reagent)' },
     { type: 'naive', id: 'd3', url: './d3/index.html', label: 'DBMON D3' },

diff --git a/vue2/app.js b/vue2/app.js
@@ -0,0 +1,14 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    databases: []
+  }
+})
+
+function loadSamples() {
+  app.databases = ENV.generateData().toArray();
+  Monitoring.renderRate.ping();
+  setTimeout(loadSamples, ENV.timeout);
+}
+
+loadSamples()
diff --git a/vue2/index.html b/vue2/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="dbmon vue 2" />
+<link href="../styles.css" rel="stylesheet" type="text/css" />
+<title>dbmon (Vue 2)</title>
+</head>
+<body>
+  <div id="app">
+    <table class="table table-striped lastest-data">
+      <tbody>
+        <tr v-for="(db, $index) in databases" :key="$index">
+          <td class="dbname">{{db.dbname}}</td>
+          <td class="query-count">
+            <span :class="db.lastSample.countClassName">{{db.lastSample.nbQueries}}</span>
+          </td>
+          <td v-for="(q, $index) in db.lastSample.topFiveQueries" :key="$index" :class="['Query', q.elapsedClassName]">
+            {{q.formatElapsed}}
+            <div class="popover left">
+              <div class="popover-content">{{q.query}}</div>
+              <div class="arrow"></div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="../lib/vue2.min.js"></script>
+  <script src="./app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>
diff --git a/vue2/opt.html b/vue2/opt.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="dbmon vue 2" />
+<link href="../styles.css" rel="stylesheet" type="text/css" />
+<title>dbmon (Vue 2)</title>
+</head>
+<body>
+  <div id="app">
+    <table class="table table-striped lastest-data">
+      <tbody>
+        <tr v-for="(db, $index) in databases" :key="$index">
+          <td class="dbname">{{db.dbname}}</td>
+          <td class="query-count">
+            <span :class="db.lastSample.countClassName">{{db.lastSample.nbQueries}}</span>
+          </td>
+          <td v-for="(q, $index) in db.lastSample.topFiveQueries" :key="$index" :class="['Query', q.elapsedClassName]">
+            {{q.formatElapsed}}
+            <div class="popover left">
+              <div class="popover-content">{{q.query}}</div>
+              <div class="arrow"></div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="../lib/vue2.min.js"></script>
+  <script src="./opt.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>
diff --git a/vue2/opt.js b/vue2/opt.js
@@ -0,0 +1,14 @@
+var app = new Vue({
+  el: '#app',
+  data: {
+    databases: []
+  }
+})
+
+function loadSamples() {
+  app.databases = ENV.generateData(true).toArray();
+  Monitoring.renderRate.ping();
+  setTimeout(loadSamples, ENV.timeout);
+}
+
+loadSamples()