[CORD-1043] Adding click handler to display models
Change-Id: I331a193afed8e3d4f1bc5699dcb4d91a7404fa07
diff --git a/src/app/core/services/helpers/component-injector.helpers.ts b/src/app/core/services/helpers/component-injector.helpers.ts
index 908e4c7..9fc475b 100644
--- a/src/app/core/services/helpers/component-injector.helpers.ts
+++ b/src/app/core/services/helpers/component-injector.helpers.ts
@@ -47,9 +47,6 @@
});
}
- // FIXME
- // component are correctly injected but not persisted,
- // if I change route they go away
public injectComponent(target: string | JQuery, componentName: string, attributes?: any, transclude?: string, clean?: boolean) {
let targetEl;
if (angular.isString(target)) {
@@ -74,7 +71,10 @@
if (angular.isDefined(attributes) && angular.isObject(attributes)) {
attr = this.stringifyAttributes(attributes);
- scope = angular.merge(scope, attributes);
+ // we cannot use angular.merge as it cast Resource to Objects
+ _.forEach(Object.keys(attributes), (k: string) => {
+ scope[k] = attributes[k];
+ });
}
const componentTag = `<${componentTagName} ${attr}>${transclude || ''}</${componentTagName}>`;
diff --git a/src/app/core/side-panel/side-panel.html b/src/app/core/side-panel/side-panel.html
index 5d06e79..890b40b 100644
--- a/src/app/core/side-panel/side-panel.html
+++ b/src/app/core/side-panel/side-panel.html
@@ -1,5 +1,4 @@
<section class="xos-side-panel">
- <pre>{{vm.isOpened | json}}</pre>
<div class="row">
<div class="col-xs-12 text-right">
<i class="fa fa-remove" ng-click="vm.close()"></i>
diff --git a/src/app/core/side-panel/side-panel.scss b/src/app/core/side-panel/side-panel.scss
index 05f34e0..13538fe 100644
--- a/src/app/core/side-panel/side-panel.scss
+++ b/src/app/core/side-panel/side-panel.scss
@@ -7,11 +7,13 @@
width: $side-panel-width;
height: 100%;
position: fixed;
- background: $background-dark-color;
z-index: 9999;
+ top: 0;
right: -$side-panel-width;
+ background: $background-dark-color;
padding: $padding;
transition: all .5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
+ overflow-y: scroll;
&.open {
right: 0;
diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index 96e4162..6857f7d 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -13,6 +13,7 @@
public sidePanelElName = 'xos-side-panel';
public sidePanelElClass = '.xos-side-panel';
public sidePanelEl: JQuery;
+ private hasComponentLoaded: boolean;
constructor (
private $rootScope: ng.IRootScopeService,
@@ -32,14 +33,23 @@
};
public injectComponent(componentName: string, attributes?: any, transclude?: string) {
- this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
- this.open();
+ let timeout = 0;
+ if (this.hasComponentLoaded) {
+ this.removeInjectedComponents();
+ timeout = 501; // wait for panel to close and remove component
+ }
+ this.$timeout(() => {
+ this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
+ this.hasComponentLoaded = true;
+ this.open();
+ }, timeout);
}
public removeInjectedComponents() {
this.close();
this.$timeout(() => {
this.XosComponentInjector.removeInjectedComponents('#side-panel-container');
+ this.hasComponentLoaded = false;
}, 500);
}
}
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.scss b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
index 56abd53..5f330ca 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.scss
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.scss
@@ -7,7 +7,7 @@
// background: $color-accent;
svg {
- height: 100%;
+ height: 90%;
width: 100%;
background-color: $panel-filled-bg;
border-radius: 3px;
diff --git a/src/app/service-graph/components/fine-grained/fine-grained.component.ts b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
index b0f71a6..474120f 100644
--- a/src/app/service-graph/components/fine-grained/fine-grained.component.ts
+++ b/src/app/service-graph/components/fine-grained/fine-grained.component.ts
@@ -6,12 +6,16 @@
import {XosServiceGraphConfig as config} from '../../graph.config';
import {IXosDebouncer} from '../../../core/services/helpers/debounce.helper';
import {IXosServiceGraph, IXosServiceGraphLink, IXosServiceGraphNode} from '../../interfaces';
+import {IXosModelDiscovererService} from '../../../datasources/helpers/model-discoverer.service';
+import {IXosSidePanelService} from '../../../core/side-panel/side-panel.service';
class XosFineGrainedTenancyGraphCtrl {
static $inject = [
'$log',
'XosServiceGraphStore',
- 'XosDebouncer'
+ 'XosDebouncer',
+ 'XosModelDiscoverer',
+ 'XosSidePanel'
];
public graph: IXosServiceGraph;
@@ -28,7 +32,9 @@
constructor(
private $log: ng.ILogService,
private XosServiceGraphStore: IXosServiceGraphStore,
- private XosDebouncer: IXosDebouncer
+ private XosDebouncer: IXosDebouncer,
+ private XosModelDiscoverer: IXosModelDiscovererService,
+ private XosSidePanel: IXosSidePanelService
) {
this.handleSvg();
this.setupForceLayout();
@@ -225,6 +231,7 @@
.selectAll('g.node')
.data(nodes, n => n.id);
+ let mouseEventsTimer, selectedModel;
const svgDim = this.getSvgDimensions();
const hStep = svgDim.width / (nodes.length - 1);
const vStep = svgDim.heigth / (nodes.length - 1);
@@ -236,10 +243,30 @@
})
.call(this.forceLayout.drag)
.on('mousedown', () => {
+ mouseEventsTimer = new Date().getTime();
d3.event.stopPropagation();
})
- .on('mouseup', (d) => {
- d.fixed = true;
+ .on('mouseup', (n) => {
+ mouseEventsTimer = new Date().getTime() - mouseEventsTimer;
+ n.fixed = true;
+ })
+ .on('click', (n: IXosServiceGraphNode) => {
+ if (mouseEventsTimer > 100) {
+ // it is a drag
+ return;
+ }
+ if (selectedModel === n.id) {
+ // this model is already selected, so close the panel
+ this.XosSidePanel.removeInjectedComponents();
+ selectedModel = null;
+ return;
+ }
+ selectedModel = n.id;
+ const modelName = n.model['class_names'].split(',')[0];
+ const formConfig = this.XosModelDiscoverer.get(modelName).formCfg;
+ const model = angular.copy(n.model);
+ delete model.d3Id;
+ this.XosSidePanel.injectComponent('xosForm', {config: formConfig, ngModel: model});
});
this.renderServiceNodes(entering.filter('.service'));