You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by sj...@apache.org on 2014/08/19 12:30:42 UTC
[4/9] git commit: jsgui: Add new entities to catalogue
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 <sa...@cloudsoftcorp.com>
Authored: Tue Aug 12 15:13:14 2014 +0100
Committer: Sam Corbett <sa...@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>
+
+ <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'/>" +