You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by tb...@apache.org on 2018/11/06 15:21:16 UTC
[4/9] brooklyn-ui git commit: allow selection text and behaviour to
be customized in palette
allow selection text and behaviour to be customized in palette
when adding, clicking the icon adds it directly; but on palette clicking opens popup;
and popup button gets correct configurable message
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo
Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/e20a8d12
Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/e20a8d12
Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/e20a8d12
Branch: refs/heads/master
Commit: e20a8d12bffb05b7010fe824a8c57deec27a8e0f
Parents: feac3fc
Author: Alex Heneveld <al...@cloudsoftcorp.com>
Authored: Thu Nov 1 11:22:53 2018 +0000
Committer: Alex Heneveld <al...@cloudsoftcorp.com>
Committed: Thu Nov 1 12:16:33 2018 +0000
----------------------------------------------------------------------
.../catalog-selector.directive.js | 29 ++++++++++++++------
.../catalog-selector/catalog-selector.less | 8 ++++++
.../catalog-selector.template.html | 7 +++--
.../components/designer/designer.directive.js | 6 ++++
.../app/components/filters/entity.filter.js | 8 ++++--
.../app/views/main/graphical/edit/add/add.html | 2 +-
.../app/views/main/graphical/edit/add/add.js | 11 ++++++++
.../views/main/graphical/graphical.state.html | 4 +--
.../app/views/main/graphical/graphical.state.js | 28 +++++++++++--------
9 files changed, 74 insertions(+), 29 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
index 654526a..4ff04b8 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.directive.js
@@ -41,19 +41,20 @@ const PALETTE_VIEW_MODES = {
};
// fields in either bundle or type record:
-const FIELDS_TO_SEARCH = ['displayName', 'name', 'symbolicName', 'version', 'type', 'supertypes', 'containingBundle', 'description', 'displayTags', 'tags'];
+const FIELDS_TO_SEARCH = ['displayName', 'name', 'symbolicName', 'type', 'version', 'containingBundle', 'description', 'displayTags', 'tags', 'supertypes'];
export function catalogSelectorDirective() {
return {
restrict: 'E',
scope: {
family: '<',
- onSelect: '&',
- onSelectText: "@?",
- rowsPerPage: '<?', // if unset then fill
+ onSelect: '&', // action to do when item is selected
+ onSelectText: "&?", // function returning text to show in the "on select" button for an item
+ iconSelects: '<?', // boolean whether clicking the icon triggers selection directly or shows popup (false, default)
+ rowsPerPage: '<?', // optionally show fixed number of rows; unset (default and normal) computes based on available height
reservedKeys: '<?',
- state: '<?',
- mode: '@?', // for use by downstream projects to pass in special modes
+ state: '<?', // for shared state usage
+ mode: '@?', // for use by downstream projects to pass in special modes to do add'l processing / rendering
},
template: template,
controller: ['$scope', '$element', '$timeout', '$q', '$uibModal', '$log', '$templateCache', 'paletteApi', 'paletteDragAndDropService', 'iconGenerator', 'composerOverrides', 'recentlyUsedService', controller],
@@ -251,8 +252,10 @@ function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCa
$scope.popover = null;
}
}
- $scope.onClickItem = (item, $event) => {
- if ($scope.popoverModal && $scope.popover == item) {
+ $scope.onClickItem = (item, isInfoIcon, $event) => {
+ if (!isInfoIcon && $scope.iconSelects) {
+ $scope.onSelectItem(item);
+ } else if ($scope.popoverModal && $scope.popover == item) {
$scope.closePopover();
} else {
$scope.popover = item;
@@ -264,7 +267,12 @@ function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCa
$scope.popover = null;
$scope.popoverModal = false;
}
- $scope.onSelectItemToAdd = function (item) {
+ $scope.getOnSelectText = function (item) {
+ if (!($scope.onSelectText)) return "Select";
+ return $scope.onSelectText({item: item});
+ }
+ $scope.onSelectItem = function (item) {
+ $scope.closePopover();
if (angular.isFunction($scope.onSelect)) {
tryMarkUsed(item);
$scope.onSelect({item: item});
@@ -394,6 +402,9 @@ function controller($scope, $element, $timeout, $q, $uibModal, $log, $templateCa
}
}
+ // can be overridden to disable "open in catalog" button
+ $scope.allowOpenInCatalog = true;
+
// this can be overridden for palette sections/modes which show a subset of the types returned by the server;
// this is applied when the data is received from the server.
// it is used by catalogSelectorFiltersFilter;
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
index 2f8f174..05f5da2 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.less
@@ -291,6 +291,9 @@ catalog-selector {
margin-top: -3px;
margin-bottom: 12px;
padding: 0px 16px 6px 16px;
+ .closer {
+ margin-top: 6px;
+ }
}
.closer {
width: 10px;
@@ -311,6 +314,11 @@ catalog-selector {
line-height: 1;
margin-left: 12px;
}
+ .select-item-button {
+ flex: 0 1 auto;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
}
}
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
index 269e139..53efe76 100644
--- a/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
+++ b/ui-modules/blueprint-composer/app/components/catalog-selector/catalog-selector.template.html
@@ -101,7 +101,7 @@
this could be configurable ("compressed"=xs-2 w no labels, "normal"=xs-3, "big"=xs-4) -->
<div class="catalog-palette-item" ng-class="state.viewMode.classes"
ng-repeat="item in searchedItems = (items | catalogSelectorSearch:search | catalogSelectorFilters:this) | orderBy:state.currentOrderFields | limitTo:pagination.itemsPerPage:(pagination.page-1)*pagination.itemsPerPage track by (item.containingBundle + ':' + item.symbolicName + ':' + item.version)"
- ng-click="onClickItem(item, $event)">
+ ng-click="onClickItem(item, false, $event)">
<div class="item" draggable="true" ng-dragstart="onDragItem(item, $event)" ng-dragend="onDragEnd(item, $event)">
<div class="item-logo">
<img ng-src="{{item | iconGeneratorPipe:'symbolicName'}}" alt="{{item.displayName}} logo" on-error="onImageError" item-id="{{item.symbolicName}}"/>
@@ -111,6 +111,7 @@
</div>
<i class="fa fa-info-circle"
uib-popover-template="'QuickInfoTemplate.html'"
+ ng-click="onClickItem(item, true, $event)"
popover-is-open="popover == item"
popover-placement="right" popover-trigger="'none'"
popover-class="catalog-selector-popover" popover-append-to-body="true"
@@ -174,8 +175,8 @@
</div>
<div class="quick-info-buttons">
<div class="spacer"></div>
- <button class="btn btn-primary btn-outline" ng-click="onSelectItemToAdd(popover)">{{ onSelectText || "Select" }}</button>
- <a ng-if="popover.containingBundle" href="{{ getOpenCatalogLink(popover) }}" target="_blank"><button class="btn btn-info btn-outline">Open in catalog</button></a>
+ <button class="btn btn-primary btn-outline select-item-button" ng-click="onSelectItem(popover, false, $event)">{{ getOnSelectText(popover) }}</button>
+ <a ng-if="popover.containingBundle && allowOpenInCatalog" href="{{ getOpenCatalogLink(popover) }}" target="_blank"><button class="btn btn-info btn-outline">Open in catalog</button></a>
</div>
</div>
</script>
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
index 2f91745..e704928 100644
--- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
+++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
@@ -29,6 +29,9 @@ const TAG = 'DIRECTIVE :: DESIGNER :: ';
export function designerDirective($log, $state, $q, iconGenerator, catalogApi, blueprintService, brSnackbar, paletteDragAndDropService) {
let directive = {
restrict: 'E',
+ scope: {
+ onSelectionChange: '<?'
+ },
template: '',
link: link
};
@@ -109,13 +112,16 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b
break;
}
if (angular.isDefined(id)) {
+ $log.debug(TAG + 'Select canvas, selected node: ' + id);
$scope.selectedEntity = blueprintService.findAny(id);
+ if ($scope.onSelectionChange) $scope.onSelectionChange($scope.selectedEntity);
}
});
$element.bind('click-svg', (event)=> {
$log.debug(TAG + 'Select canvas, un-select node (if one selected before)');
$scope.selectedEntity = null;
+ if ($scope.onSelectionChange) $scope.onSelectionChange($scope.selectedEntity);
$scope.$apply(()=> {
redrawGraph();
$state.go('main.graphical');
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/components/filters/entity.filter.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/components/filters/entity.filter.js b/ui-modules/blueprint-composer/app/components/filters/entity.filter.js
index 2fa5c47..32a785b 100644
--- a/ui-modules/blueprint-composer/app/components/filters/entity.filter.js
+++ b/ui-modules/blueprint-composer/app/components/filters/entity.filter.js
@@ -16,11 +16,13 @@
* specific language governing permissions and limitations
* under the License.
*/
-const DEFAULT = '';
-
export function entityNameFilter() {
return function (input) {
- var result = input ? (input.displayName || input.name || input.symbolicName || input.type || DEFAULT) : DEFAULT;
+ var result = input ? (input.displayName || input.name || input.symbolicName || input.type || null) : null;
+ if (!result) {
+ if (input && !input.parent) result = 'Application';
+ else result = 'Unnamed entity';
+ }
if (result.match(/^[^\w]*deprecated[^\w]*/i)) {
result = result.replace(/^[^\w]*deprecated[^\w]*/i, '');
}
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html
index dfabeaf..24acefc 100644
--- a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html
+++ b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.html
@@ -45,7 +45,7 @@
<br-svg type="close" class="pull-right" ng-click="vm.selectedSection = undefined"></br-svg>
</h3>
</div>
- <catalog-selector state="paletteState" family="section.type" mode="{{ section.mode }}" on-select="vm.onTypeSelected(item)" class="palette-full-height-wrapper"></catalog-selector>
+ <catalog-selector state="paletteState" family="section.type" mode="{{ section.mode }}" on-select="vm.onTypeSelected(item)" on-select-text="vm.getOnSelectText(item)" icon-selects="true" class="palette-full-height-wrapper"></catalog-selector>
</div>
</div>
</div>
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js
index e409655..f1b92f9 100644
--- a/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js
+++ b/ui-modules/blueprint-composer/app/views/main/graphical/edit/add/add.js
@@ -88,6 +88,17 @@ export function GraphicalEditAddController($scope, $filter, $state, $stateParams
return label;
};
+
+ this.getOnSelectText = () => {
+ switch ($scope.family) {
+ case EntityFamily.ENTITY: return "Add as child";
+ case EntityFamily.SPEC: return "Set as spec";
+ case EntityFamily.POLICY: return "Add this policy";
+ case EntityFamily.ENRICHER: return "Add this enricher";
+ case EntityFamily.LOCATION: return "Add this location";
+ }
+ return "Select";
+ };
this.onTypeSelected = (type)=> {
switch ($scope.family) {
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html
index fd69c55..711d4c1 100644
--- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html
+++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.html
@@ -31,7 +31,7 @@
</div>
</div>
- <designer></designer>
+ <designer on-selection-change="vm.onCanvasSelection"></designer>
</div>
<div class="pane pane-palette" ng-if="vm.selectedSection">
@@ -44,7 +44,7 @@
<br-svg type="close" class="pull-right" ng-click="vm.selectedSection = undefined"></br-svg>
</h3>
</div>
- <catalog-selector state="paletteState" family="section.type" mode="{{ section.mode }}" on-select="vm.onTypeSelected(item)" class="palette-full-height-wrapper"></catalog-selector>
+ <catalog-selector state="paletteState" family="section.type" mode="{{ section.mode }}" on-select="vm.addSelectedTypeToTargetEntity(item)" on-select-text="vm.getOnSelectText()" class="palette-full-height-wrapper"></catalog-selector>
</div>
</div>
http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/e20a8d12/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js
----------------------------------------------------------------------
diff --git a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js
index 4f053cc..ffb9616 100644
--- a/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js
+++ b/ui-modules/blueprint-composer/app/views/main/graphical/graphical.state.js
@@ -28,47 +28,53 @@ export const graphicalState = {
templateProvider: function(composerOverrides) {
return composerOverrides.paletteGraphicalStateTemplate || template;
},
- controller: ['$scope', '$state', 'blueprintService', 'paletteService', graphicalController],
+ controller: ['$scope', '$state', '$filter', 'blueprintService', 'paletteService', graphicalController],
controllerAs: 'vm',
data: {
label: 'Graphical Designer'
}
};
-function graphicalController($scope, $state, blueprintService, paletteService) {
+function graphicalController($scope, $state, $filter, blueprintService, paletteService) {
this.EntityFamily = EntityFamily;
this.sections = paletteService.getSections();
this.selectedSection = Object.values(this.sections).find(section => section.type === EntityFamily.ENTITY);
$scope.paletteState = {}; // share state among all sections
- this.onTypeSelected = (selectedType)=> {
- let rootEntity = blueprintService.get();
+ this.onCanvasSelection = (item) => {
+ $scope.canvasSelectedItem = item;
+ }
+ this.getOnSelectText = (selectableType) => $scope.canvasSelectedItem ? "Add to " + $filter('entityName')($scope.canvasSelectedItem) : "Add to application";
+
+ this.addSelectedTypeToTargetEntity = (selectedType, targetEntity) => {
+ if (!targetEntity) targetEntity = $scope.canvasSelectedItem;
+ if (!targetEntity) targetEntity = blueprintService.get();
if (selectedType.supertypes.includes(EntityFamily.ENTITY.superType)) {
let newEntity = blueprintService.populateEntityFromApi(new Entity(), selectedType);
- rootEntity.addChild(newEntity);
+ targetEntity.addChild(newEntity);
blueprintService.refreshEntityMetadata(newEntity, EntityFamily.ENTITY).then(() => {
$state.go(graphicalEditEntityState, {entityId: newEntity._id});
})
}
else if (selectedType.supertypes.includes(EntityFamily.POLICY.superType)) {
let newPolicy = blueprintService.populateEntityFromApi(new Entity(), selectedType);
- rootEntity.addPolicy(newPolicy);
+ targetEntity.addPolicy(newPolicy);
blueprintService.refreshEntityMetadata(newPolicy, EntityFamily.POLICY).then(() => {
- $state.go(graphicalEditPolicyState, {entityId: rootEntity._id, policyId: newPolicy._id});
+ $state.go(graphicalEditPolicyState, {entityId: targetEntity._id, policyId: newPolicy._id});
});
}
else if (selectedType.supertypes.includes(EntityFamily.ENRICHER.superType)) {
let newEnricher = blueprintService.populateEntityFromApi(new Entity(), selectedType);
- rootEntity.addEnricher(newEnricher);
+ targetEntity.addEnricher(newEnricher);
blueprintService.refreshEntityMetadata(newEnricher, EntityFamily.ENRICHER).then(() => {
- $state.go(graphicalEditEnricherState, {entityId: rootEntity._id, enricherId: newEnricher._id});
+ $state.go(graphicalEditEnricherState, {entityId: targetEntity._id, enricherId: newEnricher._id});
});
}
else if (selectedType.supertypes.includes(EntityFamily.LOCATION.superType)) {
- blueprintService.populateLocationFromApi(rootEntity, selectedType);
- $state.go(graphicalEditEntityState, {entityId: rootEntity._id});
+ blueprintService.populateLocationFromApi(targetEntity, selectedType);
+ $state.go(graphicalEditEntityState, {entityId: targetEntity._id});
}
};
}