GUI initial commit

- open ui on http://controllerIp:8181/index.html
- added interfaces to vpp topo.
- fixed VPP mounting
- fixed VPP Editing and deleting

Change-Id: I6ae2c6e5781d3e0cdb78b112d706b9f5076301d5
Signed-off-by: Daniel Malachovsky <daniel.malachovsky@pantheon.sk>
Signed-off-by: Varun Seereeram <vseereer@cisco.com>
Signed-off-by: Robert Varga <nite@hq.sk>

1 files changed, 571 insertions, 0 deletions

diff --git a/vbd/gui/module/src/main/resources/vpp/vpp.controller.js b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js
new file mode 100644
index 000000000..17d5a1085
--- /dev/null
+++ b/vbd/gui/module/src/main/resources/vpp/vpp.controller.js
@@ -0,0 +1,571 @@
+var modules = ['app/vpp/vpp.module',
+               'app/vpp/vpp.services',
+               ];
+
+
+define(modules, function(vpp) {
+
+    vpp.register.controller('vppCtrl', ['$scope', '$rootScope', '$timeout', 'httpService' ,'dataService', 'toastService', '$mdSidenav', '$mdDialog',
+        function ($scope, $rootScope, $timeout, httpService ,dataService, toastService, $mdSidenav, $mdDialog) {
+            $rootScope['section_logo'] = 'src/app/vpp/assets/images/vpp.gif';
+            $scope.view_path =  'src/app/vpp/views/';
+    		
+    	    $scope.mainView = "inventory";
+
+    	    $scope.setMainView = function(viewName) {
+    	    	$scope.mainView = viewName;
+    	    };
+	}]);
+
+    vpp.register.controller('InventoryTableController', ['$scope', '$rootScope','$filter', 'toastService', 'VppService', '$mdDialog', 'dataService', 'InterfaceService', function($scope, $rootScope, filter, toastService, VppService, $mdDialog, dataService, InterfaceService) {
+        
+        $scope.getInterfaces = function(index) {
+            InterfaceService.getInterfaceList(
+                $scope.vppList[index].name,
+                //success callback
+                function(data) {
+                    var interfaces = data['interfaces-state'].interface;
+                    var vpp = $scope.vppList[index];
+                    vpp.interfaces = [];
+
+                    interfaces.forEach(function(i){
+                        if (i.name != 'local0') {
+                            vpp.interfaces.push(i);
+                        }
+                    });
+
+                    console.log($scope.vppList);
+                },
+                //error callback
+                function(res) {
+                    console.error(res);
+                }
+            )
+        };
+
+        $scope.getVppList = function() {
+            $scope.initVppList();
+
+            VppService.getVppList(
+                // success callback
+                function(data) {
+                    if(data.topology.length || data.topology[0].node.length) {
+                        data.topology[0].node.forEach(function(n) {
+                            if(n['node-id'] !== 'controller-config') {
+                                var vppObj = VppService.createObj(n['node-id'], n['netconf-node-topology:host'], n['netconf-node-topology:port'], null, null, n['netconf-node-topology:connection-status']);
+                                $scope.vppList.push(vppObj);
+                                $scope.getInterfaces($scope.vppList.length - 1); //pass index.
+
+                            }
+                        });
+                    }
+                },
+                // error callback
+                function(res) {
+                    console.error(res);
+                }
+            );
+        };
+
+        $scope.initVppList = function() {
+            $scope.vppList = [];
+        };
+
+        $scope.viewTopology = function(vpp) {
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+
+                    $scope.topo = new nx.graphic.Topology({
+                        height: 350,
+                        width: 500,
+                        scalable: true,
+                        theme:'blue',
+                        enableGradualScaling:true,
+                        nodeConfig: {
+                            color: '#414040',
+                            label: 'model.label',
+                            scale: 'model.scale',
+                            iconType: function(vertex) {
+                                var type = vertex.get().type;
+                                if (type === 'bd') {
+                                    return 'bd'
+                                } else if (type === 'vpp') {
+                                    return 'switch'
+                                } else {
+                                    return 'interf';
+                                }
+                            }
+                        },
+                        linkConfig: {
+                            label: 'model.label',
+                            linkType: 'parallel',
+                            color: function(link) {
+                                if (link.getData().type === 'tunnel') {
+                                    return '#00FF00';
+                                } else {
+                                    return '#414040';
+                                }
+                            },
+                            width: function(link) {
+                                if (link.getData().type === 'tunnel') {
+                                    return 5;
+                                }
+                            }
+                        },
+                        showIcon: true,
+                        dataProcessor: 'force',
+                        autoLayout: true,
+                        enableSmartNode: false,
+                        tooltipManagerConfig: {
+                            nodeTooltipContentClass: 'TooltipNode',
+                            linkTooltipContentClass: 'TooltipLink'
+                        }
+                    });
+                    $scope.app =  new nx.ui.Application;
+
+                    vm.vpp = vpp;
+                    vm.vpp.type = 'vpp';
+                    vm.vpp.label = vm.vpp.name;
+
+                    var nodes = [].concat(vm.vpp);
+                    var links = [];
+
+                    _.forEach(vm.vpp.interfaces, function(interf, index){
+                        interf.label = interf.name;
+                        interf.scale = 0.5;
+                        nodes.push(interf);
+                        links.push({source: 0, target: index + 1});
+                    });
+
+                    console.log(vpp);
+                    console.log(nodes);
+                    console.log(links);
+
+                    $scope.topo.data({
+                        nodes: nodes,
+                        links: links
+                    });
+
+                    this.close = function() {
+                        $mdDialog.cancel();
+                    };
+
+                },
+                onComplete: function() {
+                    console.log(document.getElementById('next-vpp-topo'));
+                    $scope.app.container(document.getElementById('next-vpp-topo'));
+                    $scope.topo.attach($scope.app);
+
+                },
+                templateUrl: $scope.view_path + 'vpp-topo.html',
+                controllerAs: 'VppTopoCtrl',
+                parent: angular.element(document.body),
+                clickOutsideToClose:true
+            })
+        };
+
+        $scope.addVppShowForm = function() {
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+                    vm.vpp = {};
+                    //function called when the cancel button ( 'x' in the top right) is clicked
+                    vm.close = function() {
+                        $mdDialog.cancel();
+                    };
+
+                    vm.finished = function(successful) {
+                        if (successful) {
+                            vm.close();
+                            vm.waiting = false;
+                            toastService.showToast('New VPP added!');
+                            $scope.getVppList();
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error adding new VPP');
+                        }
+                    };
+
+                    //function called when the update button is clicked
+                    vm.updateConfig = function() {
+                        vm.waiting = true;
+                        VppService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finished);
+                    };
+                },
+                controllerAs: 'NewVppDialogCtrl',
+                templateUrl: $scope.view_path + 'new-vpp-dialog.html',
+                parent: angular.element(document.body),
+                clickOutsideToClose:true
+            })
+        };
+
+        $scope.editVppShowForm = function(vppObject) {
+
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+
+                    vm.vpp = {
+                        name: vppObject.name,
+                        status: vppObject.status,
+                        ip: vppObject.ipAddress,
+                        port: vppObject.port
+                    };
+
+                    //function called when the cancel button ( 'x' in the top right) is clicked
+                    vm.close = function() {
+                        $mdDialog.cancel();
+                    };
+
+                    vm.finishedUpdating = function(successful) {
+                        if (successful) {
+                            vm.close();
+                            vm.waiting = false;
+                            toastService.showToast('VPP configuration updated!');
+                            $scope.getVppList();
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error configuring VPP');
+                        }
+                    };
+
+                    vm.finishedDeleting = function(successful) {
+                        if (successful) {
+                            VppService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating);
+                            $scope.getVppList();
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error configuring VPP');
+                        }
+                    };
+
+                    //function called when the update button is clicked
+                    vm.updateConfig = function() {
+                        //VppService.editVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating);
+                        VppService.deleteVpp(vm.vpp, vm.finishedDeleting);
+                    };
+                },
+                controllerAs: 'ConfigVppDialogCtrl',
+                templateUrl: $scope.view_path + 'config-vpp-dialog.html',
+                parent: angular.element(document.body),
+                clickOutsideToClose:true
+            });
+        };
+
+        $scope.deleteVpp = function(vppObject) {
+
+            var finished = function(successful) {
+                if (successful) {
+                    toastService.showToast('Removed VPP!');
+                    $scope.getVppList();
+                } else {
+                    toastService.showToast('Error removing VPP');
+                }
+            };
+
+            VppService.deleteVpp(vppObject, finished);
+        };
+
+        $scope.getVppList();
+    }]);
+
+    vpp.register.controller('TableController', ['$scope', '$rootScope','$filter', 'dataService', 'httpService', 'toastService', function ($scope, $rootScope, filter, dataService, httpService, toastService) {
+        var vm = this;
+        vm.rowCollection = dataService.tableContent;
+        vm.displayedCollection = [].concat(vm.rowCollection);
+        vm.updateAssignment = function(receivedInterface) {
+            var interf = _.find(dataService.interfaces, {name: receivedInterface.name, 'phys-address': receivedInterface['phys-address']});
+            angular.copy(receivedInterface, interf);
+            if (interf.assigned){
+                interf['v3po:l2']['bridge-domain'] = dataService.selectedBd.name;
+            } else {
+                interf['v3po:l2']['bridge-domain'] = '';
+            }
+            dataService.injectBridgeDomainsTopoElements();
+            dataService.buildTableContent();
+            var previouslyChangedInterface = _.find(dataService.changedInterfaces, {name: interf.name, 'phys-address': interf['phys-address']});
+            if (!previouslyChangedInterface) {
+                dataService.changedInterfaces.push(interf);
+            }
+            console.log(dataService.changedInterfaces);
+        };
+    }]);
+
+	vpp.register.controller('InventoryController', function(dataService, $mdDialog, httpService, $location, toastService, $window) {
+        var vm = this;
+        vm.dataService = dataService;
+
+        var nextApp =  new nx.ui.Application;
+
+        nextApp.container(document.getElementById('inventory-next-app'));
+        dataService.vppTopo.attach(nextApp);
+        dataService.vppTopo.tooltipManager().nodeTooltip().close();
+        dataService.bridgeDomainsTopo.tooltipManager().nodeTooltip().close();
+
+        window.addEventListener('resize', function() {
+            if ($location.path() === '/inventory') {
+                dataService.vppTopo.adaptToContainer();
+            }
+        });
+
+        dataService.vppTopo.on("topologyGenerated", function() { //on topology generated...
+            dataService.vppTopo.stage().on('dblclick', function(sender, event) {
+                var target = event.target;
+                var nodesLayerDom = dataService.vppTopo.getLayer('nodes').dom().$dom;
+                var id;
+
+                //db click node
+                if (nodesLayerDom.contains(target)) {
+                    while (!target.classList.contains('node')) {
+                        target = target.parentElement;
+                    }
+                    id = target.getAttribute('data-id');
+                    dataService.vppTopo.tooltipManager().nodeTooltip().close();
+
+                    if(dataService.vppTopo.getNode(id).model().get().type ==='iana-if-type:ethernetCsmacd') {
+                        vm.configInterface(dataService.vppTopo.getData().nodes[id]);
+                    } else {
+                        vm.configVpp(dataService.vppTopo.getNode(id));
+                    }
+                }
+            }); //Double click handler
+
+            dataService.vppTopo.on('clickNode',function(topo, node){
+                if(node.model().get().type!='iana-if-type:ethernetCsmacd') {
+                    dataService.vppTopo.tooltipManager().nodeTooltip().close();
+                }
+                console.log(node.model().get());
+            });
+        });
+
+        vm.configVpp = function(node) {
+            console.log(node.model().get());
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+                    var nodeModel = node.model().get();
+                    vm.vpp = {
+                        name: nodeModel['node-id'],
+                        status: nodeModel['netconf-node-topology:connection-status'],
+                        ip: nodeModel['netconf-node-topology:host'],
+                        port: nodeModel['netconf-node-topology:port']
+                    };
+
+                    //function called when the cancel button ( 'x' in the top right) is clicked
+                    vm.close = function() {
+                        $mdDialog.cancel();
+                    };
+
+                    vm.finishedUpdating = function(successful) {
+                        if (successful) {
+                            vm.close();
+                            vm.waiting = false;
+                            toastService.showToast('VPP configuration updated!');
+                            $window.location.reload(true);
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error configuring VPP');
+                        }
+                    };
+
+                    vm.finishedDeleting = function(successful) {
+                        if (successful) {
+                            vm.close();
+                            vm.waiting = false;
+                            toastService.showToast('VPP deleted!');
+                            $window.location.reload(true);
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error deleting VPP');
+                        }
+                    };
+
+                    vm.deleteVpp = function() {
+                        vm.waiting = true;
+                        httpService.deleteVpp(vm.vpp.name, vm.finishedDeleting);
+                    };
+
+                    //function called when the update button is clicked
+                    vm.updateConfig = function() {
+                        //TODO: Function to send a POST with the entered content in the form field
+                        httpService.configVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finishedUpdating);
+                    };
+                },
+                controllerAs: 'ConfigVppDialogCtrl',
+                templateUrl: 'templates/config-vpp-dialog.html',
+                parent: angular.element(document.body),
+                clickOutsideToClose:false
+            })
+        };
+
+        vm.addVpp = function() {
+            //show dialog
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+                    vm.vpp = {};
+                    //function called when the cancel button ( 'x' in the top right) is clicked
+                    vm.close = function() {
+                        $mdDialog.cancel();
+                    };
+
+                    vm.finished = function(successful) {
+                        if (successful) {
+                            vm.close();
+                            vm.waiting = false;
+                            toastService.showToast('New VPP added!');
+                            $window.location.reload(true);
+                        } else {
+                            vm.waiting = false;
+                            toastService.showToast('Error adding new VPP');
+                        }
+                    };
+
+                    //function called when the update button is clicked
+                    vm.updateConfig = function() {
+                        vm.waiting = true;
+                        //TODO: Function to send a POST with the entered content in the form field
+                        httpService.mountVpp(vm.vpp.name, vm.vpp.ip, vm.vpp.port, vm.vpp.un, vm.vpp.pw, vm.finished);
+                    };
+                },
+                controllerAs: 'NewVppDialogCtrl',
+                templateUrl: 'templates/new-vpp-dialog.html',
+                parent: angular.element(document.body),
+                clickOutsideToClose:false
+            })
+        };
+
+        vm.configInterface = function(interf) {
+            //show dialog
+            $mdDialog.show({
+                controller: function() {
+                    var vm = this;
+                    var oldDescription = interf.description;
+                    var oldAdminStatus = interf['admin-status'];
+                    vm.interf = interf;
+                    //function called when the cancel button ( 'x' in the top right) is clicked
+                    vm.cancel = function() {
+                        $mdDialog.cancel();
+                        vm.revert();
+                    };
+                    vm.revert = function() {
+                        interf['admin-status'] = oldAdminStatus;
+                        interf.description = oldDescription
+                    };
+                    vm.success = function() {
+                        $mdDialog.cancel();
+                    };
+                    //function called when the update button is clicked
+                    vm.updateConfig = function() {
+                        vm.waiting = true;
+
+                        //send a POST with the entered content in the form field
+                        httpService.updateInterface(vm.interf,vm.waiting,vm.cancel, vm.success);
+                    };
+                },
+                controllerAs: 'ConfigInterfaceDialogCtrl',
+                templateUrl: 'templates/config-interface-dialog.html',
+                parent: angular.element(document.body),
+                clickOutsideToClose:false
+            })
+        };
+        dataService.vppTopo.adaptToContainer();
+    });
+
+	vpp.register.controller('BridgeDomainsController', function(dataService, $location, $mdDialog, httpService, toastService) {
+                var vm = this;
+                vm.dataService = dataService;
+                var nextApp =  new nx.ui.Application;
+                nextApp.container(document.getElementById('bridge-domains-next-app'));
+                dataService.bridgeDomainsTopo.attach(nextApp);
+
+                window.addEventListener('resize', function () {
+                        if ($location.path() === '/bridgedomains') {
+                                dataService.bridgeDomainsTopo.adaptToContainer();
+                        }
+                });
+
+                dataService.vppTopo.tooltipManager().nodeTooltip().close();
+                dataService.bridgeDomainsTopo.tooltipManager().nodeTooltip().close();
+
+                vm.bridgedomains = dataService.bridgedomains;
+                vm.selectedBd = dataService.selectedBd;
+
+                dataService.bridgeDomainsTopo.on('clickNode',function(topo,node) {
+                    console.log(node);
+                });
+
+                vm.bdChanged = function() {
+                        dataService.injectBridgeDomainsTopoElements();
+                        dataService.buildTableContent();
+                };
+
+                vm.addBd = function() {
+                        //show dialog
+                        $mdDialog.show({
+                                controller: function(httpService) {
+                                        var vm = this;
+                                        vm.bd = {};
+                                        vm.waiting = false;
+
+                                        //function called when the cancel button ( 'x' in the top right) is clicked
+                                        vm.close = function() {
+                                                $mdDialog.cancel();
+                                        };
+
+                                        vm.isDone = function(status) {
+                                                vm.waiting = false;
+                                                if (status === 'success') {
+                                                        dataService.bridgedomains.push(vm.bd);
+                                                        dataService.selectedBd.name = vm.bd.name;
+                                                        dataService.injectBridgeDomainsTopoElements();
+                                                        dataService.buildTableContent();
+                                                        vm.close();
+                                                }
+                                        };
+
+                                        //function called when the update button is clicked
+                                        vm.updateConfig = function() {
+                                                vm.waiting = true;
+                                                //send a POST with the entered content in the form field
+                                                httpService.addBdToODL(vm.bd.name, vm.isDone);
+                                        };
+                                },
+                                controllerAs: 'NewBdDialogCtrl',
+                                templateUrl: 'templates/new-bd-dialog.html',
+                                parent: angular.element(document.body),
+                                clickOutsideToClose:false
+                        })
+                };
+
+                vm.deploy = function() {
+                    httpService.deploy();
+                };
+
+                vm.removeBd = function() {
+                    if(vm.selectedBd.name) {
+                            var successCallback = function(success) {
+                                if (success) {
+                                    console.log(vm.bridgedomains);
+                                    _.remove(vm.bridgedomains, {
+                                        name: vm.selectedBd.name
+                                    });
+                                    toastService.showToast('Bridge Domain Removed!');
+                                    vm.selectedBd.name = '';
+                                    dataService.clearInjectedInterfacesInBridgeDomainTopo();
+                                    dataService.injectBdIntoBridgeDomainsTopo();
+                                    dataService.tableContent.length = 0;
+                                } else {
+                                    toastService.showToast('Error removing Bridge Domain!');
+
+                                }
+                            };
+
+                        httpService.removeBdFromOdl(vm.selectedBd.name, successCallback);
+                    }
+                };
+    });
+});
+
+