Merge lp:~stephen-stewart/snapweb/link-to-external-ui into lp:~snappy-dev/snapweb/trunk

[Stephen Stewart]

add a link to the service ui

[Sergio Schvezov (sergiusens)]

Added a question inline.

One of the original requirements was to open directly if possible, this seems a bit better except for the text.

review: Needs Information

[Stephen Stewart (stephen-stewart)]

> Added a question inline.
>
> One of the original requirements was to open directly if possible, this seems
> a bit better except for the text.

I honestly don't know what to call this.

I have 2 pieces of information to work on:

1) What a user will find at the end of this link could literally be anything.
2) Claire reports that following discussion with dkirkland and sadfl this link shouldn't be promoted; that the user should not be using webdm to find this link, and that it should not be exposed at a higher level (say, in lists) and should not be given prominence.

So I came up with the weak and non descript 'service ui' :)

[Stephen Stewart (stephen-stewart)]

The unique way in which lp works means i have to type something in here and hit save.

[lp:~stephen-stewart/snapweb/link-to-external-ui]

155. By Stephen Stewart on 2015-06-03

new name, same great taste

[Stephen Stewart (stephen-stewart)]

12:14 < sergiusens> beowulf: maybe ogra_ has better words for it
12:15 < ogra_> for what ? renaming webdm ?
12:15 < sergiusens> ogra_: no, let me get a screenshot ;-)
12:15 < ogra_> (if i can open a browser without my laptop sutting down :P )
12:16 < ogra_> *shutting
12:17 < sergiusens> ogra_: http://imgur.com/grZ72cS
12:17 < beowulf> ogra_: in your webrtc snap, you define a ui port, in webdm we create a button for this
12:17 < sergiusens> the mouse is over "Service UI"
12:17 < beowulf> ogra_: what should that button say?
12:18 < beowulf> (talking buttons, who knew)
12:18 < ogra_> just "Open" ?
12:19 < ogra_> service Ui sounds confusingly as if i would access a configuration option there
12:19 < beowulf> ogra_: you might, in some snaps
12:19 < ogra_> (somehow like "Management UI")
12:20 < ogra_> well, then call it "Manage/Open" or some such ...
12:21 < beowulf> "Open" is actually open ended enough to cover all options, or about "Open $name"
12:21 < ogra_> its a bit tricky to find a unique name for a multi purpose button :)
12:21 < ogra_> yeah, i guess Open is the best here unless you want to indicate management/configuration can be accessed through it
12:22 < ogra_> but i guess thats up to the app

[Sergio Schvezov (sergiusens)]

review: Approve

=== modified file 'www/src/css/snap.css'
--- www/src/css/snap.css	2015-05-27 15:32:13 +0000
+++ www/src/css/snap.css	2015-06-03 11:33:26 +0000
@@ -52,6 +52,16 @@
   padding:15px 0;
 }
 
+.b-snap__nav-item[target="_blank"]::after {
+  content: '';
+  width:10px;
+  height:10px;
+  display:inline-block;
+  vertical-align:super;
+  background:transparent url("/public/images/external-link.svg") 0 0 no-repeat;
+  background-size:10px 10px;
+}
+
 .b-snap__nav-item_active::before {
   position:absolute;
   content:'';

=== added file 'www/src/images/external-link.svg'
--- www/src/images/external-link.svg	1970-01-01 00:00:00 +0000
+++ www/src/images/external-link.svg	2015-06-03 11:33:26 +0000
@@ -0,0 +1,1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90"><path color="#000" fill="none" stroke-width="7.5" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/><path d="M33 13.012C8.994 13.042 6 13.747 6 31v36c0 18 3 18 30 18h12c27 0 30 0 30-18v-9h-9v6c0 12 0 12-24 12h-6c-24 0-24 0-24-12V34c0-10.864.192-11.885 18-11.982v-9.006z" fill="#808080"/><path color="#000" fill="none" stroke-width="6" overflow="visible" enable-background="accumulate" d="M0 0h90v90H0z"/><path d="M113.915 179.144c-.524.303-8.746-4.444-8.746-5.05 0-.605 8.22-5.352 8.744-5.05.525.304.525 9.797 0 10.1z" transform="matrix(-2.993 2.993 -3.111 -3.111 940.172 234.009)" xml:space="default" color="#000" fill="#808080" stroke-width="3" overflow="visible" enable-background="accumulate"/><path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Sans" d="M56.426 24.633l-24.34 24.34 9.94 9.94 24.34-24.34z" xml:space="default" color="#000" fill="#808080" stroke-width="9" overflow="visible" enable-background="accumulate" font-family="Sans"/></svg>
\ No newline at end of file

=== modified file 'www/src/js/models/snap.js'
--- www/src/js/models/snap.js	2015-06-01 16:27:13 +0000
+++ www/src/js/models/snap.js	2015-06-03 11:33:26 +0000
@@ -187,6 +187,7 @@
         //jscs:disable requireCamelCaseOrUpperCaseIdentifiers
         'prettyDownloadSize',
         this.prettifyBytes(Number(response.download_size))
+        //jscs:enable requireCamelCaseOrUpperCaseIdentifiers
       );
     }
 
@@ -195,9 +196,25 @@
         //jscs:disable requireCamelCaseOrUpperCaseIdentifiers
         'prettyInstalledSize',
         this.prettifyBytes(Number(response.installed_size))
+        //jscs:enable requireCamelCaseOrUpperCaseIdentifiers
       );
     }
 
+    if (response.hasOwnProperty('ui_port')) {
+      //jscs:disable requireCamelCaseOrUpperCaseIdentifiers
+      var port = response.ui_port;
+      //jscs:enable requireCamelCaseOrUpperCaseIdentifiers
+
+      if (_.isFinite(port) && port > 0) {
+
+        this.set('vendorGuiHref', window.location.protocol + '//' +
+            window.location.hostname + ':' + port + '/'
+        );
+      } else {
+        this.unset('vendorGuiHref');
+      }
+    }
+
     return response;
   },
 

=== modified file 'www/src/js/templates/snap-menu.hbs'
--- www/src/js/templates/snap-menu.hbs	2015-05-22 15:21:34 +0000
+++ www/src/js/templates/snap-menu.hbs	2015-06-03 11:33:26 +0000
@@ -8,4 +8,9 @@
   <a class="b-snap__nav-item" href="settings">
     Settings
   </a>
+  {{#if vendorGuiHref}}
+  <a class="b-snap__nav-item" href="{{vendorGuiHref}}" target="_blank">
+    Open / Manage
+  </a>
+  {{/if}}
 </div>

=== modified file 'www/src/js/views/snap-layout.js'
--- www/src/js/views/snap-layout.js	2015-05-08 14:53:07 +0000
+++ www/src/js/views/snap-layout.js	2015-06-03 11:33:26 +0000
@@ -46,9 +46,10 @@
   },
 
   onBeforeShow: function() {
-    var tabView = this._getSectionView(this.options.section);
+    var tabView = this.getSectionView(this.options.section);
     this.showChildView('menuRegion',
       new SnapMenuView({
+        model: this.model,
         section: this.options.section
       })
     );
@@ -60,7 +61,7 @@
     tabRegion: '.region-tab'
   },
 
-  _getSectionView: function(section) {
+  getSectionView: function(section) {
     var view;
     switch (section) {
       case 'reviews':
@@ -76,17 +77,19 @@
   },
 
   section: function(e) {
-    e.preventDefault();
-    var section = e.target.getAttribute('href');
-    var view = this._getSectionView(section);
-    var name = this.model.get('id');
-    // XXX url sane
-    var url = 'snap/' + name + '/' + section;
-    // if section is already in place, don't showChildView
-    var re = new RegExp('/' + section + '$', 'i');
-    if (!re.test(Backbone.history.fragment)) {
-      this.showChildView('tabRegion', view);
-      Backbone.history.navigate(url);
+    if (!e.target.getAttribute('target')) {
+      e.preventDefault();
+      var section = e.target.getAttribute('href');
+      var view = this.getSectionView(section);
+      var name = this.model.get('id');
+      // XXX url sane
+      var url = 'snap/' + name + '/' + section;
+      // if section is already in place, don't showChildView
+      var re = new RegExp('/' + section + '$', 'i');
+      if (!re.test(Backbone.history.fragment)) {
+        this.showChildView('tabRegion', view);
+        Backbone.history.navigate(url);
+      }
     }
   }
 });

=== modified file 'www/src/js/views/snap-menu.js'
--- www/src/js/views/snap-menu.js	2015-05-08 20:03:48 +0000
+++ www/src/js/views/snap-menu.js	2015-06-03 11:33:26 +0000
@@ -17,13 +17,16 @@
     'click': 'onNavClick'
   },
 
-  template: function() {
-    return template();
+  template: function(model) {
+    return template(model);
   },
 
   onNavClick: function(e) {
     var link = e.target.getAttribute('href');
-    this.setActiveNav(link);
+    if (!e.target.getAttribute('target')) {
+      e.preventDefault();
+      this.setActiveNav(link);
+    }
   },
 
   setActiveNav: function(link) {

=== modified file 'www/tests/modelSpec.js'
--- www/tests/modelSpec.js	2015-06-01 22:09:08 +0000
+++ www/tests/modelSpec.js	2015-06-03 11:33:26 +0000
@@ -88,6 +88,20 @@
       expect(this.model.get('prettyDownloadSize')).toBe('0 B');
     });
 
+    it('should parse response to create vendorGuiHref', function() {
+      this.model.parse({'ui_port': 8080});
+      expect(this.model.get('vendorGuiHref')).toBe('http://localhost:8080/');
+    });
+
+    it('should not set vendorGuiHref if not a finite number', function() {
+      this.model.parse({'ui_port': NaN});
+      expect(this.model.get('vendorGuiHref')).not.toBeDefined();
+      this.model.parse({'ui_port': ''});
+      expect(this.model.get('vendorGuiHref')).not.toBeDefined();
+      this.model.parse({'ui_port': -9});
+      expect(this.model.get('vendorGuiHref')).not.toBeDefined();
+    });
+
   });
 
   describe('sync methods', function() {