You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@brooklyn.apache.org by he...@apache.org on 2021/05/31 22:18:38 UTC
[brooklyn-ui] branch master updated (59c7fd5 -> 4956f9f)
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a change to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git.
from 59c7fd5 This closes #206
new 3e8f160 allow overrides to specify which nodes should be visible
new fbc2015 fix logic about yaml state detection, tidy layers/graphical check
new 7c23bdc layers can be extended or overridden by composerOverrides, and code tidy
new 17d8f6c allow callback on layer activation/disactivation
new 4956f9f Merge branch 'master' of https://gitbox.apache.org/repos/asf/brooklyn-ui
The 5 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../app/components/designer/designer.directive.js | 8 ++---
.../app/components/util/d3-blueprint.js | 33 +++++++++++++++----
.../app/views/main/main.controller.js | 38 +++++++++++++++++-----
.../app/views/main/main.template.html | 5 ++-
4 files changed, 63 insertions(+), 21 deletions(-)
[brooklyn-ui] 03/05: layers can be extended or overridden by
composerOverrides, and code tidy
Posted by he...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 7c23bdcf9b4d1cdaf15d4588f2ee64a7714f199e
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 22:35:37 2021 +0100
layers can be extended or overridden by composerOverrides, and code tidy
---
.../app/components/util/d3-blueprint.js | 6 ++++++
.../app/views/main/main.controller.js | 25 ++++++++++++++++------
2 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
index eb23e80..e65507f 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -565,6 +565,12 @@ export function D3Blueprint(container, options) {
let nodeData = _nodeGroup.selectAll('g.node')
.data(_d3DataHolder.visible.nodes, (d)=>(`node-${d.data._id}`));
+ // if desired to let overrides customize things, could leverage two functions on the seletions,
+ // TBC whether in enter or draw or etc (and note, by exposing just the first, callers can use the second)
+ // .call( fn /* runs on the selection */ )
+ // .each( fn /* runs on each Node */ )
+
+
// Draw group that contains all SVG element: node representation and location/policies/enricher indicators
// -----------------------------------------------------
let nodeGroup = nodeData
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js
index 0e55db4..90f97b6 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.controller.js
+++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js
@@ -28,7 +28,7 @@ import {graphicalEditSpecState} from './graphical/edit/spec/edit.spec.controller
import bottomSheetTemplate from './bottom-sheet.template.html';
import {ISSUE_LEVEL} from '../../components/util/model/issue.model';
-const layers = [
+const LAYERS = [
{
id: 'locations',
label: 'Locations',
@@ -54,7 +54,7 @@ const layers = [
active: true
}
];
-const layerCacheKey = 'blueprint-composer.layers';
+const LAYER_CACHE_KEY = 'blueprint-composer.layers';
export function MainController($scope, $element, $log, $state, $stateParams, brBrandInfo, blueprintService, actionService, tabService, catalogApi, applicationApi, brSnackbar, brBottomSheet, composerOverrides, edit, yaml) {
$scope.$emit(HIDE_INTERSTITIAL_SPINNER_EVENT);
@@ -69,18 +69,29 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB
vm.mode = toState;
});
- vm.layers = localStorage && localStorage.getItem(layerCacheKey) !== null ?
- JSON.parse(localStorage.getItem(layerCacheKey)) :
- layers;
+ let layersM = {};
+ (composerOverrides.getLayers() || LAYERS).forEach(l => layersM[l.id] = l);
+
+ let layersL = localStorage && localStorage.getItem(LAYER_CACHE_KEY) !== null && JSON.parse(localStorage.getItem(LAYER_CACHE_KEY));
+ if (layersL) layersL.forEach(l => { if (layersM[l.id]) layersM[l.id] = Object.assign({}, layersM[l.id], l); });
+ vm.layers = Object.values(layersM);
+
$scope.$watch('vm.layers', ()=> {
vm.layers.forEach(layer => {
document.querySelectorAll(layer.selector).forEach(node => {
- angular.element(node).css('display', layer.active ? 'block' : 'none');
+ // TODO does $watch approach give any newly created nodes/relationships the right display?
+
+ // if (layer.apply) {
+ // // layers could supply custom layer behaviour (including via composer overrides)
+ // layer.apply(node, layer, angular.element(node));
+ // } else {
+ angular.element(node).css('display', layer.active ? 'block' : 'none');
+ // }
});
});
if (localStorage) {
try {
- localStorage.setItem(layerCacheKey, JSON.stringify(vm.layers));
+ localStorage.setItem(LAYER_CACHE_KEY, JSON.stringify(vm.layers));
} catch (ex) {
$log.error('Cannot save layers preferences: ' + ex.message);
}
[brooklyn-ui] 02/05: fix logic about yaml state detection,
tidy layers/graphical check
Posted by he...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit fbc201555469976dcaadb4879329929ecb84ccf5
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 19:49:19 2021 +0100
fix logic about yaml state detection, tidy layers/graphical check
---
ui-modules/blueprint-composer/app/views/main/main.controller.js | 5 ++++-
ui-modules/blueprint-composer/app/views/main/main.template.html | 3 +--
2 files changed, 5 insertions(+), 3 deletions(-)
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js
index 0af26ad..0e55db4 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.controller.js
+++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js
@@ -137,7 +137,10 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB
return $state.is(stateKey);
}
vm.isYamlMode = () => {
- return $state.includes(yamlAutodetectState.name);
+ return $state && $state.current && $state.current.name && $state.current.name.includes(yamlAutodetectState.name);
+ }
+ vm.isLayerDropdownEnabled = () => {
+ return !vm.isYamlMode();
}
if (yaml) {
diff --git a/ui-modules/blueprint-composer/app/views/main/main.template.html b/ui-modules/blueprint-composer/app/views/main/main.template.html
index 1a24cad..caed095 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.template.html
+++ b/ui-modules/blueprint-composer/app/views/main/main.template.html
@@ -33,14 +33,13 @@
<blueprint-data-manager></blueprint-data-manager>
</div>
- <ul class="nav navbar-nav navbar-right navbar-nav-secondary-actions" ng-if="vm.isGraphicalMode()" >
+ <ul class="nav navbar-nav navbar-right navbar-nav-secondary-actions" ng-if="vm.isLayerDropdownEnabled()" >
<li class="dropdown" uib-dropdown>
<a href class="dropdown-toggle" uib-dropdown-toggle aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-clone"></i> Layers <span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu">
<li role="menuitem" class="layer"
- ng-if="vm.isGraphicalMode()"
ng-repeat="layer in vm.layers track by layer.id"
ng-class="{'active': layer.active}">
<a ng-click="layer.active = !layer.active"><i class="fa fa-fw fa-circle"></i> {{layer.label}}</a>
[brooklyn-ui] 05/05: Merge branch 'master' of
https://gitbox.apache.org/repos/asf/brooklyn-ui
Posted by he...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 4956f9ff8976c0207a535ea59223f71388df6ca3
Merge: 17d8f6c 59c7fd5
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 23:18:30 2021 +0100
Merge branch 'master' of https://gitbox.apache.org/repos/asf/brooklyn-ui
.../app/components/dsl-editor/dsl-editor.js | 10 +--
.../app/components/util/model/dsl.model.js | 35 ++++++----
.../app/components/util/model/dsl.model.spec.js | 8 +--
.../main/graphical/edit/dsl/edit.dsl.controller.js | 77 +++++++++++++++++-----
4 files changed, 95 insertions(+), 35 deletions(-)
[brooklyn-ui] 04/05: allow callback on layer
activation/disactivation
Posted by he...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 17d8f6cf6b4247c9e84bee1fe2332c2aaa83f9f9
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 23:13:29 2021 +0100
allow callback on layer activation/disactivation
---
.../app/components/designer/designer.directive.js | 2 +-
ui-modules/blueprint-composer/app/components/util/d3-blueprint.js | 1 +
ui-modules/blueprint-composer/app/views/main/main.controller.js | 8 ++++++++
ui-modules/blueprint-composer/app/views/main/main.template.html | 2 +-
4 files changed, 11 insertions(+), 2 deletions(-)
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 a7ae56f..c6bf370 100644
--- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
+++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
@@ -63,7 +63,7 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b
$scope.selectedEntity = null;
$scope.$on('d3.redraw', (event, initial)=> {
- $log.debug(TAG + 'Re-draw blueprint, triggered by ' + event.name, $scope.blueprint);
+ $log.debug(TAG + 'Re-draw blueprint, triggered by ' + event.name, initial, $scope.blueprint);
blueprintService.refreshBlueprintMetadata().then(()=>{
redrawGraph();
diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
index e65507f..e90c1bb 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -690,6 +690,7 @@ export function D3Blueprint(container, options) {
.attr('y2', (d)=>(d.target.y));
link.exit()
.transition()
+ .duration(_configHolder.transition) // doesn't seem to work, links just disappear immediately
.attr('opacity', 0)
.remove();
}
diff --git a/ui-modules/blueprint-composer/app/views/main/main.controller.js b/ui-modules/blueprint-composer/app/views/main/main.controller.js
index 90f97b6..261e294 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.controller.js
+++ b/ui-modules/blueprint-composer/app/views/main/main.controller.js
@@ -76,6 +76,14 @@ export function MainController($scope, $element, $log, $state, $stateParams, brB
if (layersL) layersL.forEach(l => { if (layersM[l.id]) layersM[l.id] = Object.assign({}, layersM[l.id], l); });
vm.layers = Object.values(layersM);
+ vm.onLayerActive = (layer, value) => {
+ if (layer.onLayerActive) {
+ layer.onLayerActive(value, $scope);
+ }
+ layer.active = value;
+ };
+ vm.layers.forEach(l => vm.onLayerActive(l, l.active));
+
$scope.$watch('vm.layers', ()=> {
vm.layers.forEach(layer => {
document.querySelectorAll(layer.selector).forEach(node => {
diff --git a/ui-modules/blueprint-composer/app/views/main/main.template.html b/ui-modules/blueprint-composer/app/views/main/main.template.html
index caed095..feed230 100644
--- a/ui-modules/blueprint-composer/app/views/main/main.template.html
+++ b/ui-modules/blueprint-composer/app/views/main/main.template.html
@@ -42,7 +42,7 @@
<li role="menuitem" class="layer"
ng-repeat="layer in vm.layers track by layer.id"
ng-class="{'active': layer.active}">
- <a ng-click="layer.active = !layer.active"><i class="fa fa-fw fa-circle"></i> {{layer.label}}</a>
+ <a ng-click="vm.onLayerActive(layer, !layer.active)"><i class="fa fa-fw fa-circle"></i> {{layer.label}}</a>
</li>
</ul>
</li>
[brooklyn-ui] 01/05: allow overrides to specify which nodes should
be visible
Posted by he...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
heneveld pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/brooklyn-ui.git
commit 3e8f160723724c3486f270015cc54a0d71653585
Author: Alex Heneveld <al...@cloudsoftcorp.com>
AuthorDate: Mon May 31 19:28:57 2021 +0100
allow overrides to specify which nodes should be visible
the hidden nodes still participate in layout decisions which isn't ideal,
but at least it allows flexible hiding
---
.../app/components/designer/designer.directive.js | 6 ++---
.../app/components/util/d3-blueprint.js | 26 +++++++++++++++++-----
2 files changed, 23 insertions(+), 9 deletions(-)
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 cbcb0ff..a7ae56f 100644
--- a/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
+++ b/ui-modules/blueprint-composer/app/components/designer/designer.directive.js
@@ -31,12 +31,12 @@ const ANY_MEMBERSPEC_REGEX = /(^.*[m,M]ember[s,S]pec$)/;
const TAG = 'DIRECTIVE :: DESIGNER :: ';
angular.module(MODULE_NAME, [])
- .directive('designer', ['$log', '$state', '$q', 'iconGenerator', 'catalogApi', 'blueprintService', 'brSnackbar', 'paletteDragAndDropService', designerDirective])
+ .directive('designer', ['$log', '$state', '$q', 'iconGenerator', 'catalogApi', 'blueprintService', 'brSnackbar', 'paletteDragAndDropService', 'composerOverrides', designerDirective])
.run(['$templateCache', templateCache]);
export default MODULE_NAME;
-export function designerDirective($log, $state, $q, iconGenerator, catalogApi, blueprintService, brSnackbar, paletteDragAndDropService) {
+export function designerDirective($log, $state, $q, iconGenerator, catalogApi, blueprintService, brSnackbar, paletteDragAndDropService, composerOverrides) {
return {
restrict: 'E',
templateUrl: function (tElement, tAttrs) {
@@ -49,7 +49,7 @@ export function designerDirective($log, $state, $q, iconGenerator, catalogApi, b
};
function link($scope, $element) {
- let blueprintGraph = new D3Blueprint($element[0]).center();
+ let blueprintGraph = new D3Blueprint($element[0], {shouldShowNode: composerOverrides.shouldShowNode}).center();
$scope.blueprint = blueprintService.get();
$scope.$watch('blueprint', ()=> {
diff --git a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
index 2b9ecb5..eb23e80 100755
--- a/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
+++ b/ui-modules/blueprint-composer/app/components/util/d3-blueprint.js
@@ -17,11 +17,11 @@
* under the License.
*/
import * as d3 from 'd3';
-import {PREDICATE_MEMBERSPEC} from './model/entity.model';
+import {PREDICATE_MEMBERSPEC, FIELD} from './model/entity.model';
import addIcon from '../../img/icon-add.svg';
import {ISSUE_LEVEL} from './model/issue.model';
-export function D3Blueprint(container) {
+export function D3Blueprint(container, options) {
let _svg = d3.select(container).append('svg').attr('class', 'blueprint-canvas');
let _mirror = _svg.append('path').style('display', 'none');
let _zoomGroup = _svg.append('g').attr('class', 'zoom-group');
@@ -526,14 +526,28 @@ export function D3Blueprint(container) {
return 1 + (colWidth / (_configHolder.nodes.child.circle.r * 6)) * additionalCol;
});
+
let root = d3.hierarchy(blueprint);
tree(root);
+
_d3DataHolder.nodes = root.descendants();
_d3DataHolder.links = root.links();
_d3DataHolder.relationships = relationships;
+
+ _d3DataHolder.visible = {
+ nodes: _d3DataHolder.nodes.filter(d => shouldShowNode(d.data) ),
+ links: _d3DataHolder.links.filter(d => shouldShowNode(d.source.data) && shouldShowNode(d.target.data) ),
+ relationships: _d3DataHolder.relationships.filter(d => { return shouldShowNode(d.source) && shouldShowNode(d.target); } ),
+ };
+
return this;
}
+ function shouldShowNode(node) {
+ if (options && options.shouldShowNode) return options.shouldShowNode(node);
+ return true;
+ }
+
/**
* Redraw the graph
*/
@@ -549,7 +563,7 @@ export function D3Blueprint(container) {
function drawNodeGroup() {
let nodeData = _nodeGroup.selectAll('g.node')
- .data(_d3DataHolder.nodes, (d)=>(`node-${d.data._id}`));
+ .data(_d3DataHolder.visible.nodes, (d)=>(`node-${d.data._id}`));
// Draw group that contains all SVG element: node representation and location/policies/enricher indicators
// -----------------------------------------------------
@@ -654,7 +668,7 @@ export function D3Blueprint(container) {
function drawLinks() {
let link = _linkGroup.selectAll('line.link')
- .data(_d3DataHolder.links, (d)=>(d.source.data._id + '_to_' + d.target.data._id));
+ .data(_d3DataHolder.visible.links, (d)=>(d.source.data._id + '_to_' + d.target.data._id));
link.enter().insert('line')
.attr('class', 'link')
@@ -697,7 +711,7 @@ export function D3Blueprint(container) {
showRelationships();
let relationData = _relationGroup.selectAll('.relation')
- .data(_d3DataHolder.relationships, (d)=>(d.source._id + '_related_to_' + d.target._id));
+ .data(_d3DataHolder.visible.relationships, (d)=>(d.source._id + '_related_to_' + d.target._id));
relationData.enter().insert('path')
.attr('class', 'relation')
@@ -736,7 +750,7 @@ export function D3Blueprint(container) {
function drawGhostNode() {
let ghostNodeData = _ghostNodeGroup.selectAll('g.ghost-node')
- .data(_d3DataHolder.nodes, (d)=>(`ghost-node-${d.data._id}`));
+ .data(_d3DataHolder.visible.nodes, (d)=>(`ghost-node-${d.data._id}`));
let ghostNode = ghostNodeData
.enter()
.append('g')