vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

components, angular dbmon

Browse source
This commit is contained in:
Leo Horie 2016-05-03 23:39:01 -04:00
parent ba378d3652
commit 3282ef3f77
30 changed files with 1270 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

55
examples/dbmonster/angular/app.js vendored Normal file
View file

@ -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)
})

18
examples/dbmonster/angular/index.html Normal file
View file

@ -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>

7
examples/dbmonster/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

28
examples/dbmonster/mithril/app.js
View file

@ -3,6 +3,10 @@
var m = require("../../../render/hyperscript")
var render = require("../../../render/render")(window).render
perfMonitor.startFPSMonitor()
perfMonitor.startMemMonitor()
perfMonitor.initProfiler("render")
var data = []
var root = document.getElementById("app")
@ -11,29 +15,29 @@ update()
function update() {
data = ENV.generateData().toArray()
Monitoring.renderRate.ping()
render(root, [view()])
perfMonitor.startProfile("render")
render(root, view())
perfMonitor.endProfile("render")
setTimeout(update, ENV.timeout)
}
function view() {
return m("div", [
m("table", { className: "table table-striped latest-data" }, [
m("table", {className: "table table-striped latest-data"}, [
m("tbody",
data.map(function(db) {
return m("tr", {key: db.dbname}, [
m("td", { className: "dbname" }, db.dbname),
m("td", { className: "query-count" }, [
m("span", { className: db.lastSample.countClassName }, db.lastSample.nbQueries)
m("td", {className: "dbname"}, db.dbname),
m("td", {className: "query-count"}, [
m("span", {className: db.lastSample.countClassName}, db.lastSample.nbQueries)
]),
db.lastSample.topFiveQueries.map(function(query) {
return m("td", { className: query.elapsedClassName }, [
m("span", query.formatElapsed),
m("div", { className: "popover left" }, [
m("div", { className: "popover-content" }, query.query),
m("div", { className: "arrow" })
return m("td", {className: query.elapsedClassName}, [
query.formatElapsed,
m("div", {className: "popover left"}, [
m("div", {className: "popover-content"}, query.query),
m("div", {className: "arrow"})
])
])
})

5
examples/dbmonster/mithril/index.html
View file

@ -9,12 +9,11 @@
<body>
<div id="app"></div>
<script src="../../../module/module.js"></script>
<script src="../../../render/normalizeChildren.js"></script>
<script src="../../../render/node.js"></script>
<script src="../../../render/hyperscript.js"></script>
<script src="../../../render/render.js"></script>
<script src="../ENV.js"></script>
<script src="../memory-stats.js"></script>
<script src="../monitor.js"></script>
<script src="http://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
<script src="app.js"></script>
</body>
</html>

74
examples/dbmonster/react/app.js
View file

@ -1,36 +1,40 @@
"use strict";
"use strict"
var h = React.createElement
perfMonitor.startFPSMonitor()
perfMonitor.startMemMonitor()
perfMonitor.initProfiler("render")
var Query = React.createClass({
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
if (nextProps.elapsedClassName !== this.props.elapsedClassName) return true;
if (nextProps.formatElapsed !== this.props.formatElapsed) return true;
if (nextProps.query !== this.props.query) return true;
return false;
if (nextProps.elapsedClassName !== this.props.elapsedClassName) return true
if (nextProps.formatElapsed !== this.props.formatElapsed) return true
if (nextProps.query !== this.props.query) return true
return false
},
render: function render() {
return h("td", { className: "Query " + this.props.elapsedClassName },
return h("td", {className: "Query " + this.props.elapsedClassName},
this.props.formatElapsed,
h("div", { className: "popover left" },
h("div", { className: "popover-content" }, this.props.query),
h("div", { className: "arrow" })
h("div", {className: "popover left"},
h("div", {className: "popover-content"}, this.props.query),
h("div", {className: "arrow"})
)
);
)
}
});
})
var Database = React.createClass({
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
if (nextProps.lastMutationId === this.props.lastMutationId) return false;
return true;
if (nextProps.lastMutationId === this.props.lastMutationId) return false
return true
},
render: function render() {
var lastSample = this.props.lastSample;
return h("tr", { key: this.props.dbname },
h("td", { className: "dbname" }, this.props.dbname),
h("td", { className: "query-count" },
h("span", { className: this.props.lastSample.countClassName }, this.props.lastSample.nbQueries)
var lastSample = this.props.lastSample
return h("tr", {key: this.props.dbname},
h("td", {className: "dbname"}, this.props.dbname),
h("td", {className: "query-count"},
h("span", {className: this.props.lastSample.countClassName}, this.props.lastSample.nbQueries)
),
this.props.lastSample.topFiveQueries.map(function (query, index) {
return h(Query, {
@ -39,34 +43,40 @@ var Database = React.createClass({
elapsed: query.elapsed,
formatElapsed: query.formatElapsed,
elapsedClassName: query.elapsedClassName
});
})
})
);
)
}
});
})
var DBMon = React.createClass({
getInitialState: function getInitialState() {
return {
databases: []
};
}
},
loadSamples: function loadSamples() {
var data = ENV.generateData(true).toArray()
perfMonitor.startProfile("render")
this.setState({
databases: ENV.generateData(true).toArray()
});
Monitoring.renderRate.ping();
setTimeout(this.loadSamples, ENV.timeout);
databases: data
})
perfMonitor.endProfile("render")
setTimeout(this.loadSamples, ENV.timeout)
},
componentDidMount: function componentDidMount() {
this.loadSamples();
this.loadSamples()
},
render: function render() {
return h("div", null,
h("table", { className: "table table-striped latest-data" },
h("table", {className: "table table-striped latest-data"},
h("tbody", null, this.state.databases.map(function (database) {
return h(Database, {
key: database.dbname,
@ -74,11 +84,11 @@ var DBMon = React.createClass({
dbname: database.dbname,
samples: database.samples,
lastSample: database.lastSample
});
})
}))
)
);
)
}
});
})
ReactDOM.render(h(DBMon, null), document.getElementById('app'));
ReactDOM.render(h(DBMon, null), document.getElementById('app'))

7
examples/dbmonster/react/index.html
View file

@ -8,11 +8,10 @@
</head>
<body>
<div id="app"></div>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://fb.me/react-15.0.2.js"></script>
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<script src="../ENV.js"></script>
<script src="../memory-stats.js"></script>
<script src="../monitor.js"></script>
<script src="http://localvoid.github.io/perf-monitor/0.1/perf-monitor.js"></script>
<script src="app.js"></script>
</body>
</html>