Skip to content

Commit

Permalink
use a more flexible way to configure the forms plugin for <select> wi…
Browse files Browse the repository at this point in the history 
…dgets, updated the docs and changed the child container parent widget to a combo box
  • Loading branch information
@jstrachan
jstrachan committed Oct 2, 2013
1 parent deb6069 commit d8d8078
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 27 deletions.
47 changes: 29 additions & 18 deletions hawtio-web/src/main/webapp/app/fabric/js/createContainer.ts
View file
Expand Up @@ -52,8 +52,22 @@ module Fabric {
$scope.selectedVersionId = '';
$scope.profileIdFilter = '';

$scope.openShiftDomains = [];
$scope.openShiftGearProfiles = [];
// referenced static data for child
$scope.child = {
rootContainers: []
};


// referenced static data for openshift
$scope.openShift = {
params: null,
domains: [],
gearProfiles: []
};

// referenced static data for jclouds
$scope.jclouds = {
};

// holds all the form objects from nested child scopes
$scope.forms = {};
Expand Down Expand Up @@ -92,10 +106,11 @@ module Fabric {

Forms.defaultValues($scope.entity, $scope.schema);

if ($scope.selectedProvider.id === 'child' && !$scope.entity["parent"]) {
// lets default a parent container if we have a single root container
var rootContainers = $scope.rootContainers();
if (rootContainers && rootContainers.length === 1) {
if ($scope.selectedProvider.id === 'child') {
// load the root containers and default the parent if its not set
var rootContainers = Fabric.getRootContainers(jolokia);
$scope.child.rootContainers = rootContainers;
if (rootContainers && rootContainers.length === 1 && !$scope.entity["parent"]) {
$scope.entity["parent"] = rootContainers[0];
}
}
Expand Down Expand Up @@ -155,16 +170,18 @@ module Fabric {
var password = Core.pathGet($scope.entity, ["password"]);

var params = [serverUrl, login, password];
if (!Object.equal(params, $scope.openShiftParams)) {
$scope.openShiftParams = params;
if (!Object.equal(params, $scope.openShift.params)) {
$scope.openShift.params = params;

Fabric.getOpenShiftDomains(workspace, jolokia, serverUrl, login, password, (results) => {
$scope.openShiftDomains = results;
console.log("found openshift domains: " + $scope.openShiftDomains);
$scope.openShift.domains = results;
console.log("found openshift domains: " + $scope.openShift.domains);
Core.$apply($scope);
});
Fabric.getOpenShiftGearProfiles(workspace, jolokia, serverUrl, login, password, (results) => {
$scope.openShiftGearProfiles = results;
console.log("found openshift gears: " + $scope.openShiftGearProfiles);
$scope.openShift.gearProfiles = results;
console.log("found openshift gears: " + $scope.openShift.gearProfiles);
Core.$apply($scope);
});
}
}
Expand All @@ -173,12 +190,6 @@ module Fabric {
$scope.$watch('entity.login', updateOpenShift);
$scope.$watch('entity.password', updateOpenShift);

$scope.openShiftDomains = () => {
};

$scope.openShiftGearProfiles = () => {
};

$scope.init = () => {

var tab = $location.search()['tab'];
Expand Down
10 changes: 6 additions & 4 deletions hawtio-web/src/main/webapp/app/fabric/js/schemaConfigure.ts
View file
Expand Up @@ -41,8 +41,8 @@ module Fabric {

Core.pathSet(schema.properties, ['parent', 'label'], 'Parent Container');
Core.pathSet(schema.properties, ['parent', 'tooltip'], 'The name of the parent container used to create the child container');
Core.pathSet(schema.properties, ['parent', 'input-attributes', 'typeahead'], "title for title in rootContainers() | filter:$viewValue");
Core.pathSet(schema.properties, ['parent', 'input-attributes', 'typeahead-editable'], "false");
Core.pathSet(schema.properties, ['parent', 'input-element'], "select");
Core.pathSet(schema.properties, ['parent', 'input-attributes', "ng-options"], "c for c in child.rootContainers");

bulkSet(schema, ["jmxUser", "jmxPassword", "parent"], 'required', true);
schema['tabs'] = {
Expand Down Expand Up @@ -100,10 +100,12 @@ module Fabric {

Core.pathSet(schema.properties, ['domain', 'label'], 'OpenShift Domain');
Core.pathSet(schema.properties, ['domain', 'tooltip'], 'What is your unique domain name used for applications you create on OpenShift. Often this is your own user name or group name');
Core.pathSet(schema.properties, ['domain', 'enumModel'], "openShiftDomains");
Core.pathSet(schema.properties, ['domain', 'input-element'], "select");
Core.pathSet(schema.properties, ['domain', 'input-attributes', "ng-options"], "c for c in openShift.domains");

Core.pathSet(schema.properties, ['gearProfile', 'tooltip'], 'Which kind of gear to create');
Core.pathSet(schema.properties, ['gearProfile', 'enumModel'], "openShiftGearProfiles");
Core.pathSet(schema.properties, ['gearProfile', 'input-element'], "select");
Core.pathSet(schema.properties, ['gearProfile', 'input-attributes', "ng-options"], "c for c in openShift.gearProfiles");

Core.pathSet(schema.properties, ['number', 'tooltip'], 'The number of containers to create');

Expand Down
24 changes: 22 additions & 2 deletions hawtio-web/src/main/webapp/app/forms/doc/developer.md
View file
Expand Up @@ -54,9 +54,9 @@ If you wish to specify a custom label for a property (as by default it will just

The **label** and **tooltip** properties are not part of JSON Schema; but an extension like the **tabs** property above.

## Adding custom directive attributes to the control
## Customising the element or attributes of the control

There are various extra directives you can add to <input> controls like ng-hide and so forth which you can do using a nested **input-attributes** object.
There are various extra directives you can add to &lt;input&gt; controls like [ng-hide](http://docs.angularjs.org/api/ng.directive:ngHide), [typeahead](http://angular-ui.github.io/bootstrap/#/typeahead) and so forth which you can do using a nested **input-attributes** object.

properties: {
foo: {
Expand All @@ -70,8 +70,28 @@ There are various extra directives you can add to <input> controls like ng-hide

The above would use the typehead directive to present a pick list of possible values; passing the current text field value so we can more efficiently filter results back from any remote method invocation.

To define a custom [select widget](http://docs.angularjs.org/api/ng.directive:select) you can use the **input-element** value to specify a different element name to 'input' such as 'select':

properties: {
foo: {
type: "string",

input-element: "select"
input-attributes: {
ng-options: "c.name for c in colors"
}
}
}

The above would generate HTML like this...

```
<select ng-options="c.name for c in colors" ng-model="..." title="..."></select>
```

### Ignoring prefix of deeply nested properties


If you use nested properties, the labels may include an unnecessary prefix if you use sub-tabs to show related nested properties.

To avoid this add a flag called **ignorePrefixInLabel** to the type which contains the **properties** you wish to ignore the prefixes of.
Expand Down
9 changes: 6 additions & 3 deletions hawtio-web/src/main/webapp/app/forms/js/mappingRegistry.ts
View file
Expand Up @@ -166,11 +166,14 @@ module Forms {
if (custom) {
return null;
}
var enumModelValues = Core.pathGet(property, ["enumModel"]);
var inputElement = Core.pathGet(property, ["input-element"]);
if (inputElement) {
return "<" + inputElement + "></" + inputElement + ">";
}
var enumValues = Core.pathGet(property, ["enum"]);
if (enumValues || enumModelValues) {
if (enumValues) {
var required = true;
var valuesScopeName = enumModelValues;
var valuesScopeName = null;
var attributes = "";
if (enumValues) {
// calculate from input attributes...
Expand Down

0 comments on commit d8d8078

Please sign in to comment.