handle catalog empty better

if empty, switch to the yaml tab, and put a nice message with links in case the 
user comes back.
also use a throbber while loading.


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

Branch: refs/heads/master
Commit: b5a15a99db067bf567184a05b4044df71b58d389
Parents: 8489436
Author: Alex Heneveld <[email protected]>
Authored: Fri Jan 23 10:30:12 2015 +0000
Committer: Alex Heneveld <[email protected]>
Committed: Fri Jan 23 11:44:37 2015 +0000

----------------------------------------------------------------------
 usage/jsgui/src/main/webapp/assets/css/base.css |  8 +++++++
 .../assets/js/view/application-add-wizard.js    | 22 ++++++++++++++++++--
 .../assets/tpl/app-add-wizard/create.html       |  8 +++++++
 3 files changed, 36 insertions(+), 2 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/b5a15a99/usage/jsgui/src/main/webapp/assets/css/base.css
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/css/base.css 
b/usage/jsgui/src/main/webapp/assets/css/base.css
index 8674b47..4d8b763 100644
--- a/usage/jsgui/src/main/webapp/assets/css/base.css
+++ b/usage/jsgui/src/main/webapp/assets/css/base.css
@@ -130,6 +130,14 @@ div#create-step-template-entries {
     padding-top: 12px;
     padding-bottom: 36px;
 }
+div#catalog-applications-throbber {
+    margin-top: 100px;
+    text-align: center;
+}
+div#catalog-applications-empty {
+    margin-top: 100px;
+    text-align: center;
+}
 /* menu bar */
 .navbar .nav>li {
     display: block;

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/b5a15a99/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js
----------------------------------------------------------------------
diff --git 
a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js 
b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js
index 833a5ff..84a3151 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/application-add-wizard.js
@@ -286,7 +286,9 @@ define([
             'keyup #yaml_code':'onYamlCodeChange',
             'change #yaml_code':'onYamlCodeChange',
             'paste #yaml_code':'onYamlCodeChange',
-            'shown a[data-toggle="tab"]':'onTabChange'
+            'shown a[data-toggle="tab"]':'onTabChange',
+            'click #templateTab #catalog-add':'switchToCatalogAdd',
+            'click #templateTab #catalog-yaml':'showYamlTab',
         },
         template:_.template(CreateHtml),
         wizard: null,
@@ -311,7 +313,14 @@ define([
                 self.catalogApplicationItems = result
                 self.catalogApplicationIds = _.map(result, function(item) { 
return item.id })
                 self.$("#appClassTab 
.application-type-input").typeahead().data('typeahead').source = 
self.catalogApplicationIds
-                self.addTemplateLozenges()
+                $('#catalog-applications-throbber').hide();
+                $('#catalog-applications-empty').hide();
+                if (self.catalogApplicationItems) {
+                    self.addTemplateLozenges()
+                } else {
+                    $('#catalog-applications-empty').show();
+                    self.showYamlTab();
+                }
             })
         },
         renderConfiguredEntities:function () {
@@ -352,6 +361,15 @@ define([
             if (this.options.wizard)
                 this.options.wizard.updateButtonVisibility();
         },
+        switchToCatalogAdd: function() {
+            var $modal = $('.add-app #modal-container .modal')
+            $modal.modal('hide');
+            window.location.href="#v1/catalog/new";
+        },
+        showYamlTab: function() {
+            
$("ul#app-add-wizard-create-tab").find("a[href='#yamlTab']").tab('show')
+            $("#yaml_code").focus();
+        },
         applyFilter: function(e) {
             var filter = $(e.currentTarget).val().toLowerCase()
             if (!filter) {

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/b5a15a99/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/create.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/create.html 
b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/create.html
index bf250fc..673aca6 100644
--- a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/create.html
+++ b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/create.html
@@ -56,6 +56,14 @@ under the License.
  <div class="tab-content">
  
   <div class="tab-pane active" id="templateTab">
+    <div id="catalog-applications-throbber"><img 
src="/assets/images/throbber.gif"/></div>
+    <div id="catalog-applications-empty" class="hide">
+      The applications catalog is empty.
+      <br/><br/><br/><br/>
+      <button id="catalog-add" type="button" class="btn btn-mini btn-info">Add 
to Catalog</button>
+      &nbsp;&nbsp;&nbsp;&nbsp;
+      <button id="catalog-yaml" type="button" class="btn btn-mini 
btn-info">YAML Blueprint</button>
+    </div>
     <div id="create-step-template-entries"/>
   </div>
   

Reply via email to