components, angular dbmon

2016-05-03 23:39:01 -04:00 · 2016-05-03 23:39:01 -04:00 · 3282ef3f77
commit 3282ef3f77
parent ba378d3652
30 changed files with 1270 additions and 248 deletions
--- a/examples/dbmonster/angular/app.js
+++ b/examples/dbmonster/angular/app.js
@ -0,0 +1,55 @@
+var renderStage = 0
+perfMonitor.startFPSMonitor()
+perfMonitor.startMemMonitor()
+perfMonitor.initProfiler("render")
+
+var AppComponent = ng.core.Component({selector: "my-app"})
+.View({
+	directives: [ng.common.CORE_DIRECTIVES],
+	template: "<div>" +
+		"<table class='table table-striped latest-data'>" +
+			"<tbody>" +
+				"<tr *ngFor='let db of databases'>" +
+					"<td class='dbname'>{{db.dbname}}</td>" +
+					"<td class='query-count'>" +
+						"<span [class]='db.lastSample.countClassName'>{{db.lastSample.nbQueries}}</span>" +
+					"</td>" +
+					"<td *ngFor='let q of db.lastSample.topFiveQueries' [class]='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>"
+})
+.Class({
+	constructor: function() {
+		this.databases = []
+		this.update()
+	},
+	update: function() {
+		var self = this
+		self.databases = ENV.generateData(true).toArray()
+		setTimeout(function() {self.update()}, ENV.timeout)
+		
+		if (renderStage === 0) {
+			renderStage = 1
+			perfMonitor.startProfile("render")
+		}
+	},
+	ngAfterViewChecked: function() {
+		if (renderStage === 1) {
+			perfMonitor.endProfile("render")
+			renderStage = 0
+		}
+	},
+})
+
+document.addEventListener("DOMContentLoaded", function() {
+	ng.core.enableProdMode()
+	ng.platform.browser.bootstrap(AppComponent)
+})
--- a/examples/dbmonster/angular/index.html
+++ b/examples/dbmonster/angular/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
+    <link href="../styles.css" rel="stylesheet" type="text/css" />
+    <meta charset="utf-8">
+    <title>dbmon (Angular2)</title>
+</head>
+<body>
+	<my-app></my-app>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.js"></script>
+	<script src="../ENV.js"></script>
+	<script src="http://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
+	<script src="app.js"></script>
+</body>
+</html>