veyron/examples/pipetobrower: Final clean up for P2B
- Using envyor for proxy and namespace
- UI fixes for Chrome 36 beta
- an ugly hack to get around identity and CORS until we have proper auth
- small UI perf improvements
Change-Id: I135f0e1e361ed619b079e251e7cb2e8dd9cb926c
diff --git a/examples/pipetobrowser/Makefile b/examples/pipetobrowser/Makefile
index e941562..1d3f652 100644
--- a/examples/pipetobrowser/Makefile
+++ b/examples/pipetobrowser/Makefile
@@ -1,12 +1,11 @@
-PATH:=$(PATH):node_modules/.bin
-PATH:=$(PATH):$(VEYRON_ROOT)/environment/cout/node/bin
-PATH:=$(PATH):$(VEYRON_ROOT)/veyron/go/bin
+PATH:=$(VEYRON_ROOT)/environment/cout/node/bin:$(PATH)
+PATH:=$(VEYRON_ROOT)/veyron/go/bin:$(PATH)
+PATH:=node_modules/.bin:../node_modules/.bin:$(PATH)
-VEYRON_PROXY_PORT=5164
-VEYRON_MOUNTTABLE_PORT=5167
-VEYRON_PROXY_ADDR=127.0.0.1:$(VEYRON_PROXY_PORT)
-VEYRON_WSPR_PORT=5165
-VEYRON_IDENTITY_PORT=5163
+VEYRON_PROXY_ADDR=proxy.envyor.com:8100
+VEYRON_WSPR_PORT=7776
+HTTP_PORT=8080
+NAMESPACE_ROOT=/proxy.envyor.com:8101
VEYRON_JS_API=$(VEYRON_ROOT)/veyron/javascript/api
VEYRON_BUILD_SCRIPT=$(VEYRON_ROOT)/veyron/scripts/build/go
VEYRON_IDENTITY_PATH=/tmp/p2b_identity
@@ -28,6 +27,7 @@
npm prune
npm install
touch node_modules
+ export
# Build and copies Veyron from local source
browser/third-party/veyron: $(VEYRON_JS_API)
@@ -57,9 +57,18 @@
cd browser; \
vulcanize -o index.html app.html
-# Serve the files
+# Serve
start:
- serve browser/. --port 8080 --compress
+ identity --name=veyron_p2b_identity > $(VEYRON_IDENTITY_PATH)
+ export VEYRON_IDENTITY=$(VEYRON_IDENTITY_PATH) ; \
+ export NAMESPACE_ROOT=$(NAMESPACE_ROOT); \
+ wsprd --v=1 -alsologtostderr=true -vproxy=$(VEYRON_PROXY_ADDR) --port $(VEYRON_WSPR_PORT) & \
+ serve browser/. --port $(HTTP_PORT) --compress &
+
+# Stop serving
+stop:
+ pkill wsprd || true
+ lsof -i:$(HTTP_PORT) | grep node | awk '{printf "%s\n",$$2}' | xargs --no-run-if-empty kill
# Continuously watch for changes to .js, .html or .css files.
# Rebundle the appropriate file (build.js and/or index.html) when local files change
@@ -67,28 +76,10 @@
watch -n 1 make
# Clean all build artifacts
-clean:
+clean: stop
rm -rf browser/third-party
rm -rf node_modules
rm -f browser/index.html
rm -f browser/build.js
-# Deploys Veyron daemons
-daemons:
- identity --name=veyron_p2b_identity > $(VEYRON_IDENTITY_PATH)
- export VEYRON_IDENTITY=$(VEYRON_IDENTITY_PATH) ; \
- identityd --address=:$(VEYRON_IDENTITY_PORT) & \
- mounttabled --address=:$(VEYRON_MOUNTTABLE_PORT) & \
- export NAMESPACE_ROOT=/localhost:$(VEYRON_MOUNTTABLE_PORT) ; \
- proxyd -address=$(VEYRON_PROXY_ADDR) & \
- wsprd --v=1 -logtostderr=true -vproxy=$(VEYRON_PROXY_ADDR) --port $(VEYRON_WSPR_PORT) & \
-
-# Kills the running daemons
-clean-daemons:
- kill `lsof -t -i:$(VEYRON_MOUNTTABLE_PORT)`; \
- kill `lsof -t -i:$(VEYRON_IDENTITY_PORT)`; \
- kill `lsof -t -i:$(VEYRON_WSPR_PORT)`; \
- kill `lsof -t -i:$(VEYRON_PROXY_PORT)`; \
- kill `lsof -t -i:$(VEYRON_STORE_PORT)`
-
-.PHONY: start clean daemons clean-daemons watch
\ No newline at end of file
+.PHONY: start stop clean watch
\ No newline at end of file
diff --git a/examples/pipetobrowser/README.md b/examples/pipetobrowser/README.md
index 2eedc9e..8a38312 100644
--- a/examples/pipetobrowser/README.md
+++ b/examples/pipetobrowser/README.md
@@ -24,11 +24,15 @@
``
To run
``
-make daemons #Runs the required Veyron daemons
make start #Starts a web server at 8080
``
and then navigate to http://localhost:8080
+To stop
+``
+make stop
+``
+
To clean
``
make clean
diff --git a/examples/pipetobrowser/browser/app.html b/examples/pipetobrowser/browser/app.html
index d6dfbd6..d4d7597 100644
--- a/examples/pipetobrowser/browser/app.html
+++ b/examples/pipetobrowser/browser/app.html
@@ -15,6 +15,7 @@
<script src="third-party/traceur-runtime@0.0.49.js"></script>
<script src="third-party/system@0.6.js"></script>
<script src="config.js"></script>
+ <script src="shame.js"></script>
<script src="build.js"></script>
<link rel="import" href="views/page/component.html"/>
diff --git a/examples/pipetobrowser/browser/config/config.js b/examples/pipetobrowser/browser/config/config.js
index de4cd2e..ce740a4 100644
--- a/examples/pipetobrowser/browser/config/config.js
+++ b/examples/pipetobrowser/browser/config/config.js
@@ -6,10 +6,9 @@
export var config = {
veyron: {
- identityServer: 'http://localhost:5163/random/',
- proxy: 'http://localhost:5165',
+ proxy: 'http://localhost:7776',
logLevel: veyronLogLevels.INFO
},
- namespaceRoot: '/localhost:5167',
+ namespaceRoot: '/proxy.envyor.com:8101',
publishNamePrefix: 'google/p2b'
}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html b/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
index 974cc97..4f555ab 100644
--- a/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
+++ b/examples/pipetobrowser/browser/libs/ui-components/data-grid/grid/component.html
@@ -172,10 +172,10 @@
// private property fields
this.columns = [];
- this.shouldRefetchData = true;
this.pageNumber = 1;
this.dataSource = null;
this.cachedDataSourceResult = [];
+ this.dataSourceResult = [];
this.gridState = {
sort: {
key: '',
@@ -308,7 +308,7 @@
if (goBackToPageOne) {
self.pageNumber = 1;
}
- self.shouldRefetchData = true;
+ self.updateDataSource();
});
},
@@ -391,9 +391,9 @@
* Only fetches data if scheduled to do so
* @private
*/
- get dataSourceResult() {
- if (!this.shouldRefetchData || !this.dataSource) {
- return this.cachedDataSourceResult;
+ updateDataSource: function() {
+ if (!this.dataSource) {
+ return;
}
// fetch the data
@@ -417,9 +417,7 @@
var endIndex = startIndex + this.pageSize;
this.cachedDataSourceResult = this.cachedDataSourceResult.slice(startIndex, endIndex);
- this.shouldRefetchData = false;
-
- return this.cachedDataSourceResult;
+ this.dataSourceResult = this.cachedDataSourceResult;
},
/*
diff --git a/examples/pipetobrowser/browser/pipe-viewers/builtin/vlog/plugin.js b/examples/pipetobrowser/browser/pipe-viewers/builtin/vlog/plugin.js
index db749ff..d011cfd 100644
--- a/examples/pipetobrowser/browser/pipe-viewers/builtin/vlog/plugin.js
+++ b/examples/pipetobrowser/browser/pipe-viewers/builtin/vlog/plugin.js
@@ -23,18 +23,27 @@
play(stream) {
stream.setEncoding('utf8');
+ var logView = document.createElement('p2b-plugin-vlog');
+ var newData = true;
+ var refreshGrid = function() {
+ requestAnimationFrame(() => {
+ if( newData ) {
+ logView.refreshGrid();
+ newData = false;
+ }
+ refreshGrid();
+ });
+ };
+ refreshGrid();
+
// split by new line
stream = stream.pipe(streamUtil.split(/\r?\n/));
- var logView = document.createElement('p2b-plugin-vlog');
// create a new data source from the stream and set it.
logView.dataSource = new vLogDataSource(
stream,
function onNewItem(item) {
- // also refresh the grid when new data comes in.
- // grid component batches requests and refreshes UI on the next animation frame.
- logView.refreshGrid();
-
+ newData = true;
// add additional, UI related properties to the item
addAdditionalUIProperties(item);
},
diff --git a/examples/pipetobrowser/browser/shame.js b/examples/pipetobrowser/browser/shame.js
new file mode 100644
index 0000000..10cb74f
--- /dev/null
+++ b/examples/pipetobrowser/browser/shame.js
@@ -0,0 +1,5 @@
+//TODO(aghassemi) Ugly random identity hack until we have proper identity
+var id= '_4EEGgFCAP-DNBoBQwEudmV5cm9uL3J1bnRpbWVzL2dvb2dsZS9zZWN1cml0eS5jaGFpblByaXZhdGVJRAD_hUIYAQIBRAEIUHVibGljSUQAAQQBBlNlY3JldAABJHZleXJvbjIvc2VjdXJpdHkvd2lyZS5DaGFpblByaXZhdGVJRAD_hzoYAQEBRQEMQ2VydGlmaWNhdGVzAAEjdmV5cm9uMi9zZWN1cml0eS93aXJlLkNoYWluUHVibGljSUQA_4kEEgFGAP-LWBgBBAEDAQROYW1lAAFHAQlQdWJsaWNLZXkAAUgBB0NhdmVhdHMAAUkBCVNpZ25hdHVyZQABIXZleXJvbjIvc2VjdXJpdHkvd2lyZS5DZXJ0aWZpY2F0ZQD_jTYYAQIBSgEFQ3VydmUAAQQBAlhZAAEfdmV5cm9uMi9zZWN1cml0eS93aXJlLlB1YmxpY0tleQD_kyQQATIBHnZleXJvbjIvc2VjdXJpdHkvd2lyZS5LZXlDdXJ2ZQD_jwQSAUsA_5U4GAECAUwBB1NlcnZpY2UAAQQBBUJ5dGVzAAEcdmV5cm9uMi9zZWN1cml0eS93aXJlLkNhdmVhdAD_lycQAQMBIXZleXJvbjIvc2VjdXJpdHkuUHJpbmNpcGFsUGF0dGVybgD_kTEYAQIBBAEBUgABBAEBUwABH3ZleXJvbjIvc2VjdXJpdHkvd2lyZS5TaWduYXR1cmUA_4L-Ae4BAwEBAgETdmV5cm9uX3AyYl9pZGVudGl0eQECQQSX1W2szGUlXbia28KqD7tzpVIHappQOKvixbijDauOdV6YrygMAmky5vLetcPzmf2Kz4QQfjf-_XpaiH2vJ3SFAAIBIEQgGWkP4DbWtZkKobftfkqE7-hPhldI1E7WM-9NHqwEASB_4e5WDr35ffYa16HkDm2pxoICFc2HemwTXgl-n5u1iQAAAQpyYW5kb206NTQwAQJBBPDpM7apzfyfgANbP3HKIo_vCTc2Jq4KbmHE8_OGjF7hkS5Do4nh6_Q-SBB1nnqSkpslgBU1kGXUCeh0P0Jza3kAAQEBASoB_4P_gQQaAUIA_4NAGAECAUMBCUlzc3VlVGltZQABQwEKRXhwaXJ5VGltZQABHXZleXJvbi9zZWN1cml0eS9jYXZlYXQuRXhwaXJ5AP-FDxABBAEJdGltZS5UaW1lAP-CJAEBDwEAAAAOy1ic8jYxcFX-XAEPAQAAAA7LWKsCNjFwVf5cAAABASBOr9ic8ql0ZSmb3HA1Z3yEJHmt62SqXHjrDT99E8buFwEgFjrqh7PJdSs8hQxl3eKyYhGfvCcULfzX0mrWBp-k_v0AAAABIML_mzA_ofWsFLMlvFukoE6vkZBJh3b7rOIxFK0HENPcAA==';
+Veyron.prototype._getIdentityPromise = function() {
+ return Promise.resolve(id);
+};
diff --git a/examples/pipetobrowser/browser/views/loading/component.html b/examples/pipetobrowser/browser/views/loading/component.html
index 77e5a29..b6db519 100644
--- a/examples/pipetobrowser/browser/views/loading/component.html
+++ b/examples/pipetobrowser/browser/views/loading/component.html
@@ -3,7 +3,7 @@
<polymer-element name="p2b-loading">
<template>
<link rel="stylesheet" href="component.css">
- <img class="spinner" src="/libs/ui-components/common/spinner.gif" alt="Loading"/>
+ <img class="spinner" src="../../libs/ui-components/common/spinner.gif" alt="Loading"/>
</template>
<script>
Polymer('p2b-loading', {
diff --git a/examples/pipetobrowser/browser/views/page/component.html b/examples/pipetobrowser/browser/views/page/component.html
index f1ab37c..4e5b72d 100644
--- a/examples/pipetobrowser/browser/views/page/component.html
+++ b/examples/pipetobrowser/browser/views/page/component.html
@@ -47,7 +47,7 @@
<core-header-panel main>
<core-toolbar >
<paper-icon-button icon="menu" on-click="{{ toggleDrawer }}"></paper-icon-button>
- <h2>{{ title }}</h2>
+ <h2>{{ pageTitle }}</h2>
</core-toolbar>
<core-selector id="subPagesSelector" valueattr="key" selected="{{ selectedSubPageKey }}">
@@ -66,7 +66,7 @@
* Title of the page
* @type {string}
*/
- title: '',
+ pageTitle: '',
/*
* SubPageItem represents top level sub pages that have a sidebar navigation link
diff --git a/examples/pipetobrowser/browser/views/page/view.js b/examples/pipetobrowser/browser/views/page/view.js
index b2e7aa0..e946181 100644
--- a/examples/pipetobrowser/browser/views/page/view.js
+++ b/examples/pipetobrowser/browser/views/page/view.js
@@ -43,7 +43,7 @@
* @type {string}
*/
set title(title) {
- this.element.title = title;
+ this.element.pageTitle = title;
}
}
diff --git a/examples/pipetobrowser/browser/views/pipes/component.html b/examples/pipetobrowser/browser/views/pipes/component.html
index c877519..a2a2286 100644
--- a/examples/pipetobrowser/browser/views/pipes/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/component.html
@@ -47,13 +47,8 @@
*/
selectionHistoryStack: [],
- /*
- * Number of open tabs
- * @type {integer}
- * @private
- */
- get numTabs() {
- return Object.keys(this.pipeTabs).length;
+ ready: function() {
+ this.numTabs = 0
},
/*
@@ -73,7 +68,7 @@
// Create a tab toolbar and assign the close handler
var tabToolbar = document.createElement('p2b-pipes-tab-toolbar');
- tabToolbar.title = name;
+ tabToolbar.toolbarTitle = name;
tabToolbar.addEventListener('close-action', function() {
self.removeTab(key);
if (onClose) {
@@ -101,6 +96,8 @@
tabToolbar: tabToolbar
};
+ this.numTabs++;
+
this.selectedTabKey = key;
requestAnimationFrame(function() {
self.$.tabs.appendChild(tab);
@@ -137,6 +134,7 @@
// Delete tab from the map
delete this.pipeTabs[key];
+ this.numTabs--;
// Select an existing tab from previous selection history
var toSelect = this.selectionHistoryStack.pop();
@@ -163,7 +161,7 @@
tabContent.replaceTabContent(newEl);
if (newName) {
this.pipeTabs[key].tab.textContent = newName;
- this.pipeTabs[key].tabToolbar.title = newName;
+ this.pipeTabs[key].tabToolbar.toolbarTitle = newName;
}
},
diff --git a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
index 25799ef..3514b67 100644
--- a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
@@ -6,7 +6,7 @@
<link rel="stylesheet" href="component.css">
<core-toolbar>
<span flex>
- {{ title }}
+ {{ toolbarTitle }}
</span>
<span id="customActions"></span>
<paper-icon-button id="fullscreenIcon" icon="fullscreen" on-click="{{ fireFullscreenAction }}"></paper-icon-button>
@@ -20,7 +20,7 @@
* Title of the toolbar
* @type {string}
*/
- title: '',
+ toolbarTitle: '',
/*
* Event that's fired when close action of the toolbar is triggered
diff --git a/examples/pipetobrowser/browser/views/status/component.html b/examples/pipetobrowser/browser/views/status/component.html
index 8362866..14143c1 100644
--- a/examples/pipetobrowser/browser/views/status/component.html
+++ b/examples/pipetobrowser/browser/views/status/component.html
@@ -30,6 +30,19 @@
System.import('libs/utils/formatting').then(function(formatter) {
Polymer('p2b-status', {
+ ready: function() {
+ this.runningSince = 'just now';
+ },
+
+ attached: function() {
+ // Update the running since every second.
+ this.runningSinceIntervalId = setInterval(this.updateRunningSince.bind(this), 1000);
+ },
+
+ detached: function() {
+ clearInterval(this.runningSinceIntervalId);
+ },
+
/*
* Dynamic binding for the state of publishing p2b service.
* Any changes to this object will be reflected in the UI automatically
@@ -50,9 +63,9 @@
* @private
* @type {string}
*/
- get runningSince() {
+ updateRunningSince: function() {
if (!this.serviceState) { return; }
- return formatter.formatRelativeTime(this.serviceState.date);
+ this.runningSince = formatter.formatRelativeTime(this.serviceState.date);
},
/*
diff --git a/examples/pipetobrowser/p2b/main.go b/examples/pipetobrowser/p2b/main.go
index 71c2cfb..1e47acb 100644
--- a/examples/pipetobrowser/p2b/main.go
+++ b/examples/pipetobrowser/p2b/main.go
@@ -58,7 +58,7 @@
func main() {
flag.Usage = Usage
- runtime := rt.Init()
+ runtime := rt.Init(veyron2.NamespaceRoots{"/proxy.envyor.com:8101"})
log := runtime.Logger()
if flag.NArg() != 1 {
diff --git a/examples/pipetobrowser/package.json b/examples/pipetobrowser/package.json
index 8c76a73..add9381 100644
--- a/examples/pipetobrowser/package.json
+++ b/examples/pipetobrowser/package.json
@@ -6,6 +6,6 @@
"jspm": "~0.6.7",
"vulcanize": "~0.3.0",
"serve": "~1.4.0",
- "bower": "~1.3.7"
+ "bower": "~1.3.8"
}
-}
+}
\ No newline at end of file
