brooklyn-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From sjcorb...@apache.org
Subject [4/9] git commit: jsgui: Add new entities to catalogue
Date Tue, 19 Aug 2014 10:30:42 GMT
jsgui: Add new entities to catalogue


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

Branch: refs/heads/master
Commit: ee59971bc50903e7fdc690f8e3f77f44d6451773
Parents: 002f70f
Author: Sam Corbett <sam.corbett@cloudsoftcorp.com>
Authored: Tue Aug 12 15:13:14 2014 +0100
Committer: Sam Corbett <sam.corbett@cloudsoftcorp.com>
Committed: Wed Aug 13 17:23:17 2014 +0100

----------------------------------------------------------------------
 usage/jsgui/src/main/webapp/assets/css/base.css |   7 +
 usage/jsgui/src/main/webapp/assets/js/router.js |   2 +-
 .../src/main/webapp/assets/js/view/catalog.js   | 133 +++++++++++++++++--
 .../webapp/assets/js/view/effector-invoke.js    |   2 +-
 .../assets/tpl/catalog/add-catalog-entry.html   |  33 +++++
 .../webapp/assets/tpl/catalog/add-entity.html   |  30 +++++
 .../main/webapp/assets/tpl/catalog/page.html    |  48 +------
 .../javascript/specs/brooklyn-utils-spec.js     |   1 -
 8 files changed, 195 insertions(+), 61 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/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 c4d74df..8c50bf8 100644
--- a/usage/jsgui/src/main/webapp/assets/css/base.css
+++ b/usage/jsgui/src/main/webapp/assets/css/base.css
@@ -1134,6 +1134,13 @@ tr.app-add-wizard-config-entry {
     padding-bottom: 180px;
     text-align: center;
 }
+.catalog-save-error {
+    background-color: #f2dede;
+    /* margin matches bootstrap input margin-bottom. */
+    margin: 9px 0 0 0;
+    padding: 7px;
+    border-radius: 3px;
+}
 
 .float-right {
     float: right;

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/js/router.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/router.js b/usage/jsgui/src/main/webapp/assets/js/router.js
index 9ef8053..c52c220 100644
--- a/usage/jsgui/src/main/webapp/assets/js/router.js
+++ b/usage/jsgui/src/main/webapp/assets/js/router.js
@@ -109,7 +109,7 @@ define([
             'v1/applications/*trail':'applicationsPage',
             'v1/applications':'applicationsPage',
             'v1/locations':'catalogPage',
-            'v1/catalog/:kind/:id':'catalogPage',
+            'v1/catalog/:kind(/:id)':'catalogPage',
             'v1/catalog':'catalogPage',
             'v1/apidoc':'apidocPage',
             'v1/script/groovy':'scriptGroovyPage',

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/js/view/catalog.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/catalog.js b/usage/jsgui/src/main/webapp/assets/js/view/catalog.js
index db927b9..4c38b5a 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/catalog.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/catalog.js
@@ -17,18 +17,21 @@
  * under the License.
 */
 define([
-    "underscore", "jquery", "backbone", "formatJson",
+    "underscore", "jquery", "backbone", "formatJson", "brooklyn",
     "model/location", "model/entity",
-    "view/catalog-add-location-modal",
     "text!tpl/catalog/page.html",
     "text!tpl/catalog/details-entity.html",
     "text!tpl/catalog/details-generic.html",
-    "text!tpl/catalog/nav-entry.html",
     "text!tpl/catalog/details-location.html",
+    "text!tpl/catalog/add-catalog-entry.html",
+    "text!tpl/catalog/add-entity.html",
+    "text!tpl/catalog/nav-entry.html",
 
     "bootstrap", "jquery-form"
-], function(_, $, Backbone, FormatJSON, Location, Entity, AddLocationModalView,
-        CatalogPageHtml, DetailsEntityHtml, DetailsGenericHtml, EntryHtml, LocationDetailsHtml)
{
+], function(_, $, Backbone, FormatJSON, Brooklyn,
+        Location, Entity,
+        CatalogPageHtml, DetailsEntityHtml, DetailsGenericHtml, LocationDetailsHtml,
+        AddCatalogEntryHtml, AddEntityHtml, EntryHtml) {
 
     // Holds the currently active details type, e.g. applications, policies. Bit of a workaround
     // to share the active view with all instances of AccordionItemView, so clicking the
'reload
@@ -116,6 +119,89 @@ define([
         }
     });
 
+    var AddCatalogEntryView = Backbone.View.extend({
+        template: _.template(AddCatalogEntryHtml),
+        events: {
+            "click .show-context": "showContext"
+        },
+        initialize: function() {
+            _.bindAll(this);
+        },
+        render: function (initialView) {
+            this.$el.html(this.template());
+            if (initialView) {
+                this.$("[data-context='"+initialView+"']").addClass("active");
+                this.showFormForType(initialView)
+            }
+            return this;
+        },
+        beforeClose: function () {
+            if (this.contextView) {
+                this.contextView.close();
+            }
+        },
+        showContext: function(event) {
+            var $event = $(event.currentTarget);
+            var context = $event.data("context");
+            if (this.context !== context) {
+                if (this.contextView) {
+                    this.contextView.close();
+                }
+                this.showFormForType(context)
+            }
+        },
+        showFormForType: function (type) {
+            this.context = type;
+            if (type == "entity") {
+                this.contextView = newEntityForm(this.options.parent);
+            } else if (type !== undefined) {
+                console.log("unknown catalog type " + type);
+                this.showFormForType("entity");
+                return;
+            }
+            Backbone.history.navigate("/v1/catalog/new/" + type);
+            this.$("#catalog-add-form").html(this.contextView.$el);
+        }
+    });
+
+    function newEntityForm(parent) {
+        return new Brooklyn.view.Form({
+            template: AddEntityHtml,
+            onSubmit: function (model) {
+                console.log("Submit entity", model.get("yaml"));
+                var submitButton = this.$(".catalog-submit-button");
+                // "loading" is an indicator to Bootstrap, not a string to display
+                submitButton.button("loading");
+                var self = this;
+                var options = {
+                    url: "/v1/catalog/",
+                    data: model.get("yaml"),
+                    processData: false,
+                    type: "post"
+                };
+                $.ajax(options)
+                    .done(function (data, status, xhr) {
+                        // Can extract location of new item with:
+                        //model.url = Brooklyn.util.pathOf(xhr.getResponseHeader("Location"));
+                        parent.loadAccordionItem("entities", data.id);
+                    })
+                    .fail(function (xhr, status, error) {
+                        var message;
+                        try {
+                            message = JSON.parse(xhr.responseText).message;
+                        } catch (e) {
+                            message = "Error adding catalog item: " + error;
+                        }
+                        submitButton.button("reset");
+                        self.$(".catalog-save-error")
+                            .removeClass("hide")
+                            .find(".catalog-error-message")
+                            .html(message);
+                    });
+            }
+        });
+    }
+
     var Catalog = Backbone.Collection.extend({
         initialize: function(models, options) {
             this.name = options["name"];
@@ -225,6 +311,14 @@ define([
             } else {
                 body.slideUp('fast')
             }
+        },
+
+        show: function() {
+            var body = this.$(".accordion-body");
+            var hidden = this.hidden = body.css("display") == "none";
+            if (hidden) {
+                body.removeClass("hide").slideDown('fast');
+            }
         }
     });
 
@@ -236,11 +330,7 @@ define([
 
         events: {
             'click .refresh':'refresh',
-            'click #add-new-thing':'createNewThing',
-            'click #add-new-entity':'addNewCatalogResource',
-            'click #new-entity-submit':'newEntitySubmit',
-            'click #add-new-location':'addLocation',
-            'click .delete-location':'deleteLocation'
+            'click #add-new-thing': 'createNewThing'
         },
 
         initialize: function() {
@@ -292,7 +382,9 @@ define([
             _.each(this.accordion, function(child) {
                 parent.append(child.render().$el);
             });
-            if (this.options.kind && this.options.id) {
+            if (this.options.kind === "new") {
+                this.createNewThing(this.options.id);
+            } else if (this.options.kind && this.options.id) {
                 this.loadAccordionItem(this.options.kind, this.options.id)
             } else {
                 // Show empty details view to start
@@ -306,7 +398,22 @@ define([
             _.invoke(this.accordion, 'refresh');
         },
 
-        createNewThing: function(event) {
+        createNewThing: function (type) {
+            // Discard if it's the jquery event object.
+            if (!_.isString(type)) {
+                type = undefined;
+            }
+            var viewName = "createNewThing";
+            if (!type) {
+                Backbone.history.navigate("/v1/catalog/new");
+            }
+            activeDetailsView = viewName;
+            this.$(".accordion-nav-row").removeClass("active");
+            var newView = new AddCatalogEntryView({
+                parent: this
+            }).render(type);
+            this.setDetailsView(newView);
+        },
 
         loadAccordionItem: function (kind, id) {
             if (!this.accordion[kind]) {
@@ -322,6 +429,7 @@ define([
                             activeDetailsView = kind;
                             accordion.activeCid = model.cid;
                             accordion.options.onItemSelected(model);
+                            accordion.show();
                         }
                     });
             }
@@ -353,7 +461,6 @@ define([
             }
             this.detailsView = view;
         }
-        
     });
     
     return CatalogResourceView

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/js/view/effector-invoke.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/js/view/effector-invoke.js b/usage/jsgui/src/main/webapp/assets/js/view/effector-invoke.js
index af25019..bf93cc7 100644
--- a/usage/jsgui/src/main/webapp/assets/js/view/effector-invoke.js
+++ b/usage/jsgui/src/main/webapp/assets/js/view/effector-invoke.js
@@ -63,7 +63,7 @@ define([
             this.$el.html(this.template({
                 name:this.model.get("name"),
                 entityName:this.options.entity.get("name"),
-                description:this.model.get("description")?this.model.get("description"):"",
+                description:this.model.get("description")?this.model.get("description"):""
             }))
             // do we have parameters to render?
             if (params.length !== 0) {

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-catalog-entry.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-catalog-entry.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-catalog-entry.html
new file mode 100644
index 0000000..16fb9ee
--- /dev/null
+++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-catalog-entry.html
@@ -0,0 +1,33 @@
+<!--
+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.
+-->
+<div class="catalog-details">
+
+    <h2>Add a new...</h2>
+    <br/>
+
+    <div data-toggle="buttons-radio">
+        <button class="btn btn-large show-context" data-context="entity">Entity</button>
+    </div>
+
+    <hr/>
+
+    <div id="catalog-add-form">
+        <div class="context">Select the type you wish to add</div>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-entity.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-entity.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-entity.html
new file mode 100644
index 0000000..9c64e90
--- /dev/null
+++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/add-entity.html
@@ -0,0 +1,30 @@
+<!--
+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.
+-->
+<form>
+    <label for="new-blueprint">Enter blueprint:</label>
+    <textarea id='new-blueprint' name='yaml' rows='5' cols='15'></textarea>
+
+    <button class='catalog-submit-button btn' data-loading-text='Saving...'>Submit</button>
+    <p class="catalog-save-error hide">
+        <span class="alert-error">
+            <strong>Error:</strong><br/>
+            <span class="catalog-error-message"></span>
+        </span>
+    </p>
+</form>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html
index 2c6a156..dc1b102 100644
--- a/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html
+++ b/usage/jsgui/src/main/webapp/assets/tpl/catalog/page.html
@@ -16,16 +16,15 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
-
-<!-- Catalog page template -->
 <div id="catalog-resource">
     <div class="row row-fluid">
         <div class="span4" id="accord">
             <div class="navbar_top">
                 <h3>Catalog</h3>
-
                 <div class="apps-tree-toolbar">
-                    <i class="icon-br-refresh refresh handy"/>
+                    <i id="add-new-thing" class="icon-br-plus-sign handy"></i>
+                    &nbsp;
+                    <i class="icon-br-refresh refresh handy"></i>
                 </div>
             </div>
             <div class="navbar_main_wrapper">
@@ -36,44 +35,3 @@ under the License.
         <div class="span8" id="details"></div>
     </div>
 </div>
-
-<div class="modal hide fade" id="new-entity-modal">
-    <form class="form-vertical" id="new-entity-form">
-
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal">x</button>
-            <h3>Upload Catalog Resource</h3>
-        </div>
-
-        <div class="modal-body">
-
-            <fieldset>
-                <div class="row">
-                    <div class="span5">
-
-                        <label for="groovy-code" class="control-label">Select the source
code file for the template/entity/policy you wish to upload.</label>
-                        <br/>
-                        <div class="control-group">
-                            <div class="controls">
-                                <input id="groovy-code" name="groovyCode" type="file"
class="input-large">
-                            </div>
-                        </div>
-                        <br/>
-                    </div>
-                </div>
-            </fieldset>
-            <div id="info-box">
-                <p><span class="label label-info">Note:</span> This window
will close automatically when file is
-                    uploaded</p>
-            </div>
-        </div>
-
-        <div class="modal-footer form-actions">
-            <button class="btn" data-dismiss="modal" type="button">Close</button>
-            <button id="new-entity-submit" class="btn btn-primary" type="button">Save</button>
-        </div>
-
-    </form>
-</div>
-
-<div class="modal hide fade" id="new-location-modal"></div>

http://git-wip-us.apache.org/repos/asf/incubator-brooklyn/blob/ee59971b/usage/jsgui/src/test/javascript/specs/brooklyn-utils-spec.js
----------------------------------------------------------------------
diff --git a/usage/jsgui/src/test/javascript/specs/brooklyn-utils-spec.js b/usage/jsgui/src/test/javascript/specs/brooklyn-utils-spec.js
index 2c4012e..ab9566d 100644
--- a/usage/jsgui/src/test/javascript/specs/brooklyn-utils-spec.js
+++ b/usage/jsgui/src/test/javascript/specs/brooklyn-utils-spec.js
@@ -104,7 +104,6 @@ define([
             urlRoot: function () {
                 return "/foo/bar/";
             }
-
         });
         var form = $("<form>" +
             "<input name='id' type='input' value='text'/>" +


Mime
View raw message