groupbasedpolicy-ui/module/src/main/resources/gbp/sfc/dialog-sfc-topology.controller.js

   1 define([
   2     'app/gbp/sfc/sfc.service'
   3 ], function () {
   4     'use strict';
   5
   6     angular.module('app.gbp').controller('SfcTopologyController', SfcTopologyController);
   7
   8     SfcTopologyController.$inject = ['$filter', '$mdDialog', '$scope', 'chainName', 'SfcService'];
   9     /* @ngInject */
  10     function SfcTopologyController($filter, $mdDialog, $scope, chainName, SfcService) {
  11         /* properties */
  12         $scope.chain = SfcService.createObject({name: chainName});
  13
  14         /* methods */
  15         $scope.closeDialog = closeDialog;
  16
  17         /* Implementations */
  18
  19         $scope.chain.get(function() {
  20             $scope.chain.data && $scope.chain.data['sfc-service-function'] &&
  21                 $scope.chain.data['sfc-service-function'].length && $scope.viewTopology();
  22
  23             $scope.topologyLoaded = true;
  24         });
  25
  26         function closeDialog(){
  27             $mdDialog.cancel();
  28         }
  29
  30         function nodeTooltip() {
  31             nx.define('MyNodeTooltip', nx.ui.Component, {
  32                 properties: {
  33                     node: {},
  34                     topology: {},
  35                 },
  36                 view: {
  37                     content: [{
  38                         tag: 'p',
  39                         content: [{
  40                             tag: 'label',
  41                             content: '{#node.model.data.type}',
  42                         }],
  43                     }],
  44                 },
  45             });
  46         }
  47
  48         $scope.viewTopology = function() {
  49             nodeTooltip();
  50             $scope.topologySfc = new nx.graphic.Topology({
  51                 height: 400,
  52                 width: 600,
  53                 scalable: true,
  54                 theme: 'blue',
  55                 enableGradualScaling: true,
  56                 nodeConfig: {
  57                     color: '#0386d2',
  58                     //label: 'model.label',
  59                     label: function (vertex) {
  60                         return vertex.get().label + ' (' + vertex.get().type + ')';
  61                     },
  62                     scale: 'model.scale',
  63                     iconType: function (vertex) {
  64                         var type = vertex.get().type;
  65                         switch (type) {
  66                             case 'firewall':
  67                                 return 'firewall';
  68                             case 'dpi':
  69                                 return 'accesspoint';
  70                             case 'qos':
  71                                 return 'wlc';
  72                             default:
  73                                 return 'unknown';
  74                         }
  75                     },
  76                 },
  77                 linkConfig: {
  78                     label: 'model.label',
  79                     linkType: 'parallel',
  80                     color: '#0386d2',
  81                     width: 5,
  82                 },
  83                 showIcon: true,
  84                 enableSmartNode: false,
  85                 tooltipManagerConfig: {
  86                     showLinkTooltip: false,
  87                     showNodeTooltip: false,
  88                     //nodeTooltipContentClass: 'MyNodeTooltip',
  89                 },
  90             });
  91             $scope.app =  new nx.ui.Application;
  92
  93             var nodes = [];
  94             var links = [];
  95
  96             $scope.chain.data['sfc-service-function'].forEach(function(sf, index) {
  97                 nodes.push({
  98                     id: sf.name,
  99                     label: sf.name,
 100                     type: SfcService.getSfTypeShort(sf.type),
 101                     x: 100 * (index + 1),
 102                     y: 400,
 103                 });
 104
 105                 index>0 && links.push({
 106                     source: index - 1,
 107                     target: index,
 108                 });
 109             })
 110
 111             $scope.topologySfc.data({
 112                 nodes: nodes,
 113                 links: links,
 114             });
 115
 116             $scope.app.container(document.getElementById('next-vpp-topo'));
 117             $scope.topologySfc.attach($scope.app);
 118         };
 119
 120
 121     }
 122 });