Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
139 lines (120 sloc) 4.48 KB
<!DOCTYPE html>
<html>
<head>
<title>DBMonster via pure DOM</title>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="en-US"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.2/ie8.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.1/es5-sham.js"></script>
<![endif]-->
</head>
<body>
<div id="link">
You're looking at DOM<br>
version of <a href="https://dbmonster.firebaseapp.com/">DBMonster</a>.
</div>
<div id="body">
</div>
<script src="data.js"></script>
<script type="text/javascript">
// simple rAF poly, will fallback with setTimeout(fn, ASAP)
var requestAnimationFrame = this.requestAnimationFrame ||
this.webkitRequestAnimationFrame ||
this.mozRequestAnimationFrame ||
this.msRequestAnimationFrame ||
this.oRequestAnimationFrame ||
setTimeout;
var rootNode, updates;
// shortcut for node.appendChild(document.createElement)
function append(where, what) {
return where.appendChild(
(where.ownerDocument || document).createElement(what)
);
}
// recycled function for all updates
// used as: a1.forEach(updateInfo, a2)
function updateInfo(info, i) {
this[i](info);
}
// main logic
function update() {
// we receive data
var dbs = getData();
// we create the table once
if(rootNode == null) {
rootNode = append(document.getElementById('body'), 'table');
rootNode.className = 'table table-striped latest-data';
rootNode = append(rootNode, 'tbody');
// per each data ...
updates = dbs.map(
function (db) {
var
// create the row
tr = append(rootNode, 'tr'),
// create all other fields like a static template would do
dbName = append(tr, 'td'),
queryCount = append(tr, 'td'),
countInfo = append(queryCount, 'span'),
// map updates for top five queries, pass this same row
topFiveQueries = db.topFiveQueries.map(this, tr),
// the cluster name will rarely update, let's store it
infoName = ''
;
// setup nodes
dbName.className = 'dbname';
queryCount.className = 'query-count';
// return a function that will update all of the above
return function (db) {
// we update only what we need
// and we use native DOM methods
if (infoName !== db.name) {
infoName = db.name;
tr.setAttribute('key', infoName);
// we also trust text to HTML escape via native DOM
dbName.textContent = infoName;
}
countInfo.textContent = db.queries.length;
countInfo.className = getCountClassName(db);
// we update top five too
db.topFiveQueries.forEach(updateInfo, topFiveQueries);
};
},
// non-hoisted, in forEach recycled function
// creates info per each top-five query
function (query) {
var
// the query td with its fields
td = append(this, 'td'),
elapsed = append(td, 'span'),
popoverLeft = append(td, 'div'),
popoverContent = append(popoverLeft, 'div'),
arrow = append(popoverLeft, 'div')
;
// nodes and classes setup
elapsed.className = 'foo';
popoverLeft.className = 'popover left';
popoverContent.className = 'popover-content';
arrow.className = 'arrow';
// we return the function that will update only the necessary
return function (query) {
popoverContent.textContent = query.query;
elapsed.textContent = formatElapsed(query.elapsed);
td.className = 'Query ' + elapsedClassName(query.elapsed);
};
}
);
}
// we update all rows
dbs.forEach(updateInfo, updates);
// we ask to perform the same ASAP
requestAnimationFrame(update);
}
requestAnimationFrame(update);
</script>
</body>
</html>