'
+ ].join('')).appendTo(container);
+ view.createServiceInspector(service, {});
+ return view.getInspector(service.get('id'));
+ };
+
+ it('toggles exposure', function() {
+ inspector = setUpInspector();
+ assert.isFalse(service.get('exposed'));
+ assert.isFalse(exposeCalled);
+ assert.isFalse(unexposeCalled);
+ var expose = container.one('.toggle-expose');
+ expose.simulate('click');
+ assert.isTrue(service.get('exposed'));
+ assert.isTrue(exposeCalled);
+ assert.isFalse(unexposeCalled);
+
+ expose.simulate('click');
+ assert.isTrue(unexposeCalled);
+ assert.isFalse(service.get('exposed'));
+ });
+
+});
Index: app/templates/service-configuration.handlebars
=== modified file 'app/templates/service-configuration.handlebars'
--- app/templates/service-configuration.handlebars 2013-07-03 17:35:21 +0000
+++ app/templates/service-configuration.handlebars 2013-07-05 20:43:08 +0000
@@ -1,4 +1,15 @@
+
Expose
+
+
+ Expose this service?
+
+
+
+
Yes
+
+
+
Service Settings
Index: app/views/environment.js
=== modified file 'app/views/environment.js'
--- app/views/environment.js 2013-07-03 17:35:21 +0000
+++ app/views/environment.js 2013-07-05 20:43:08 +0000
@@ -119,13 +119,11 @@
}
// If the user is trying to open the same inspector twice
- if (this.getInspector(model.get('id'))) {
+ var serviceInspector = this.getInspector(model.get('id'));
+ if (serviceInspector) {
return;
}
- var serviceInspector = this.getInspector(model.get('id'));
- if (serviceInspector) { return serviceInspector; }
-
var combinedConfig = {};
var configs = this._generateConfigs(model);
@@ -169,6 +167,7 @@
var configs = {
configBase: {
db: this.topo.get('db'),
+ env: this.topo.get('env'),
events: {
'.close': {'click': 'destroy'}
}
@@ -181,12 +180,12 @@
template: Y.juju.views.Templates['view-container'],
viewletEvents: {
'.toggle-settings-help': { click: 'toggleSettingsHelp' },
+ '.toggle-expose': { click: 'toggleExpose' },
'.config-file .fakebutton': { click: 'handleFileClick'},
'.config-file input[type=file]': { change: 'handleFileChange'}
}
},
configGhost: {
- env: this.topo.get('env'),
// controller will show the first one in this array by default
viewletList: ['ghostConfig'],
// the view container template
Index: app/views/service.js
=== modified file 'app/views/service.js'
--- app/views/service.js 2013-07-03 17:35:21 +0000
+++ app/views/service.js 2013-07-05 20:43:08 +0000
@@ -268,8 +268,10 @@
* @return {undefined} Nothing.
*/
unexposeService: function() {
- var service = this.get('model'),
- env = this.get('env');
+ var svcInspector = window.flags && window.flags.serviceInspector;
+ var dataSource = svcInspector ? this.inspector : this;
+ var service = dataSource.get('model'),
+ env = dataSource.get('env');
env.unexpose(service.get('id'),
Y.bind(this._unexposeServiceCallback, this));
},
@@ -313,8 +315,10 @@
* @return {undefined} Nothing.
*/
exposeService: function() {
- var service = this.get('model'),
- env = this.get('env');
+ var svcInspector = window.flags && window.flags.serviceInspector;
+ var dataSource = svcInspector ? this.inspector : this;
+ var service = dataSource.get('model'),
+ env = dataSource.get('env');
env.expose(service.get('id'),
Y.bind(this._exposeServiceCallback, this));
},
@@ -1072,6 +1076,27 @@
},
/**
+ Handles exposing the service.
+
+ @method toggleExpose
+ @param {Y.EventFacade} e An event object.
+ @return {undefined} Nothing.
+ */
+ toggleExpose: function(e) {
+ var service = this.inspector.get('model');
+ var env = this.inspector.get('db').environment;
+ var exposed;
+ if (service.get('exposed')) {
+ this.unexposeService();
+ exposed = false;
+ } else {
+ this.exposeService();
+ exposed = true;
+ }
+ service.set('exposed', exposed);
+ },
+
+ /**
Handles the click on the file input and dispatches to the proper function
depending if a file has been previously loaded or not.
@@ -1214,7 +1239,6 @@
config: {
name: 'config',
template: Templates['service-configuration'],
-
'render': function(service, viewContainerAttrs) {
var settings = [];
var db = viewContainerAttrs.db;
@@ -1230,13 +1254,35 @@
});
this.container = Y.Node.create(this.templateWrapper);
this.container.setHTML(
- this.template({service: service, settings: settings}));
+ this.template({
+ service: service,
+ settings: settings,
+ exposed: service.get('exposed')}));
this.container.all('textarea.config-field')
.plug(plugins.ResizingTextarea,
{ max_height: 200,
min_height: 18,
single_line: 18});
},
+ bindings: {
+ exposed: {
+ 'update': function(node, value) {
+ var img = node.one('img');
+ var span = node.one('span');
+ if (value) {
+ img.set('src', '/juju-ui/assets/images/slider_on.png');
+ span.set('text', 'Yes');
+ span.removeClass('off');
+ span.addClass('on');
+ } else {
+ img.set('src', '/juju-ui/assets/images/slider_off.png');
+ span.set('text', 'No');
+ span.removeClass('on');
+ span.addClass('off');
+ }
+ }
+ }
+ },
'conflict': function(node, model, viewletName, resolve) {
/**
Calls the databinding resolve method
@@ -1322,9 +1368,10 @@
// Merge the various prototype objects together.
var c = Y.juju.controller;
- [c.ghostInspector, c.serviceInspector].forEach(function(controller) {
- controllerPrototype = Y.mix(controllerPrototype, controller);
- });
+ [c.ghostInspector, c.serviceInspector, exposeButtonMixin]
+ .forEach(function(controller) {
+ controllerPrototype = Y.mix(controllerPrototype, controller);
+ });
// Bind the viewletEvents to this class.
Y.Object.each(options.viewletEvents, function(
Index: lib/views/juju-inspector.less
=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less 2013-07-03 17:35:21 +0000
+++ lib/views/juju-inspector.less 2013-07-05 12:27:38 +0000
@@ -36,10 +36,36 @@
overflow: auto;
padding: 15px;
+ h2 {
+ font-size: 18px;
+ padding-left: 0;
+ }
+
.toggle-settings-help {
cursor: pointer;
}
+ .toggle-expose {
+ cursor: pointer;
+ padding-bottom: 15px;
+
+ img {
+ position: relative;
+ margin-left: 70px;
+ }
+ .on {
+ font-size: 12px;
+ position: absolute;
+ right: 40px;
+ }
+ .off {
+ font-size: 12px;
+ color: black;
+ position: absolute;
+ right: 60px;
+ }
+ }
+
.settings-wrapper {
position: relative;