brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From henev...@apache.org
Subject [10/16] brooklyn-ui git commit: Add help texts on all steps of the location wizard.
Date Fri, 18 Mar 2016 11:08:14 GMT
Add help texts on all steps of the location wizard.


Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/fd32f2d2
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/fd32f2d2
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/fd32f2d2

Branch: refs/heads/master
Commit: fd32f2d20e0358ea9711389f5474283974186c8e
Parents: 193c5b8
Author: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Authored: Thu Mar 17 16:45:14 2016 +0000
Committer: Thomas Bouron <thomas.bouron@cloudsoftcorp.com>
Committed: Thu Mar 17 16:45:14 2016 +0000

----------------------------------------------------------------------
 src/main/webapp/assets/css/base.css             |  4 +
 .../webapp/assets/js/view/location-wizard.js    | 95 +++++++++++++-------
 .../tpl/location-wizard/location-type.html      |  8 +-
 3 files changed, 71 insertions(+), 36 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/fd32f2d2/src/main/webapp/assets/css/base.css
----------------------------------------------------------------------
diff --git a/src/main/webapp/assets/css/base.css b/src/main/webapp/assets/css/base.css
index 6ccd08b..8f05e59 100644
--- a/src/main/webapp/assets/css/base.css
+++ b/src/main/webapp/assets/css/base.css
@@ -1490,6 +1490,10 @@ textarea.param-value {
 .location-type-container {
     overflow: hidden;
 }
+.help-text {
+    padding-top: 10px;
+    font-style: italic;
+}
 .location-type {
     width: 160px;
     height: 200px;

http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/fd32f2d2/src/main/webapp/assets/js/view/location-wizard.js
----------------------------------------------------------------------
diff --git a/src/main/webapp/assets/js/view/location-wizard.js b/src/main/webapp/assets/js/view/location-wizard.js
index b7c6c6b..74374e2 100644
--- a/src/main/webapp/assets/js/view/location-wizard.js
+++ b/src/main/webapp/assets/js/view/location-wizard.js
@@ -60,12 +60,11 @@ define([
                 },
                 {
                     title: '<%= type %> Location - Configuration',
-                    subtitle: 'Required information about your location',
                     view: LocationConfiguration
                 },
                 {
                     title: '<%= type %> Location - Provisioning',
-                    subtitle: 'Provisioning information about your location',
+                    subtitle: 'In many target locations, additional configuration may be
supported. Enter any such options here. For information on available options consult the <a
href="https://brooklyn.apache.org/v/latest/ops/locations/">Brooklyn documentation</a>.
Alternatively you can skip this step.',
                     view: LocationProvisioning
                 }
             ];
@@ -98,7 +97,11 @@ define([
             var step = this.steps[this.step];
 
             this.$('.location-wizard-title').html(_.template(step.title)({type: this.capitalize(this.type)}));
-            this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type: this.type}));
+            if (_.has(step, 'subtitle')) {
+                this.$('.location-wizard-subtitle').html(_.template(step.subtitle)({type:
this.type})).show();
+            } else {
+                this.$('.location-wizard-subtitle').hide();
+            }
 
             // Render actions buttons
             var actionContainer = this.$('.location-wizard-actions').empty();
@@ -247,6 +250,8 @@ define([
         className: 'location-wizard-body',
         template: _.template(LocationTypeHtml),
         events: {
+            'mouseenter .location-type': 'onDisplayHelp',
+            'mouseleave .location-type': 'onHideHelp',
             'click .location-type': 'onSelectType'
         },
 
@@ -272,6 +277,15 @@ define([
             return this;
         },
 
+        onDisplayHelp: function(event) {
+            var $elm = this.$(event.currentTarget);
+            this.$('.help-text').html($elm.data('help')).show();
+        },
+
+        onHideHelp: function(event) {
+            this.$('.help-text').html('').hide();
+        },
+
         onSelectType: function(event) {
             var $elm = this.$(event.currentTarget);
             var type = $elm.data('type');
@@ -306,19 +320,20 @@ define([
             cloud: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case
using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
-                    require: true
+                    help: 'Display name used throughout the web console'
                 },
                 {
                     id: 'spec',
-                    label: 'Cloud type',
+                    label: 'Cloud Provider',
                     type: 'select',
                     values: {
                         'jclouds:aws-ec2': 'Amazon',
@@ -330,13 +345,9 @@ define([
                 },
                 {
                     id: 'region',
-                    label: 'Cloud region',
+                    label: 'Cloud Region',
                     type: 'text',
-                    require: {
-                        spec: [
-                            'jclouds:aws-ec2', 'jclouds:google-compute-engine', 'jclouds:softlayer'
-                        ]
-                    },
+                    help: 'Some cloud providers have different regions for you to use. You
can enter here this information',
                     disable: {
                         spec: [
                             'jclouds:openstack'
@@ -345,8 +356,9 @@ define([
                 },
                 {
                     id: 'endpoint',
-                    label: 'Cloud endpoint',
+                    label: 'Cloud Endpoint',
                     type: 'text',
+                    help: 'Cloud endpoint used by Brooklyn to communicate with their API',
                     require: {
                         spec: [
                             'jclouds:openstack'
@@ -360,13 +372,15 @@ define([
                 },
                 {
                     id: 'identity',
-                    label: 'Identity',
+                    label: 'Cloud Identity',
                     type: 'text',
+                    help: 'Alphanumerical string given by your cloud provider. It acts as
a login',
                     require: true
                 },
                 {
                     id: 'credential',
-                    label: 'Credential',
+                    label: 'Cloud Credential',
+                    help: 'Alphanumerical string given by your cloud provider. It acts as
a password',
                     type: 'text',
                     require: true
                 }
@@ -374,74 +388,87 @@ define([
             localhost: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case
using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
+                    help: 'Display name used throughout the web console',
                     require: true
                 },
                 {
                     id: 'user',
                     label: 'User',
-                    type: 'text'
+                    type: 'text',
+                    help: 'The user to use to connect to localhost'
                 },
                 {
                     id: 'password',
                     label: 'Password',
-                    type: 'password'
+                    type: 'password',
+                    help: 'The password to use to connect to localhost'
                 },
                 {
                     id: 'privateKeyFile',
-                    label: 'Private key',
-                    type: 'textarea'
+                    label: 'Private Key',
+                    type: 'textarea',
+                    help: 'Content of a private key file use to connect to localhost (the
corresponding public key needs to be add into your <code>.authorized_key</code>code>
file)'
                 },
                 {
                     id: 'privateKeyPassphrase',
-                    label: 'Private key passphrase',
-                    type: 'test'
+                    label: 'Private Key Passphrase',
+                    type: 'text',
+                    help: 'The passphrase to unlock the private key specified abve (if applicable)'
                 }
             ],
             byon: [
                 {
                     id: 'name',
-                    label: 'location ID',
+                    label: 'Location ID',
                     type: 'text',
+                    help: 'Label to identify this location. Typically this is lower case
using hyphens and no spaces',
                     require: true
                 },
                 {
                     id: 'displayName',
-                    label: 'location name',
+                    label: 'Location Name',
                     type: 'text',
+                    help: 'Display name used throughout the web console',
                     require: true
                 },
                 {
                     id: 'user',
                     label: 'User',
-                    type: 'text'
+                    type: 'text',
+                    help: 'The user to use to connect to localhost'
                 },
                 {
                     id: 'password',
                     label: 'Password',
-                    type: 'password'
+                    type: 'password',
+                    help: 'The password to use to connect to localhost'
                 },
                 {
                     id: 'privateKeyFile',
-                    label: 'Private key',
-                    type: 'textarea'
+                    label: 'Private Key',
+                    type: 'textarea',
+                    help: 'Content of a private key file use to connect to localhost (the
corresponding public key needs to be add into your <code>.authorized_key</code>code>
file)'
                 },
                 {
                     id: 'privateKeyPassphrase',
-                    label: 'Private key passphrase',
-                    type: 'test'
+                    label: 'Private Key Passphrase',
+                    type: 'text',
+                    help: 'The passphrase to unlock the private key specified abve (if applicable)'
                 },
                 {
                     id: 'hosts',
                     label: 'Hosts',
                     type: 'textarea',
+                    help: 'List of host IP addresses, one per line',
                     list: true,
                     require: true
                 }
@@ -517,6 +544,10 @@ define([
                     .hide());
             }
 
+            if (_.has(field, 'help')) {
+                $div.append($('<p>').addClass('help-block').html($('<small>').html(field.help)));
+            }
+
             return $div;
         },
 

http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/fd32f2d2/src/main/webapp/assets/tpl/location-wizard/location-type.html
----------------------------------------------------------------------
diff --git a/src/main/webapp/assets/tpl/location-wizard/location-type.html b/src/main/webapp/assets/tpl/location-wizard/location-type.html
index ccfa2ed..7f9a57c 100644
--- a/src/main/webapp/assets/tpl/location-wizard/location-type.html
+++ b/src/main/webapp/assets/tpl/location-wizard/location-type.html
@@ -19,24 +19,24 @@ under the License.
 
 <div class="tab-content">
     <div class="location-type-container">
-        <div class="location-type" data-type="cloud">
+        <div class="location-type" data-type="cloud" data-help="May be servers or cloud
providers which provide access to servers">
             <div>
                 <i class="fa fa-cloud"></i>
                 <p class="location-type-title">Cloud</p>
-
             </div>
         </div>
-        <div class="location-type" data-type="localhost">
+        <div class="location-type" data-type="localhost" data-help="Current machine where
Brooklyn is running">
             <div>
                 <i class="fa fa-laptop"></i>
                 <p class="location-type-title">Localhost</p>
             </div>
         </div>
-        <div class="location-type" data-type="byon">
+        <div class="location-type" data-type="byon" data-help="Set machines identified
by their IP addresses, such as physical servers or vagrant boxes">
             <div>
                 <i class="fa fa-file-o"></i>
                 <p class="location-type-title">BYON</p>
             </div>
         </div>
     </div>
+    <p class="help-text muted"></p>
 </div>


Mime
View raw message