veyron/examples/pipetobrowser: Globing the namespace to give user a
list of "online" P2B services to chose from for the redirect dialog.
Additionally adding a new top level navigation called neighbourhood that will
display a list of all P2B instances online.
Also changing the name structure again to google/p2b/[name]/pipe/[plugin].
This is still a temporary fix until WSPR supports the changes in cl/2644
Change-Id: I2e7ad669b991138d076cac9bd197af79cebbd5a1
diff --git a/examples/pipetobrowser/Makefile b/examples/pipetobrowser/Makefile
index f732dc8..22c9feb 100644
--- a/examples/pipetobrowser/Makefile
+++ b/examples/pipetobrowser/Makefile
@@ -45,7 +45,7 @@
export VEYRON_IDENTITY=$(VEYRON_IDENTITY_PATH) ; \
$(VEYRON_IDENTITYD) --address=:$(VEYRON_IDENTITY_PORT) & \
$(VEYRON_MOUNTTABLE) --address=:$(VEYRON_MOUNTTABLE_PORT) & \
- export NAMESPACE_ROOT=/localhost:$(VEYRON_MOUNTTABLE_PORT)/mt ; \
+ export NAMESPACE_ROOT=/localhost:$(VEYRON_MOUNTTABLE_PORT) ; \
$(VEYRON_PROXY) -address=$(VEYRON_PROXY_ADDR) & \
$(VEYRON_WSPR) --v=1 -logtostderr=true -vproxy=$(VEYRON_PROXY_ADDR) --port $(VEYRON_WSPR_PORT) & \
$(VEYRON_STORE) --address=:$(VEYRON_STORE_PORT) --name=global/$(USER)/store &
diff --git a/examples/pipetobrowser/browser/actions/add-pipe-viewer.js b/examples/pipetobrowser/browser/actions/add-pipe-viewer.js
index 6b785b4..ae07987 100644
--- a/examples/pipetobrowser/browser/actions/add-pipe-viewer.js
+++ b/examples/pipetobrowser/browser/actions/add-pipe-viewer.js
@@ -73,7 +73,7 @@
// Add the redirect stream action
var icon = 'hardware:cast';
pipesViewInstance.addToolbarAction(tabKey, icon, () => {
- redirectPipe(stream);
+ redirectPipe(stream, name);
});
// Take the user to the pipes view.
diff --git a/examples/pipetobrowser/browser/actions/navigate-neighborhood.js b/examples/pipetobrowser/browser/actions/navigate-neighborhood.js
new file mode 100644
index 0000000..998e345
--- /dev/null
+++ b/examples/pipetobrowser/browser/actions/navigate-neighborhood.js
@@ -0,0 +1,49 @@
+/*
+ * Navigates to neighborhood page displaying list of P2B names that are online
+ * @fileoverview
+ */
+
+import { Logger } from 'libs/logs/logger'
+import { register, trigger } from 'libs/mvc/actions'
+
+import { displayError } from 'actions/display-error'
+import { page } from 'runtime/context'
+
+import { NeighborhoodView } from 'views/neighborhood/view'
+import { getAll as getAllPublishedP2BNames } from 'services/pipe-to-browser-namespace'
+
+var log = new Logger('actions/navigate-neighborhood');
+const ACTION_NAME = 'neighborhood';
+
+/*
+ * Registers the action
+ */
+export function registerNavigateNeigbourhoodAction() {
+ register(ACTION_NAME, actionHandler);
+}
+
+/*
+ * Triggers the action
+ */
+export function navigateNeigbourhood() {
+ return trigger(ACTION_NAME);
+}
+
+/*
+ * Handles the action.
+ *
+ * @private
+ */
+function actionHandler() {
+ log.debug('navigate neighborhood triggered');
+
+ // create an neighborhood view
+ var neighborhoodView = new NeighborhoodView();
+
+ // get all the online names and set it on the view
+ getAllPublishedP2BNames().then((allNames) => {
+ neighborhoodView.existingNames = allNames;
+ }).catch((e) => { displayError(e); });
+
+ page.setSubPageView('neighborhood', neighborhoodView);
+}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/actions/redirect-pipe.js b/examples/pipetobrowser/browser/actions/redirect-pipe.js
index cd44c5c..5d37832 100644
--- a/examples/pipetobrowser/browser/actions/redirect-pipe.js
+++ b/examples/pipetobrowser/browser/actions/redirect-pipe.js
@@ -11,6 +11,7 @@
import { RedirectPipeDialogView } from 'views/redirect-pipe-dialog/view'
import { pipe } from 'services/pipe-to-browser-client'
+import { getAll as getAllPublishedP2BNames } from 'services/pipe-to-browser-namespace'
var log = new Logger('actions/redirect-pipe');
const ACTION_NAME = 'redirect-pipe';
@@ -25,9 +26,10 @@
/*
* Triggers the redirect pipe action
* @param {stream} stream Stream object to redirect
+ * @param {string} currentPluginName name of the current plugin
*/
-export function redirectPipe(stream) {
- return trigger(ACTION_NAME, stream, name);
+export function redirectPipe(stream, currentPluginName) {
+ return trigger(ACTION_NAME, stream, currentPluginName);
}
/*
@@ -35,7 +37,7 @@
*
* @private
*/
-function actionHandler(stream) {
+function actionHandler(stream, currentPluginName) {
log.debug('redirect pipe action triggered');
// display a dialog asking user where to redirect and whether to redirect
@@ -54,4 +56,14 @@
log.debug('FAILED to redirect to', name, e);
});
});
+
+ // also get the list of all existing P2B names in the namespace and supply it to the dialog
+ getAllPublishedP2BNames().then((allNames) => {
+ // append current plugin name to the veyron names for better UX
+ dialog.existingNames = allNames.map((n) => {
+ return n + '/pipe/' + (currentPluginName || ''); //TODO(aghassemi) publish issue
+ });
+ }).catch((e) => {
+ log.debug('getAllPublishedP2BNames failed', e);
+ });
}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/config.js b/examples/pipetobrowser/browser/config.js
index ed89faa..2fcb266 100644
--- a/examples/pipetobrowser/browser/config.js
+++ b/examples/pipetobrowser/browser/config.js
@@ -11,5 +11,6 @@
proxy: 'http://localhost:5165',
logLevel: veyronLogLevels.INFO
},
- publishNamePrefix: 'google' //TODO(aghassemi) publish-issue
+ namespaceRoot: '/localhost:5167',
+ publishNamePrefix: 'google/p2b'
}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/index.html b/examples/pipetobrowser/browser/index.html
index 3506293..e37405b 100644
--- a/examples/pipetobrowser/browser/index.html
+++ b/examples/pipetobrowser/browser/index.html
@@ -20,6 +20,7 @@
<link rel="import" href="views/loading/component.html"/>
<link rel="import" href="views/pipes/component.html"/>
<link rel="import" href="views/redirect-pipe-dialog/component.html"/>
+ <link rel="import" href="views/neighborhood/component.html"/>
<link rel="import" href="libs/ui-components/blackhole/component.html"/>
diff --git a/examples/pipetobrowser/browser/runtime/app.js b/examples/pipetobrowser/browser/runtime/app.js
index c5fd137..d66ad2b 100644
--- a/examples/pipetobrowser/browser/runtime/app.js
+++ b/examples/pipetobrowser/browser/runtime/app.js
@@ -4,6 +4,7 @@
import { registerDisplayErrorAction } from 'actions/display-error'
import { registerAddPipeViewerAction } from 'actions/add-pipe-viewer'
import { registerNavigatePipesPageAction, navigatePipesPage } from 'actions/navigate-pipes-page'
+import { registerNavigateNeigbourhoodAction, navigateNeigbourhood } from 'actions/navigate-neighborhood'
import { registerRedirectPipeAction } from 'actions/redirect-pipe'
import { SubPageItem } from 'views/page/view'
@@ -41,6 +42,7 @@
registerDisplayErrorAction();
registerAddPipeViewerAction();
registerNavigatePipesPageAction();
+ registerNavigateNeigbourhoodAction();
registerRedirectPipeAction();
}
@@ -64,6 +66,12 @@
pipesSubPageItem.onActivate = navigatePipesPage;
page.subPages.push(pipesSubPageItem);
+ var neighborhoodSubPageItem = new SubPageItem('neighborhood');
+ neighborhoodSubPageItem.name = 'Neighborhood';
+ neighborhoodSubPageItem.icon = 'social:circles-extended';
+ neighborhoodSubPageItem.onActivate = navigateNeigbourhood;
+ page.subPages.push(neighborhoodSubPageItem);
+
var helpSubPageItem = new SubPageItem('help');
helpSubPageItem.name = 'Help';
helpSubPageItem.icon = 'help';
diff --git a/examples/pipetobrowser/browser/services/pipe-to-browser-namespace.js b/examples/pipetobrowser/browser/services/pipe-to-browser-namespace.js
new file mode 100644
index 0000000..648a528
--- /dev/null
+++ b/examples/pipetobrowser/browser/services/pipe-to-browser-namespace.js
@@ -0,0 +1,31 @@
+/*
+ * Implements a veyron client that talks to the namespace service and finds all
+ * the P2B services that are available.
+ * @fileoverview
+ */
+import { Logger } from 'libs/logs/logger'
+import { config } from 'config'
+
+var log = new Logger('services/p2b-namespace');
+var veyron = new Veyron(config.veyron);
+var client = veyron.newClient();
+
+/*
+ * Finds all the P2B services that are published by querying the namespace.
+ * @return {Promise} Promise resolving to an array of names for all published
+ * P2B services
+ */
+export function getAll() {
+ return client.bindTo(config.namespaceRoot).then((namespace) => {
+ var globResult = namespace.glob('google/p2b/*');
+ var p2bServices = [];
+ globResult.stream.on('data', (p2bServiceName) => {
+ p2bServices.push(p2bServiceName.name);
+ });
+
+ // wait until all the data arrives then return the collection
+ return globResult.then(() => {
+ return p2bServices;
+ });
+ });
+}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/services/pipe-to-browser-server.js b/examples/pipetobrowser/browser/services/pipe-to-browser-server.js
index 7bc69ac..8b4f2e5 100644
--- a/examples/pipetobrowser/browser/services/pipe-to-browser-server.js
+++ b/examples/pipetobrowser/browser/services/pipe-to-browser-server.js
@@ -4,7 +4,6 @@
* It also exposes the state of the service.
* @fileoverview
*/
-
import { Logger } from 'libs/logs/logger'
import { config } from 'config'
import { ByteObjectStreamAdapter } from 'libs/utils/byte-object-stream-adapter'
@@ -56,8 +55,8 @@
var p2b = {
pipe($suffix, $stream) {
return new Promise(function(resolve, reject) {
- //TODO(aghassemi) publish-issue hack for now since suffix is broken in JS API - p2b
- $suffix = $suffix.substr(4);
+ //TODO(aghassemi) publish-issue remove /pipe/ from the suffix
+ $suffix = $suffix.substr(5);
log.debug('received pipe request for:', $suffix);
var numBytesForThisCall = 0;
@@ -92,14 +91,13 @@
state.publishing = true;
- //TODO(aghassemi) publish-issue
- return server.register('p2b', p2b).then(() => {
- return server.publish(config.publishNamePrefix + '/' + name).then((endpoint) => {
+ return server.register('pipe', p2b).then(() => { //TODO(aghassemi) publish-issue add pipe for now since we can't register under empty name
+ return server.publish(config.publishNamePrefix + '/' + name).then((endpoint) => { //TODO(aghassemi) publish-issue
log.debug('published with endpoint:', endpoint);
state.published = true;
state.publishing = false;
- state.fullServiceName = config.publishNamePrefix + '/' + name + '/p2b'; //TODO(aghassemi) publish-issue
+ state.fullServiceName = config.publishNamePrefix + '/' + name + '/pipe'; //TODO(aghassemi) publish-issue
state.date = new Date();
return endpoint;
diff --git a/examples/pipetobrowser/browser/views/common/common.css b/examples/pipetobrowser/browser/views/common/common.css
index a12d237..af47ae2 100644
--- a/examples/pipetobrowser/browser/views/common/common.css
+++ b/examples/pipetobrowser/browser/views/common/common.css
@@ -22,4 +22,10 @@
display: flex;
flex-direction: column;
flex: 1 1 0px;
+}
+
+[page-title] {
+ font-size: 1.5em;
+ color: #4285f4;
+ margin: 0px;
}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/namespace-list/component.css b/examples/pipetobrowser/browser/views/namespace-list/component.css
new file mode 100644
index 0000000..93ea771
--- /dev/null
+++ b/examples/pipetobrowser/browser/views/namespace-list/component.css
@@ -0,0 +1,19 @@
+[selectable] .selected {
+ background-color: #00e5ff;
+ opacity: 0.8;
+}
+
+[selectable] core-item {
+ cursor: pointer;
+}
+
+core-item {
+ box-sizing: border-box;
+ border-bottom: 1px solid rgba(0,0,0,0.05);
+ margin: 0;
+ padding: 0 1em;
+}
+
+core-item:last-child {
+ border-bottom: none;
+}
diff --git a/examples/pipetobrowser/browser/views/namespace-list/component.html b/examples/pipetobrowser/browser/views/namespace-list/component.html
new file mode 100644
index 0000000..e6faa7d
--- /dev/null
+++ b/examples/pipetobrowser/browser/views/namespace-list/component.html
@@ -0,0 +1,55 @@
+<link rel="import" href="/libs/vendor/polymer/polymer/polymer.html">
+<link rel="import" href="/libs/vendor/polymer/core-list/core-list.html">
+<link rel="import" href="/libs/vendor/polymer/core-item/core-item.html">
+
+<polymer-element name="p2b-namespace-list" attributes="names selectable">
+ <template>
+ <link rel="stylesheet" href="component.css">
+ <template if="{{_items.length > 0}}">
+ <core-list selectable?="{{selectable}}" height="40" on-core-activate="{{fireSelectEvent}}" data="{{_items}}" height="20">
+ <template>
+ <core-item class="{{ {selected: selected} | tokenList }}" label="{{name}}"></core-item>
+ </template>
+ </core-list>
+ </template>
+ </template>
+ <script>
+ Polymer('p2b-namespace-list', {
+ /*
+ * List of names to be displayed
+ * @type {Array<string>}
+ */
+ names: [],
+
+ /*
+ * Whether the names displayed are selectable
+ * if selectable, 'select' event will fire with the name of the selected item
+ * @type {boolean}
+ */
+ selectable: false,
+
+ /*
+ * transformed collection of names to objects
+ * @private
+ */
+ _items: [],
+ namesChanged: function() {
+ // transform from [string] to [object] since core-items expects array of objects
+ this._items = this.names.map( function(n) {
+ return {name: n};
+ });
+ },
+
+ /*
+ * fires the select event pass the name as event argument
+ * @private
+ */
+ fireSelectEvent: function(e) {
+ if (!this.selectable) {
+ return;
+ }
+ this.fire('select', e.detail.data.name);
+ }
+ });
+ </script>
+</polymer-element>
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/namespace-list/view.js b/examples/pipetobrowser/browser/views/namespace-list/view.js
new file mode 100644
index 0000000..e2b0f92
--- /dev/null
+++ b/examples/pipetobrowser/browser/views/namespace-list/view.js
@@ -0,0 +1,25 @@
+import { View } from 'libs/mvc/view'
+
+/*
+ * View showing a list of all p2b services from the namespace
+ * @class
+ * @extends {View}
+ */
+export class NamespaceListView extends View {
+ constructor(items) {
+ var el = document.createElement('p2b-namespace-list');
+ el.items = items;
+ super(el);
+ }
+
+/*
+ * Event that fires when user selects an item from the list.
+ * @event
+ * @type {string} name of the item that was selected
+ */
+ onSelectAction(eventHandler) {
+ this.element.addEventListener('select', (e) => {
+ eventHandler(e.detail);
+ });
+ }
+}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/neighborhood/component.html b/examples/pipetobrowser/browser/views/neighborhood/component.html
new file mode 100644
index 0000000..7c7b797
--- /dev/null
+++ b/examples/pipetobrowser/browser/views/neighborhood/component.html
@@ -0,0 +1,20 @@
+<link rel="import" href="/libs/vendor/polymer/polymer/polymer.html">
+<link rel="import" href="/views/namespace-list/component.html">
+
+<polymer-element name="p2b-neighborhood">
+ <template>
+ <link rel="stylesheet" href="../common/common.css">
+ <h2 page-title>Neighborhood</h2>
+ <p>List of PipeToBrowser instances currently published</p>
+ <p2b-namespace-list names="{{existingNames}}"></p2b-namespace-list>
+ </template>
+ <script>
+ Polymer('p2b-neighborhood', {
+ /*
+ * List of existing names to show
+ * @type {Array<string>}
+ */
+ existingNames: [],
+ });
+ </script>
+</polymer-element>
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/neighborhood/view.js b/examples/pipetobrowser/browser/views/neighborhood/view.js
new file mode 100644
index 0000000..2106ba2
--- /dev/null
+++ b/examples/pipetobrowser/browser/views/neighborhood/view.js
@@ -0,0 +1,21 @@
+import { View } from 'libs/mvc/view'
+
+/*
+ * View displaying a list of currently published PipeToBrowsers instances
+ * @class
+ * @extends {View}
+ */
+export class NeighborhoodView extends View {
+ constructor() {
+ var el = document.createElement('p2b-neighborhood');
+ super(el);
+ }
+
+ /*
+ * List of existing names to show
+ * @type {Array<string>}
+ */
+ set existingNames(val) {
+ this.element.existingNames = val;
+ }
+}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/page/component.css b/examples/pipetobrowser/browser/views/page/component.css
index 793659b..787f3bb 100644
--- a/examples/pipetobrowser/browser/views/page/component.css
+++ b/examples/pipetobrowser/browser/views/page/component.css
@@ -11,10 +11,12 @@
[sidebar] {
padding: 0.5em;
+ fill: #9e9e9e;
}
[sidebar] .core-selected {
color: #00bcd4;
+ fill: #212121;
}
[main] {
diff --git a/examples/pipetobrowser/browser/views/page/component.html b/examples/pipetobrowser/browser/views/page/component.html
index 418e118..6e6cc54 100644
--- a/examples/pipetobrowser/browser/views/page/component.html
+++ b/examples/pipetobrowser/browser/views/page/component.html
@@ -8,6 +8,8 @@
<link rel="import" href="/libs/vendor/polymer/paper-appbar/paper-appbar.html">
<link rel="import" href="/libs/vendor/polymer/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/libs/vendor/polymer/paper-toast/paper-toast.html">
+<link rel="import" href="/libs/vendor/polymer/core-icons/iconsets/hardware-icons.html">
+<link rel="import" href="/libs/vendor/polymer/core-icons/iconsets/social-icons.html">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
diff --git a/examples/pipetobrowser/browser/views/pipes/component.css b/examples/pipetobrowser/browser/views/pipes/component.css
index 5b79a3b..819c741 100644
--- a/examples/pipetobrowser/browser/views/pipes/component.css
+++ b/examples/pipetobrowser/browser/views/pipes/component.css
@@ -26,11 +26,8 @@
}
.empty-message {
- font-size: 1.5em;
- padding: 1.5em;
+ padding: 1em;
position: absolute;
- margin: 0px;
- color: #4285f4;
}
.container {
diff --git a/examples/pipetobrowser/browser/views/pipes/component.html b/examples/pipetobrowser/browser/views/pipes/component.html
index b2a5088..ad47a07 100644
--- a/examples/pipetobrowser/browser/views/pipes/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/component.html
@@ -14,7 +14,7 @@
<link rel="stylesheet" href="component.css">
<div class="container" flex>
<template if="{{ numTabs == 0 }}">
- <p class="empty-message">No pipes to show...</p>
+ <h2 page-title class="empty-message">No pipes to show...</h2>
<div class="no-pipes-bg"></div>
</template>
diff --git a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
index 292e842..f34f1ee 100644
--- a/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
+++ b/examples/pipetobrowser/browser/views/pipes/tab-toolbar/component.html
@@ -1,6 +1,5 @@
<link rel="import" href="/libs/vendor/polymer/polymer/polymer.html">
<link rel="import" href="/libs/vendor/polymer/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="/libs/vendor/polymer/core-icons/iconsets/hardware-icons.html">
<polymer-element name="p2b-pipes-tab-toolbar">
<template>
diff --git a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.css b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.css
index e48c444..a58b136 100644
--- a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.css
+++ b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.css
@@ -19,3 +19,9 @@
paper-button[affirmative] {
color: #4285f4;
}
+
+.label {
+ margin: 0;
+ margin-top: 1em;
+ font-size: 1.1em;
+}
\ No newline at end of file
diff --git a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.html b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.html
index 77f382f..d23a326 100644
--- a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.html
+++ b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/component.html
@@ -3,6 +3,7 @@
<link rel="import" href="/libs/vendor/polymer/paper-button/paper-button.html">
<link rel="import" href="/libs/vendor/polymer/paper-dialog/paper-dialog.html">
<link rel="import" href="/libs/vendor/polymer/paper-dialog/paper-dialog-transition.html">
+<link rel="import" href="/views/namespace-list/component.html">
<polymer-element name="p2b-redirect-pipe-dialog">
@@ -13,6 +14,10 @@
<p>
<paper-input focused id="nameInput" label="Name to redirect to" floatinglabel></paper-input>
<paper-checkbox id="newDataOnly" label="Only redirect new data"></paper-checkbox>
+ <template if="{{existingNames.length > 0}}">
+ <h2 class="label">Currently online</h2>
+ <p2b-namespace-list selectable on-select="{{updateNameInput}}" names="{{existingNames}}"></p2b-namespace-list>
+ </template>
</p>
<paper-button label="Cancel" dismissive></paper-button>
<paper-button label="Redirect" affirmative default on-tap="{{ fireRedirectActionEvent }}"></paper-button>
@@ -20,6 +25,13 @@
</template>
<script>
Polymer('p2b-redirect-pipe-dialog', {
+
+ /*
+ * List of existing names to show in the dialog for the user to pick from
+ * @type {Array<string>}
+ */
+ existingNames: [],
+
ready: function() {
var self = this;
var dialog = this.$.dialog;
@@ -52,6 +64,14 @@
name: name,
newDataOnly: this.$.newDataOnly.checked
});
+ },
+
+ /*
+ * Updates the input value
+ * @private
+ */
+ updateNameInput: function(e) {
+ this.$.nameInput.value = e.detail;
}
});
</script>
diff --git a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/view.js b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/view.js
index c191913..d369c49 100644
--- a/examples/pipetobrowser/browser/views/redirect-pipe-dialog/view.js
+++ b/examples/pipetobrowser/browser/views/redirect-pipe-dialog/view.js
@@ -19,6 +19,14 @@
this.element.open();
}
+ /*
+ * List of existing names to show in the dialog for the user to pick from
+ * @type {Array<string>}
+ */
+ set existingNames(val) {
+ this.element.existingNames = val;
+ }
+
/*
* Event representing user's intention to redirect
* @event
