Introduce new changes to UI
[clamp.git] / src / main / resources / META-INF / resources / designer / partials / portfolios / PolicyWindow_properties.html
index 00e1675..25cc9a0 100644 (file)
@@ -2,7 +2,7 @@
   ============LICENSE_START=======================================================
   ONAP CLAMP
   ================================================================================
-  Copyright (C) 2017 AT&T Intellectual Property. All rights
+  Copyright (C) 2017-2018 AT&T Intellectual Property. All rights
                               reserved.
   ================================================================================
   Licensed under the Apache License, Version 2.0 (the "License"); 
@@ -18,7 +18,7 @@
   limitations under the License.
   ============LICENSE_END============================================
   ===================================================================
-  ECOMP is a trademark and service mark of AT&T Intellectual Property.
+  
   -->
 
 
        background-color: #dddd;
 }
 
-.fileUpload {
-       position: relative;
-       overflow: hidden;
-       margin: 10px;
-}
-
-.fileUpload input.upload {
-       position: absolute;
-       top: 0;
-       right: 0;
-       margin: 0;
-       padding: 0;
-       font-size: 20px;
-       cursor: pointer;
-       opacity: 0;
-       filter: alpha(opacity = 0);
-       float: left;
-}
-
-.fileDisplay {
-       display: inline-block;
-       overflow: hidden;
-       float: right;
-       margin-left: 0px;
-       z-index: initial;
-       text-align: center;
-       margin-top: 17px;
-}
-
 .modelSearchBox {
        position: absolute;
        padding: 25px 12px;
@@ -141,28 +112,6 @@ label {
 }
 </style>
 
-<script type="text/javascript">
-       function disablefile() {
-
-               document.getElementById("fileUpload").disabled = true;
-
-       }
-
-       function disableSVN() {
-               var selectLength = document.querySelectorAll(".disabled-block-container .tab-close-popup");
-               if(selectLength && selectLength.length>0){
-                       for(var i = 0; i< selectLength.length ; i++){
-                               selectLength[i].disabled = true;
-                       }       
-               }
-
-               document.getElementById("schemaLocation").disabled = true;
-               document.getElementById("userID").disabled = true;
-               document.getElementById("password").disabled = true;
-
-       }
-</script>
-
 
 <div attribute-test="policywindowproperties" id="configure-widgets"
        class="disabled-block-container">
@@ -178,42 +127,55 @@ label {
 
                        <div class="leftPolicyPanel">
                                <div class="panel panel-default">
-                               <i class="glyphicon glyphicon-search modelSearchBox"></i>
-                               <input type="text" id="policySearch" onkeyup="searchPolicyList()"
+                                       <i class="glyphicon glyphicon-search modelSearchBox"></i> <input
+                                               type="text" id="policySearch" onkeyup="searchPolicyList()"
                                                placeholder="Search ...">
                                        <div id="policyTableHolder">
                                                <table id="policyTable"></table>
                                        </div>
                                </div>
                                <div style="float: left">
-                               <button type="button" id="createNewPolicy" class="btn btn-sm">New Policy</button></span>
+                                       <button type="button" id="createNewPolicy" class="btn btn-sm">New
+                                               Policy</button>
+                                       </span>
                                </div>
                                <div style="float: right">
-                               <button type="button" id="deletePolicy" class="btn btn-sm glyphicon glyphicon-trash" disabled></button></span>
+                                       <button type="button" id="deletePolicy"
+                                               class="btn btn-sm glyphicon glyphicon-trash" disabled></button>
+                                       </span>
                                </div>
-                       <div id="repeatIdError" class="idError">Error: This Policy name is already taken.</div>
-                       <div id="newIdError" class="idError">Error: Please rename your new Policy.</div>
-                       <div id="spaceError" class="idError">Error: Spaces are not allowed in the ID.</div>
+                               <div id="repeatIdError" class="idError">Error: This Policy
+                                       name is already taken.</div>
+                               <div id="newIdError" class="idError">Error: Please rename your
+                                       new Policy.</div>
+                               <div id="spaceError" class="idError">Error: Spaces are not
+                                       allowed in the ID.</div>
                        </div>
 
-               <div class="panel panel-default col-sm-9 policyPanel" style="display:none;">
+                       <div class="panel panel-default col-sm-9 policyPanel"
+                               style="display: none;">
                                <form id="Timeoutform" class="form-horizontal">
                                        <div>
                                                <div class="form-group clearfix row">
                                                        <label class="col-sm-2">Name</label>
                                                        <div class="col-sm-3" style="padding: 0px;">
-                                                       <input type="text" id="pname" name="pname" maxlength="48" placeholder="Enter Unique Name" class="form-control">
+                                                               <input type="text" id="pname" name="pname" maxlength="48"
+                                                                       placeholder="Enter Unique Name" class="form-control">
                                                        </div>
 
                                                        <label class="col-sm-1">ID</label>
                                                        <div class="col-sm-1" style="padding: 0px;">
-                                                       <input onkeydown="return false;" type="text" id="pid" name="pid" class="form-control" readonly>
+                                                               <input onkeydown="return false;" type="text" id="pid" name="pid"
+                                                                       class="form-control" readonly>
                                                        </div>
 
-                                               <label for="userID" class="col-sm-3" style="padding-left:5px;padding-right:10px;">Overall Time Limit</label>
+                                                       <label for="userID" class="col-sm-3"
+                                                               style="padding-left: 5px; padding-right: 10px;">Overall
+                                                               Time Limit</label>
                                                        <div class="col-sm-2" style="padding-left: 0px;">
-                                                       <input type="text" maxlength="10" onkeypress="return isNumberKey(event)"
-                                                               class="form-control" id="timeout" name="timeout">
+                                                               <input type="text" maxlength="10"
+                                                                       onkeypress="return isNumberKey(event)" class="form-control"
+                                                                       id="timeout" name="timeout">
                                                        </div>
                                                </div>
                                        </div>
@@ -237,15 +199,16 @@ label {
                                                <div class="form-group clearfix">
                                                        <label class="col-sm-4 control-label" for="recipe">Recipe</label>
                                                        <div class="col-sm-8">
-                                                       <select class="form-control" name="recipe" id="recipe" enableFilter="true"></select>
+                                                               <select class="form-control" name="recipe" id="recipe"
+                                                                       enableFilter="true"></select>
                                                        </div>
                                                </div>
                                                <div class="form-group clearfix">
                                                        <label for="maxRetries" class="col-sm-4 control-label">
                                                                Max Retries</label>
                                                        <div class="col-sm-8">
-                                                       <input type="text" maxlength="5" class="form-control" id="maxRetries"
-                                                               onkeypress="return isNumberKey(event)"
+                                                               <input type="text" maxlength="5" class="form-control"
+                                                                       id="maxRetries" onkeypress="return isNumberKey(event)"
                                                                        name="maxRetries"> </input>
                                                        </div>
                                                </div>
@@ -253,17 +216,16 @@ label {
                                                        <label for="retryTimeLimit" class="col-sm-4 control-label">
                                                                Retry Time Limit</label>
                                                        <div class="col-sm-8">
-                                                       <input type="text" maxlength="5" class="form-control" id="retryTimeLimit"
-                                                               onkeypress="return isNumberKey(event)"
+                                                               <input type="text" maxlength="5" class="form-control"
+                                                                       id="retryTimeLimit" onkeypress="return isNumberKey(event)"
                                                                        name="retryTimeLimit"></input>
                                                        </div>
                                                </div>
                                                <div style="display: none;" class="form-group clearfix">
-                                               <label for="_id" class="col-sm-4 control-label">
-                                                       PolicyID</label>
+                                                       <label for="_id" class="col-sm-4 control-label"> PolicyID</label>
                                                        <div class="col-sm-8">
-                                                       <input type="text" onkeydown="return false;"  class="form-control" id="_id"
-                                                               name="_id" value=""></input>
+                                                               <input type="text" onkeydown="return false;"
+                                                                       class="form-control" id="_id" name="_id" value=""></input>
                                                        </div>
                                                </div>
                                                <div class="form-group clearfix">
@@ -271,23 +233,119 @@ label {
                                                                Parent Policy</label>
                                                        <div class="col-sm-8">
                                                                <select class="form-control" id="parentPolicy"
-                                                               name="parentPolicy" enableFilter="true"><option value=""></option></select>
+                                                                       name="parentPolicy" enableFilter="true"><option
+                                                                               value=""></option></select>
                                                        </div>
                                                </div>
                                                <div class="form-group clearfix">
-                                               <label for="parentPolicyConditions" class="col-sm-4 control-label">
-                                                       Parent Policy Conditions</label>
+                                                       <label for="parentPolicyConditions"
+                                                               class="col-sm-4 control-label"> Parent Policy Conditions</label>
                                                        <div class="col-sm-8">
                                                                <select class="form-control" id="parentPolicyConditions"
                                                                        name="parentPolicyConditions" multiple></select>
                                                        </div>
                                                </div>
                                                <div class="form-group clearfix">
+
+                                                       <label for="actor" class="col-sm-4 control-label"> Actor</label>
+                                                       <div class="col-sm-8">
+                                                               <select class="form-control" id="actor" name="actor"></select>
+                                                       </div>
+
+                                                       <label for="payload" class="col-sm-4 control-label">
+                                                               Payload</label>
+                                                       <div class="col-sm-8">
+                                                               <textarea class="form-control" id="recipeInput" name=recipeInput></textarea>
+                                                       </div>
+                                               </div>
+                                               <div class="form-group clearfix">
+                                                       <label for="targetType" class="col-sm-4 control-label">
+                                                               Target Type</label>
+                                                       <div class="col-sm-8">
+                                                               <select class="form-control" name="recipeLevel" id="recipeLevel">
+                                                               </select>
+                                                       </div>
+
                                                        <label for="targetResourceId" class="col-sm-4 control-label">
                                                                Target ResourceId</label>
                                                        <div class="col-sm-8">
-                                                               <input type="text" class="form-control" id="targetResourceId"
-                                                                       name="targetResourceId"> </input>
+                                                               <select class="form-control" name="targetResourceId"
+                                                                       id="targetResourceId" enableFilter="true"
+                                                                       onchange="changeTargetResourceIdOther();">
+                                                                       <option value=""></option>
+                                                                       <option value="Other:">Other:</option>
+                                                               </select>
+                                                       </div>
+                                                       <input type="text" style="display: none" class="form-control"
+                                                               id="targetResourceIdOther" name="targetResourceIdOther" value=""></input>
+                                               </div>
+                                               <div style="border: 2px dotted gray;">
+                                                       <div class="form-group clearfix">
+                                                               <label for="enableGuardPolicy" class="col-sm-4 control-label">
+                                                                       Enable Guard Policy</label>
+                                                               <div class="col-sm-8">
+                                                                       <input type="checkbox" class="form-control"
+                                                                               name="enableGuardPolicy" id="enableGuardPolicy">
+                                                               </div>
+                                                               <div class="col-sm-8">
+                                                                       <label for="guardPolicyType" class="col-sm-4 control-label">
+                                                                               Guard Policy Type</label> 
+                                                                               <select class="form-control"
+                                                                               name="guardPolicyType" id="guardPolicyType"
+                                                                               onchange="changeGuardPolicyType();">
+                                                                               <option value="MinMax">MinMax</option>
+                                                                               <option value="FrequencyLimiter">FrequencyLimiter</option>
+                                                                       </select>
+                                                               </div>
+                                                               <label for="guardTargets" class="col-sm-4 control-label">Guard
+                                                                       targets</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="guardTargets"
+                                                                               id="guardTargets" />
+                                                               </div>
+                                                       </div>
+
+                                                       <div class="form-group clearfix" id="minMaxGuardPolicyDiv">
+                                                               <label for="minGuard" class="col-sm-4 control-label">
+                                                                       Min Guard</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="minGuard" id="minGuard" />
+                                                               </div>
+                                                               <label for="maxGuard" class="col-sm-4 control-label">
+                                                                       Max Guard</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="maxGuard" id="maxGuard" />
+                                                               </div>
+                                                       </div>
+                                                       <div class="form-group clearfix"
+                                                               id="frequencyLimiterGuardPolicyDiv" style="display: none">
+                                                               <label for="limitGuard" class="col-sm-4 control-label">Limit</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="limitGuard" id="limitGuard" />
+                                                               </div>
+                                                               <div class="col-sm-8">
+                                                                       <select class="form-control" name="timeUnitsGuard"
+                                                                               id="timeUnitsGuard" /> <label for="timeWindowGuard"
+                                                                               class="col-sm-4 control-label">Time Window</label>
+                                                               </div>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="timeWindowGuard"
+                                                                               id="timeWindowGuard" />
+                                                               </div>
+                                                       </div>
+                                                       <div class="form-group clearfix">
+                                                               <label for="guardActiveStart" class="col-sm-4 control-label">
+                                                                       Guard Active Start</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="guardActiveStart"
+                                                                               id="guardActiveStart" />
+                                                               </div>
+                                                               <label for="guardActiveEnd" class="col-sm-4 control-label">
+                                                                       Guard Active End</label>
+                                                               <div class="col-sm-8">
+                                                                       <input class="form-control" name="guardActiveEnd"
+                                                                               id="guardActiveEnd" />
+                                                               </div>
                                                        </div>
                                                </div>
                                        </div>
@@ -304,6 +362,36 @@ label {
        </div>
 
        <script>
+       
+       function initTargetResourceId() {
+               // Set all the Resource Invariant UUID in the target resource ID list (+Empty and other) 
+               Object.keys(vf_Services["shared"]["byVf"]).forEach(function(key){
+                       $('#targetResourceId').append($('<option></option>').val(key).html(key));
+               });
+       }
+       
+       function changeTargetResourceIdOther() {
+               if ($("#targetResourceId").val()==="Other:") {
+                       $("#targetResourceIdOther").show();
+               } else {
+                       $("#targetResourceIdOther").hide();
+                       $("#targetResourceIdOther").val("");
+               }
+       }
+       
+       function changeGuardPolicyType() {
+               console.log("executing GuardPolicyType")
+               console.log("GuardPolicyType value:"+$("#guardPolicyType").val())
+               if ($("#guardPolicyType").val()==="MinMax") {
+                       console.log("executing GuardPolicyType")
+                       $("#minMaxGuardPolicyDiv").show();
+                       $("#frequencyLimiterGuardPolicyDiv").hide();
+               } else if ($("#guardPolicyType").val()==="FrequencyLimiter") {
+                       console.log("executing GuardPolicyType")
+                       $("#minMaxGuardPolicyDiv").hide();
+                       $("#frequencyLimiterGuardPolicyDiv").show();
+               }
+       }
                //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 
                // css attribute display:none
                $("#add_one_more").click(function(event) {
@@ -334,7 +422,7 @@ label {
                        }
                }
                $("#pname").val('');            
-               
+
                //load recipes for a chosen policy
                function disperseConfig(policyObj, id){
                        parent_policy={};
@@ -360,7 +448,13 @@ label {
                                                                parent_policy[num]=el[i][j].value 
                                                        if(el[i][j].name==='recipe' && el[i][j].value.toString()!==''){
                                                                $("#go_properties_tab"+num).text(el[i][j].value)
-                                                       }       
+                                                       }
+                                                       if(el[i][j].name==="targetResourceIdOther" && el[i][j].value.toString()!=='') {
+                                                               // Add the entry and set it
+                                                               $('#targetResourceId').append($('<option></option>').val($('#targetResourceIdOther').val()).html($('#targetResourceIdOther').val()));
+                                                               $('#targetResourceId').val($('#targetResourceIdOther').val());
+                                                       }
+                                                       
                                                }
                                        }
                                }
@@ -385,16 +479,17 @@ label {
                                        $("#formId"+k+" #parentPolicy").change();
                                }
                                
+                               // Now load all component with the right value defined in policyObj JSON
                                for (headInd in policyObj[id]){
                                        if (!(policyObj[id][headInd].hasOwnProperty("policyConfigurations"))){
                                                $("#" + policyObj[id][headInd].name).val(policyObj[id][headInd].value);
                                        }
                                }
                        }
-                       
+
                        setMultiSelect();
                        
-                       if (readOnly||readMOnly){
+                       if (readMOnly){
                                $('select[multiple] option').each(function() {
                          var input = $('input[value="' + $(this).val() + '"]');
                          input.prop('disabled', true);
@@ -402,7 +497,7 @@ label {
                        });
                                $('input[value="multiselect-all"]').prop('disabled', true).parent('li').addClass('disabled');
                        }
-                       
+                       changeGuardPolicyType();
                }
 
                        function addSelectListen(count) {
@@ -454,6 +549,10 @@ label {
                }
                
                $("#savePropsBtn").click(function(event) {
+                       if($("#targetResourceIdOther").is(":visible")) {
+                               $('#targetResourceId').append($('<option></option>').val($("#targetResourceIdOther").val()).html($("#targetResourceIdOther").val()))
+                               $("#targetResourceId").val($("#targetResourceIdOther").val());
+                       }
                        $(".idError").hide();
                        if ($("#policyTable .highlight td").html() !== $("#pname").val()){
                                //repeated name
@@ -483,7 +582,7 @@ label {
                                        finalSaveList[tableVal] = allPolicies[tableVal];
                                }
                        });
-                       
+
                        saveProperties(finalSaveList);
                        $("#close_button").click();
                })              
@@ -523,7 +622,7 @@ label {
                        $("#formId" + count).append(form);
                        $(".formId").not($("#formId" + count)).css("display", "none")
                        addCustListen(count)
-                       //addTabListen(count)
+
                        addSelectListen(count);
                        // This is for when the process is not loading from map but being created
                        if(!loadingId){
@@ -571,27 +670,7 @@ label {
                        
                        $("#add_one_more").click();
                }
-               
-       
-               //listener will change the tab name to the recipe
-               function addTabListen(count){
-                       
-                       // disable parentPolicyConditions when a parentPolicy is not selected
-                       //don't think this is used..
-                       /* $("#formId"+count+" #parentPolicy").on("change",function(){
-                               if($("#formId"+count+" #parentPolicy").val().toString()==""){
-                                       // deselect all options
-                                       $("#formId"+count+" #parentPolicyConditions option:selected").prop("selected", false);
-                                       // disable the select box
-                                       $("#formId"+count+" #parentPolicyConditions").multiselect("disable");
-                                       
-                               } else {
-                                       $("#formId"+count+" #parentPolicyConditions").multiselect("enable");
-                                       
-                               }
-                       }); */
-               }
-               
+
                function addCustListen(count) {                 
                        $('#go_properties_tab' + count).click(function(event) {
                                $("#nav_Tabs li").removeClass("active");
@@ -746,7 +825,7 @@ label {
                                $("#newIdError").show();
                                return;
                        }
-                       if (!(readOnly||readMOnly)){
+                       if (!(readMOnly)){
                                startNextItem();
                        } else {
                                if ($("#policyTable .highlight").length == 0){
@@ -822,6 +901,7 @@ label {
                }
                
                setASDCFields();
+               initTargetResourceId();
                
                //load metrics dropdown
                if (elementMap["global"]){
@@ -837,20 +917,10 @@ label {
                                            });
                                                }
                                                break;
-                                       } else if (asSel == "enbRecipe"){
-                                               if (vf_Services["policy"][asSel]){
-                                                       $.each((vf_Services["policy"][asSel]), function(val, text) {
-                                               $('#recipe').append(
-                                                   $('<option></option>').val(val).html(text)
-                                               );
-                                           });
-                                               }
-                                               break;
                                        }
                                };
                        };
                };
-               
                //Show table panel only
                function expandTable() {
                        $(".policyPanel").css("display", "none");