You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2016/02/01 18:52:41 UTC

[42/71] [abbrv] brooklyn-ui git commit: js gui app wizard "preview" click shows editable yaml tab

js gui app wizard "preview" click shows editable yaml tab

with yaml contents not json. removes the old preview step.
also a few other tidies in the app wizard, around errors, step navigation, and method names.


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

Branch: refs/heads/0.7.0-incubating
Commit: 53e42a113cd00b157e0527d5de760caf2f9f95f0
Parents: 8925128
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Sat Mar 28 21:15:06 2015 -0500
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Sat Mar 28 21:21:09 2015 -0500

----------------------------------------------------------------------
 .../assets/js/view/application-add-wizard.js    | 131 +++++++------------
 .../assets/tpl/app-add-wizard/create.html       |   3 -
 .../assets/tpl/app-add-wizard/preview.html      |  37 ------
 3 files changed, 48 insertions(+), 123 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/53e42a11/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 8a999d2..17c0f22 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
@@ -32,13 +32,12 @@ define([
     "text!tpl/app-add-wizard/deploy.html",
     "text!tpl/app-add-wizard/deploy-location-row.html",
     "text!tpl/app-add-wizard/deploy-location-option.html",
-    "text!tpl/app-add-wizard/preview.html",
     "bootstrap"
     
 ], function (_, $, Backbone, Util, JsYaml, Entity, Application, Location,
              ModalHtml, CreateHtml, CreateStepTemplateEntryHtml, CreateEntityEntryHtml,
              RequiredConfigEntryHtml, EditConfigEntryHtml, DeployHtml,
-             DeployLocationRowHtml, DeployLocationOptionHtml, PreviewHtml
+             DeployLocationRowHtml, DeployLocationOptionHtml
 ) {
 
     /** Special ID to indicate that no locations will be provided when starting the server. */
@@ -53,31 +52,38 @@ define([
         obj.attr("disabled", !isEnabled)
     }
     
-    function specToCAMP(spec) {
+    /** converts old-style spec with "entities" to camp-style spec with services */
+    function oldSpecToCamp(spec) {
         var services;
         if (spec.type) {
-            services = [entityToCAMP(spec)];
+            services = [entityToCamp({type: spec.type, config: spec.config})];
         } else if (spec.entities) {
             services = [];
             var entities = spec.entities;
             for (var i = 0; i < entities.length; i++) {
-                services.push(entityToCAMP(entities[i]));
+                services.push(entityToCamp(entities[i]));
             }
         }
-        return {
-            name: spec.name,
-            locations: spec.locations,
-            services: services
-        };
+        var result = {};
+        if (spec.name) result.name = spec.name;
+        if (spec.locations) {
+          if (spec.locations.length>1)
+            result.locations = spec.locations;
+          else
+            result.location = spec.locations[0];
+        }
+        if (services) result.services = services;
+        // NB: currently nothing else is supported in this spec
+        return result;
     }
-
-    function entityToCAMP(entity) {
-        return {
-            name: entity.name,
-            type: entity.type,
-            "brooklyn.config": entity.config
-        };
+    function entityToCamp(entity) {
+        var result = {};
+        if (entity.name && (!options || !options.exclude_name)) result.name = entity.name;
+        if (entity.type) result.type = entity.type;
+        if (entity.config && _.size(entity.config)) result["brooklyn.config"] = entity.config;
+        return result;
     }
+    
     var ModalWizard = Backbone.View.extend({
         tagName:'div',
         className:'modal hide fade',
@@ -102,16 +108,12 @@ define([
                               view:new ModalWizard.StepCreate({ model:this.model, wizard: this })
                           },
                           {
+                              // TODO rather than make this another step -- since we now on preview revert to the yaml tab
+                              // this should probably be shown in the catalog tab, replacing the other contents.
                               step_id:'name-and-locations',
                               title:'<%= appName %>',
                               instructions:'Specify the locations to deploy to and any additional configuration',
                               view:new ModalWizard.StepDeploy({ model:this.model })
-                          },
-                          {
-                              step_id:'preview',
-                              title:'<%= appName %>',
-                              instructions:'Confirm the code which will be sent to the server, optionally tweaking it or saving it for future reference',
-                              view:new ModalWizard.StepPreview({ model:this.model })
                           }
                           ]
         },
@@ -127,7 +129,7 @@ define([
             return this
         },
 
-        renderCurrentStep:function () {
+        renderCurrentStep:function (callback) {
             var name = this.model.name || "";
             this.title = this.$("h3#step_title")
             this.instructions = this.$("p#step_instructions")
@@ -141,6 +143,7 @@ define([
             this.currentView.render()
             this.currentView.updateForState()
             this.$(".modal-body").replaceWith(this.currentView.el)
+            if (callback) callback(this.currentView);
 
             this.updateButtonVisibility();
         },
@@ -200,7 +203,7 @@ define([
             } else {
                 // Drop any "None" locations.
                 this.model.spec.pruneLocations();
-                yaml = JSON.stringify(specToCAMP(this.model.spec.toJSON()));
+                yaml = JsYaml.safeDump(oldSpecToCamp(this.model.spec.toJSON()));
             }
 
             $.ajax({
@@ -244,11 +247,11 @@ define([
         },
 
         prevStep:function () {
-            this.currentStep -= 1
-            this.renderCurrentStep()
+            this.currentStep -= 1;
+            this.renderCurrentStep();
         },
         nextStep:function () {
-            if (this.currentStep < 2) {
+            if (this.currentStep == 0) {
                 if (this.currentView.validate()) {
                     var yaml = (this.currentView && this.currentView.selectedTemplate && this.currentView.selectedTemplate.yaml);
                     if (yaml) {
@@ -262,22 +265,31 @@ define([
                     if (yaml) {
                         // it's a yaml catalog template which includes a location, show the yaml tab
            	            $("ul#app-add-wizard-create-tab").find("a[href='#yamlTab']").tab('show');
-                        $("#yaml_code").focus()
+                        $("#yaml_code").focus();
                     } else {
                         // it's a java catalog template or yaml template without a location, go to wizard
-                        this.currentStep += 1
-                        this.renderCurrentStep()
+                        this.currentStep += 1;
+                        this.renderCurrentStep();
                     }
                 } else {
                     // the call to validate will have done the showFailure
                 }
             } else {
-                this.finishStep()
+                throw "Unexpected step: "+this.currentStep;
             }
         },
         previewStep:function () {
-            // slight cheat, but good enough for now
-            this.nextStep()
+            if (this.currentView.validate()) {
+                this.currentStep = 0;
+                var that = this;
+                this.renderCurrentStep(function callback(view) {
+                    $("textarea#yaml_code").val(JsYaml.safeDump(oldSpecToCamp(that.model.spec.toJSON())));
+                    $("ul#app-add-wizard-create-tab").find("a[href='#yamlTab']").tab('show');
+                    $("#yaml_code").focus();
+                });
+            } else {
+                // call to validate should showFailure
+            }
         },
         finishStep:function () {
             if (this.currentView.validate()) {
@@ -562,7 +574,7 @@ define([
                 // TODO - other tabs not implemented yet 
                 // do nothing, show error return false below
             }
-            this.$('div.app-add-wizard-create-info-message').slideDown(250).delay(10000).slideUp(500)
+            this.showFailure("Invalid application type/spec");
             return false
         },
 
@@ -759,53 +771,6 @@ define([
             this.$('div.error-message').slideDown(250).delay(10000).slideUp(500);
         }
     })
-
-    ModalWizard.StepPreview = Backbone.View.extend({
-        className:'modal-body',
-        initialize:function () {
-            this.$el.html(_.template(PreviewHtml))
-            this.model.spec.on("change", this.render, this)
-        },
-        beforeClose:function () {
-            this.model.spec.off("change", this.render)
-        },
-        updateForState: function () {
-            if (!this.model.spec.get("entities") || this.model.spec.get("entities").length==0) {
-                delete this.model.spec.attributes["entities"]
-            }
-            if (!this.model.spec.get("name"))
-                delete this.model.spec.attributes["name"]
-            if (!this.model.spec.get("config") || _.keys(this.model.spec.get("config")).length==0) {
-                delete this.model.spec.attributes["config"]
-            }
-            this.$('#app-summary').val(Util.toTextAreaString(specToCAMP(this.model.spec.toJSON())))
-        },
-        render:function () {
-            this.delegateEvents()
-            return this
-        },
-        validate:function () {
-            // need locations, and type or entities
-            if ((this.model.spec.get("locations").length > 0) && 
-                (this.model.spec.get("type")!=null || 
-                    this.model.spec.getEntities().length > 0)) {
-                return true
-            }
-            
-            if (this.model.spec.get("locations").length <= 0) {
-                this.showFailure("A location is required");
-                return false;
-            }
-
-            this.showFailure();
-            return false
-        },
-        showFailure: function(text) {
-            if (!text) text = "Failure performing the specified action";
-            this.$('div.error-message .error-message-text').html(_.escape(text))
-            this.$('div.error-message').slideDown(250).delay(10000).slideUp(500)
-        }
-    })
-
+    
     return ModalWizard
 })

http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/53e42a11/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 673aca6..5ec0150 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
@@ -18,9 +18,6 @@ specific language governing permissions and limitations
 under the License.
 -->
 
-<div class="app-add-wizard-create-info-message label-message hide">
-    <div class="label-important">ERROR</div>  Invalid application type/spec
-</div>
 <div class="info-message label-message hide">
 	<!-- default content, should not be used -->
     Failure performing specified action

http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/53e42a11/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/preview.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/preview.html b/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/preview.html
deleted file mode 100644
index e09faba..0000000
--- a/usage/jsgui/src/main/webapp/assets/tpl/app-add-wizard/preview.html
+++ /dev/null
@@ -1,37 +0,0 @@
-
-<!--
-Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements.  See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership.  The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License.  You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied.  See the License for the
-specific language governing permissions and limitations
-under the License.
--->
-
-<!-- New application wizard step 3: summary and submit the app -->
-<div class="preview">
-    <div>
-        <h3>Application Preview</h3>
-        <textarea id="app-summary" readonly="readonly" rows="16"
-            style="width: 100%;"></textarea>
-    </div>
-    <dl class="dl-horizontal"></dl>
-    <div class="info-message hide label-message">
-        <span class="label-important">ERROR</span> Invalid spec or server
-        failure
-    </div>
-    <div class="error-message label-message hide">
-        <div class="label-important">ERROR</div>  <span class="error-message-text">Failure performing specified action</span>
-    </div>
-
-</div>
\ No newline at end of file