src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2017-2019 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23 app
  24 .controller(
  25 'operationalPolicyCtrl',
  26 [
  27     '$scope',
  28     '$rootScope',
  29     '$uibModalInstance',
  30     'data',
  31     'operationalPolicyService',
  32     'dialogs',
  33     function($scope, $rootScope, $uibModalInstance, data, operationalPolicyService, dialogs) {
  34
  35             console.log("//////operationalPolicyCtrl");
  36             $scope.policy_ids = []
  37             var allPolicies = {};
  38             $scope.guardType = "GUARD_MIN_MAX";
  39             $scope.number = 0;
  40             $scope.clname = "";
  41             $scope.guard_ids = [];
  42             function getAllFormId() {
  43
  44                     return Array.from(document.getElementsByClassName("formId"));
  45             }
  46             function searchActiveFormId() {
  47
  48                     var formArray = getAllFormId();
  49                     for (var i = 0, max = formArray.length; i < max; i++) {
  50                             console.log("Search active FormId, current element " + formArray[i].id);
  51                             if (formArray[i].style.display !== "none") {
  52                                     console.log("Active form is:" + formArray[i].id);
  53                                     return formArray[i];
  54                             }
  55                     }
  56                     console.log("No active formId found !");
  57             }
  58             function add_one_more() {
  59
  60                     console.log("add one more");
  61                     $("#nav_Tabs li").removeClass("active");
  62                     // FormSpan contains a block of the form that is not being
  63                     // displayed. We will create clones of that and add them to tabs
  64                     var form = $("#formSpan").clone(true, true)
  65                     var count = 0;
  66                     // Each new tab will have the formId class attached to it. This way
  67                     // we can track how many forms we currently have out there and
  68                     // assign listeners to them
  69                     if ($(".formId").length > 0) {
  70                             var greatest = 0;
  71                             var s = $(".formId");
  72                             for (var i = 0; i < s.length; i++) {
  73                                     if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
  74                                             greatest = parseInt($(s[i]).attr("id").substring(6))
  75                                     }
  76                             }
  77                             count = greatest + 1;
  78                             $("#properties_tab").append(('<span class="formId" id="formId' + count + '"></span>'));
  79                     } else {
  80                             count++;
  81                             $("#properties_tab").append('<span class="formId" id="formId1"></span>');
  82                     }
  83                     $("#add_one_more")
  84                     .parent()
  85                     .before(
  86                     ' <li class="active"><a id="go_properties_tab'
  87                     + count
  88                     + '">new</a><button id="tab_close'
  89                     + count
  90                     + '" type="button" class="close tab-close-popup" aria-hidden="true" style="margin-top: -30px;margin-right: 5px">&times;</button></li>');
  91                     $("#formId" + count).append(form.children());
  92                     $(".formId").not($("#formId" + count)).css("display", "none");
  93                     addCustListen(count);
  94                     $("#formId" + count + " #id").val("new");
  95                     $("#formId" + count + " #clname").val($scope.clname);
  96                     return count;
  97             }
  98             function addCustListen(count) {
  99
 100                     $('#go_properties_tab' + count).click(function(event) {
 101
 102                             $("#nav_Tabs li").removeClass("active");
 103                             $(this).parent().addClass("active");
 104                             $("#formId" + count).css("display", "")
 105                             $(".formId").not($("#formId" + count)).css("display", "none")
 106                     })
 107                     $('#tab_close' + count).click(function(event) {
 108
 109                             $(this).parent().remove();
 110                             $scope.policy_ids.splice($scope.policy_ids.indexOf($("#formId" + count + " #id").val()), 1);
 111                             $("#formId" + count).remove();
 112                     })
 113             }
 114             function greatestIdNum() {
 115
 116                     var greatest = 0;
 117                     var s = $(".formId");
 118                     for (var i = 0; i < s.length; i++) {
 119                             if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
 120                                     greatest = parseInt($(s[i]).attr("id").substring(6))
 121                             }
 122                     }
 123                     return greatest;
 124             }
 125             function serializeElement(element) {
 126
 127                     var o = {};
 128                     var a = element.serializeArray();
 129                     $.each(a, function() {
 130
 131                             if (o[this.name]) {
 132                                     if (!o[this.name].push) {
 133                                             o[this.name] = [ o[this.name] ];
 134                                     }
 135                                     o[this.name].push(this.value || '');
 136                             } else {
 137                                     o[this.name] = this.value || '';
 138                             }
 139                     });
 140                     return o;
 141             }
 142             function savePolicyLocally() {
 143
 144                     var polForm = {};
 145                     var clPolForm = {};
 146                     clPolForm = serializeElement($("#operationalPolicyHeaderForm"));
 147                     allPolicies['guard_policies'] = {};
 148                     var policiesArray = []
 149                     $.each($(".formId"), function() {
 150
 151                             var policyProperties = serializeElement($("#" + this.id + " .policyProperties"));
 152                             policyProperties["target"] = serializeElement($("#" + this.id + " .policyTarget"))
 153                             policiesArray.push(policyProperties);
 154                             // Now get the Guard
 155                             if ($("#" + this.id + " #enableGuardPolicy").is(':checked')) {
 156                                     var guardPolicyBody = serializeElement($("#" + this.id + " .guardProperties"));
 157                                     var guardPolicyId = guardPolicyBody['id'];
 158                                     delete guardPolicyBody['id'];
 159                                     allPolicies['guard_policies'][guardPolicyId] = guardPolicyBody;
 160                                     $scope.guard_ids.push(guardPolicyId);
 161                             }
 162                     });
 163                     polForm['controlLoop'] = clPolForm;
 164                     polForm['policies'] = policiesArray;
 165                     allPolicies['operational_policy'] = polForm;
 166             }
 167             function add_new_policy() {
 168
 169                     console.log("add new policy");
 170                     // remove old gui forms
 171                     for (var i = 1; i < ($(".formId").length + 1); i++) {
 172                             $("#go_properties_tab" + i).parent().remove();
 173                     }
 174                     $(".formId").remove();
 175                     $("#add_one_more").click();
 176             }
 177             function configureComponents(allPolicies) {
 178
 179                     console.log("load properties to op policy");
 180                     // Set the header
 181                     $.each($('#operationalPolicyHeaderForm').find('.form-control'), function() {
 182                             $(this).val(allPolicies['operational_policy']['controlLoop'][this.id]);
 183                     });
 184                     // Set the sub-policies
 185                     $.each(allPolicies['operational_policy']['policies'], function(opPolicyElemIndex, opPolicyElemValue) {
 186
 187                             var formNum = add_one_more();
 188                             $.each($('.policyProperties').find('.form-control'), function(opPolicyPropIndex, opPolicyPropValue) {
 189
 190                                     $("#formId" + formNum + " .policyProperties").find("#" + opPolicyPropValue.id).val(
 191                                     allPolicies['operational_policy']['policies'][opPolicyElemIndex][opPolicyPropValue.id]);
 192                             });
 193
 194                             // Initial TargetResourceId options
 195                             initTargetResourceIdOptions(allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target']['type'], formNum);
 196                             $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
 197
 198                                     $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
 199                                     allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
 200                             });
 201
 202                             // update the current tab label
 203                             $("#go_properties_tab" + formNum).text(
 204                             allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
 205                             // Check if there is a guard set for it
 206                             $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
 207
 208                                     if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
 209                                             // Found one, set all guard prop
 210                                             $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
 211                                                                                                          guardPropElemValue) {
 212
 213                                                     guardElemValue['id'] = guardElemId;
 214                                                     $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
 215                                                     guardElemValue[guardPropElemValue.id]);
 216                                             });
 217                                             iniGuardPolicyType(guardElemId, formNum);
 218                                             // And finally enable the flag
 219                                             $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
 220                                     }
 221                             });
 222                     });
 223             }
 224             function iniGuardPolicyType (guardPolicyId, formNum) {
 225                     if(guardPolicyId.indexOf('guard.minmax.') !== -1) {
 226                                 $("#formId" + formNum + " #minMaxGuardPolicyDiv").show();
 227                                 $("#formId" + formNum + " #frequencyLimiterGuardPolicyDiv").hide();
 228                                 $("#formId" + formNum + " #guardPolicyType").val("GUARD_MIN_MAX");
 229                     } else if (guardPolicyId.indexOf('guard.frequency.') !== -1) {
 230                         $("#formId" + formNum + " #minMaxGuardPolicyDiv").hide();
 231                             $("#formId" + formNum + " #frequencyLimiterGuardPolicyDiv").show();
 232                             $("#formId" + formNum + " #guardPolicyType").val("GUARD_YAML");
 233                     }
 234             }
 235             function initTargetResourceIdOptions (targetType, formNum) {
 236                     var recipe = $("#formId" + formNum + "#recipe").val();
 237                     $("#formId" + formNum + " #resourceId").empty();
 238                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val("").html("-- choose an option --"));
 239
 240                     var resourceVnf = getResourceDetailsVfProperty();
 241                     if (targetType == "VNF" && (null !== resourceVnf || undefined !== resourceVnf)) {
 242                             for ( var prop in resourceVnf) {
 243                                     var name = resourceVnf[prop]["name"];
 244                                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val(name).html(name));
 245                             }
 246                     }
 247                     var resourceVFModule = getResourceDetailsVfModuleProperty();
 248                     if (targetType == "VFModule" && (null !== resourceVFModule || undefined !== resourceVFModule)) {
 249                             if (recipe == 'VF Module Create' || recipe == 'VF Module Delete') {
 250                                     for ( var prop in resourceVFModule) {
 251                                             if (resourceVFModule[prop]["isBase"] == false) {
 252                                                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val(resourceVFModule[prop]["vfModuleModelName"]).html(resourceVFModule[prop]["vfModuleModelName"]));
 253                                             }
 254                                     }
 255                             } else {
 256                                     for ( var prop in resourceVFModule) {
 257                                             $("#formId" + formNum + " #resourceId").append($('<option></option>').val(resourceVFModule[prop]["vfModuleModelName"]).html(resourceVFModule[prop]["vfModuleModelName"]));
 258                                     }
 259                             }
 260                     }
 261             }
 262
 263             function initTargetModelAttributes (formNum) {
 264                     $("#formId" + formNum + " #modelName").val("");
 265                     $("#formId" + formNum + " #modelInvariantId").val("");
 266                     $("#formId" + formNum + " #modelVersionId").val("");
 267                     $("#formId" + formNum + " #modelVersion").val("");
 268                     $("#formId" + formNum + " #modelCustomizationId").val("");
 269             }
 270
 271             $scope.initTargetResourceId = function(event) {
 272                 var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 273                 initTargetModelAttributes(formNum);
 274                     var type = $(event.target).val();
 275                     initTargetResourceIdOptions(type, formNum);
 276             }
 277
 278             $scope.changeGuardId = function(formItemActive) {
 279                     if (formItemActive === undefined) {
 280                             formItemActive = searchActiveFormId();
 281                             if (formItemActive === undefined) {
 282                                 return;
 283                             }
 284                     }
 285                     var oldValue = $("#" + formItemActive.id + " .guardProperties #id").val();
 286                     // remove old prefix
 287                     if(oldValue.indexOf('guard.minmax.') !== -1) {
 288                         oldValue = oldValue.substr(oldValue.indexOf('guard.minmax.') + 13);
 289                     } else if (oldValue.indexOf('guard.frequency.') !== -1) {
 290                         oldValue = oldValue.substr(oldValue.indexOf('guard.frequency.') + 16);
 291                     }
 292
 293                     var prefix = "guard.";
 294                     if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_MIN_MAX") {
 295                         prefix = prefix + "minmax.";
 296                     } else if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_YAML") {
 297                         prefix = prefix + "frequency.";
 298                     }
 299                     $("#" + formItemActive.id + " .guardProperties #id").val(prefix+oldValue);
 300             }
 301
 302             $scope.changeTargetResourceId = function(event) {
 303                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 304                     initTargetModelAttributes(formNum);
 305
 306                     var resourceVFModule = getResourceDetailsVfModuleProperty();
 307                     var type = $("#formId" + formNum +" #type").val();
 308                     var recipe = $("#formId" + formNum +" #recipe").val();
 309                     if (type == "VFModule" && (null !== resourceVFModule || undefined !== resourceVFModule)
 310                     && (recipe == 'VF Module Create' || recipe == 'VF Module Delete')) {
 311                             for ( var prop in resourceVFModule) {
 312                                     if (prop ==  $(event.target).val()) {
 313                                             $("#formId" + formNum +" #modelName").val(resourceVFModule[prop]["vfModuleModelName"]);
 314                                             $("#formId" + formNum +" #modelInvariantId").val(resourceVFModule[prop]["vfModuleModelInvariantUUID"]);
 315                                             $("#formId" + formNum +" #modelVersionId").val(resourceVFModule[prop]["vfModuleModelUUID"]);
 316                                             $("#formId" + formNum +" #modelVersion").val(resourceVFModule[prop]["vfModuleModelVersion"]);
 317                                             $("#formId" + formNum +" #modelCustomizationId").val(resourceVFModule[prop]["vfModuleModelCustomizationUUID"]);
 318                                             $("#formId" + formNum +" #metadata *").prop('disabled', false);
 319                                     }
 320                             }
 321                     } else {
 322                             $("#formId" + formNum +" #metadata *").prop('disabled', true);
 323                     }
 324             }
 325             $scope.changeGuardPolicyType = function() {
 326
 327                     var formItemActive = searchActiveFormId();
 328                     if (formItemActive === undefined)
 329                             return;
 330                     if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_MIN_MAX") {
 331                             $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").show();
 332                             $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").hide();
 333                     } else if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_YAML") {
 334                             $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").hide();
 335                             $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").show();
 336                     }
 337                     $scope.changeGuardId(formItemActive);
 338             }
 339             $scope.initPolicySelect = function() {
 340
 341                     if (allPolicies['operational_policy'] === undefined || allPolicies['operational_policy'] === null) {
 342                             allPolicies = getOperationalPolicyProperty();
 343                     }
 344                     // Provision all policies ID first
 345                     if ($scope.policy_ids.length == 0 && allPolicies['operational_policy'] != undefined) {
 346                             $.each(allPolicies['operational_policy']['policies'], function() {
 347
 348                                     $scope.policy_ids.push(this['id']);
 349                             });
 350                     }
 351             }
 352             $scope.init = function() {
 353
 354                     $(function() {
 355
 356                             $scope.clname = getLoopName();
 357                             $("#add_one_more").click(function(event) {
 358
 359                                     console.log("add one more");
 360                                     event.preventDefault();
 361                                     $scope.policy_ids.push($("#formId" + add_one_more() + " #id").val());
 362                             });
 363                             if (allPolicies['operational_policy'] !== undefined && allPolicies['operational_policy'] !== null) {
 364                                     // load properties
 365                                     console.log("load properties");
 366                                     configureComponents(allPolicies);
 367                             } else {
 368                                     console.log("create new policy");
 369                                     add_new_policy();
 370                             }
 371                             $("#savePropsBtn").click(function(event) {
 372
 373                                     console.log("save properties triggered");
 374                                     savePolicyLocally();
 375                                     for (var i = 0; i <= $scope.guard_ids.length; i++) {
 376                                             for (var j = i; j <= $scope.guard_ids.length; j++) {
 377                                                     if (i != j && $scope.guard_ids[i] == $scope.guard_ids[j]) {
 378                                                             // duplacated guard policy id exist
 379                                                             alert("The guard policy ID should be unique.");
 380                                                             return;
 381                                                     }
 382                                             }
 383                                     }
 384                                     angular.element(document.getElementById('formSpan')).scope().submitForm(allPolicies);
 385                                     $("#close_button").click();
 386                             });
 387                     });
 388             }
 389             $scope.init();
 390             $scope.updateGuardRecipe = function(event) {
 391
 392                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 393                     // Get the second recipe (guard one) and update it
 394                     $($("#formId" + formNum + " #recipe")[1]).val($(event.target).val());
 395             }
 396             $scope.updateGuardActor = function(event) {
 397
 398                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 399                     // Get the second actor (guard one) and update it
 400                     $($("#formId" + formNum + " #actor")[1]).val($(event.target).val());
 401             }
 402             // When we change the name of a policy
 403             $scope.updateTabLabel = function(event) {
 404
 405                     // update policy id structure
 406                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 407                     $scope.policy_ids.splice($scope.policy_ids.indexOf($("#formId" + formNum + " #id").val()), 1);
 408                     $scope.policy_ids.push($(event.target).val());
 409                     // Update the tab now
 410                     $("#go_properties_tab" + formNum).text($(event.target).val());
 411             }
 412             $scope.close = function() {
 413
 414                     console.log("close");
 415                     $uibModalInstance.close("closed");
 416             };
 417             $scope.submitForm = function(obj) {
 418
 419                     var operationalPolicies = getOperationalPolicies();
 420                     if (obj !== null) {
 421                             operationalPolicies[0]["configurationsJson"] = obj;
 422                     }
 423                     operationalPolicyService.saveOpPolicyProperties(operationalPolicies).then(function(pars) {
 424
 425                             updateOpPolicyProperties(operationalPolicies);
 426                     }, function(data) {
 427
 428                     });
 429             };
 430     } ]);