implement architectural view

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};

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() {

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]
         };
     });
   },

app/services/architecture-graphing-service.js

+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;
+  }
+});

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