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.
27 background-color:#dddd;
31 background-color: #dddd;
39 .fileUpload input.upload {
48 filter: alpha(opacity = 0);
53 display: inline-block;
64 /* box-sizing:border-box; */
75 vertical-align:middle;
85 background-color:#f2bfab;
94 background-color: #f5f5f5;
101 padding: 2px 2px 2px 30px;
111 border-bottom: 1px solid #ddd;
112 border-collapse: collapse;
122 #policyTable tr.highlight{
123 background-color: #f5f5f5;
141 <script type="text/javascript">
142 function disablefile() {
144 document.getElementById("fileUpload").disabled = true;
148 function disableSVN() {
149 var selectLength = document.querySelectorAll(".disabled-block-container .tab-close-popup");
150 if(selectLength && selectLength.length>0){
151 for(var i = 0; i< selectLength.length ; i++){
152 selectLength[i].disabled = true;
156 document.getElementById("schemaLocation").disabled = true;
157 document.getElementById("userID").disabled = true;
158 document.getElementById("password").disabled = true;
164 <div attribute-test="policywindowproperties" id="configure-widgets"
165 class="disabled-block-container">
166 <div attribute-test="policywindowpropertiesh" class="modal-header">
167 <button type="button" class="close" ng-click="close(false)"
168 aria-hidden="true" style="margin-top: -3px">×</button>
169 <h4>Operational Policy</h4>
173 <div class="container">
174 <div attribute-test="policywindowpropertiesb" class="modal-body row">
176 <div class="leftPolicyPanel">
177 <div class="panel panel-default">
178 <i class="glyphicon glyphicon-search"></i>
179 <input type="text" id="policySearch" onkeyup="searchPolicyList()"
180 placeholder="Search ...">
181 <div id="policyTableHolder">
182 <table id="policyTable"></table>
185 <div style="float:left">
186 <button type="button" id="createNewPolicy" class="btn btn-sm">New Policy</button></span>
188 <div style="float:right">
189 <button type="button" id="deletePolicy" class="btn btn-sm glyphicon glyphicon-trash" disabled></button></span>
193 <div class="panel panel-default col-sm-9 policyPanel" style="display:none;">
194 <form id="Timeoutform" class="form-horizontal">
196 <div class="form-group clearfix row">
197 <label style="margin-top:5px;" class="col-sm-2">Name</label>
198 <input type="text" id="pname"; name="pname"; class="col-sm-4"></span>
200 <label for="userID" class="col-sm-3" style="margin-top:5px; padding:0px;">Overall Time Limit</label>
201 <input type="text" class="col-sm-2" id="timeout" name="timeout">
205 <div class="panel-heading" style="background-color: white;">
206 <ul id="nav_Tabs" class="nav nav-tabs">
207 <li class><a id="add_one_more" href="#desc_tab"><span
208 class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
211 <div class="panel-body">
212 <div class="tab-content">
213 <div id="properties_tab" class="tab-pane fade in active"></div>
218 <span id="formSpan" style="display: none">
219 <form class="saveProps" class="form-horizontal">
221 <div class="form-group clearfix" >
222 <label for="recipe" class="col-sm-4 control-label" >Recipe</label>
223 <div class="col-sm-8">
224 <select class="form-control" name="recipe" id="recipe" enableFilter="false"></select>
227 <div class="form-group clearfix">
228 <label for="maxRetries" class="col-sm-4 control-label">
230 <div class="col-sm-8">
231 <input type="number" min="0" class="form-control" id="maxRetries"
232 name="maxRetries"> </input>
236 <div class="form-group clearfix" >
237 <label for="retryTimeLimit" class="col-sm-4 control-label" >
238 Retry Time Limit</label>
239 <div class="col-sm-8">
240 <input type="number" min="0" class="form-control" id="retryTimeLimit"
241 name="retryTimeLimit"></input>
244 <div hidden class="form-group clearfix">
245 <label for="_id" class="col-sm-4 control-label">
247 <div class="col-sm-8">
248 <input type="text" onkeydown="return false;" class="form-control" id="_id"
249 name="_id" value=""></input>
252 <div class="form-group clearfix">
253 <label for="parentPolicy" class="col-sm-4 control-label">
254 Parent Policy</label>
255 <div class="col-sm-8">
256 <select class="form-control" id="parentPolicy"
257 name="parentPolicy" enableFilter="false"><option value=""></option></select>
260 <div class="form-group clearfix">
261 <label for="parentPolicyConditions" class="col-sm-4 control-label">
262 Parent Policy Conditions</label>
263 <div class="col-sm-8">
264 <select class="form-control" id="parentPolicyConditions"
265 name="parentPolicyConditions" multiple size=2></select>
274 <div attribute-test="policywindowpropertiesf" class="modal-footer">
275 <!--<button ng-click="reset()" class="btn btn-primary" style="float:left">Reset</button>-->
276 <button id="savePropsBtn" class="btn btn-primary">Close</button>
277 <button ng-click="close(true)" id="close_button"
278 class="btn btn-primary">Cancel</button>
282 //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
283 // css attribute display:none
284 $("#add_one_more").click(function(event) {
285 event.preventDefault();
289 loadPropertyWindow("policy")
291 // by default, parentPolicyConditions is disabled
292 $("#parentPolicyConditions").prop('disabled', 'disabled');
298 //Grab saved values for dropdowns
299 var obj = elementMap[lastElementSelected];
301 if (!($.isEmptyObject(obj))){
302 allPolicies = jQuery.extend({}, obj);
303 for (var x in allPolicies){
304 $("#policyTable").prepend("<tr id='"+x+"'><td>"+x+"</td></tr>");
308 //load recipes for a chosen policy
309 function disperseConfig(policyObj, id){
310 //remove old gui forms
311 for (var i=1; i<($(".formId").length + 1); i++){
312 $("#go_properties_tab"+i).parent().remove();
314 $(".formId").remove();
316 if (policyObj !== undefined) {
317 var el = policyObj[id][2]['policyConfigurations']
318 for (var i = 0; i < el.length; i++) {
320 var num = add_one_more();
322 for (var j = 0; j < el[i].length; j++) {
323 if(el[i][j].hasOwnProperty("name")){
324 $("#formId" + num + " #" + el[i][j].name).val(
326 if(el[i][j].name==="_id")
327 policy_ids["#formId" + num]=el[i][j].value
328 if(el[i][j].name==='parentPolicy')
329 parent_policy[num]=el[i][j].value
330 if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
331 $("#go_properties_tab"+num).text(el[i][j].value)
337 //Adding all the ids for parent policy options
338 for(var i=1;i<=$(".formId").length;i++){
339 for(k in policy_ids){
340 if($("#formId"+i+" #_id").val()!==policy_ids[k].toString() && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
341 $("#formId"+i+" #parentPolicy").append("<option value=\""+policy_ids[k]+"\">" +$(k+" #recipe").val()+"</option>");
346 for(k in parent_policy){
347 $("#formId"+k+" #parentPolicy").val(parent_policy[k]);
348 // force the change event
349 $("#formId"+k+" #parentPolicy").change();
352 if(policyObj[id][0] && policyObj[id][1]){
353 $("#" + policyObj[id][0].name).val(policyObj[id][0].value);
354 $("#" + policyObj[id][1].name).val(policyObj[id][1].value);
362 //This is ensure there are no repeated keys in the map
363 function noRepeats(form) {
364 //triggered per policy.
366 for (var i = 0; i < form.length; i++) {
367 if (select[form[i].name] === undefined)
368 select[form[i].name] = []
369 select[form[i].name].push(form[i].value);
381 $("#savePropsBtn").click(function(event) {
384 if ($("#policyTable .highlight").length > 0){
385 saveLastPolicyLocally($("#policyTable .highlight").attr("id"));
388 //Removes outdated (deleted) policies by checking against left menu
389 var finalSaveList = {};
390 $("#policyTable td").each(function(){
391 var tableVal = $(this).text();
392 if (tableVal in allPolicies){
393 finalSaveList[tableVal] = allPolicies[tableVal];
397 saveProperties(finalSaveList);
398 $("#close_button").click();
401 function add_one_more() {
402 $("#nav_Tabs li").removeClass("active");
404 //FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
405 var form = $($("#formSpan").children()[0]).clone()
407 //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
408 if ($(".formId").length > 0) {
410 var s = $(".formId");
411 for (var i = 0; i < s.length; i++) {
412 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
413 greatest = parseInt($(s[i]).attr("id").substring(6))
416 count = greatest + 1;
417 $("#properties_tab").append(
418 ('<span class="formId" id="formId'+count+'"></span>'));
421 $("#properties_tab").append(
422 '<span class="formId" id="formId1"></span>');
425 //$(form).find("#policyName").val("Recipe "+makid(2))
426 //TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
427 //alert($(form).find("#_id").val())
428 //policyNameChangeListener(form)
432 ' <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>');
433 $("#formId" + count).append(form);
434 $(".formId").not($("#formId" + count)).css("display", "none")
437 // This is for when the process is not loading from map but being created
440 $(form).find("#_id").val(l)
441 policy_ids["#formId" + count]=l
444 for(var i=1;i<=greatestIdNum();i++){
445 if($("#formId"+i).length>0){
447 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val()
448 $("#formId"+i+" #parentPolicy").empty();
449 for(k in policy_ids){
450 if($("#formId"+i+" #_id").val().toString()!==policy_ids[k] && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
451 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"''> "+$(k+" #recipe").val()+"</option>")
454 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
464 function add_new_policy(issueNewNames) {
465 //remove old gui forms
466 for (var i=1; i<($(".formId").length + 1); i++){
467 $("#go_properties_tab"+i).parent().remove();
469 $(".formId").remove();
472 var ms = new Date().getTime();
473 var defPolName = "Policy" + ms;
474 $("#pname").val(defPolName);
475 $("#timeout").val(defaults_props.policy.timeout);
477 //FormSpan contains a block of the form that is not being displayed. We will create clones of that and add them to tabs
478 var form = $($("#formSpan").children()[0]).clone()
480 //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
481 if ($(".formId").length > 0) {
483 var s = $(".formId");
485 for (var i = 0; i < s.length; i++) {
486 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
487 greatest = parseInt($(s[i]).attr("id").substring(6))
490 count = greatest + 1;
491 $("#properties_tab").append(
492 ('<span class="formId" id="formId'+count+'"></span>'));
495 $("#properties_tab").append(
496 '<span class="formId" id="formId1"></span>');
499 //$(form).find("#policyName").val("Recipe "+makid(2))
500 //TODO change up how we auto assign policyName. There could be the case where we do this and it will have repeats
501 //alert($(form).find("#_id").val())
502 //policyNameChangeListener(form)
506 ' <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>');
507 $("#formId" + count).append(form);
508 $(".formId").not($("#formId" + count)).css("display", "none")
511 // This is for when the process is not loading from map but being created
514 $(form).find("#_id").val(l)
515 policy_ids["#formId" + count]=l
518 for(var i=1;i<=greatestIdNum();i++){
519 if($("#formId"+i).length>0){
521 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val()
522 $("#formId"+i+" #parentPolicy").empty();
523 for(k in policy_ids){
524 if($("#formId"+i+" #_id").val().toString()!==policy_ids[k] && $(k+" #recipe").val()!==undefined && $(k+" #recipe").val()!==""){
525 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"''> "+$(k+" #recipe").val()+"</option>")
528 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
543 //listener will change the tab name to the recipe
544 function addTabListen(count){
545 $("#formId"+count+" #recipe").on("change",function(){
546 if($("#formId"+count+" #recipe").val().toString()!==""){
547 $('#go_properties_tab' + count).text($("#formId"+count+" #recipe").val())
550 $('#go_properties_tab' + count).text("Policy");
554 for(var i=1;i<=greatestIdNum();i++){
555 if($("#formId"+i).length>0){
557 answers["#formId"+i+" #parentPolicy"]=$("#formId"+i+" #parentPolicy").val()
558 $("#formId"+i+" #parentPolicy").empty();
560 for(k in policy_ids){
561 if($("#formId"+i+" #_id").val().toString()!==policy_ids[k] && $(k+" #recipe").val()!=='undefined' && $(k+" #recipe").val()!==""){
562 $("#formId"+i+" #parentPolicy").append("<option value='"+policy_ids[k]+"''> "+$(k+" #recipe").val()+"</option>")
565 $("#formId"+i+" #parentPolicy").prepend("<option value=''></option>")
573 // disable parentPolicyConditions when a parentPolicy is not selected
574 $("#formId"+count+" #parentPolicy").on("change",function(){
575 if($("#formId"+count+" #parentPolicy").val().toString()==""){
576 // deselect all options
577 $("#formId"+count+" #parentPolicyConditions option:selected").prop("selected", false);
578 // disable the select box
579 $("#formId"+count+" #parentPolicyConditions").prop('disabled', 'disabled');
581 $("#formId"+count+" #parentPolicyConditions").prop('disabled', false);
587 function addCustListen(count) {
588 $('#go_properties_tab' + count).click(function(event) {
589 $("#nav_Tabs li").removeClass("active");
590 $(this).parent().addClass("active");
591 $("#formId" + count).css("display", "")
592 $(".formId").not($("#formId" + count)).css("display", "none")
595 $('#tab_close' + count).click(function(event) {
596 if(document.getElementById("timeout").disabled){
599 $(this).parent().remove();
600 for(var i=1;i<=greatestIdNum();i++){
601 if( $("#formId"+i).length>0){
604 if( $("#formId"+i+" #parentPolicy").val()===$("#formId"+count+" #_id").val().toString())
605 $("#formId"+i+" #parentPolicy").val("")
606 $("#formId"+i+" #parentPolicy option[value='"+$("#formId"+count+" #_id").val().toString()+"']").remove();
610 delete policy_ids["#formId" + count + " #_id"]
611 $("#formId" + count).remove();
615 function greatestIdNum(){
617 var s = $(".formId");
618 for (var i = 0; i < s.length; i++) {
619 if (parseInt($(s[i]).attr("id").substring(6)) > greatest) {
620 greatest = parseInt($(s[i]).attr("id").substring(6))
626 //Generate random id for each policy
627 //Also made sure ids couldnt be repeated
632 var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
635 for( var i=0; i < 7; i++ )
636 text += possible.charAt(Math.floor(Math.random() * possible.length));
638 for(k in policy_ids){
639 if(text===policy_ids[k])
648 var ParentPolicy=function(id,name){
653 //Policy table search filter
654 function searchPolicyList() {
655 var search = document.getElementById("policySearch");
656 var row = document.getElementsByTagName("td");
657 for (var i=0; i<row.length; i++){
658 if (row[i].innerHTML.toUpperCase().indexOf(search.value.toUpperCase()) > -1){
659 row[i].style.display = "";
661 row[i].style.display = "none";
666 function saveLastPolicyLocally(lastPolicyId){
669 var properties = $(".saveProps").not("#formSpan .saveProps")
670 var timeoutForm = $("#Timeoutform").serializeArray();
672 for (var i=0; i<timeoutForm.length; i++){
673 polForm.push(timeoutForm[i]);
677 d["policyConfigurations"] = [];
678 for (var i = 0; i < properties.length; i++) {
679 var ser = $(properties[i]).serializeArray();
680 var s = noRepeats(ser)
681 d["policyConfigurations"].push(s);
684 allPolicies[lastPolicyId] = polForm;
687 $("#deletePolicy").on('click', function(){
688 var deleteId = $("#policyTable .highlight").attr("id");
689 delete allPolicies.deleteId;
690 $("#policyTable .highlight").remove();
694 $('#policyTable').on('click', 'tr', function(event) {
697 $(this).addClass('highlight').siblings().removeClass('highlight');
698 disperseConfig(allPolicies, $(this).attr("id"));
701 $('#createNewPolicy').on('click', function(){
704 var defPolName = add_new_policy();
706 if (("#policyTable .highlight").length > 0){
707 $('#policyTable tr.highlight').removeClass('highlight');
709 $("#policyTable").prepend("<tr class='highlight' id='" +defPolName+ "''><td>"+defPolName+"</td></tr>");
712 function startNextItem(){
713 //save last item before transitioning
714 var lastItem = $("#policyTable .highlight");
715 if (lastItem.length > 0){
716 saveLastPolicyLocally($("#pname").val());
718 lastItem.attr("id",$("#pname").val());
719 $("#"+lastItem.attr("id")+" td").html($("#pname").val());
725 if ($("#deletePolicy").prop("disabled")){
726 $("#deletePolicy").prop("disabled", false);
730 //Show table panel only
731 function expandTable(){
732 $(".policyPanel").css("display","none");
733 $(".leftPolicyPanel").removeClass("col-sm-3");
734 $(".glyphicon-search").css("padding", "25px 12px");
735 if (!($("#deletePolicy").prop("disabled"))){
736 $("#deletePolicy").prop("disabled", true);
741 function collapseTable(){
742 $(".leftPolicyPanel").addClass("col-sm-3");
743 $(".glyphicon-search").css("padding", "10px 12px");
744 $(".policyPanel").css("display","unset");