Fix issues in Operational Policy UI

Add prefix for Guard Policy Id; display attributes correctly when guard
type is FrequencyLimiter; initialize guard policy type accordingly; add
default value for guard active start/end attributes;

Issue-ID: CLAMP-386, CLAMP-387
Change-Id: I4c57ddcfccba207429fb1e75d9d2a4d6b0f15e8a
Signed-off-by: xg353y <xg353y@intl.att.com>

2 files changed, 59 insertions, 10 deletions

diff --git a/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
index fc6cc4dc4..3e9586685 100644
--- a/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
+++ b/src/main/resources/META-INF/resources/designer/partials/portfolios/operational_policy_window.html
@@ -58,6 +58,16 @@ label {
 	margin-bottom: 0px;
 }
 
+.withnote {
+	margin-bottom: 0px;
+}
+
+.note {
+	font-size:10px;
+	margin-left: 250px;
+	font-weight: normal;
+}
+
 #policyTable {
 	cursor: pointer;
 	width: 100%;
@@ -365,7 +375,7 @@ label {
 						<label for="guardPolicyType" class="col-sm-4 control-label">
 							Guard Policy Type</label> <select class="form-control"
 							name="guardPolicyType" id="guardPolicyType"
-							ng-change="changeGuardPolicyType()" ng-model="guardType">
+							ng-click="changeGuardPolicyType()" ng-model="guardType">
 							<option value="GUARD_MIN_MAX">MinMax</option>
 							<option value="GUARD_YAML">FrequencyLimiter</option>
 						</select>
@@ -374,12 +384,15 @@ label {
 				<form class="guardProperties" class="form-horizontal"
 					title="Guard policy associated" style="border: 2px dotted gray;">
 
-					<div class="form-group clearfix">
+					<div class="form-group clearfix withnote">
 						<label class="col-sm-4 control-label" for="id">Guard Policy ID</label>
 						<div class="col-sm-8">
-							<input type="text" class="form-control" name="id" id="id" />
+							<input type="text" class="form-control" name="id" id="id" ng-blur="changeGuardId()" ng-model="id"/>
 						</div>
 					</div>
+					<div>
+						<label class="form-group note">Note: Prefix will be added to Guard Policy ID automatically based on Guard Policy Type</label>
+					</div>
 					<div class="form-group clearfix">
 						<label class="col-sm-4 control-label" for="recipe">Recipe</label>
 						<div class="col-sm-8">
@@ -428,6 +441,7 @@ label {
 						<div class="col-sm-8">
 							<input class="form-control" name="limit" id="limit" />
 						</div>
+						<label for="timeUnits" class="col-sm-4 control-label">Time Units</label>
 						<div class="col-sm-8">
 							<select class="form-control" name="timeUnits"
 								id="timeUnits">
@@ -438,13 +452,11 @@ label {
 								<option value="week">week</option>
 								<option value="month">month</option>
 								<option value="year">year</option>
-
-							</select> <label for="timeWindow" class="col-sm-4 control-label">Time
-								Window</label>
+							</select> 
 						</div>
+						<label for="timeWindow" class="col-sm-4 control-label">Time	Window</label>
 						<div class="col-sm-8">
-							<input class="form-control" name="timeWindow"
-								id="timeWindow" />
+							<input class="form-control" name="timeWindow" id="timeWindow" />
 						</div>
 					</div>
 					<div class="form-group clearfix">
@@ -452,13 +464,13 @@ label {
 							Guard Active Start</label>
 						<div class="col-sm-8">
 							<input class="form-control" name="guardActiveStart"
-								id="guardActiveStart" />
+								id="guardActiveStart"  value="00:00:00Z"/>
 						</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" />
+								id="guardActiveEnd" value="00:00:01Z"/>
 						</div>
 					</div>
 
diff --git a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
index f474cf413..95fc42038 100644
--- a/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
+++ b/src/main/resources/META-INF/resources/designer/scripts/OperationalPolicyCtrl.js
@@ -214,12 +214,24 @@ app
 						    $("#formId" + formNum + " .guardProperties").find("#" + guardPropElemValue.id).val(
 						    guardElemValue[guardPropElemValue.id]);
 					    });
+					    iniGuardPolicyType(guardElemId, formNum);
 					    // And finally enable the flag
 					    $("#formId" + formNum + " #enableGuardPolicy").prop("checked", true);
 				    }
 			    });
 		    });
 	    }
+	    function iniGuardPolicyType (guardPolicyId, formNum) {
+		    if(guardPolicyId.indexOf('guard.minmax.') !== -1) {
+				$("#formId" + formNum + " #minMaxGuardPolicyDiv").show();
+				$("#formId" + formNum + " #frequencyLimiterGuardPolicyDiv").hide();
+				$("#formId" + formNum + " #guardPolicyType").val("GUARD_MIN_MAX");
+		    } else if (guardPolicyId.indexOf('guard.frequency.') !== -1) {
+		    	$("#formId" + formNum + " #minMaxGuardPolicyDiv").hide();
+			    $("#formId" + formNum + " #frequencyLimiterGuardPolicyDiv").show();
+			    $("#formId" + formNum + " #guardPolicyType").val("GUARD_YAML");
+		    }
+	    }
 	    function initTargetResourceIdOptions (targetType, formNum) {
 		    var recipe = $("#formId" + formNum + "#recipe").val();
 		    $("#formId" + formNum + " #resourceId").empty();
@@ -263,6 +275,30 @@ app
 		    initTargetResourceIdOptions(type, formNum);
 	    }
 
+	    $scope.changeGuardId = function(formItemActive) {
+		    if (formItemActive === undefined) {
+			    formItemActive = searchActiveFormId();
+			    if (formItemActive === undefined) {
+			    	return;
+			    }
+		    }
+		    var oldValue = $("#" + formItemActive.id + " .guardProperties #id").val();
+		    // remove old prefix
+		    if(oldValue.indexOf('guard.minmax.') !== -1) {
+		    	oldValue = oldValue.substr(oldValue.indexOf('guard.minmax.') + 13);
+		    } else if (oldValue.indexOf('guard.frequency.') !== -1) {
+		    	oldValue = oldValue.substr(oldValue.indexOf('guard.frequency.') + 16);
+		    }
+
+		    var prefix = "guard.";
+		    if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_MIN_MAX") {
+		    	prefix = prefix + "minmax.";
+		    } else if ($("#" + formItemActive.id + " #guardPolicyType").val() === "GUARD_YAML") {
+		    	prefix = prefix + "frequency.";
+		    }
+		    $("#" + formItemActive.id + " .guardProperties #id").val(prefix+oldValue);
+	    }
+
 	    $scope.changeTargetResourceId = function(event) {
 		    var formNum = $(event.target).closest('.formId').attr('id').substring(6);
 		    initTargetModelAttributes(formNum);
@@ -298,6 +334,7 @@ app
 			    $("#" + formItemActive.id + " #minMaxGuardPolicyDiv").hide();
 			    $("#" + formItemActive.id + " #frequencyLimiterGuardPolicyDiv").show();
 		    }
+		    $scope.changeGuardId(formItemActive);
 	    }
 	    $scope.initPolicySelect = function() {