2 ============LICENSE_START=======================================================
4 ================================================================================
5 Copyright (C) 2017 AT&T Intellectual Property. All rights
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
12 http://www.apache.org/licenses/LICENSE-2.0
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 ECOMP is a trademark and service mark of AT&T Intellectual Property.
28 background-color: #dddd;
32 background-color: #dddd;
41 .fileUpload input.upload {
50 filter: alpha(opacity = 0);
55 display: inline-block;
71 vertical-align: middle;
81 background-color: #f2bfab;
92 background-color: #f5f5f5;
93 padding: 15px 5px 0 5px;
96 .form-group.clearfix {
97 display: -webkit-flex;
109 padding: 2px 2px 2px 30px;
120 border-bottom: 1px solid #ddd;
121 border-collapse: collapse;
131 #policyTable tr.highlight {
132 background-color: #f5f5f5;
144 <script type="text/javascript">
145 function disablefile() {
147 document.getElementById("fileUpload").disabled = true;
151 function disableSVN() {
152 var selectLength = document.querySelectorAll(".disabled-block-container .tab-close-popup");
153 if(selectLength && selectLength.length>0){
154 for(var i = 0; i< selectLength.length ; i++){
155 selectLength[i].disabled = true;
159 document.getElementById("schemaLocation").disabled = true;
160 document.getElementById("userID").disabled = true;
161 document.getElementById("password").disabled = true;
167 <div attribute-test="policywindowproperties" id="configure-widgets"
168 class="disabled-block-container">
169 <div attribute-test="policywindowpropertiesh" class="modal-header">
170 <button type="button" class="close" ng-click="close(false)"
171 aria-hidden="true" style="margin-top: -3px">×</button>
172 <h4>Operational Policy</h4>
176 <div class="modal-body">
177 <div attribute-test="policywindowpropertiesb" class="modal-body row">
179 <div class="leftPolicyPanel">
180 <div class="panel panel-default">
181 <i class="glyphicon glyphicon-search modelSearchBox"></i>
182 <input type="text" id="policySearch" onkeyup="searchPolicyList()"
183 placeholder="Search ...">
184 <div id="policyTableHolder">
185 <table id="policyTable"></table>
188 <div style="float: left">
189 <button type="button" id="createNewPolicy" class="btn btn-sm">New Policy</button></span>
191 <div style="float: right">
192 <button type="button" id="deletePolicy" class="btn btn-sm glyphicon glyphicon-trash" disabled></button></span>
194 <div id="repeatIdError" class="idError">Error: This Policy name is already taken.</div>
195 <div id="newIdError" class="idError">Error: Please rename your new Policy.</div>
196 <div id="spaceError" class="idError">Error: Spaces are not allowed in the ID.</div>
199 <div class="panel panel-default col-sm-9 policyPanel" style="display:none;">
200 <form id="Timeoutform" class="form-horizontal">
202 <div class="form-group clearfix row">
203 <label class="col-sm-2">Name</label>
204 <div class="col-sm-3" style="padding: 0px;">
205 <input type="text" id="pname" name="pname" maxlength="48" placeholder="Enter Unique Name" class="form-control">
208 <label class="col-sm-1">ID</label>
209 <div class="col-sm-1" style="padding: 0px;">
210 <input onkeydown="return false;" type="text" id="pid" name="pid" class="form-control" readonly>
213 <label for="userID" class="col-sm-3" style="padding-left:5px;padding-right:10px;">Overall Time Limit</label>
214 <div class="col-sm-2" style="padding-left: 0px;">
215 <input type="text" maxlength="10" onkeypress="return isNumberKey(event)"
216 class="form-control" id="timeout" name="timeout">
221 <div class="panel-heading" style="background-color: white;">
222 <ul id="nav_Tabs" class="nav nav-tabs">
223 <li class><a id="add_one_more" href="#desc_tab"><span
224 class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
227 <div class="panel-body">
228 <div class="tab-content">
229 <div id="properties_tab" class="tab-pane fade in active"></div>
234 <span id="formSpan" style="display: none">
235 <form class="saveProps" class="form-horizontal">
237 <div class="form-group clearfix">
238 <label class="col-sm-4 control-label" for="recipe">Recipe</label>
239 <div class="col-sm-8">
240 <select class="form-control" name="recipe" id="recipe" enableFilter="true"></select>
243 <div class="form-group clearfix">
244 <label for="maxRetries" class="col-sm-4 control-label">
246 <div class="col-sm-8">
247 <input type="text" maxlength="5" class="form-control" id="maxRetries"
248 onkeypress="return isNumberKey(event)"
249 name="maxRetries"> </input>
252 <div class="form-group clearfix">
253 <label for="retryTimeLimit" class="col-sm-4 control-label">
254 Retry Time Limit</label>
255 <div class="col-sm-8">
256 <input type="text" maxlength="5" class="form-control" id="retryTimeLimit"
257 onkeypress="return isNumberKey(event)"
258 name="retryTimeLimit"></input>
261 <div style="display: none;" class="form-group clearfix">
262 <label for="_id" class="col-sm-4 control-label">
264 <div class="col-sm-8">
265 <input type="text" onkeydown="return false;" class="form-control" id="_id"
266 name="_id" value=""></input>
269 <div class="form-group clearfix">
270 <label for="parentPolicy" class="col-sm-4 control-label">
271 Parent Policy</label>
272 <div class="col-sm-8">
273 <select class="form-control" id="parentPolicy"
274 name="parentPolicy" enableFilter="true"><option value=""></option></select>
277 <div class="form-group clearfix">
278 <label for="parentPolicyConditions" class="col-sm-4 control-label">
279 Parent Policy Conditions</label>
280 <div class="col-sm-8">
281 <select class="form-control" id="parentPolicyConditions"
282 name="parentPolicyConditions" multiple></select>
285 <div class="form-group clearfix">
286 <label for="targetResourceId" class="col-sm-4 control-label">
287 Target ResourceId</label>
288 <div class="col-sm-8">
289 <input type="text" class="form-control" id="targetResourceId"
290 name="targetResourceId"> </input>
299 <div attribute-test="policywindowpropertiesf" class="modal-footer">
300 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
301 <button id="savePropsBtn" class="btn btn-primary">Close</button>
302 <button ng-click="close(true)" id="close_button"
303 class="btn btn-primary">Cancel</button>
307 //Basically this method will add a new form. All forms share the same class. When you want one form to show(active form) the other forms get the
308 // css attribute display:none
309 $("#add_one_more").click(function(event) {
310 event.preventDefault();
311 var num = add_one_more();
314 loadPropertyWindow("policy")
316 // by default, parentPolicyConditions is disabled
317 //$("#parentPolicyConditions").prop('disabled', 'disabled');
324 //Grab saved values for dropdowns
325 var obj = elementMap[lastElementSelected];
327 if (!($.isEmptyObject(obj))){
328 allPolicies = jQuery.extend({}, obj);
329 for (var x in allPolicies){
330 $("#policyTable").prepend("<tr><td>"+x+"</td></tr>");
331 if (allPolicies[x][1]['value']){
332 allPolIds.push(parseInt(allPolicies[x][1]['value']));
338 //load recipes for a chosen policy
339 function disperseConfig(policyObj, id){
341 //remove old gui forms
342 for (var i=1; i<($(".formId").length + 1); i++){
343 $("#go_properties_tab"+i).parent().remove();
345 $(".formId").remove();
347 if (policyObj !== undefined) {
348 var el = policyObj[id][3]['policyConfigurations']
349 for (var i = 0; i < el.length; i++) {
351 var num = add_one_more();
353 for (var j = 0; j < el[i].length; j++) {
354 if(el[i][j].hasOwnProperty("name")){
355 $("#formId" + num + " #" + el[i][j].name).val(
357 if(el[i][j].name==="_id")
358 policy_ids["#formId" + num]=el[i][j].value
359 if(el[i][j].name==='parentPolicy')
360 parent_policy[num]=el[i][j].value
361 if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
362 $("#go_properties_tab"+num).text(el[i][j].value)
368 //Adding all the ids for parent policy options
369 for(var i=1;i<=$(".formId").length;i++){
370 for(k in policy_ids){
371 if($("#formId"+i+" #_id").val()!==policy_ids[k].toString() && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
372 $("#formId"+i+" #parentPolicy").append("<option value=\""+policy_ids[k]+"\">" +$(k+" #recipe").val()+"</option>");
377 for(k in parent_policy){
378 $("#formId"+k+" #parentPolicy").val(parent_policy[k]);
379 if($("#formId"+k+" #parentPolicy").val() ==""){
380 $("#formId" +k+ " #parentPolicyConditions").multiselect("disable");
382 $("#formId" +k+ " #parentPolicyConditions").multiselect("enable");
384 // force the change event
385 $("#formId"+k+" #parentPolicy").change();
388 for (headInd in policyObj[id]){
389 if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))){
390 $("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
397 if (readOnly||readMOnly){
398 $('select[multiple] option').each(function() {
399 var input = $('input[value="' + $(this).val() + '"]');
400 input.prop('disabled', true);
401 input.parent('li').addClass('disabled');
403 $('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
408 function addSelectListen(count) {
409 var onSelectChange = function() {
410 var opselected = this.selectedOptions[0].text;
412 if (this.id == "recipe"){
414 var polCount = $(this).closest("[id^='formId']").attr("id").substring(6);
415 $(this).closest(".policyPanel").find("#go_properties_tab"+polCount).text(opselected);
417 $(this).closest("[id^='go_properties_tab']").text("Policy");
421 if (this.id=="parentPolicy"){
422 var ppCond = $(this).closest("[id^='formId']").find("#parentPolicyConditions");
424 ppCond.multiselect("clearSelection");
425 ppCond.multiselect("disable");
427 ppCond.multiselect("enable");
431 $("#formId"+count+" select").each( function () {
432 this.change = onSelectChange;
437 //This is ensure there are no repeated keys in the map
438 function noRepeats(form) {
439 //triggered per policy.
441 for (var i = 0; i < form.length; i++) {
442 if (select[form[i].name] === undefined)
443 select[form[i].name] = []
444 select[form[i].name].push(form[i].value);
456 $("#savePropsBtn").click(function(event) {
457 $(".idError").hide();
458 if ($("#policyTable .highlight td").html() !== $("#pname").val()){
460 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
461 $("#repeatIdError").show();
463 } else { //not repeated
464 delete allPolicies[$("#policyTable .highlight td").html()];
467 if ($("#pname").val().trim() == "New_Policy"){
468 $("#newIdError").show();
473 /* if ($("#policyTable .highlight").length > 0){
474 saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
478 //Removes outdated (deleted) policies by checking against left menu
479 var finalSaveList = {};
480 $("#policyTable td").each(function(){
481 var tableVal = $(this).text();
482 if (tableVal in allPolicies){
483 finalSaveList[tableVal] = allPolicies[tableVal];
487 saveProperties(finalSaveList);
488 $("#close_button").click();
491 function add_one_more() {
492 $("#nav_Tabs li").removeClass("active");
494 //FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
495 var form = $($("#formSpan").children()[0]).clone()
497 //Each new tab will have the formId class attached to it. This way we can track how many forms we currently have out there and assign listeners to them
498 if ($(".formId").length > 0) {
500 var s = $(".formId");
501 for (var i = 0; i < s.length; i++) {
502 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
503 greatest = parseInt($(s[i]).attr("id").substring(6))
506 count = greatest + 1;
507 $("#properties_tab").append(
508 ('<span class="formId" id="formId'+count+'"></span>'));
511 $("#properties_tab").append(
512 '<span class="formId" id="formId1"></span>');
515 //$(form).find("#policyName").val("Recipe "+makid(2))
516 //TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
517 //alert($(form).find("#_id").val())
518 //policyNameChangeListener(form)
522 ' <li class="active"><a id="go_properties_tab'+count+'">Policy</a><button id="tab_close'+count+'" type="button" class="close tab-close-popup" aria-hidden="true" style="margin-top: -30px;margin-right: 5px">×</button></li>');
523 $("#formId" + count).append(form);
524 $(".formId").not($("#formId" + count)).css("display", "none")
526 //addTabListen(count)
527 addSelectListen(count);
528 // This is for when the process is not loading from map but being created
531 $(form).find("#_id").val(l)
532 policy_ids["#formId" + count]=l
535 for(var i=1;i<=greatestIdNum();i++){
536 if($("#formId"+i).length>0){
537 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val();
538 $("#formId"+i+" #parentPolicy").empty();
540 for(k in policy_ids){
541 if(($("#formId"+i+" #_id").val()!==policy_ids[k].toString()) && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
542 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"'>"+$(k+" #recipe").val()+"</option>")
545 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
549 $("#formId"+count+" #parentPolicyConditions").multiselect("disable");
551 //re-populate parent policy with chosen options
560 function add_new_policy(issueNewNames) {
561 //remove old gui forms
562 for (var i=1; i<($(".formId").length + 1); i++){
563 $("#go_properties_tab"+i).parent().remove();
565 $(".formId").remove();
568 //$("#pname").val("0");
569 $("#pname").val("New_Policy");
570 $("#timeout").val(defaults_props.policy.timeout);
572 $("#add_one_more").click();
576 //listener will change the tab name to the recipe
577 function addTabListen(count){
579 // disable parentPolicyConditions when a parentPolicy is not selected
580 //don't think this is used..
581 /* $("#formId"+count+" #parentPolicy").on("change",function(){
582 if($("#formId"+count+" #parentPolicy").val().toString()==""){
583 // deselect all options
584 $("#formId"+count+" #parentPolicyConditions option:selected").prop("selected", false);
585 // disable the select box
586 $("#formId"+count+" #parentPolicyConditions").multiselect("disable");
589 $("#formId"+count+" #parentPolicyConditions").multiselect("enable");
595 function addCustListen(count) {
596 $('#go_properties_tab' + count).click(function(event) {
597 $("#nav_Tabs li").removeClass("active");
598 $(this).parent().addClass("active");
599 $("#formId" + count).css("display", "")
600 $(".formId").not($("#formId" + count)).css("display", "none")
603 $('#tab_close' + count).click(function(event) {
604 if(document.getElementById("timeout").disabled){
607 $(this).parent().remove();
608 for(var i=1;i<=greatestIdNum();i++){
609 if( $("#formId"+i).length>0){
611 if( $("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
612 $("#formId"+i+" #parentPolicy").val("")
613 $("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
617 delete policy_ids["#formId" + count + " #_id"]
618 $("#formId" + count).remove();
623 function greatestIdNum() {
625 var s = $(".formId");
626 for (var i = 0; i < s.length; i++) {
627 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
628 greatest = parseInt($(s[i]).attr("id").substring(6))
634 //Generate random id for each policy
635 //Also made sure ids couldnt be repeated
636 function makeid(num) {
639 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
642 for (var i = 0; i < 7; i++)
643 text += possible.charAt(Math.floor(Math.random()
645 var hasValue = false;
646 for (k in policy_ids) {
647 if (text === policy_ids[k])
656 var ParentPolicy = function(id, name) {
661 //Policy table search filter
662 function searchPolicyList() {
663 var search = document.getElementById("policySearch");
664 var row = document.getElementsByTagName("td");
665 for (var i = 0; i < row.length; i++) {
666 if (row[i].innerHTML.toUpperCase().indexOf(
667 search.value.toUpperCase()) > -1) {
668 row[i].style.display = "";
670 row[i].style.display = "none";
675 function saveLastPolicyLocally(lastPolicyId) {
678 var properties = $(".saveProps").not("#formSpan .saveProps");
679 var timeoutForm = $("#Timeoutform").serializeArray();
681 for (var i = 0; i < timeoutForm.length; i++) {
682 polForm.push(timeoutForm[i]);
686 d["policyConfigurations"] = [];
687 for (var i = 0; i < properties.length; i++) {
688 var ser = $(properties[i]).serializeArray();
689 var s = noRepeats(ser)
690 d["policyConfigurations"].push(s);
693 allPolicies[lastPolicyId] = polForm;
696 function getNextId(){
699 if ((Math.min.apply(Math, allPolIds) == 0)
700 && (allPolIds.length > 0)) {
702 for (var i = 1; i < allPolIds.length; i++) {
703 if ((allPolIds[i] - allPolIds[i - 1]) != 1) {
704 newPolId = (allPolIds[i - 1] + 1);
709 newPolId = (Math.max.apply(Math, allPolIds)) + 1;
714 allPolIds.push(newPolId);
715 $("#pid").val(newPolId);
718 $("#deletePolicy").on('click', function() {
719 $(".idError").hide();
721 allPolIds.splice((allPolIds.indexOf(parseInt($("#pid").val()))),1);
724 var deleteId = $("#policyTable .highlight td").html();
725 delete allPolicies[deleteId];
726 $("#policyTable .highlight").remove();
731 $('#policyTable').on('click', 'tr', function(event) {
732 $(".idError").hide();
734 if ($("#policyTable .highlight td").html() !== $("#pname").val()){
736 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
737 $("#repeatIdError").show();
739 } else { //not repeated
740 $("#repeatIdError").hide();
741 delete allPolicies[$("#policyTable .highlight td").html()];
744 //if (parseInt($("#pname").val()) == 0){
745 if ($("#pname").val().trim() == "New_Policy"){
746 $("#newIdError").show();
749 if (!(readOnly||readMOnly)){
752 if ($("#policyTable .highlight").length == 0){
756 $(this).addClass('highlight').siblings().removeClass('highlight');
757 disperseConfig(allPolicies, $(this).find("td").html());
760 $('#createNewPolicy').on('click', function(){
761 $(".idError").hide();
763 if ($("#policyTable .highlight td").html() !== $("#pname").val()){
765 if ($.inArray($("#pname").val(), Object.keys(allPolicies)) > -1){
766 $("#repeatIdError").show();
768 } else { //not repeated
769 $("#repeatIdError").hide();
770 delete allPolicies[$("#policyTable .highlight td").html()];
773 //if (parseInt($("#pname").val()) == 0){
774 if ($("#pname").val().trim() == "New_Policy"){
775 $("#newIdError").show();
780 if (("#policyTable .highlight").length > 0){
781 $('#policyTable tr.highlight').removeClass('highlight');
783 $("#policyTable").prepend("<tr class='highlight'><td>New_Policy</td></tr>");
788 $('#pname').on('keypress', function(e){
789 /* var newVal = $(this).val() + String.fromCharCode(e.which);
790 if ((newVal>99) || (($(this).val().length>2) && e.keyCode != 46 && e.keyCode !=8)){
793 if (e.keyCode == 32){
794 $("#spaceError").show();
799 function isNumberKey(event){
800 var charCode = (event.which) ? event.which : event.keyCode
801 if (charCode > 31 && (charCode < 48 || charCode > 57)){
807 function startNextItem() {
808 //save last item before transitioning
809 var lastItem = $("#policyTable .highlight");
810 if (lastItem.length > 0) {
811 saveLastPolicyLocally($("#pname").val());
812 //lastItem.attr("id", $("#pname").val());
813 lastItem.find("td").html($("#pname").val());
819 if ($("#deletePolicy").prop("disabled")) {
820 $("#deletePolicy").prop("disabled", false);
826 //load metrics dropdown
827 if (elementMap["global"]){
828 for (var i = 0; i < (elementMap["global"].length); i++){
829 if ((elementMap["global"][i]["name"]) == "actionSet"){
830 var asSel = elementMap["global"][i]["value"];
831 if (asSel == "vnfRecipe"){
832 if (vf_Services["policy"][asSel]){
833 $.each((vf_Services["policy"][asSel]), function(val, text) {
835 $('<option></option>').val(val).html(text)
840 } else if (asSel == "enbRecipe"){
841 if (vf_Services["policy"][asSel]){
842 $.each((vf_Services["policy"][asSel]), function(val, text) {
844 $('<option></option>').val(val).html(text)
854 //Show table panel only
855 function expandTable() {
856 $(".policyPanel").css("display", "none");
857 $(".leftPolicyPanel").removeClass("col-sm-3");
858 $(".modelSearchBox").css("padding", "25px 12px");
859 if (!($("#deletePolicy").prop("disabled"))) {
860 $("#deletePolicy").prop("disabled", true);
865 function collapseTable() {
866 $(".leftPolicyPanel").addClass("col-sm-3");
867 $(".modelSearchBox").css("padding", "10px 12px");
868 $(".policyPanel").css("display", "unset");