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

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>