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

2
examples/animation/mosaic.html
View file

@ -22,7 +22,7 @@
<body>
<div id="root"></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>

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>

2
examples/svg/clock.html
View file

@ -8,7 +8,7 @@
<body>
<div id="root"></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>

2
examples/svg/ring.html
View file

@ -8,7 +8,7 @@
<body>
<div id="root"></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>

2
examples/svg/tiger.html
View file

@ -8,7 +8,7 @@
<body>
<div id="root"></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>

179
examples/threaditjs/app.js
View file

@ -10,34 +10,17 @@ var router = require("../../router/router")(window, "#")
var api = {
home : function() {
T.timeEnd("Setup")
return request({
method: "GET",
url: T.apiUrl + "/threads/",
})
return request({method: "GET", url: T.apiUrl + "/threads/"})
},
thread : function(id) {
T.timeEnd("Setup")
return request({
method: "GET",
url: T.apiUrl + "/comments/" + id,
}).then(T.transformResponse)
return request({method: "GET", url: T.apiUrl + "/comments/" + id}).then(T.transformResponse)
},
newThread : function(text) {
return request({
method: "POST",
url: T.apiUrl + "/threads/create",
data: {text: text},
});
return request({method: "POST", url: T.apiUrl + "/threads/create",data: {text: text}})
},
newComment : function(text, id) {
return request({
url: T.apiUrl + "/comments/create",
method: "POST",
data: {
text: text,
parent: id,
}
});
return request({method: "POST", url: T.apiUrl + "/comments/create", data: {text: text, parent: id}});
}
};
@ -82,9 +65,9 @@ function createThread() {
return false
}
function showReplying(node) {
node.replying = true
node.newComment = ""
function showReplying(vnode) {
vnode.state.replying = true
vnode.state.newComment = ""
return false
}
@ -99,39 +82,53 @@ function submitComment(node) {
}
//shared
function header() {
return [
m("p.head_links", [
m("a[href='https://github.com/koglerjs/threaditjs/tree/master/examples/mithril']", "Source"),
" | ",
m("a[href='http://threaditjs.com']", "ThreaditJS Home"),
]),
m("h2", [
m("a[href='#/']", "ThreaditJS: Mithril"),
]),
]
var Header = {
view: function() {
return [
m("p.head_links", [
m("a[href='https://github.com/koglerjs/threaditjs/tree/master/examples/mithril']", "Source"),
" | ",
m("a[href='http://threaditjs.com']", "ThreaditJS Home"),
]),
m("h2", [
m("a[href='#/']", "ThreaditJS: Mithril"),
]),
]
}
}
//home
function home() {
return {tag: "[", key: "home", attrs: {oncreate: loadThreads}, children: [
header(),
m(".main", [
loaded === false ? m("h2", "Loading") :
error ? m("h2", "Error! Try refreshing.") :
notFound ? m("h2", "Not found! Don't try refreshing!") :
[
threads.map(threadListItem),
newThread(),
]
])
]}
var Home = {
oninit: loadThreads,
view: function() {
return [
m(Header),
m(".main", [
loaded === false ? m("h2", "Loading") :
error ? m("h2", "Error! Try refreshing.") :
notFound ? m("h2", "Not found! Don't try refreshing!") : [
threads.map(function(thread) {
return [
m("p", [
m("a", {href: "#/thread/" + thread.id}, trust(T.trimTitle(thread.text))),
]),
m("p.comment_count", thread.comment_count + " comment(s)"),
m("hr"),
]
}),
m(NewThread),
]
])
]
}
}
function newThread() {
return m("form", {onsubmit: createThread}, [
m("textarea#threadText"),
m("input", {type:"submit", value: "Post!"}),
])
var NewThread = {
view: function() {
return m("form", {onsubmit: createThread}, [
m("textarea#threadText"),
m("input", {type:"submit", value: "Post!"}),
])
}
}
function threadListItem(thread) {
@ -145,39 +142,49 @@ function threadListItem(thread) {
}
//thread
function thread(args) {
if (current) T.time("Thread render")
return {tag: "[", key: args.id, attrs: {oncreate: function() {loadThread(args.id)}, onremove: unloadThread}, children: [
header(),
current ? m(".main", {oncreate: function() {T.timeEnd("Thread render")}}, [
threadNode({node: current.root})
]) : null
]}
var Thread = {
oninit: function(vnode) {
loadThread(vnode.attrs.id)
},
onremove: unloadThread,
view: function() {
if (current) T.time("Thread render")
return [
m(Header),
current ? m(".main", {oncreate: function() {T.timeEnd("Thread render")}}, [
m(ThreadNode, {node: current.root})
]) : null
]
}
}
function threadNode(args) {
return m(".comment", [
m("p", trust(args.node.text)),
m(".reply", reply(args)),
m(".children", [
args.node.children.map(function(child) {
return threadNode({node: child})
})
var ThreadNode = {
view: function(vnode) {
return m(".comment", [
m("p", trust(vnode.attrs.node.text)),
m(".reply", m(Reply, vnode.attrs)),
m(".children", [
vnode.attrs.node.children.map(function(child) {
return m(ThreadNode, {node: child})
})
])
])
])
}
}
function reply(args) {
return args.node.replying
? m("form", {onsubmit: function() {return submitComment(args.node)}}, [
m("textarea", {
value: args.node.newComment, //FIXME decouple UI state from data
oninput: function(e) {
args.node.newComment = e.target.value
},
}),
m("input", {type:"submit", value: "Reply!"}),
m(".preview", trust(T.previewComment(args.node.newComment))),
])
: m("a", {onclick: function() {return showReplying(args.node)}}, "Reply!")
var Reply = {
view: function(vnode) {
return vnode.state.replying
? m("form", {onsubmit: function() {return submitComment(vnode.attrs.node)}}, [
m("textarea", {
value: vnode.state.newComment,
oninput: function(e) {
vnode.state.newComment = e.target.value
},
}),
m("input", {type:"submit", value: "Reply!"}),
m(".preview", trust(T.previewComment(vnode.state.newComment))),
])
: m("a", {onclick: function() {return showReplying(vnode)}}, "Reply!")
}
}
//router
@ -186,10 +193,10 @@ function run() {
}
var replayRoute = router.defineRoutes({
"/thread/:id" : thread,
"/" : home
"/thread/:id" : Thread,
"/" : Home
}, function(view, args) {
render(document.body, [view(args)])
render(document.body, [m(view, args)])
}, function() {
router.setPath("/")
})

2
examples/threaditjs/index.html
View file

@ -10,7 +10,7 @@
<body>
<script src="http://threaditjs.com/shared.js"></script>
<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/trust.js"></script>
<script src="../../render/render.js"></script>

2
examples/todomvc/index.html
View file

@ -13,7 +13,7 @@
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<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="../../querystring/build.js"></script>