catalog/src/main/webapp/catalog/js/template/tmDetailController.js

   1 /*
   2  * Copyright 2016-2017 ZTE Corporation.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  *     http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16 var vm = avalon.define({
  17     $id : "tmDetailController",
  18     templateId : "",//store the Id of service template which shows in Topology tab page
  19     globalNodesData: {},//store the nodes data which shows in Topology tab page
  20     templateData : [
  21         {href: "#topology", name: "Topology", value: true},
  22         {href: "#nodes", name: "Nodes", value: false}
  23     ],
  24     $language: {
  25         "sProcessing": "<img src='../common/thirdparty/data-tables/images/loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"
  26         + $.i18n.prop("nfv-nso-iui-table-sProcess") + "</span>",
  27         "sLengthMenu": $.i18n.prop("nfv-nso-iui-table-sLengthMenu"),
  28         "sZeroRecords": $.i18n.prop("nfv-nso-iui-table-sZeroRecords"),
  29         "sInfo": "<span class='seperator'>  </span>" + $.i18n.prop("nfv-nso-iui-table-sInfo"),
  30         "sInfoEmpty": $.i18n.prop("nfv-nso-iui-table-sInfoEmpty"),
  31         "sGroupActions": $.i18n.prop("nfv-nso-iui-table-sGroupActions"),
  32         "sAjaxRequestGeneralError": $.i18n.prop("nfv-nso-iui-table-sAjaxRequestGeneralError"),
  33         "sEmptyTable": $.i18n.prop("nfv-nso-iui-table-sEmptyTable"),
  34         "oPaginate": {
  35             "sPrevious": $.i18n.prop("nfv-nso-iui-table-sPrevious"),
  36             "sNext": $.i18n.prop("nfv-nso-iui-table-sNext"),
  37             "sPage": $.i18n.prop("nfv-nso-iui-table-sPage"),
  38             "sPageOf": $.i18n.prop("nfv-nso-iui-table-sPageOf")
  39         }
  40     },
  41     $restUrl: {
  42         queryNodeTemplateUrl: "/openoapi/catalog/v1/servicetemplates/{0}/nodetemplates",
  43         queryTemplateInfoUrl: "/openoapi/catalog/v1/servicetemplates"
  44     },
  45     $init: function () {
  46         vm.$initTemplateData();
  47         vm.$initTopoNodesData();
  48     },
  49     $initTemplateData: function () {
  50         $.ajax({
  51             type: "GET",
  52             url: vm.$restUrl.queryTemplateInfoUrl,
  53             success: function (resp) {
  54                 if (resp) {
  55                     vm.nodesTab.servicesTemplateData = [];
  56                     for (var i = 0; i < resp.length; i++) {
  57                         //generate node table display data
  58                         vm.nodesTab.servicesTemplateData.push(resp[i]);
  59                     }
  60                     vm.nodesTab.$initNfvNodesTab();
  61                 }
  62             },
  63             error: function () {
  64                 commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
  65             }
  66         });
  67     },
  68     $initTopoNodesData: function () {
  69         $.ajax({
  70             type: "GET",
  71             url: vm.$restUrl.queryNodeTemplateUrl,
  72             success: function (resp) {
  73                 if (resp) {
  74                     vm.nodesDetail.nodesTemplateDetailData = [];
  75                     var nodesTempData = [];
  76                     for (var i = 0; i < resp.length; i++) {
  77                         //generate node table display data
  78                         var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
  79                         nodesTempData.push(nodeTemplate);
  80                     }
  81                     vm.globalNodesData[vm.templateId] = nodesTempData;
  82                     //generate topology graph display data
  83                     vm.nodesDetail.nodesTemplateDetailData = resp;
  84                     //initialize topology data
  85                     vm.topologyTab.topoTemplateData = topoUtil.generateTopoTemplate(vm.globalNodesData[vm.templateId]);
  86                     topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
  87                 }
  88             },
  89             error: function () {
  90                 commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
  91             }
  92         });
  93     },
  94     topologyTab: {
  95         topology: "topology.html",
  96         vnfTip: $.i18n.prop("nfv-topology-iui-vnf-tip"),
  97         btnTip: $.i18n.prop("nfv-topology-iui-btn-return-tip"),
  98         topoTemplateData: [],
  99         boxTopoDatas: [],
 100         networkTopoDatas: [],
 101         isShowNum: false,
 102         returnBtnVisible: false,
 103         $getColor: function (index) {
 104             return topoUtil.getColor(index);
 105         },
 106         $getCidr: function (properties) {
 107             return topoUtil.getCidr(properties);
 108         },
 109         $getCpTop: function (index, parentBoxId) {
 110             return topoUtil.getCpTop(index, parentBoxId);
 111         },
 112         $initTopology: function () {
 113             topoUtil.initTopoData(vm.topologyTab.topoTemplateData.$model);
 114         },
 115         $showTopo: function (id, name) {
 116             vm.topologyTab.$showTopoDetails("block", id, name);
 117         },
 118         $showVnfTopo: function (templateId) {
 119             vm.topologyTab.returnBtnVisible = true;
 120             vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + templateId + "/nodetemplates";
 121             vm.$init();
 122         },
 123         $returnNS: function () {
 124             vm.topologyTab.returnBtnVisible = false;
 125             vm.$restUrl.queryNodeTemplateUrl = "/openoapi/catalog/v1/servicetemplates/" + vm.templateId + "/nodetemplates";
 126             vm.$init();
 127         },
 128         $showTopoDetails: function (isShow, nodetypeid, nodetypename) {
 129             vm.nodesDetail.isShow = isShow;
 130             if (isShow == "block") {
 131                 vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),
 132                     $('#' + vm.nodesDetail.detailData[0].id).click();
 133                 vm.nodesDetail.detailData[0].isActive = true;
 134                 vm.nodesDetail.$initTopoNodesDetailTable(nodetypeid);
 135             }
 136         },
 137
 138     },
 139     nodesTab: {
 140         servicesTemplateData: [],
 141         $nodesTabId: "ict_nodes_template_table",
 142         $nodesTemplateTabFields: {// table columns
 143             table: [
 144                 {"mData": "serviceTemplateId", name: "ID", "bVisible": false},
 145                 {"mData": "", name: "", "sClass": 'details-control'},
 146                 {"mData": "templateName", name: $.i18n.prop("nfv-template-iui-field-templatename")},
 147                 {"mData": "vendor", name: $.i18n.prop("nfv-template-iui-field-vendor")},
 148                 {"mData": "version", name: $.i18n.prop("nfv-template-iui-field-version")},
 149                 {"mData": "csarid", name: "packageID", "bVisible": false},
 150                 {"mData": "type", name: $.i18n.prop("nfv-template-iui-field-type")},
 151             ]
 152         },
 153         $initNfvNodesTab: function () {
 154             var setting = {};
 155             setting.language = vm.$language;
 156             setting.paginate = true;
 157             setting.info = true;
 158             //setting.sort = true;
 159             setting.columns = vm.nodesTab.$nodesTemplateTabFields.table;
 160             setting.restUrl = vm.$restUrl.queryTemplateInfoUrl;
 161             setting.tableId = vm.nodesTab.$nodesTabId;
 162             //serverPageTable.initTableWithData(setting,vm.nodesTab.$nodesTabId + '_div',vm.nodesTab.servicesTemplateData.$model);
 163             serverPageTable.initDataTable(setting, {}, vm.nodesTab.$nodesTabId + '_div');
 164             $('#' + vm.nodesTab.$nodesTabId + '>tbody').on("click", 'td.details-control', function () {
 165                 var tr = $(this).closest('tr');
 166                 var table = $('#' + vm.nodesTab.$nodesTabId).dataTable();
 167                 if (table.fnIsOpen(tr[0])) {
 168                     table.fnClose(tr[0]);
 169                     tr.removeClass('shown');
 170                 }
 171                 else {
 172                     table.fnOpen(tr[0], vm.nodesTab.nodesList.$format_Detail(table,tr[0]), 'details');
 173                     tr.addClass('shown');
 174                 }
 175             });
 176         },
 177         $initNodesData: function (tempId) {
 178             $.ajax({
 179                 type: "GET",
 180                 //url: vm.$restUrl.queryNodeTemplateUrl,
 181                 url: "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates",
 182                 success: function (resp) {
 183                     if (resp) {
 184                         var nodesTempData = [];
 185                         for (var i = 0; i < resp.length; i++) {
 186                             //generate node table display data
 187                             var nodeTemplate = topoUtil.generateNodeTemplate(resp[i]);
 188                             nodesTempData.push(nodeTemplate);
 189                         }
 190                         vm.nodesTab.nodesList.nodesData[tempId] = nodesTempData;
 191                         //generate topology graph display data
 192                         vm.nodesTab.nodesList.$initNodesTable(tempId);
 193                     }
 194                 },
 195                 error: function () {
 196                     commonUtil.showMessage($.i18n.prop("nfv-topology-iui-message-error"), "danger");
 197                 }
 198             });
 199         },
 200         //nodes list table
 201         nodesList: {
 202             nodesData: {},
 203             tempId:"",
 204             $nodesTabDataId: "ict_nodes_table",
 205             $nodesTabFields: {// table columns
 206                 table: [
 207                     {"mData": "id", name: "ID", "bVisible": false},
 208                     {
 209                         "mData": "name",
 210                         name: $.i18n.prop("nfv-templateDetail-iui-field-nodetypename"),
 211                         "bSortable": true,
 212                         "fnRender": tmDetailUtil.nameRender
 213                     },
 214                     {"mData": "type", name: $.i18n.prop("nfv-templateDetail-iui-field-type"), "bSortable": false},
 215                     {
 216                         "mData": "containedin",
 217                         name: $.i18n.prop("nfv-templateDetail-iui-field-containedin"),
 218                         "bSortable": false
 219                     },
 220                     {
 221                         "mData": "deployedon",
 222                         name: $.i18n.prop("nfv-templateDetail-iui-field-deployedon"),
 223                         "bSortable": false
 224                     },
 225                     {
 226                         "mData": "connectedto",
 227                         name: $.i18n.prop("nfv-templateDetail-iui-field-connectedto"),
 228                         "bSortable": false
 229                     },
 230                     {
 231                         "mData": "virtuallinksto",
 232                         name: $.i18n.prop("nfv-templateDetail-iui-field-virtuallinksto"),
 233                         "bSortable": false
 234                     }
 235                 ]
 236             },
 237             $initNodesTable: function (tempId) {
 238                 var setting = {};
 239                 setting.language = vm.$language;
 240                 setting.paginate = true;
 241                 setting.info = true;
 242                 //setting.sort = true;
 243                 setting.columns = vm.nodesTab.nodesList.$nodesTabFields.table;
 244                 setting.restUrl = "/openoapi/catalog/v1/servicetemplates/" + tempId + "/nodetemplates";
 245                 setting.tableId = vm.nodesTab.nodesList.$nodesTabDataId + "_" + tempId;
 246                 //serverPageTable.initTableWithData(setting,vm.nodesTab.nodesList.$nodesTabDataId + '_div',vm.nodesTab.nodesList.nodesData.$model);
 247                 serverPageTable.initTableWithoutLib(setting, {}, setting.tableId + '_div');
 248             },
 249             $format_Detail: function (oTable, nTr) {
 250                 var aData = oTable.fnGetData(nTr);
 251                 var tempId = aData.serviceTemplateId;
 252                 vm.nodesTab.nodesList.tempId = tempId;
 253                 var tableId = "ict_nodes_table" + "_" + tempId + "_div";
 254                 var sOut = '<div class="row-fluid" data-name="table_zone"><div class="col-xs-12" id="'+tableId+'"></div></div>'
 255                 vm.nodesTab.$initNodesData(tempId);
 256                 return sOut;
 257             },
 258         },
 259     },
 260     //Nodes Details
 261     nodesDetail: {
 262         nodesTemplateDetailData: [], //used in topo tab page to show node detail
 263         detailTitle: "",
 264         isShow: "none",
 265         detailIndex: 0,
 266         detailData: [
 267             {id: "general", name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-general"), isActive: true},
 268             {
 269                 id: "properties",
 270                 name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-properties"),
 271                 isActive: false
 272             },
 273             {
 274                 id: "relationShips",
 275                 name: $.i18n.prop("nfv-templateDetail-nodesTab-iui-tab-relationShips"),
 276                 isActive: false
 277             }
 278         ],
 279         $showDetails: function (isShow, nodetypeid, nodetypename,tempId) {
 280             vm.nodesDetail.isShow = isShow;
 281             if (isShow == "block") {
 282                 vm.nodesDetail.detailTitle = nodetypename + " " + $.i18n.prop("nfv-templateDetail-nodesTab-iui-title-nodeDetail"),
 283                     $('#' + vm.nodesDetail.detailData[0].id).click();
 284                 vm.nodesDetail.detailData[0].isActive = true;
 285                 vm.nodesDetail.$initNodeDetailTable(nodetypeid,tempId);
 286             }
 287         },
 288         detailCondChange: function (index) {
 289             vm.nodesDetail.detailIndex = index;
 290             for (var i = 0; i < vm.nodesDetail.detailData.length; i++) {
 291                 vm.nodesDetail.detailData[i].isActive = false;
 292             }
 293             vm.nodesDetail.detailData[index].isActive = true;
 294         },
 295         $tableFields : {// table columns
 296             general: [
 297                 {
 298                     "mData": "key",
 299                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),
 300                     "bSortable": false
 301                 },
 302                 {
 303                     "mData": "value",
 304                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),
 305                     "bSortable": false
 306                 }
 307             ],
 308             properties: [
 309                 {
 310                     "mData": "key",
 311                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-key"),
 312                     "bSortable": false
 313                 },
 314                 {
 315                     "mData": "value",
 316                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-value"),
 317                     "bSortable": false
 318                 }
 319             ],
 320             relationShips: [
 321                 {
 322                     "mData": "sourceNodeName",
 323                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-sourceNodeName"),
 324                     "bSortable": false
 325                 },
 326                 {
 327                     "mData": "targetNodeName",
 328                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-targetNodeName"),
 329                     "bSortable": false
 330                 },
 331                 {
 332                     "mData": "type",
 333                     "name": $.i18n.prop("nfv-templateDetail-nodesTab-iui-field-type"),
 334                     "bSortable": false
 335                 }
 336             ]
 337         },
 338         $initNodeDetailTable: function (nodetemplateid,tempId) {
 339             var data = topoUtil.getCurrentDetailData(vm.nodesTab.nodesList.nodesData[tempId], nodetemplateid);
 340             //initialize three tables of nodedetail
 341             $.each(vm.nodesDetail.$tableFields, function (key, value) {
 342                 var setting = {};
 343                 setting.language = vm.$language;
 344                 setting.paginate = false;
 345                 setting.info = false;
 346                 setting.columns = value;
 347                 setting.tableId = "ict_table_" + key;
 348                 serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);
 349             });
 350         },
 351         $initTopoNodesDetailTable: function (nodetemplateid) {
 352             var data = topoUtil.getCurrentDetailData(vm.nodesDetail.nodesTemplateDetailData.$model, nodetemplateid);
 353             //initialize three tables of nodedetail
 354             $.each(vm.nodesDetail.$tableFields, function (key, value) {
 355                 var setting = {};
 356                 setting.language = vm.$language;
 357                 setting.paginate = false;
 358                 setting.info = false;
 359                 setting.columns = value;
 360                 setting.tableId = "ict_table_" + key;
 361                 serverPageTable.initTableWithData(setting, setting.tableId + '_div', data[key]);
 362             });
 363         }
 364     },
 365     executionTab: {
 366         $eventsTabId: "ict_events_table",
 367         $eventsTabFields: {// table columns
 368             table: [
 369                 {"mData": "currentStepId", name: "ID", "bVisible": false},
 370                 {
 371                     "mData": "currentStepName",
 372                     name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepName")
 373                 },
 374                 {
 375                     "mData": "currentStepStatus",
 376                     name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepStatus")
 377                 },
 378                 {
 379                     "mData": "currentStepDesc",
 380                     name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-currentStepDesc")
 381                 },
 382                 {"mData": "currentTime", name: $.i18n.prop("nfv-templateDetail-executionTab-iui-field-executionTime")},
 383                 {"mData": "allSteps", name: "allSteps", "bVisible": false}
 384             ]
 385         },
 386         $queryEventsInfoUrl: "/api/nsoc/appinstance/operateschedule?instanceId=",
 387         $queryStepUrl: "",
 388         $getEventsCond: function () {
 389             var cond = {};
 390             return cond;
 391         },
 392         $initEventsTable: function () {
 393             console.log("initEventsTable ");
 394             var setting = {};
 395             setting.language = vm.$language;
 396             setting.paginate = false;
 397             setting.info = false;
 398             setting.columns = vm.executionTab.$eventsTabFields.table;
 399             setting.restUrl = vm.executionTab.$queryEventsInfoUrl;
 400             setting.tableId = vm.executionTab.$eventsTabId;
 401             serverPageTable.initDataTable(setting, vm.executionTab.$getEventsCond(),
 402                 vm.executionTab.$eventsTabId + '_div');
 403         },
 404         $operation: "",
 405         steps: [],
 406         $init: function () {
 407             vm.executionTab.$initEventsTable();
 408         }
 409     }
 410
 411 });
 412
 413 var initParam = function () { //initialize template detail params
 414     var paramStr = window.location.search.substring(1);
 415     if (paramStr.length > 0) {
 416         var params = paramStr.split("&");
 417         var templateId = params[0].substring(params[0].indexOf('=') + 1);
 418         var flavor = params[1].substring(params[1].indexOf('=') + 1);
 419         avalon.scan();
 420
 421         vm.templateId = templateId;
 422         vm.$restUrl.queryNodeTemplateUrl = commonUtil.format(vm.$restUrl.queryNodeTemplateUrl, templateId);
 423
 424         if (flavor) {
 425             vm.$restUrl.queryNodeTemplateUrl += "?flavor=" + flavor;
 426         }
 427         vm.$init();
 428     }
 429 };
 430 initParam();