Repository: brooklyn-ui Updated Branches: refs/heads/master c2e374eb8 -> b9ba6544d
tweak buttons for composer, following @tbouron and @hellberg suggestions also adjust height w custom codemirror styling Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/4cd4fead Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/4cd4fead Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/4cd4fead Branch: refs/heads/master Commit: 4cd4fead9ee387768e9e6a017a351eaef094d135 Parents: d67739c Author: Alex Heneveld <alex.henev...@cloudsoftcorp.com> Authored: Thu Feb 11 17:35:41 2016 +0000 Committer: Alex Heneveld <alex.henev...@cloudsoftcorp.com> Committed: Thu Feb 11 17:44:11 2016 +0000 ---------------------------------------------------------------------- .../webapp/assets/css/codemirror-brooklyn.css | 29 ++++++++ src/main/webapp/assets/js/view/editor.js | 78 ++++++++++++-------- src/main/webapp/assets/tpl/editor/page.html | 36 +++++++-- src/main/webapp/index.html | 1 + 4 files changed, 108 insertions(+), 36 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/4cd4fead/src/main/webapp/assets/css/codemirror-brooklyn.css ---------------------------------------------------------------------- diff --git a/src/main/webapp/assets/css/codemirror-brooklyn.css b/src/main/webapp/assets/css/codemirror-brooklyn.css new file mode 100644 index 0000000..c293ed4 --- /dev/null +++ b/src/main/webapp/assets/css/codemirror-brooklyn.css @@ -0,0 +1,29 @@ +/* + * 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. +*/ + +/* overrides for brooklyn */ + +.CodeMirror { + height: auto; +} +.CodeMirror-scroll { + min-height: 480px; +} +.CodeMirror .CodeMirror-gutter.CodeMirror-linenumbers { +} http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/4cd4fead/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 1b4dce3..f9ce5b6 100644 --- a/src/main/webapp/assets/js/view/editor.js +++ b/src/main/webapp/assets/js/view/editor.js @@ -60,8 +60,8 @@ define([ events: { 'click #button-run':'runBlueprint', 'click #button-delete':'removeBlueprint', - 'click #button-convert':'convertBlueprint', - 'click #button-switch':'switchMode', + 'click #button-switch-app':'switchModeApp', + 'click #button-switch-catalog':'switchModeCatalog', 'click #button-example':'populateExampleBlueprint', }, editorTemplate:_.template(EditorHtml), @@ -99,36 +99,39 @@ 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"); + if (this.mode==MODE_CATALOG) { + $("#button-switch-catalog", this.$el).addClass('active') + $("#button-switch-app", this.$el).removeClass('active') + } else { + $("#button-switch-app", this.$el).addClass('active') + $("#button-switch-catalog", this.$el).removeClass('active') + } this.refreshOnMinorChange(); }, 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(); + // fine to switch to catalog + /* always enable the switch to app button -- worst case it's invalid + if (this.mode==MODE_CATALOG && yaml && (parse.problem || parse.result['brooklyn.catalog']) { + $("#button-switch-app", this.$el).attr('disabled', 'disabled'); } else { - $("#button-convert", this.$el).html("Convert to Catalog Item"); - $("#button-convert", this.$el).show(); + $("#button-switch-app", this.$el).attr('disabled', false); } + */ 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-delete", this.$el).attr('disabled','disabled'); + // example only shown when empty $("#button-example", this.$el).show(); - $("#button-switch", this.$el).show(); } else { - $("#button-run", this.$el).attr('disabled','false'); + $("#button-run", this.$el).attr('disabled',false); // we have yaml - $("#button-run", this.$el).show(); - $("#button-delete", this.$el).show(); + $("#button-delete", this.$el).attr('disabled',false); $("#button-example", this.$el).hide(); - $("#button-switch", this.$el).hide(); } }, initializeEditor: function() { @@ -167,6 +170,7 @@ define([ if (this.editor == null) { this.editor = CodeMirror.fromTextArea(this.$("#yaml_code")[0], { lineNumbers: true, + viewportMargin: Infinity, /* recommended if height auto */ extraKeys: {"Ctrl-Space": "autocomplete"}, mode: { name: "yaml", @@ -205,28 +209,33 @@ define([ var yaml = this.editor.getValue(); try{ var parsed = this.parse(true); + console.log('parse', parsed); if (parsed.problem) throw parsed.problem; + if (this.mode!=MODE_CATALOG && parsed.result['brooklyn.catalog'] && + !parsed.result['services']) { + console.log("This document is using brooklyn.catalog syntax but you are attempting to deploy it."); + throw "This document is using brooklyn.catalog syntax but you are attempting to deploy it."; + } return true; }catch (e){ - this.showFailure(e.message); + this.showFailure(e.message || e); return false; } }, - convertBlueprint: function() { - if (this.mode === MODE_CATALOG) { - // not yet supported - } else { + convertBlueprintToCatalog: function() { + if (this.mode === MODE_APP && this.lastParse && !this.lastParse.problems && this.lastParse.result && this.lastParse.result['services']) { + // convert to catalog syntax if it has services at the root 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'); + " 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 6 spaces: + this.editor.getValue().replace(/^(.*$)/gm,' $1'); this.mode = MODE_CATALOG; this.editor.setValue(newBlueprint); this.refresh(); @@ -247,6 +256,15 @@ define([ switchMode: function() { this.setMode(this.mode == MODE_CATALOG ? MODE_APP : MODE_CATALOG); }, + switchModeApp: function() { this.setMode(MODE_APP); }, + switchModeCatalog: function() { + var plan = this.parse().result; + if (plan && plan.services) { + this.convertBlueprintToCatalog(); + } else { + this.setMode(MODE_CATALOG); + } + }, populateExampleBlueprint: function() { this.editor.setValue(this.mode==MODE_CATALOG ? _DEFAULT_CATALOG : _DEFAULT_BLUEPRINT); }, http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/4cd4fead/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 fb4410b..67bb09c 100644 --- a/src/main/webapp/assets/tpl/editor/page.html +++ b/src/main/webapp/assets/tpl/editor/page.html @@ -21,14 +21,26 @@ under the License. <div class="span12 composer" id="composer"> <div class="navbar_top"> <h3 style="margin-top: 6px;">Blueprint Composer</h3> - <div class="apps-tree-toolbar" style="margin-top: -24px !important;"> - <!-- 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> + <div class="apps-tree-toolbar btn-toolbar" style="margin-top: -24px !important;"> + <span class="btn-group"> + <button id="button-example" class="btn btn-sm" style="margin-right: 12px;">Insert Example</button> + </span> + + <!-- no need for this + <span class="btn-group"> <button id="button-delete" class="btn btn-danger btn-sm">Clear</button> + </span> + --> - <button id="button-run" class="btn btn-success btn-sm" style="margin-left: 36px;">Run</button> + <span class="btn-group" role="group"> + <button id="button-switch-app" class="btn btn-sm">Application</button> + <button id="button-switch-catalog" class="btn btn-sm">Catalog</button> + </span> + + <!-- text will be changed by JS --> + <span class="btn-group" style="width: 12em;"> + <button id="button-run" class="btn btn-success btn-sm" style="margin-left: 24px; float: right;">Go</button> + </span> </div> </div> <div class="navbar_main_wrapper"> @@ -45,6 +57,18 @@ under the License. </div> </div> </div> + <div class="navbar_main_wrapper" style="background-color: #f0f0f0 !important;"> + <div class="apps-tree-toolbar btn-toolbar" style="margin: 9px 12px 6px 12px !important; float: none;"> + <span class="btn-group" style="float: left;"> + <button id="button-delete" class="btn btn-danger btn-sm">Clear</button> + </span> + + <!-- text will be changed by JS --> + <span class="btn-group" style="width: 12em;"> + <button id="button-run" class="btn btn-success btn-sm" style="margin-left: 24px; float: right;">Go</button> + </span> + </div> + </div> </div> </div> </div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/4cd4fead/src/main/webapp/index.html ---------------------------------------------------------------------- diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html index 40ffd04..3570ca9 100644 --- a/src/main/webapp/index.html +++ b/src/main/webapp/index.html @@ -27,6 +27,7 @@ <title>Brooklyn JS REST client</title> <link rel="stylesheet" href="/assets/css/codemirror.css"> + <link rel="stylesheet" href="/assets/css/codemirror-brooklyn.css"> <link rel="stylesheet" href="/assets/css/show-hint.css"> <link rel="stylesheet" href="/assets/css/styles.css"> <link rel="stylesheet" href="/assets/css/brooklyn.css">
![http://www.apache.org/foundation/press/kit/poweredBy/Apache_PoweredBy.png\n"+](http://www.apache.org/foundation/press/kit/poweredBy/Apache_PoweredBy.png\n"+){kind=link}