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/18 11:36:54 UTC

[02/27] brooklyn-ui git commit: a bunch more buttons for the composer

a bunch more buttons for the composer


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

Branch: refs/heads/master
Commit: d67739c82e62025fed2a3d170fe254b4b744d89e
Parents: 6120199
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Thu Feb 11 16:03:42 2016 +0000
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Thu Feb 11 17:44:11 2016 +0000

----------------------------------------------------------------------
 src/main/webapp/assets/js/view/editor.js    | 106 ++++++++++++++++++++---
 src/main/webapp/assets/tpl/editor/page.html |   8 +-
 2 files changed, 99 insertions(+), 15 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/d67739c8/src/main/webapp/assets/js/view/editor.js
----------------------------------------------------------------------
diff --git a/src/main/webapp/assets/js/view/editor.js b/src/main/webapp/assets/js/view/editor.js
index fa893fc..1b4dce3 100644
--- a/src/main/webapp/assets/js/view/editor.js
+++ b/src/main/webapp/assets/js/view/editor.js
@@ -60,6 +60,9 @@ define([
         events: {
             'click #button-run':'runBlueprint',
             'click #button-delete':'removeBlueprint',
+            'click #button-convert':'convertBlueprint',
+            'click #button-switch':'switchMode',
+            'click #button-example':'populateExampleBlueprint',
         },
         editorTemplate:_.template(EditorHtml),
 
@@ -79,7 +82,7 @@ define([
             this.options.catalog.fetch({
                 data: $.param({allVersions: true}),
                 success: function () {
-                    vm.refreshEditor();
+                    vm.initializeEditor();
                 }
             });
         },
@@ -97,11 +100,41 @@ define([
         refresh: function() {
             $("#button-run", this.$el).html(this.mode==MODE_CATALOG ? "Add to Catalog" : "Deploy");
             $("#button-delete", this.$el).html("Clear");
+            $("#button-example", this.$el).html(this.mode==MODE_CATALOG ? "Insert Catalog Example" : "Insert Blueprint Example");
+            $("#button-switch", this.$el).html(this.mode==MODE_CATALOG ? "Switch to Application Blueprint Mode" : "Switch to Catalog Mode");
+            this.refreshOnMinorChange();
         },
-        refreshEditor: function() {
+        refreshOnMinorChange: function() {
+            var yaml = this.editor && this.editor.getValue();
+            var parse = this.parse();
+            
+            if (!yaml || parse.problem || this.mode==MODE_CATALOG) {
+                $("#button-convert", this.$el).hide();
+            } else {
+                $("#button-convert", this.$el).html("Convert to Catalog Item");
+                $("#button-convert", this.$el).show();
+            }
+            
+            if (!yaml) {
+                // no yaml
+                $("#button-run", this.$el).attr('disabled','disabled');
+                $("#button-delete", this.$el).hide();
+                // example and switch mode only shown when empty
+                $("#button-example", this.$el).show();
+                $("#button-switch", this.$el).show();
+            } else {
+                $("#button-run", this.$el).attr('disabled','false');
+                // we have yaml
+                $("#button-run", this.$el).show();
+                $("#button-delete", this.$el).show();
+                $("#button-example", this.$el).hide();
+                $("#button-switch", this.$el).hide();
+            }
+        },
+        initializeEditor: function() {
             var cm = this.editor;
             if (typeof(cm) !== "undefined") {
-                var itemText;
+                var itemText = "";
                 if (this.options.typeId === '_') {
                     // _ indicates a literal is being supplied
                     itemText = this.options.content;
@@ -119,14 +152,10 @@ define([
                         }
                     }
                 }
+                cm.getDoc().setValue(itemText);
                 if (!itemText) {
-                    if (this.options.type === 'catalog') {
-                        itemText = _DEFAULT_CATALOG;
-                    } else {
-                        itemText = _DEFAULT_BLUEPRINT;
-                    }
+                    // could populateExampleBlueprint -- but now that is opt-in                    
                 }
-                cm.getDoc().setValue(itemText);
                 //better not to focus as focussing puts the cursor at the beginning which is odd
                 //and cmd-shift-[ and tab are intercepted so user can't navigate
                 // cm.focus();
@@ -144,20 +173,65 @@ define([
                         globalVars: true
                     }
                 });
+                var that = this;
+                this.editor.on("changes", function(editor, changes) {
+                    console.log("editor changed", editor, changes);
+                    that.refreshOnMinorChange();
+                });
             }
 
-            this.refreshEditor();
+            this.initializeEditor();
+        },
+        parse: function(forceRefresh) {
+            if (!forceRefresh && this.lastParse && this.lastParse.input === this.editor.getValue()) {
+                // up to date
+                return this.lastParse;
+            }
+            
+            if (!this.editor) {
+                this.lastParse = { problem: "no editor yet" };
+            } else {
+                this.lastParse = { input: this.editor.getValue() };
+                try {
+                    // TODO use new listener for the parser to get tree w parsing info
+                    this.lastParse.result = jsYaml.safeLoad(this.editor.getValue());
+                } catch (e) {
+                    this.lastParse.problem = e;
+                }
+            }
+            return this.lastParse;
         },
         validate: function() {
             var yaml = this.editor.getValue();
             try{
-                jsYaml.safeLoad(yaml);
+                var parsed = this.parse(true);
+                if (parsed.problem) throw parsed.problem;
                 return true;
             }catch (e){
                 this.showFailure(e.message);
                 return false;
             }
         },
+        convertBlueprint: function() {
+            if (this.mode === MODE_CATALOG) {
+                // not yet supported
+            } else {
+                var newBlueprint = "brooklyn.catalog:\n"+
+                    "  version: 0.0.1\n"+
+                    "    items:\n"+
+                    "    - id: TODO_identifier_for_this_item \n"+
+                    "      description: Some text to display about this\n"+
+                    "      iconUrl: http://www.apache.org/foundation/press/kit/poweredBy/Apache_PoweredBy.png\n"+
+                    "      itemType: template\n"+
+                    "      item:\n"+
+                    "      - \n"+
+                    // indent 8 spaces:
+                    this.editor.getValue().replace(/(\n|^)(.*\n|.+$)/gm,'        $1$2');
+                this.mode = MODE_CATALOG;
+                this.editor.setValue(newBlueprint);
+                this.refresh();
+            }
+        },
         runBlueprint: function() {
             if (this.validate()){
                 if (this.mode === MODE_CATALOG) {
@@ -168,9 +242,15 @@ define([
             }
         },
         removeBlueprint: function() {
-            this.refreshEditor();
-
+            this.initializeEditor();
+        },
+        switchMode: function() {
+            this.setMode(this.mode == MODE_CATALOG ? MODE_APP : MODE_CATALOG);
         },
+        populateExampleBlueprint: function() {
+            this.editor.setValue(this.mode==MODE_CATALOG ? _DEFAULT_CATALOG : _DEFAULT_BLUEPRINT);
+        },
+        
         onSubmissionComplete: function(succeeded, data, type) {
             var that = this;
             if(succeeded){

http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/d67739c8/src/main/webapp/assets/tpl/editor/page.html
----------------------------------------------------------------------
diff --git a/src/main/webapp/assets/tpl/editor/page.html b/src/main/webapp/assets/tpl/editor/page.html
index 727b4d4..fb4410b 100644
--- a/src/main/webapp/assets/tpl/editor/page.html
+++ b/src/main/webapp/assets/tpl/editor/page.html
@@ -22,9 +22,13 @@ under the License.
             <div class="navbar_top">
                 <h3 style="margin-top: 6px;">Blueprint Composer</h3>
                 <div class="apps-tree-toolbar" style="margin-top: -24px !important;">
-                    <!-- will be renamed -->
-                    <button id="button-run" class="btn btn-success btn-sm">Run</button>
+                    <!-- text will be changed by JS -->
+                    <button id="button-convert" class="btn btn-sm">Convert</button>
+                    <button id="button-switch" class="btn btn-sm">Switch</button>
+                    <button id="button-example" class="btn btn-sm">Insert Example</button>
                     <button id="button-delete" class="btn btn-danger btn-sm">Clear</button>
+                    
+                    <button id="button-run" class="btn btn-success btn-sm" style="margin-left: 36px;">Run</button>
                 </div>
             </div>
             <div class="navbar_main_wrapper">