add vue 2 dbmonster example

2016-10-27 18:22:47 -05:00 · 2016-10-27 18:22:47 -05:00 · 51e50bd450
commit 51e50bd450
parent 0edc374729
2 changed files with 66 additions and 0 deletions
--- a/examples/dbmonster/vue/app.js
+++ b/examples/dbmonster/vue/app.js
@ -0,0 +1,51 @@
+var renderStage = 0
+perfMonitor.startFPSMonitor()
+perfMonitor.startMemMonitor()
+perfMonitor.initProfiler("render")
+
+var vm = new Vue({
+  el: '#app',
+  data: {
+    databases: [],
+  },
+  methods: {
+    update: function () {
+      this.databases = ENV.generateData().toArray()
+      setTimeout(this.update.bind(this), ENV.timeout)
+
+      if (renderStage === 0) {
+        renderStage = 1
+        perfMonitor.startProfile('render')
+      }
+    },
+  },
+  updated: function () {
+    if (renderStage === 1) {
+      renderStage = 0
+      perfMonitor.endProfile('render')
+    }
+  },
+  template: '<div>' +
+      '<table class="table table-striped latest-data">' +
+        '<tbody>' +
+          '<tr v-for="db of databases">' +
+            '<td class="dbname">{{ db.dbname }}</td>' +
+            '<td class="query-count">' +
+              '<span v-bind:class="[ db.lastSample.countClassName ]">' +
+                '{{ db.lastSample.nbQueries}}' +
+              '</span>' +
+            '</td>' +
+            '<td v-for="q of db.lastSample.topFiveQueries" v-bind:class="[ q.elapsedClassName ]">' +
+              '{{ q.formatElapsed }}' +
+              '<div class="popover left">' +
+                '<div className="popover-content">{{ q.query }}</div>' +
+                '<div className="arrow"></div>' +
+              '</div>' +
+            '</td>' +
+          '</tr>' +
+        '</tbody>' +
+      '</table>' +
+    '</div>',
+})
+
+vm.update()
--- a/examples/dbmonster/vue/index.html
+++ b/examples/dbmonster/vue/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link href="../styles.css" rel="stylesheet" type="text/css" />
+	<title>dbmon (Vue 2)</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="//vuejs.org/js/vue.min.js"></script>
+	<script src="../ENV.js"></script>
+	<script src="https://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
+	<script src="app.js"></script>
+</body>
+</html>