From f0a53bef757b00487a1cef9e10febf20e417b59a Mon Sep 17 00:00:00 2001
From: Wes Felter <wmf@us.ibm.com>
Date: Mon, 12 Nov 2012 14:58:02 -0600
Subject: [PATCH] UI: Improve startup responsiveness It now defers loading any
data until the UI has been drawn, avoiding a blank screen. Now the dashboard
is drawn (~1s) and then filled in with data. The remaining bottleneck is
probably the number of XHRs; concatenating JS and templates and fetching
switch data in bulk instead of individually would reduce the number of XHRs
dramatically.
---
src/main/resources/web/js/main.js | 25 +++++++++++--------
src/main/resources/web/js/models/hostmodel.js | 6 +----
.../resources/web/js/models/switchmodel.js | 7 +-----
3 files changed, 16 insertions(+), 22 deletions(-)
diff --git a/src/main/resources/web/js/main.js b/src/main/resources/web/js/main.js
index 9fddd1013..b33878a6d 100644
--- a/src/main/resources/web/js/main.js
+++ b/src/main/resources/web/js/main.js
@@ -91,11 +91,13 @@ var AppRouter = Backbone.Router.extend({
var swl = new SwitchCollection();
var hl = new HostCollection();
+var updating = true;
+
tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-list', 'switch-list-item', 'host', 'host-list', 'host-list-item', 'port-list', 'port-list-item', 'flow-list', 'flow-list-item'],
function () {
app = new AppRouter();
Backbone.history.start({pushState: true});
- // console.log("started history")
+ //console.log("started history")
$(document).ready(function () {
// trigger Backbone routing when clicking on links, thanks to Atinux and pbnv
@@ -113,15 +115,16 @@ tpl.loadTemplates(['home', 'status', 'topology', 'header', 'switch', 'switch-lis
window.addEventListener('popstate', function(e) {
app.navigate(location.pathname.substr(1), true);
});
-
+
+ // wait for the page to be rendered before loading any data
+ swl.fetch();
+ hl.fetch();
+
+ setInterval(function () {
+ if(updating) {
+ swl.fetch();
+ hl.fetch();
+ }
+ }, 3000);
});
});
-
-var updating = true;
-
-setInterval(function () {
- if(updating) {
- swl.fetch();
- hl.fetch();
- }
-}, 3000);
diff --git a/src/main/resources/web/js/models/hostmodel.js b/src/main/resources/web/js/models/hostmodel.js
index 2f2c15eaf..8de3dd67b 100644
--- a/src/main/resources/web/js/models/hostmodel.js
+++ b/src/main/resources/web/js/models/hostmodel.js
@@ -31,7 +31,7 @@ window.HostCollection = Backbone.Collection.extend({
model:Host,
- initialize:function () {
+ fetch:function () {
var self = this;
//console.log("fetching host list")
$.ajax({
@@ -66,10 +66,6 @@ window.HostCollection = Backbone.Collection.extend({
},
- fetch:function () {
- this.initialize();
- }
-
/*
* findByName:function (key) { // TODO: Modify service to include firstName
* in search var url = (key == '') ? '/host/' : "/host/search/" + key;
diff --git a/src/main/resources/web/js/models/switchmodel.js b/src/main/resources/web/js/models/switchmodel.js
index f5850e3e8..4104dd0df 100644
--- a/src/main/resources/web/js/models/switchmodel.js
+++ b/src/main/resources/web/js/models/switchmodel.js
@@ -265,7 +265,7 @@ window.SwitchCollection = Backbone.Collection.extend({
model:Switch,
- initialize:function () {
+ fetch:function () {
var self = this;
//console.log("fetching switch list")
$.ajax({
@@ -292,9 +292,4 @@ window.SwitchCollection = Backbone.Collection.extend({
});
},
- fetch:function () {
- this.initialize()
- }
-
-
});
--
GitLab