From 7af23130277d2827704059e01f37ebd76c1fa167 Mon Sep 17 00:00:00 2001
From: Mathis Neumann <mathis@simpletechs.net>
Date: Wed, 20 Jul 2016 13:46:29 +0200
Subject: [PATCH] implement architectural view
---
.../style.js | 22 +++++++
app/controllers/deployments/single.js | 18 +++--
app/routes/deployments/single.js | 3 +-
app/services/architecture-graphing-service.js | 66 +++++++++++++++++++
...vice.js => deployment-graphing-service.js} | 0
app/templates/deployments/single.hbs | 10 +++
6 files changed, 113 insertions(+), 6 deletions(-)
create mode 100644 app/services/architecture-graphing-service.js
rename app/services/{graphing-service.js => deployment-graphing-service.js} (100%)
diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
index c3e918e..bfa4a4f 100644
--- a/app/components/architecture-visualisation-cytoscape/style.js
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -43,7 +43,15 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
border-color: ${theme.nodeBorderColor};
font-weight: bold;
z-index: 100;
+}
+[type="service"] {
+ background-color: ${theme.serviceColor};
+ color: ${theme.nodeTextColor};
+ border-color: ${theme.nodeBorderColor};
+ border-width: 2px;
+ font-weight: bold;
+ z-index: 100;
}
[type="serviceInstance"] {
@@ -74,6 +82,20 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
width: data(workload);
}
+[type="communication"] {
+ color: ${theme.arrowColor};
+ line-color: ${theme.arrowColor};
+ target-arrow-color: ${theme.arrowColor};
+
+ /*text-background-color: ${theme.arrowLineColor};
+ text-background-opacity: 1;*/
+ /*text-background-shape: roundrectangle;*/
+ text-outline-color: ${theme.arrowColor};
+ text-outline-width: 1px;
+ font-size: 12pt;
+ width: data(workload);
+}
+
[type="nodeGroup"] {
color: ${theme.nodeGroupTextColor};
background-color: ${theme.nodeGroupColor};
diff --git a/app/controllers/deployments/single.js b/app/controllers/deployments/single.js
index eec7138..0e096de 100644
--- a/app/controllers/deployments/single.js
+++ b/app/controllers/deployments/single.js
@@ -4,12 +4,15 @@ const observables = [
'nodes',
'nodeGroups',
'serviceInstances',
- 'communicationInstances'
+ 'communicationInstances',
+ 'communications',
+ 'services',
];
// we require the use of controllers solely because Ember does not allow routes to pass more than model() to templates
export default Ember.Controller.extend({
- graphingService: Ember.inject.service(),
+ deploymentGraphingService: Ember.inject.service(),
+ architectureGraphingService: Ember.inject.service(),
changelogQueue: Ember.inject.service(),
init() {
@@ -17,7 +20,7 @@ export default Ember.Controller.extend({
},
// gets automatically updated when any of the instances changes, changes are notified via a pseudo property 'updated'
// using @each will also listen if the array itself changes. Can be quite expensive.
- graphModel: Ember.computed(`model.instances.{${observables.join(',')}}.@each._updated`, function() {
+ graphModel: Ember.computed(`model.instances.{${observables.join(',')}}.@each._updated`, 'model.mode', function() {
const systemId = this.get('model.systemId');
const instances = this.get('model.instances');
/*
@@ -30,9 +33,14 @@ export default Ember.Controller.extend({
Object.keys(instances).map((key) => {
filteredInstances[key] = instances[key].filterBy('systemId', systemId);
});
-
+ let graphingService;
+ if(this.get('model.mode') === 'architectures') {
+ graphingService = this.get('architectureGraphingService');
+ } else {
+ graphingService = this.get('deploymentGraphingService');
+ }
this.debug('creating graph', filteredInstances);
- return this.get('graphingService').createGraph(filteredInstances); // TODO: update instead of complete recalculation?
+ return graphingService.createGraph(filteredInstances); // TODO: update instead of complete recalculation?
}),
actions: {
applyQueueUpdates() {
diff --git a/app/routes/deployments/single.js b/app/routes/deployments/single.js
index 27a006a..495b417 100644
--- a/app/routes/deployments/single.js
+++ b/app/routes/deployments/single.js
@@ -32,7 +32,8 @@ export default Ember.Route.extend({
this.debug('loaded models', models);
return {
systemId: systemId,
- instances: models
+ instances: models,
+ mode: this.get('routeName').split('.')[0]
};
});
},
diff --git a/app/services/architecture-graphing-service.js b/app/services/architecture-graphing-service.js
new file mode 100644
index 0000000..baa3475
--- /dev/null
+++ b/app/services/architecture-graphing-service.js
@@ -0,0 +1,66 @@
+import Ember from 'ember';
+
+/**
+ * parses a list of models and creates stores them
+ */
+export default Ember.Service.extend({
+ store: Ember.inject.service(),
+ createGraph(models) {
+ this.debug('loaded models', models);
+
+ // prepare models by serializing them
+ const prepared = {};
+ [ 'services',
+ 'serviceInstances',
+ 'communications'
+ ].forEach((key) => {
+ const records = models[key];
+ prepared[key] = records.map(record => record.serialize());
+ });
+
+ // services not used in current view
+ const {services, serviceInstances, communications} = prepared;
+
+ var network = {
+ nodes: [],
+ edges: []
+ };
+
+ services.forEach(data => {
+ data.label = data.name;
+ network.nodes.push({
+ data: data
+ });
+ });
+
+ // serviceInstances.forEach(data => {
+ // data.label = data.name;
+ // data.parent = data.serviceId;
+ //
+ // network.nodes.push({
+ // data: data,
+ // classes: data.status || ''
+ // });
+ // });
+
+ communications.forEach(data => {
+ data.source = data.sourceId;
+ data.target = data.targetId;
+ data.label = data.technology;
+
+ const instanceList = this.get('store').peekAll('communicationinstance')
+ .filter((instance) => instance.get('communicationId') === data.id );
+
+ data.workload = instanceList.reduce((previous, instance) => previous + instance.get('workload'), 0);
+
+ //TODO Normalize
+
+ network.edges.push({
+ data,
+ classes: data.status || ''
+ });
+ });
+
+ return network;
+ }
+});
diff --git a/app/services/graphing-service.js b/app/services/deployment-graphing-service.js
similarity index 100%
rename from app/services/graphing-service.js
rename to app/services/deployment-graphing-service.js
diff --git a/app/templates/deployments/single.hbs b/app/templates/deployments/single.hbs
index 2e61bf8..2fe75de 100644
--- a/app/templates/deployments/single.hbs
+++ b/app/templates/deployments/single.hbs
@@ -4,6 +4,16 @@
<i class="glyphicon glyphicon-refresh"></i> Apply Updates {{#if changelogQueue.available}}({{ changelogQueue.size }}){{/if}}
</button>
+ {{#if (eq model.mode 'architectures')}}
+ {{#link-to 'deployments.single' model.systemId tagName='button' class='btn btn-default'}}
+ Deployments
+ {{/link-to}}
+ {{else}}
+ {{#link-to 'architectures.single' model.systemId tagName='button' class='btn btn-default'}}
+ Architecture
+ {{/link-to}}
+ {{/if}}
+
{{!-- show entity details in sidebar if subroute (details) is used --}}
{{outlet}}
{{/architecture-viewer}}
\ No newline at end of file
--
GitLab