From 25b1d57749353a02081cb11ef0f932e48bec93ca Mon Sep 17 00:00:00 2001 From: "Wang,Frank(gw1218)" Date: Thu, 29 Mar 2018 15:22:57 -0500 Subject: [PATCH] Fix a Bug in View Mode To make MS template layout better for complex MS models and also add parent level elments first in view mode. Issue-ID: POLICY-714 Change-Id: If6bf472a504f15fd9bde05253e9369ba43bb082e Signed-off-by: Wang,Frank(gw1218) --- .../DCAEMicroServicePolicyController.js | 170 +++++++++++++-------- .../policyApp/policy-models/Editor/css/main.css | 17 +++ 2 files changed, 125 insertions(+), 62 deletions(-) diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js index cb5c9ca19..79f8fddaa 100644 --- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/PolicyTemplateController/DCAEMicroServicePolicyController.js @@ -25,6 +25,8 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind $scope.savebutton = true; $scope.refreshCheck = false; + var layer = 0; + if(!$scope.temp.policy.editPolicy && !$scope.temp.policy.readOnly){ $scope.temp.policy = { policyType : "Config", @@ -97,7 +99,10 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var j = data; $scope.data = JSON.parse(j.data); console.log($scope.data); - $scope.microServiceCongigNameDictionaryDatas = JSON.parse($scope.data.microServiceCongigNameDictionaryDatas); + console.log("$scope.data.microServiceCongigNameDictionaryDatas : " + $scope.data.microServiceCongigNameDictionaryDatas); + if($scope.data.microServiceCongigNameDictionaryDatas){ + $scope.microServiceCongigNameDictionaryDatas = JSON.parse($scope.data.microServiceCongigNameDictionaryDatas); + } console.log($scope.microServiceCongigNameDictionaryDatas); }, function (error) { console.log("failed"); @@ -166,13 +171,16 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind $scope.choices = []; $scope.attributeDatas = [{"attributes" : $scope.choices}]; $scope.isInitEditTemplate = true; //just initially create the edit template, didn't click add button yet. - $scope.addNewChoice = function(value) { + addNewChoice = function(value) { console.log("input value : " + value); if(value != undefined){ if (value.startsWith('div.')){ value = value.replace('div.',''); } + + console.log(" document.getElementById : div."+value); var parentElement = document.getElementById("div."+value); + console.log("parentElement : " + parentElement); var div = document.getElementById(value+"@0"); if(div != null){ var clone = div.cloneNode(true); @@ -198,9 +206,20 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind plainAttributeKeys.push(''+value+'@'+addElement); } }else{ + + if(parentElement == null){ + return; + } div = document.getElementById("div."+value+"@0"); if(div){ - div.className += ' children_group'; //here is div with a group of children. + + if(!div.className.includes('children_group border')){ + layer++; + if(layer > 4){ + layer = 1 + }; + div.className += ' children_group border' + layer; //here is div with a group of children. + } } var childElement = parentElement.firstElementChild; var countParent = parentElement.childElementCount; @@ -228,13 +247,9 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind if ($scope.temp.policy.ruleData!=undefined){ var checkValue = $scope.temp.policy.ruleData[inputs[i].id]; if (checkValue!=undefined && checkValue != "undefined"){ - if($scope.temp.policy.ruleData != null){ - var checkValue = $scope.temp.policy.ruleData[inputs[i].id]; - document.getElementById(inputs[i].id).value = $scope.temp.policy.ruleData[inputs[i].id]; + document.getElementById(inputs[i].id).value = checkValue; plainAttributeKeys.push(inputs[i].id); - } } else { -// removeValues.push(inputs[i].id); plainAttributeKeys.push(inputs[i].id); } }else { @@ -264,13 +279,13 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind elem.parentNode.removeChild(elem); } var ele = angular.element(document.getElementById("div."+value)); - $compile(ele.contents())($scope); - $scope.$apply(); + $compile(ele.contents())($scope) } } }; - $scope.removeChoice = function(value) { + + removeChoice = function(value) { console.log(value); if(value != undefined){ var c = document.getElementById("div."+value).childElementCount; @@ -341,7 +356,7 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var postData={policyData: service}; console.log("service: " +service); - + var dataOrderInfo = ""; $.ajax({ @@ -352,7 +367,6 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind data: JSON.stringify(postData), success : function(data){ $scope.$apply(function(){ - // $scope.addNewChoice(); var plainAttributeKeys = []; $scope.dcaeModelData = data[0].dcaeModelData; $scope.dcaeJsonDate = data[0].jsonValue; @@ -365,7 +379,8 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind console.log("$scope.allManyTrueKeys: " + $scope.allManyTrueKeys); } console.log("$scope.dcaeJsonDate: " + $scope.dcaeJsonDate); - var attributes = $scope.dcaeModelData.attributes; + var attributes = $scope.dcaeModelData.attributes; + console.log("attributes: " +attributes); var refAttributes = $scope.dcaeModelData.ref_attributes; var subAttributes = $scope.dcaeModelData.sub_attributes; console.log("subAttributes: " + subAttributes); @@ -377,15 +392,8 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind $scope.temp.policy.riskType = headDefautlsData.riskType; $scope.temp.policy.riskLevel = headDefautlsData.riskLevel; $scope.temp.policy.priority = headDefautlsData.priority; - - }else if(!$scope.temp.policy.editPolicy && !$scope.temp.policy.readOnly){ - $scope.temp.policy.onapName = ""; - $scope.temp.policy.guard = ""; - $scope.temp.policy.riskType = ""; - $scope.temp.policy.riskLevel = ""; - $scope.temp.policy.priority = ""; } - + var enumAttributes = $scope.dcaeModelData.enumValues; var annotation = $scope.dcaeModelData.annotation; var dictionary = $scope.microServiceAttributeDictionaryDatas; @@ -451,9 +459,9 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var extraElements = data; if(plainAttributeKeys != null){ - for(b = 0; b < plainAttributeKeys.length; b++){ // Remove already populated elements from data array + for(var b = 0; b < plainAttributeKeys.length; b++){ // Remove already populated elements from data array var newValue = plainAttributeKeys[b].split("*"); - for(a = 0; a < data.length; a++){ + for(var a = 0; a < data.length; a++){ if(data[a] === newValue[0] || data[a] === (newValue[0]+"@0")){ extraElements.splice(a, 1); } @@ -461,7 +469,7 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind } //--- Populate these extra elements created by clicked add button - for(a = 0; a < extraElements.length; a++){ + for(var a = 0; a < extraElements.length; a++){ if(extraElements[a].includes("@")){ var index = extraElements[a].lastIndexOf("@"); if(index > 0){ @@ -475,34 +483,45 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind } } var unique = checkData.filter(onlyUnique); + var parentLevelElements = []; + if(unique){ + //--- get all root level exta elments first (only contains one "@") + for(var i =0; i < unique.length; i++){ + var firstIndex = unique[i].indexOf("@"); + var lastIndex = unique[i].lastIndexOf("@"); + if(firstIndex == lastIndex){ + var newKey = unique[i].substring(0, firstIndex); + console.log("root element: " + newKey); + parentLevelElements.push(newKey); + unique[i] = "*processed*"; + } + } + } //if no layout order info, keep the process as before if(!dataOrderInfo){ - for(i =0; i < unique.length; i++){ + for(var i =0; i < unique.length; i++){ //remove @x and let addNewChoice add @1 or @2... //var newKey = unique[i].substring(0, unique[i].length-2); var index = unique[i].lastIndexOf("@"); var newKey = unique[i].substring(0, index); console.log("newKey: " + newKey); - $scope.addNewChoice(newKey); + addNewChoice(newKey); } }else{ - for (i = 0; i < $scope.labelManyKeys.length; i++) { + for (var i = 0; i < $scope.labelManyKeys.length; i++) { //console.log("dataOrderInfo["+i+"]"+ dataOrderInfo[i]); var label = $scope.labelManyKeys[i]; - // first add parent/label level - for (k = 0; k < unique.length; k++){ - var index = unique[k].lastIndexOf("@"); - var newKey = unique[k].substring(0, index); - if(label == newKey){ - //Check this label has bee created or not - if(!document.getElementById(unique[k])){ - $scope.addNewChoice(newKey); - } - unique[k] = "*processed*"; - break; - } - } + + if(parentLevelElements){ + for (var k = 0; k < parentLevelElements.length; k++){ + if(label == parentLevelElements[k]){ + addNewChoice(label); + } + } + + } + } //---reset to default @@ -510,24 +529,34 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind $scope.labelManyKeys = []; //---process none labels - for (j = 0; j < unique.length; j++){ + for (var j = 0; j < unique.length; j++){ if(unique[j] != "*processed*"){ // if not created yet if(!document.getElementById(unique[j])){ var index = unique[j].lastIndexOf("@"); var newKey = unique[j].substring(0, index); - $scope.addNewChoice(newKey); + + var newElement = document.getElementById("div."+unique[j]); + + //check weather it has been created already + if(newElement != null){ + continue; + }else{ + newElement = document.getElementById(unique[j]); + if(newElement != null){ + continue; + } + } + //if not created yet, then create it. + addNewChoice(newKey); + } } } } } } - - if($scope.temp.policy.editPolicy){ - //clean all the events of addNewChoice - $scope.$on('$destroy', addNewChoice); - } + } var ele = angular.element(document.getElementById("DynamicTemplate")); $compile(ele.contents())($scope); @@ -538,8 +567,6 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind alert("Error While Retriving the Template Layout Pattren."); } }); - - } }; @@ -862,13 +889,13 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind orderValue = orderValue.split(',') ; - for (i = 0; i < orderValue.length; i++) { + for (var i = 0; i < orderValue.length; i++) { console.log("orderValue["+i+"]"+ orderValue[i]); var key = orderValue[i].trim(); //--- Create labels first {"label" : newKey, "level" : baseLevel, "array" : array}; if(labelList){ - for (k = 0; k < labelList.length; k++){ + for (var k = 0; k < labelList.length; k++){ var label = labelList[k].label.toString().trim(); var level = labelList[k].level.toString().trim(); @@ -883,7 +910,7 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind } } //--- then layout each element based on its order defined in YAML file - for (j = 0; j < layOutElementList.length; j++) { + for (var j = 0; j < layOutElementList.length; j++) { var attributekey = layOutElementList[j].attributekey.toString().trim(); @@ -894,7 +921,7 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var isRequired = layOutElementList[j].isRequired; console.log("layOutElementList[" +j+ "]: id:" + layOutElementList[j].id + ", attributekey:"+ layOutElementList[j].attributekey + ", attirbuteLabel:" + layOutElementList[j].attirbuteLabel); - + console.log("layOutElementList[" +j+ "]: type:" + layOutElementList[j].type); if (layOutElementList[j].type == "dropBox"){ $scope.dropBoxLayout(attirbuteLabel, attributekey, layOutElementList[j].array, defaultValue, layOutElementList[j].list, isRequired); @@ -968,13 +995,13 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind addButton.appendChild(buttonaddLabel); addButton.setAttribute("id", labelValue + attibuteKey); addButton.setAttribute("class", "btn btn-add-remove"); - addButton.setAttribute("ng-click" , 'addNewChoice("'+labelValue + attibuteKey+'");'); + addButton.setAttribute("onclick" , 'addNewChoice("'+labelValue + attibuteKey+'");'); addButton.setAttribute("ng-disabled" , "temp.policy.readOnly"); var removeButton = document.createElement("BUTTON"); var buttonremoveLabel = document.createTextNode("-"); removeButton.appendChild(buttonremoveLabel); removeButton.setAttribute("class", "btn btn-add-remove"); - removeButton.setAttribute("ng-click" , 'removeChoice("'+labelValue + attibuteKey+'");'); + removeButton.setAttribute("onclick" , 'removeChoice("'+labelValue + attibuteKey+'");'); removeButton.setAttribute("ng-disabled" , "temp.policy.readOnly"); document.getElementById(divID).appendChild(addButton); document.getElementById(divID).appendChild(removeButton); @@ -1024,7 +1051,14 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var firstChild_Id = divID.split("@0")[0]; var firstChild_element = document.getElementById(firstChild_Id); if(firstChild_element){ - firstChild_element.className += ' children_group'; //here is a div with a group of children. + + if(!firstChild_element.className.includes('children_group border')){ + layer++; + if(layer > 4){ + layer = 1 + }; + firstChild_element.className += ' children_group border' + layer; //here is div with a group of children. + } } } console.log('firstChild_Id: ' + firstChild_Id); @@ -1099,13 +1133,13 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var buttonLabel = document.createTextNode("+"); addButton.appendChild(buttonLabel); addButton.setAttribute("class", "btn btn-add-remove"); - addButton.setAttribute("ng-click" , 'addNewChoice("'+labelValue + lableName+'");'); + addButton.setAttribute("onclick" , 'addNewChoice("'+labelValue + lableName+'");'); addButton.setAttribute("ng-disabled" , "temp.policy.readOnly"); var removeButton = document.createElement("BUTTON"); var buttonremoveLabel = document.createTextNode("-"); removeButton.appendChild(buttonremoveLabel); removeButton.setAttribute("class", "btn btn-add-remove"); - removeButton.setAttribute("ng-click" , 'removeChoice("'+labelValue +lableName+'");'); + removeButton.setAttribute("onclick" , 'removeChoice("'+labelValue +lableName+'");'); removeButton.setAttribute("ng-disabled" , "temp.policy.readOnly"); document.getElementById(divID).appendChild(addButton); document.getElementById(divID).appendChild(removeButton); @@ -1118,8 +1152,13 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind var divTag = document.createElement("div"); divTag.setAttribute("id", id +'@0'); - divTag.className += ' children_group'; //here is div with a group of children. - + if(!divTag.className.includes('children_group border')){ + layer++; + if(layer > 4){ + layer = 1 + }; + divTag.className += ' children_group border' + layer; //here is div with a group of children. + } if(required){ divTag.setAttribute("required", required); }else if(required == false){ @@ -1133,7 +1172,14 @@ angular.module('abs').controller('dcaeMicroServiceController', ['$scope', '$wind }else{ var divTag = document.createElement("div"); divTag.setAttribute("id", "div."+labelValue+lableName); - divTag.className += ' children_group'; //here is div with a group of children. + + if(!divTag.className.includes('children_group border')){ + layer++; + if(layer > 4){ + layer = 1 + }; + divTag.className += ' children_group border' + layer; //here is div with a group of children. + } if(required){ divTag.setAttribute("required", required); }else if(required == false){ diff --git a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css index 1e6da205d..850adb338 100644 --- a/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css +++ b/POLICY-SDK-APP/src/main/webapp/app/policyApp/policy-models/Editor/css/main.css @@ -99,6 +99,23 @@ body { border-radius: 4px; } +.border1 { + border: 2px solid #0000a0; +} + +.border2 { + border: 2px solid #a94442; +} + +.border3 { + border: 2px solid #808000; +} + +.border4 { + border: 2px solid #ffb900; +} + + .first_child { margin-top: 10px; } -- 2.16.6