lifecyclemgr/src/main/webapp/lifecyclemgr/js/app.js

   1 /*\r
   2 \r
   3     Copyright 2017, Huawei Technologies Co., Ltd.\r
   4 \r
   5     Licensed under the Apache License, Version 2.0 (the "License");\r
   6     you may not use this file except in compliance with the License.\r
   7     You may obtain a copy of the License at\r
   8 \r
   9             http://www.apache.org/licenses/LICENSE-2.0\r
  10 \r
  11     Unless required by applicable law or agreed to in writing, software\r
  12     distributed under the License is distributed on an "AS IS" BASIS,\r
  13     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  14     See the License for the specific language governing permissions and\r
  15     limitations under the License.\r
  16 \r
  17 */\r
  18 \r
  19 var app = angular.module("lcApp", ["ui.router", "ngTable"])/*, 'ui.bootstrap', 'ui.bootstrap.modal'*/\r
  20 \r
  21     /*.run(function($rootScope, $location, $state, LoginService) {\r
  22         $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){\r
  23             if (toState.authenticate && !LoginService.isAuthenticated()){\r
  24                 // User isn’t authenticated\r
  25                 $state.transitionTo("login");\r
  26                 event.preventDefault();\r
  27             }\r
  28         });\r
  29     })*/\r
  30     .run(function($rootScope, $location, $state, $stateParams) {\r
  31         $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){\r
  32             console.log("STATE CHANGE toState " + JSON.stringify(toState));\r
  33             console.log("STATE CHANGE fromState " + JSON.stringify(toParams));\r
  34             if($stateParams.id && toState.name == "home.lcTabs" && toParams.id == fromParams.id) {\r
  35                 //$state.transitionTo("home.lcTabs.detailInfo");\r
  36                 $state.go('home.lcTabs.detailInfo', {'id': toParams.id});\r
  37                 event.preventDefault();\r
  38             }\r
  39         });\r
  40         $rootScope.$on('$viewContentLoaded', function() {\r
  41             //call it here\r
  42             loadTemplate();\r
  43         });\r
  44     })\r
  45 \r
  46     /*.provider('modalState', function($stateProvider) {\r
  47         var provider = this;\r
  48         this.$get = function() {\r
  49             return provider;\r
  50         }\r
  51         this.state = function(stateName, options) {\r
  52             var modalInstance;\r
  53             $stateProvider.state(stateName, {\r
  54                 url: options.url,\r
  55                 onEnter: function($modal, $state) {\r
  56                     modalInstance = $modal.open(options);\r
  57                     modalInstance.result['finally'](function() {\r
  58                         modalInstance = null;\r
  59                         if ($state.$current.name === stateName) {\r
  60                             $state.go('^');\r
  61                         }\r
  62                     });\r
  63                 },\r
  64                 onExit: function() {\r
  65                     if (modalInstance) {\r
  66                         modalInstance.close();\r
  67                     }\r
  68                 }\r
  69             });\r
  70         };\r
  71     })*/\r
  72 \r
  73 \r
  74     .config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){/*modalStateProvider*/\r
  75         //$routeProvider.caseInsensitiveMatch = true;\r
  76         $urlMatcherFactoryProvider.caseInsensitive(true);\r
  77         $urlRouterProvider.otherwise('/home');\r
  78         //$locationProvider.html5Mode(true).hashPrefix('!');\r
  79         $stateProvider\r
  80             .state("home", {\r
  81 \r
  82                 url: "/home",\r
  83 \r
  84                 templateUrl : "templates/home.html",\r
  85                 controller : "homeCtrl"\r
  86 \r
  87             })\r
  88             .state("home.lcTabs", {\r
  89                 url: "/lcTabs/:id",\r
  90                 templateUrl : "templates/lctabs.html",\r
  91                 controller : "lcTabsCtrl"\r
  92             })\r
  93             .state("home.lcTabs.detailInfo", {\r
  94                 url : "/detailInfo",\r
  95                 templateUrl : "templates/detailInfo.html",\r
  96                 controller : "detailInfoCtrl"\r
  97             })\r
  98             /*.state("home.lcTabs.detailInfo1", {\r
  99                 url : "/detailInfo",\r
 100                 templateUrl : "templates/detailInfo.html",\r
 101                 controller : "detailInfoCtrl"\r
 102             })*/\r
 103             .state("home.lcTabs.topo", {\r
 104                 url : "/topo",\r
 105                 templateUrl : "templates/topo.html",\r
 106                 controller : "topoCtrl"\r
 107             })\r
 108             .state("home.lcTabs.inputData", {\r
 109                 url : "/inputData",\r
 110                 templateUrl : "templates/inputData.html",\r
 111                 controller : "inputDataCtrl"\r
 112             })\r
 113             .state("home.lcTabs.detailInfo.nfvoDetail", {\r
 114                 url : "/nfvoDetailInfo",\r
 115                 templateUrl: "templates/nfvoDetail.html",\r
 116                 controller: "nfvoDetailCtrl"\r
 117             })\r
 118 \r
 119             .state("home.lcTabs.detailInfo.vpnManager", {\r
 120                 url : "/vpnManager",\r
 121                 templateUrl : "templates/vpnManager.html",\r
 122                 controller : "vpnManagerCtrl"\r
 123             })\r
 124             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN", {\r
 125                 url: "/overlayVPN",\r
 126                 templateUrl : "templates/overlayVPN.html",\r
 127                 controller : "overlayVPNCtrl"\r
 128             })\r
 129             .state("home.lcTabs.detailInfo.vpnManager.underlayVPN", {\r
 130                 url: "/underlayVPN",\r
 131                 templateUrl : "templates/underlayVPN_L3.html",\r
 132                 controller : "underlayVPNCtrl"\r
 133             })\r
 134 \r
 135             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs", {\r
 136                 url: "/overlayTabs/:overlayId",\r
 137                 templateUrl : "templates/overlayTabs.html",\r
 138                 controller : "overlayTabsCtrl"\r
 139             })\r
 140             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections", {\r
 141                 url: "/vpnConnections",\r
 142                 templateUrl : "templates/vpnConnections.html",\r
 143                 controller : "vpnConnectionsCtrl"\r
 144             })\r
 145             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnGateway", {\r
 146                 url: "/vpnGateway",\r
 147                 templateUrl : "templates/vpnGateway.html",\r
 148                 controller : "vpnGatewayCtrl"\r
 149             })\r
 150             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.siteList", {\r
 151                 url: "/siteList",\r
 152                 templateUrl : "templates/siteList.html",\r
 153                 controller : "siteListCtrl"\r
 154             })\r
 155             .state("home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpcList", {\r
 156                 url: "/vpcList",\r
 157                 templateUrl : "templates/vpcList.html",\r
 158                 controller : "vpcListCtrl"\r
 159             })\r
 160         /*modalStateProvider.state("home.lcTabs1", {\r
 161             url: '/lcTabs',\r
 162             templateUrl: 'templates/lctabs.html'\r
 163         });*/\r
 164 \r
 165     })\r
 166 \r
 167     .controller('homeCtrl', function($scope, $compile, $state, $log, $timeout, DataService, NgTableParams) {\r
 168         $scope.param="lctableData";\r
 169         $scope.init = function() {\r
 170             jQuery.i18n.properties({\r
 171                 language : 'en-US',\r
 172                 name : 'lcm-template-parameters-i18n',\r
 173                 path : 'i18n/',\r
 174                 mode : 'map'\r
 175             });\r
 176             if(!DataService.getTableDataLoaded()) {\r
 177                 DataService.loadGetServiceData()\r
 178                     .then(function (response) {\r
 179                         if (response.data) {\r
 180                             $scope.tableData = response.data;\r
 181                             var tableData = response.data;\r
 182                             loadTableData();\r
 183                             //$timeout(loadTableData, 0);\r
 184                         }\r
 185                         else {\r
 186                             $scope.error = "Error!";\r
 187                                                         loadTableData();\r
 188                             //$timeout(loadTableData, 0);\r
 189                         }\r
 190                     }, function (reason) {\r
 191                         $scope.error = "Error ! " + reason;\r
 192                                                 loadTableData();\r
 193                         //$timeout(loadTableData, 0);\r
 194                     });\r
 195                 DataService.setTableDataLoaded();\r
 196             }\r
 197             $('#scalingTypeIn').on("change", function (e) {\r
 198                 var value = $(e.target).val();\r
 199                 if ('on' === value) {\r
 200                     $('#scalingTypeIn').attr("checked", "checked");\r
 201                     $('#scalingTypeOut').removeAttr("checked");\r
 202                 }\r
 203             });\r
 204             $('#scalingTypeOut').on("change", function (e) {\r
 205                 var value = $(e.target).val();\r
 206                 if ('on' === value) {\r
 207                     $('#scalingTypeOut').attr("checked", "checked");\r
 208                     $('#scalingTypeIn').removeAttr("checked");\r
 209                 }\r
 210             });\r
 211         };\r
 212 \r
 213         //loadTableData();\r
 214         $scope.callLcTab = function(id) {\r
 215             /*console.log("Call ME as hi" + id);\r
 216             $scope.param="lcTabData";\r
 217             DataService.getAllData($scope.param)\r
 218                 .then(function (data) {\r
 219                     if (data) {\r
 220                         $scope.lctabsData = data;\r
 221                         console.log("bye"+data.id);\r
 222                         loadTabData();\r
 223                     }\r
 224                     else {\r
 225                         $scope.error = "Incorrect username/password !";\r
 226                     }\r
 227                 }, function (reason) {\r
 228                     $scope.error = "Incorrect username/password !";\r
 229                 });\r
 230 \r
 231             $scope.row_id = id;*/\r
 232         }\r
 233         $scope.callModal = function(id) {\r
 234             console.log("Call ME as " + id);\r
 235             // $scope.row_id = id;\r
 236             //$state.go('home.lcTabs', {'id': id});\r
 237             //$("#popupModal").modal();\r
 238             /*$state.go('home.lcTabs.detailInfo', {'id': id});*/\r
 239         }\r
 240 \r
 241         function loadTabData() {\r
 242             console.log("hi tab");\r
 243             var tab_tpl = $(lcmModelTemplate).filter('#tabs').html();\r
 244             var html = Mustache.to_html(tab_tpl, $scope.lctabsData.tabData);\r
 245             $('#lctabArea').html(html);\r
 246         }\r
 247 \r
 248         function loadTableData() {\r
 249             console.log("In loadData()");\r
 250 \r
 251             var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
 252             var def_iconbutton_tpl = $(lcmModelTemplate).filter('#defaultIconButtons').html();\r
 253             /*var add_data = {"title":"Add", "clickAction":"showAddModal()"};*/\r
 254             var add_data = {"title":"Create", "type":"btn btn-default", "gType": "glyphicon-plus", "iconPosition":"left", "clickAction":"showAddModal()"};\r
 255             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
 256             var addhtml = Mustache.to_html(def_iconbutton_tpl, add_data);\r
 257             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
 258             $('#lcTableAction').html($compile(addhtml)($scope));\r
 259             //$('#lcTableAction').append($compile(deletehtml)($scope));\r
 260 \r
 261             $scope.checkboxes = { 'checked': false, items: {} };\r
 262 \r
 263             $scope.tableParams = new NgTableParams({count: 5, sorting: {name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 264             }, { counts:[5, 10, 15], dataset: $scope.tableData});\r
 265 \r
 266             $scope.$watch('checkboxes.checked', function(value) {\r
 267                                 $scope.checkboxes.items = [];\r
 268                 angular.forEach($scope.tableParams.data, function(item) {\r
 269                     if (angular.isDefined(item.id)) {\r
 270                         $scope.checkboxes.items[item.id] = value;\r
 271                     }\r
 272                 });\r
 273             });\r
 274 \r
 275             $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {tp_name: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 276             }, { counts:[5, 10, 15], dataset: $scope.tableData});\r
 277 \r
 278 \r
 279             $scope.selectedRow = null;  // initialize our variable to null\r
 280             $scope.setClickedRow = function(index, id){  //function that sets the value of selectedRow to current index\r
 281                 $scope.selectedRow = index;\r
 282                 console.log("Selected Row : " +id+" is "+ $scope.selectedRow);\r
 283                 //$state.go('home.lcTabs', {'id': id});\r
 284                 $state.go('home.lcTabs.detailInfo', {'id': id});\r
 285             }\r
 286 \r
 287 \r
 288 \r
 289             var text = $(lcmModelTemplate).filter('#textfield').html();\r
 290             var number = $(lcmModelTemplate).filter('#numeric').html();\r
 291             var dropDown = $(lcmModelTemplate).filter('#simpleDropdownTmpl').html();\r
 292 \r
 293             var dataText = {"ErrMsg" :     {"errmsg" : "Service name is required.", "modalVar":"lifecycleData.serviceName", "placeholder":"", "errtag":"lcnameErr", "errfunc":"validatename", "required":true}};\r
 294     \r
 295             $('#myModal .serviceName').html($compile(Mustache.to_html(text, dataText.ErrMsg))($scope));\r
 296 \r
 297             var serviceDescriptionText = {"ErrMsg" :     {"errmsg" : "Description is required.", "modalVar":"lifecycleData.description", "placeholder":"", "errtag":"lctemplateErr", "errfunc":"validatetemplate", "required":true}};\r
 298 \r
 299             $('#myModal .serviceDescription').html($compile(Mustache.to_html(text, serviceDescriptionText.ErrMsg))($scope));\r
 300 \r
 301             //var creatorText = {"ErrMsg" :     {"textboxErr" : "Creator is required.", "modalVar":"lifecycleData.creator", "placeholder":"Creator"}};\r
 302             /*$scope.data = {\r
 303                 "dropSimple_data": {\r
 304                     "title": "--Select--",\r
 305                     "items": [\r
 306                         {"itemLabel": "1.1"}, {"itemLabel": "1.2"}\r
 307                     ]\r
 308                 }\r
 309             }\r
 310             $('#myModal #plainDropDown').html($compile(Mustache.to_html(dropDown, $scope.data.dropSimple_data))($scope));*/\r
 311 \r
 312             DataService.generateTemplatesComponent()\r
 313                 .then(function (tmplatesResponse) {\r
 314                     console.log("Data Template :: ");\r
 315                     $log.info(tmplatesResponse);\r
 316                     var templatesInfo = translateToTemplatesInfo(tmplatesResponse);\r
 317                     document.getElementById("svcTempl").innerHTML = templatesInfo;\r
 318                   //  $scope.optionsValue = tmplatesResponse;\r
 319                    /* var dropSimple_data = {\r
 320                         "errmsg" : "Service template is required.",\r
 321                         "modalVar" : "lifecycleData.optSelect",\r
 322                         "labelField" : "templateName",\r
 323                         "optionsValue" : JSON.stringify(templatesInfo),\r
 324                         "errtag":"lcdropdownErr",\r
 325                         "errfunc":"validatedropdown",\r
 326                         "required":true\r
 327                     }*/\r
 328                     //$('#myModal #plainDropDown').html($compile(Mustache.to_html(dropDown, dropSimple_data))($scope));\r
 329                 }, function (reason) {\r
 330                     $scope.error = "Error ! " + reason;\r
 331                 });\r
 332                 \r
 333                 \r
 334             //$('#myModal .creator').html($compile(Mustache.to_html(text, creatorText.ErrMsg))($scope));\r
 335 \r
 336             var modelSubmit_data = {"title":"Submit", "clickAction":"saveData()"};\r
 337             var modelSubmit_html = Mustache.to_html(def_button_tpl, modelSubmit_data);\r
 338             $('#myModal #footerBtns').html($compile(modelSubmit_html)($scope));\r
 339 \r
 340             var modelDelete_data = {"title":"Close", "clickAction":"closeModal()"};\r
 341             var modelDelete_html = Mustache.to_html(def_button_tpl, modelDelete_data);\r
 342             $('#myModal #footerBtns').append($compile(modelDelete_html)($scope));\r
 343             \r
 344         }\r
 345 \r
 346 \r
 347         /**\r
 348          * generate templates html string\r
 349          * @param templates\r
 350          * @returns\r
 351          */\r
 352         function translateToTemplatesInfo(templates) {\r
 353             var options = '<option value="select">--select--</option>';\r
 354             var i;\r
 355             for (i = 0; i < templates.length; i += 1) {\r
 356                 var option = '<option value="' + templates[i].serviceTemplateId + '">' + templates[i].templateName\r
 357                     + '</option>';\r
 358                 options = options + option;\r
 359             }\r
 360 \r
 361             return options;\r
 362         }\r
 363 \r
 364         $scope.validatetextbox = function (value){\r
 365             if($scope.lifecycleData.service_name) {\r
 366                 $scope.textboxErr = false;\r
 367             }\r
 368             else\r
 369                 $scope.textboxErr = true;\r
 370         }\r
 371 \r
 372 \r
 373         $scope.checkAll = function() {\r
 374             console.log("Checked ..");\r
 375             angular.forEach($scope.tableData, function(data) {\r
 376                 //data.select = $scope.selectAll;\r
 377                 $scope.checkboxes.items[data.id]\r
 378             });\r
 379         };\r
 380         $scope.test = function(id) {\r
 381             $state.go('home.lcTabs.detailInfo', {'id': id});\r
 382 \r
 383         }\r
 384         \r
 385         $scope.validatename = function (value){\r
 386                 if($scope.lifecycleData.serviceName) {\r
 387                     $scope.lcnameErr = false;\r
 388                 }\r
 389                 else\r
 390                     $scope.lcnameErr = true;\r
 391             }\r
 392 \r
 393 \r
 394 \r
 395             $scope.validatetemplate = function (value){\r
 396                 if($scope.lifecycleData.description) {\r
 397                     $scope.lctemplateErr = false;\r
 398                 }\r
 399                 else\r
 400                     $scope.lctemplateErr = true;\r
 401             }\r
 402             $scope.validatedropdown = function (value){\r
 403                 if($scope.lifecycleData.optSelect || $("#svcTempl").val()) {\r
 404                     $scope.lcdropdownErr = false;\r
 405                 }\r
 406                 else\r
 407                     $scope.lcdropdownErr = true;\r
 408             }\r
 409 \r
 410         $scope.templateParam = function() {\r
 411             \r
 412           //  var template = $scope.lifecycleData.optSelect;\r
 413                     var template ={};\r
 414                         template.serviceTemplateId = $("#svcTempl").val();\r
 415             var lastSelTempCreateParam = DataService.getCreateParamJsonObj();\r
 416             if(template == undefined){\r
 417                 document.getElementById("templateParameters").innerHTML = "";\r
 418                 return;\r
 419             }            \r
 420             //if the template not changed, no need to update the page.\r
 421             if(lastSelTempCreateParam.templateId == template.serviceTemplateId &&  document.getElementById("templateParameters").innerHTML != ""){\r
 422                 return;\r
 423             }\r
 424             $.when(DataService.generateCreateParameters(template))\r
 425                 .then(function (tmplatesParamResponse) {\r
 426                     console.log("Data Param Template :: ");\r
 427                     $log.info(tmplatesParamResponse);\r
 428                     document.getElementById("templateParameters").innerHTML = tmplatesParamResponse;\r
 429                 }, function (reason) {\r
 430                     $scope.error = "Error ! " + reason;\r
 431                 });\r
 432 \r
 433         }\r
 434 \r
 435 \r
 436 \r
 437 \r
 438         $scope.showAddModal = function() {\r
 439             console.log("Showing Modal to Add data");\r
 440             //$scope.lifecycleData = {};\r
 441             //$scope.textboxErr = false;\r
 442             //$("#myModal").modal();\r
 443             $("#myModal").modal({}).draggable();\r
 444         }\r
 445         $scope.closeModal = function() {\r
 446             console.log("Closing Modal...");\r
 447             $('#myModal').modal('hide');\r
 448             //$state.reload();\r
 449         }\r
 450 \r
 451         $scope.editData = function(id) {\r
 452             $scope.textboxErr = false;\r
 453             $scope.ipv4Err = false;\r
 454             $scope.numericErr = false;\r
 455             console.log("To be edited : " + id);\r
 456             var dataFound = false;\r
 457             angular.forEach($scope.tableData, function(data) {\r
 458                 if(!dataFound) {\r
 459                     if (data.id == id) {\r
 460                         console.log("Found : " + data.id);\r
 461                         $scope.lifecycleData = data;\r
 462                         /*$scope.province.province_name = data.province_name;\r
 463                          $scope.province.ip = data.ip;\r
 464                          $scope.province.port = data.port;*/\r
 465 \r
 466                         $("#myModal").modal();\r
 467                         dataFound = true;\r
 468                     }\r
 469                 }\r
 470             });\r
 471         }\r
 472 \r
 473         $scope.saveData = function() {\r
 474             //collect service  base info\r
 475             var serviceBaseInfo = {\r
 476                  'name' :  $scope.lifecycleData.serviceName,\r
 477                  'description' : $scope.lifecycleData.description,\r
 478                  //'templateId' :  $scope.lifecycleData.optSelect.serviceTemplateId\r
 479                                  'templateId' :  $("#svcTempl").val()\r
 480             };\r
 481             //send message\r
 482             $.when(DataService.createService(serviceBaseInfo))\r
 483                 .then(function (response) {\r
 484                     $log.info(response);\r
 485                     if(response.status === 'checkfailed'){\r
 486                         return;\r
 487                     }else if (response.status === 'finished') {\r
 488                         $.when(queryService(response.serviceId)).then(function(serviceInstance){  \r
 489                             $scope.tableData.push(serviceInstance);\r
 490                             $scope.$apply();\r
 491                             $scope.tableParams.reload();\r
 492                             $('#myModal').modal('hide');\r
 493                         });\r
 494                     } else{\r
 495                         showErrorMessage('Create service failed',response);\r
 496                     }\r
 497                 });\r
 498         }\r
 499         $scope.deleteIndividualData = function(id){\r
 500             var deleteHandle = function(result) {\r
 501                 if (result) {\r
 502                     var remove = function() {\r
 503                         var pos = 0;\r
 504                         for(var i= 0; i < $scope.tableData.length; i++){    \r
 505                             if($scope.tableData[i].serviceId === id){\r
 506                                 pos = i;\r
 507                                 break;\r
 508                             }\r
 509                         }\r
 510                         $scope.tableData.splice(pos, 1);\r
 511                         $scope.$apply();\r
 512                         $scope.tableParams.reload();\r
 513                     };\r
 514                     $.when(DataService.deleteService(id))\r
 515                     .then(function(response) {\r
 516                         if (response.status === 'finished') {\r
 517                             remove();\r
 518                         } else {\r
 519                             showErrorMessage('Delete service failed',response);\r
 520                         }\r
 521                     });\r
 522                 }\r
 523             };\r
 524             bootbox.confirm("Do you confirm to delete service?", deleteHandle);     \r
 525         };\r
 526 \r
 527         $scope.scaleData = function (id) {\r
 528             var nsInstanceId = id;\r
 529             $('#scaleNS').click(\r
 530                 function() {\r
 531                     var scaleIn = $('#scalingTypeIn').attr('checked');\r
 532                     var scaleType = scaleIn === undefined ? 'SCALE_OUT' : 'SCALE_IN';\r
 533                     var aspectId = $('#scalingAspect').val();\r
 534                     var numberOfSteps = $('#numberOfSteps').val();\r
 535                     var resultHandleFun = function(response) {\r
 536                         if (response.status === 'finished') {\r
 537                             console.log('scale successfully!');\r
 538                         } else {\r
 539                             console.log('Scaling service failed! ' + response);\r
 540                             //showErrorMessage('Scaling service failed',response);\r
 541                         }\r
 542                     };\r
 543                     DataService.scaleService(nsInstanceId, scaleType, aspectId, numberOfSteps, resultHandleFun);\r
 544                     $('#scaleNS').unbind('click');\r
 545                 }\r
 546             );\r
 547             $('#scaleOptionDialog').modal();\r
 548         };\r
 549 \r
 550     })\r
 551 \r
 552     .controller('lcTabsCtrl', function($scope, $state, $stateParams) {\r
 553         //console.log("$stateParams.id:: " + $stateParams.id);\r
 554         //$state.transitionTo("home.lcTabs({id: "+$stateParams.id+"})");\r
 555 \r
 556 \r
 557         $state.go('home.lcTabs.detailInfo', {'id': $stateParams.id});\r
 558 \r
 559     })\r
 560 \r
 561     .controller('detailInfoCtrl', function($scope, $stateParams, $compile, DataService) {\r
 562         console.log("detailInfoCtrl --> $stateParams.id:: " + $stateParams.id);\r
 563         //$scope.currentId = $stateParams.id;\r
 564         $scope.rightPanelHeader = "VPN Manager";\r
 565         var rowData = DataService.getSavedLCData($stateParams.id);\r
 566         var jsonData =[];\r
 567         if(rowData.serviceType === "SDNO" || rowData.serviceType === "NFVO"){\r
 568             jsonData[0] = {"id": $stateParams.id, "name": rowData.serviceType};\r
 569         }\r
 570         else{\r
 571             jsonData = DataService.loadServiceTopoSequence($stateParams.id);\r
 572         }\r
 573         $(".accordion").html("");\r
 574         for (var i = 0; i < jsonData.length; i++) {\r
 575             //console.log("jsonData Name: " + jsonData[i].name);\r
 576             if (jsonData[i].name == "SDNO") {\r
 577                 //$("#sdnoLink").text(jsonData[i].name.toUpperCase());\r
 578                 //console.log("Adding Accordian to SDNO");\r
 579                 $(".accordion").append($compile(addAccordionData("sdno", jsonData[i].name.toUpperCase(), jsonData[i].id))($scope));\r
 580             }\r
 581             else if (jsonData[i].name == "NFVO") {\r
 582                 //console.log("Adding Accordian to NFVO");\r
 583                 $(".accordion").append($compile(addAccordionData("nfvo", jsonData[i].name.toUpperCase(), jsonData[i].id))($scope));\r
 584             }\r
 585             else {\r
 586 \r
 587             }\r
 588         }\r
 589 \r
 590         function addAccordionData(type, text, id) {\r
 591             console.log("id:"+id);\r
 592             var content = '';\r
 593             content += '<div class="panel panel-default"><div class="panel-heading">';\r
 594             content += '<h6 class="panel-title">';\r
 595             content += '<a style="text-decoration:none;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne_'+type+'" ui-sref=".vpnManager" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/vpnManager">';\r
 596             content += '<span id="sdnoLink">'+text+'</span></a>';\r
 597             content += '</h6></div>';\r
 598             if(type == "sdno") {\r
 599                 content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse in">';\r
 600             } else {\r
 601                 content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse">';\r
 602             }\r
 603             //content += '<div id="collapseOne_' + type + '" class="panel-collapse collapse" ui-sref=".vpnManager" ui-sref-active="link_active_DetailInfo">';\r
 604 \r
 605             content += '<ul class="list-group nomargin">';\r
 606 \r
 607             if(type == "sdno") {\r
 608                 /*content += '<li id="overLink" class="list-group-item selected textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".overlayVPN" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/overlayVPN">Overlay VPN</a>';\r
 609                 content += '</li>';\r
 610                 content += '<li id="underLink" class="list-group-item textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><a ui-sref=".underlayVPN" ui-sref-active="link_active_DetailInfo" href="#/home/lcTabs/'+id+'/detailInfo/underlayVPN">Underlay VPN</a>';\r
 611                 content += '</li>';*/\r
 612             }\r
 613             else if(type == "gso"){\r
 614                 //content += '<li id="linkgso" class="list-group-item textAlign"><!--<span class="glyphicon glyphicon-pencil text-primary"></span>--><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><span>OPEN-O</span></li>';\r
 615             }\r
 616             else if(type == "nfvo"){\r
 617                 //content += '<li id="linknfvo" class="list-group-item textAlign"><span class="glyphicon glyphicon-pencil text-primary pencilimg"></span><span>ZTE</span></li>';\r
 618             }\r
 619             content += '</ul></div></div>';\r
 620             return content;\r
 621         }\r
 622     })\r
 623 \r
 624     .controller('topoCtrl', function($scope, $stateParams, $log, DataService) {\r
 625         console.log("vpnManagerCtrl --> $stateParams.id:: " + $stateParams.id);\r
 626         $scope.msg = $stateParams.id;\r
 627     })\r
 628 \r
 629     /*-------------------------------------------------------------------------------VPN Manager---------------------------------------------------------------------*/\r
 630 \r
 631     .controller('vpnManagerCtrl', function($scope, $stateParams, $log, DataService) {\r
 632         console.log("vpnManagerCtrl --> $stateParams.id:: " + $stateParams.id);\r
 633         //$scope.rightPanelHeader = "VPN Manager";\r
 634         /*var vtab_tpl = $(lcmModelTemplate).filter('#vtabs').html();\r
 635         var vTabData = {\r
 636             "items": [{\r
 637                 "tablabel": "Overlay VPN",\r
 638                 "isActive": false\r
 639             }, {\r
 640                 "tablabel": "Underlay VPN",\r
 641                 "isActive": false\r
 642             }]\r
 643         };\r
 644         var html = Mustache.to_html(vtab_tpl, vTabData);\r
 645         $('#vpnLinks').html(html);*/\r
 646 \r
 647     })\r
 648 \r
 649     /*-------------------------------------------------------------------------------OverlayVPN---------------------------------------------------------------------*/\r
 650 \r
 651     .controller("overlayVPNCtrl", function($scope, $rootScope, $compile, DataService, NgTableParams){\r
 652         $scope.message = "Overlay VPN";\r
 653 \r
 654         $scope.init = function() {\r
 655             //console.log("Overlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);\r
 656             DataService.getOverlayData()\r
 657                 .then(function(data){\r
 658                     $scope.overlayData = data.overlayData;\r
 659                     console.log("Data: ");\r
 660                     loadButtons();\r
 661                 }, function(reason){\r
 662                     $scope.message = "Error is :" + JSON.stringify(reason);\r
 663                 });\r
 664         }\r
 665         function loadButtons() {\r
 666             //console.log("Got it : " + $scope.$parent.getTemplate("defaultButtons"));\r
 667             /*var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
 668             console.log("template: " + def_button_tpl);\r
 669 \r
 670             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
 671             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
 672             $('div.overlayAction').html($compile(deletehtml)($scope));*/\r
 673 \r
 674             $scope.tableParams = new NgTableParams({count: 3, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 675             }, { counts:[], dataset: $scope.overlayData});\r
 676 \r
 677             $scope.checkboxes = { 'checked': false, items: {} };\r
 678 \r
 679             $scope.$watch('checkboxes.checked', function(value) {\r
 680                                 $scope.checkboxes.items = [];\r
 681                 angular.forEach($scope.tableParams.data, function(item) {\r
 682                     if (angular.isDefined(item.id)) {\r
 683                         $scope.checkboxes.items[item.id] = value;\r
 684                     }\r
 685                 });\r
 686             });\r
 687         }\r
 688         $scope.checkAll = function() {\r
 689             console.log("Checked ..");\r
 690             angular.forEach($scope.overlayData, function(data) {\r
 691                 $scope.checkboxes.items[user.id]\r
 692             });\r
 693         };\r
 694 \r
 695         $scope.rowHighilited=function(row)\r
 696         {\r
 697             $scope.selectedRow = row;\r
 698         }\r
 699 \r
 700     })\r
 701 \r
 702     /*-------------------------------------------------------------------------------UnderlayVPN---------------------------------------------------------------------*/\r
 703 \r
 704     .controller("underlayVPNCtrl", function($scope, $rootScope, $compile, DataService, NgTableParams){\r
 705         $scope.message = "Underlay VPN";\r
 706         $scope.tpTableShowing = false;\r
 707 \r
 708         $scope.init = function() {\r
 709             //console.log("Underlay VPN... ng-init + " +  $rootScope.lcmModelTemplate);\r
 710             DataService.getUnderlayData()\r
 711                 .then(function(response){\r
 712                     $scope.underlayVPN = response.data.underlayVPN;\r
 713                     console.log("Data: ");\r
 714                     loadButtons();\r
 715                 }, function(reason){\r
 716                     $scope.message = "Error is :" + JSON.stringify(reason);\r
 717                 });\r
 718         }\r
 719         function loadButtons() {\r
 720             /*var def_button_tpl = $(lcmModelTemplate).filter('#defaultButtons').html();\r
 721             //console.log("template: " + def_button_tpl);\r
 722 \r
 723             var delete_data = {"title":"Delete Selected", "clickAction":"deleteData()"};\r
 724             var deletehtml = Mustache.to_html(def_button_tpl, delete_data);\r
 725             $('div.underlayAction').html($compile(deletehtml)($scope));*/\r
 726 \r
 727             $scope.tableParams = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 728             }, { counts:[5, 10], dataset: $scope.underlayVPN});\r
 729 \r
 730             $scope.checkboxes = { 'checked': false, items: {} };\r
 731 \r
 732             $scope.$watch('checkboxes.checked', function(value) {\r
 733                                           $scope.checkboxes.items = [];\r
 734                 angular.forEach($scope.tableParams.data, function(item) {\r
 735                     if (angular.isDefined(item.id)) {\r
 736                         $scope.checkboxes.items[item.id] = value;\r
 737                     }\r
 738                 });\r
 739             });\r
 740 \r
 741             /*$scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 742             }, { counts:[5, 10], dataset: $scope.underlayVPN.tp_details});*/\r
 743         }\r
 744         $scope.checkAll = function() {\r
 745             console.log("Checked ..");\r
 746             angular.forEach($scope.underlayVPN.underlayData, function(data) {\r
 747                 $scope.checkboxes.items[data.id]\r
 748             });\r
 749         };\r
 750 \r
 751         $scope.loadTPLinkData = function(id, row){\r
 752             $scope.selectedRow = row;\r
 753             $scope.tpTableShowing = true;\r
 754             console.log("Underlay table row click");\r
 755             var tp_detData = DataService.getTPLinkData(id);\r
 756             $scope.tableParams_tpDetails = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 757             }, { counts:[5, 10], dataset: tp_detData});\r
 758         }\r
 759 \r
 760         $scope.rowHighilited=function(row)\r
 761         {\r
 762             $scope.selectedRow = row;\r
 763         }\r
 764 \r
 765     })\r
 766 \r
 767     .controller('inputDataCtrl', function($scope, $stateParams, $log, DataService) {\r
 768         console.log("inputDataCtrl --> $stateParams.id:: " + $stateParams.id);\r
 769         var rowData = DataService.getSavedLCData($stateParams.id);\r
 770         $scope.inputData = rowData.inputParameters;\r
 771         $log.info($scope.inputData);\r
 772         $("div.inputDataElements").html("");\r
 773         $("div.inputDataElements").append(convertInputsToUI('', 'show', $scope.inputData));\r
 774 \r
 775     })\r
 776 \r
 777     .controller('nfvoDetailCtrl', function($scope, $stateParams, $compile, DataService) {\r
 778         console.log("nfvoDetailCtrl --> $stateParams.id:: " + $stateParams.id);\r
 779         //$scope.currentId = $stateParams.id;\r
 780 \r
 781         var jsonData = DataService.loadNfvoServiceDetails($stateParams.id);\r
 782         var table_tpl = $(lcmModelTemplate).filter('#table').html();\r
 783         var vnfData = fetchDataForVnf(jsonData);\r
 784         $('#vnfInfoTable').html(Mustache.to_html(table_tpl, vnfData));\r
 785 \r
 786         var vlData = fetchDataForVl(jsonData);\r
 787         $('#vlInfoTable').html(Mustache.to_html(table_tpl, vlData));\r
 788 \r
 789         var vnffgData = fetchDataForVnffg(jsonData);\r
 790         $('#vnffgInfoTable').html(Mustache.to_html(table_tpl, vnffgData));\r
 791 \r
 792         function fetchDataForVnf(jsonData) {\r
 793             var header = ["Vnf instance Name"];\r
 794             var rowData = jsonData.vnfInfoId.map(function (vnfInfo) {\r
 795                 return {"values": [vnfInfo.vnfInstanceName]}\r
 796             });\r
 797             return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
 798         }\r
 799 \r
 800         function fetchDataForVl(jsonData) {\r
 801             var header = ["Network Resource Name","Link Port Resource Name"];\r
 802             var rowData = jsonData.vlInfo.map(function (vl) {\r
 803                 return {"values": [vl.networkResource.resourceName, vl.linkPortResource.resourceName]}\r
 804             });\r
 805             return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
 806         }\r
 807 \r
 808         function fetchDataForVnffg(jsonData) {\r
 809             var header = ["vnfInstanceId of vnffg instance","vlInstanceId of vnffg instance","cpInstanceId of vnffg instance", "nfpInstanceId of vnffg instance"];\r
 810             var rowData = jsonData.vnffgInfo.map(function (vnffg) {\r
 811                 return {"values": [vnffg.vnfId, vnffg.virtualLinkId, vnffg.cpId, vnffg.nfp]}\r
 812             });\r
 813             return {"itemHeader": header,"rowitem": rowData,"striped": false,"border": true,"hover": true,"condensed": false,"filter": false,"action": "","searchField": ""}\r
 814         }\r
 815 \r
 816     })\r
 817 \r
 818     .controller('overlayTabsCtrl', function($scope, $state) {\r
 819         $state.go('home.lcTabs.detailInfo.vpnManager.overlayVPN.overlayTabs.vpnConnections');\r
 820     })\r
 821 \r
 822     .controller('vpnConnectionsCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
 823         $scope.message = "VPN Connections";\r
 824         var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnConnections");\r
 825         $scope.vpnConnTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 826         }, { counts:[5, 10], dataset: rowData});\r
 827     })\r
 828 \r
 829     .controller('vpnGatewayCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
 830         $scope.message = "VPN Gateway";\r
 831         var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpnGateways");\r
 832         $scope.vpnGateTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 833         }, { counts:[5, 10], dataset: rowData});\r
 834     })\r
 835 \r
 836     .controller('siteListCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
 837         $scope.message = "Site List";\r
 838         //var rowData = DataService.getSiteListData();\r
 839         DataService.getSiteListData()\r
 840             .then(function (response) {\r
 841                 $scope.siteListData = response.sites;\r
 842                 $scope.siteTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 843                 }, { counts:[5, 10], dataset: $scope.siteListData});\r
 844             }, function (reason) {\r
 845                 $scope.message = "Error is :" + JSON.stringify(reason);\r
 846             });\r
 847     })\r
 848 \r
 849     .controller('vpcListCtrl', function($scope, $stateParams, NgTableParams, DataService) {\r
 850         $scope.message = "VPN List";\r
 851         var rowData = DataService.getOverlayVPNConnData($stateParams.overlayId, "vpcList");\r
 852         $scope.vpcListTable = new NgTableParams({count: 5, sorting: {id: 'asc'}    //{page: 1,count: 10,filter: {name: 'M'},sorting: {name: 'desc'}\r
 853         }, { counts:[5, 10], dataset: rowData});\r
 854     })\r
 855 \r
 856 \r
 857 \r
 858 \r
 859 \r
 860 var lcmModelTemplate = "";\r
 861 function loadTemplate() {\r
 862         //alert("sai");\r
 863     $.get('/openoui/framework/template.html', function (template) {\r
 864         lcmModelTemplate += template;\r
 865     });\r
 866     $.get('/openoui/framework/templateContainer.html', function (template) {\r
 867         lcmModelTemplate += template;\r
 868     });\r
 869     $.get('/openoui/framework/templateWidget.html', function (template) {\r
 870         //console.log("Template is : "+template);\r
 871         lcmModelTemplate += template;\r
 872     });\r
 873     $.get('/openoui/framework/templateNotification.html', function (template) {\r
 874         lcmModelTemplate += template;\r
 875     });\r
 876     $.get('/openoui/framework/templateFunctional.html', function (template) {\r
 877         lcmModelTemplate += template;\r
 878     });\r
 879 }\r