Merge "Fix the Abatement issue"
[clamp.git] / 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                             $.each($('.policyTarget').find('.form-control'), function(opPolicyTargetPropIndex, opPolicyTargetPropValue) {
194
195                                     $("#formId" + formNum + " .policyTarget").find("#" + opPolicyTargetPropValue.id).val(
196                                     allPolicies['operational_policy']['policies'][opPolicyElemIndex]['target'][opPolicyTargetPropValue.id]);
197                             });
198                             // update the current tab label
199                             $("#go_properties_tab" + formNum).text(
200                             allPolicies['operational_policy']['policies'][opPolicyElemIndex]['id']);
201                             // Check if there is a guard set for it
202                             $.each(allPolicies['guard_policies'], function(guardElemId, guardElemValue) {
203
204                                     if (guardElemValue.recipe === $($("#formId" + formNum + " #recipe")[0]).val()) {
205                                             // Found one, set all guard prop
206                                             $.each($('.guardProperties').find('.form-control'), function(guardPropElemIndex,
207                                                                                                          guardPropElemValue) {
208
209                                                     guardElemValue['id'] = guardElemId;
210                                                     $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
211                                                     guardElemValue[guardPropElemValue.id]);
212                                             });
213                                             // And finally enable the flag
214                                             $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
215                                     }
216                             });
217                     });
218             }
219             $scope.initTargetResourceId = function(event) {
220                 var formNum = $(event.target).closest('.formId').attr('id').substring(6);
221                 
222                     var type = $(event.target).val();
223                     var recipe = $("#formId" + formNum + "#recipe").val();
224                     $("#formId" + formNum + " #modelName").val("");
225                     $("#formId" + formNum + " #modelInvariantId").val("");
226                     $("#formId" + formNum + " #modelVersionId").val("");
227                     $("#formId" + formNum + " #modelVersion").val("");
228                     $("#formId" + formNum + " #modelCustomizationId").val("");
229                     $("#formId" + formNum + " #resourceId").empty();
230                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val("").html("-- choose an option --"));
231                     if (type == "VM" || type == "" || type == "VNF") {
232                             $("#formId" + formNum + " #metadata *").prop('disabled', true);
233                     }
234                     var resourceVnf = getResourceDetailsVfProperty();
235                     if (type == "VNF" && (null !== resourceVnf || undefined !== resourceVnf)) {
236                             for ( var prop in resourceVnf) {
237                                     var name = resourceVnf[prop]["name"];
238                                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val(name).html(name));
239                             }
240                     }
241                     var resourceVFModule = getResourceDetailsVfModuleProperty();
242                     if (type == "VFModule" && (null !== resourceVFModule || undefined !== resourceVFModule)) {
243                             if (recipe == 'VF Module Create' || recipe == 'VF Module Delete') {
244                                     for ( var prop in resourceVFModule) {
245                                             if (resourceVFModule[prop]["isBase"] == false) {
246                                                     $("#formId" + formNum + " #resourceId").append($('<option></option>').val(resourceVFModule[prop]["vfModuleModelName"]).html(resourceVFModule[prop]["vfModuleModelName"]));
247                                             }
248                                     }
249                             } else {
250                                     for ( var prop in resourceVFModule) {
251                                             $("#formId" + formNum + " #resourceId").append($('<option></option>').val(resourceVFModule[prop]["vfModuleModelName"]).html(resourceVFModule[prop]["vfModuleModelName"]));
252                                     }
253                             }
254                     }
255             }
256             $scope.changeTargetResourceId = function(event) {
257                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
258                     $("#formId" + formNum +" #modelName").val("");
259                     $("#formId" + formNum +" #modelInvariantId").val("");
260                     $("#formId" + formNum +" #modelVersionId").val("");
261                     $("#formId" + formNum +" #modelVersion").val("");
262                     $("#formId" + formNum +" #modelCustomizationId").val("");
263                     var resourceVFModule = getResourceDetailsVfModuleProperty();
264                     var type = $("#formId" + formNum +" #type").val();
265                     var recipe = $("#formId" + formNum +" #recipe").val();
266                     if (type == "VFModule" && (null !== resourceVFModule || undefined !== resourceVFModule)
267                     && (recipe == 'VF Module Create' || recipe == 'VF Module Delete')) {
268                             for ( var prop in resourceVFModule) {
269                                     if (prop ==  $(event.target).val()) {
270                                             $("#formId" + formNum +" #modelName").val(resourceVFModule[prop]["vfModuleModelName"]);
271                                             $("#formId" + formNum +" #modelInvariantId").val(resourceVFModule[prop]["vfModuleModelInvariantUUID"]);
272                                             $("#formId" + formNum +" #modelVersionId").val(resourceVFModule[prop]["vfModuleModelUUID"]);
273                                             $("#formId" + formNum +" #modelVersion").val(resourceVFModule[prop]["vfModuleModelVersion"]);
274                                             $("#formId" + formNum +" #modelCustomizationId").val(resourceVFModule[prop]["vfModuleModelCustomizationUUID"]);
275                                             $("#formId" + formNum +" #metadata *").prop('disabled', false);
276                                     }
277                             }
278                     } else {
279                             $("#formId" + formNum +" #metadata *").prop('disabled', true);
280                     }
281             }
282             $scope.changeGuardPolicyType = function() {
283
284                     var formItemActive = searchActiveFormId();
285                     if (formItemActive === undefined)
286                             return;
287                     if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_MIN_MAX") {
288                             $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").show();
289                             $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").hide();
290                     } else if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_YAML") {
291                             $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").hide();
292                             $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").show();
293                     }
294             }
295             $scope.initPolicySelect = function() {
296
297                     if (allPolicies['operational_policy'] === undefined || allPolicies['operational_policy'] === null) {
298                             allPolicies = getOperationalPolicyProperty();
299                     }
300                     // Provision all policies ID first
301                     if ($scope.policy_ids.length == 0 && allPolicies['operational_policy'] != undefined) {
302                             $.each(allPolicies['operational_policy']['policies'], function() {
303
304                                     $scope.policy_ids.push(this['id']);
305                             });
306                     }
307             }
308             $scope.init = function() {
309
310                     $(function() {
311
312                             $scope.clname = getLoopName();
313                             $("#add_one_more").click(function(event) {
314
315                                     console.log("add one more");
316                                     event.preventDefault();
317                                     $scope.policy_ids.push($("#formId" + add_one_more() + " #id").val());
318                             });
319                             if (allPolicies['operational_policy'] !== undefined && allPolicies['operational_policy'] !== null) {
320                                     // load properties
321                                     console.log("load properties");
322                                     configureComponents(allPolicies);
323                             } else {
324                                     console.log("create new policy");
325                                     add_new_policy();
326                             }
327                             $("#savePropsBtn").click(function(event) {
328
329                                     console.log("save properties triggered");
330                                     savePolicyLocally();
331                                     for (var i = 0; i <= $scope.guard_ids.length; i++) {
332                                             for (var j = i; j <= $scope.guard_ids.length; j++) {
333                                                     if (i != j && $scope.guard_ids[i] == $scope.guard_ids[j]) {
334                                                             // duplacated guard policy id exist
335                                                             alert("The guard policy ID should be unique.");
336                                                             return;
337                                                     }
338                                             }
339                                     }
340                                     angular.element(document.getElementById('formSpan')).scope().submitForm(allPolicies);
341                                     $("#close_button").click();
342                             });
343                     });
344             }
345             $scope.init();
346             $scope.updateGuardRecipe = function(event) {
347
348                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
349                     // Get the second recipe (guard one) and update it
350                     $($("#formId" + formNum + " #recipe")[1]).val($(event.target).val());
351             }
352             $scope.updateGuardActor = function(event) {
353
354                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
355                     // Get the second actor (guard one) and update it
356                     $($("#formId" + formNum + " #actor")[1]).val($(event.target).val());
357             }
358             // When we change the name of a policy
359             $scope.updateTabLabel = function(event) {
360
361                     // update policy id structure
362                     var formNum = $(event.target).closest('.formId').attr('id').substring(6);
363                     $scope.policy_ids.splice($scope.policy_ids.indexOf($("#formId" + formNum + " #id").val()), 1);
364                     $scope.policy_ids.push($(event.target).val());
365                     // Update the tab now
366                     $("#go_properties_tab" + formNum).text($(event.target).val());
367             }
368             $scope.close = function() {
369
370                     console.log("close");
371                     $uibModalInstance.close("closed");
372             };
373             $scope.submitForm = function(obj) {
374
375                     var operationalPolicies = getOperationalPolicies();
376                     if (obj !== null) {
377                             operationalPolicies[0]["configurationsJson"] = obj;
378                     }
379                     operationalPolicyService.saveOpPolicyProperties(operationalPolicies).then(function(pars) {
380
381                             updateOpPolicyProperties(operationalPolicies);
382                     }, function(data) {
383
384                     });
385             };
386     } ]);