Skip to content

Commit

Permalink
feature:support non-properties-diff (#4533)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SunnyBoy-WYH
SunnyBoy-WYH authored Aug 31, 2022
1 parent 150fe19 commit 9b14c3e
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 9 deletions.
32 changes: 30 additions & 2 deletions apollo-portal/src/main/resources/static/config/diff.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
</div>
</div>
</header>
<!--step 1-->
<div class="panel-body">
<div class="row" ng-show="syncItemStep == 1">
<div class="alert-info alert no-radius">
Expand All @@ -83,6 +84,23 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
apollo-default-checked-cluster="pageContext.clusterName"></apolloclusterselector>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">{{'Config.Diff.DiffType' | translate }}</label>
<div class="col-sm-6">
<div class="radio-inline">
<label >
<input type="radio" name="tableDiff" ng-click="isTableDiff" checked="true" ng-checked="isTableDiff">
{{'Config.Diff.TableDiff' | translate }}
</label>
</div>
<div class="radio-inline">
<label >
<input type="radio" name="tableDiff" ng-click="!isTableDiff" ng-checked="!isTableDiff">
{{'Config.Diff.TextDiff' | translate }}
</label>
</div>
</div>
</div>
</div>
<hr>
</div>
Expand All @@ -91,7 +109,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
<div class="row" ng-show="syncItemStep == 2">
<div class="row" style="margin-top: 10px;">
<div class="form-horizontal">
<div class="col-sm-12">
<div class="col-sm-12" ng-show="isTableDiff">
<label class="control-label">
<input type="text" class="comment-toggle"
ng-model="searchKey"
Expand All @@ -109,7 +127,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
</label>
</div>
<div class="col-sm-12 diff-content">
<table class="table table-bordered table-striped table-hover">
<table class="table table-bordered table-striped table-hover" ng-show="isTableDiff">
<thead>
<tr>
<td>Key</td>
Expand All @@ -134,6 +152,9 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
</tr>
</tbody>
</table>
<apollodiff ng-show="!isTableDiff" old-str="syncData.syncToNamespaces[0].originTextInfo"
new-str="syncData.syncToNamespaces[1].originTextInfo" apollo-id="'releaseStrDiff'">
</apollodiff>
</div>
</div>
</div>
Expand Down Expand Up @@ -163,6 +184,10 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
<script src="../vendor/angular/angular-translate.2.18.1/angular-translate-loader-static-files.min.js"></script>
<script src="../vendor/angular/angular-translate.2.18.1/angular-translate-storage-cookie.min.js"></script>

<script type="text/javascript" src="../vendor/yaml.min.js"></script>
<script type="text/javascript" src="../vendor/xml2json.min.js"></script>
<script type="text/javascript" src="../vendor/diff.min.js"></script>

<!-- bootstrap.js -->
<script src="../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

Expand All @@ -182,6 +207,9 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
<script type="application/javascript" src="../scripts/PageCommon.js"></script>
<script type="application/javascript" src="../scripts/directive/directive.js"></script>
<script type="application/javascript" src="../scripts/directive/show-text-modal-directive.js"></script>
<script type="application/javascript" src="../scripts/directive/diff-directive.js"></script>


</body>

</html>
4 changes: 4 additions & 0 deletions apollo-portal/src/main/resources/static/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,10 +725,14 @@
"Config.Diff.TipsTitle": "Tips",
"Config.Diff.Tips": "By comparing configuration, you can see configuration differences between multiple environments and clusters",
"Config.Diff.DiffCluster": "Clusters to be compared",
"Config.Diff.DiffType": "Diff Type",
"Config.Diff.HasDiffComment": "Whether to compare comments or not",
"Config.Diff.TextDiff": "Text",
"Config.Diff.TableDiff": "Table",
"Config.Diff.SearchKey": "search configuration",
"Config.Diff.OnlyShowDiffKeys": "Only display configuration items with different values",
"Config.Diff.PleaseChooseTwoCluster": "Please select at least two clusters",
"Config.Diff.TextDiffMostChooseTwoCluster": "Please select at most two clusters",
"ConfigExport.Title": "Config Export/Import",
"ConfigExport.TitleTips" : "（The data (application, cluster and namespace) of one cluster can be migrated to another cluster by exporting and importing the configuration）",
"ConfigExport.SelectExportEnv" : "Select the environment to export",
Expand Down
4 changes: 4 additions & 0 deletions apollo-portal/src/main/resources/static/i18n/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,10 +725,14 @@
"Config.Diff.TipsTitle": "Tips",
"Config.Diff.Tips": "通过比较配置功能，可以查看多个环境、集群间的配置差异",
"Config.Diff.DiffCluster": "要比较的集群",
"Config.Diff.DiffType": "比对方式",
"Config.Diff.HasDiffComment": "是否比较注释",
"Config.Diff.TextDiff": "文本",
"Config.Diff.TableDiff": "表格",
"Config.Diff.SearchKey": "搜索配置项",
"Config.Diff.OnlyShowDiffKeys": "是否只显示值不一样的配置项",
"Config.Diff.PleaseChooseTwoCluster": "请至少选择两个集群",
"Config.Diff.TextDiffMostChooseTwoCluster": "文本比对至多选择两个集群",
"ConfigExport.Title": "配置导出导入",
"ConfigExport.TitleTips" : "（通过导出导入配置，把一个集群的数据（应用、集群、Namespace）迁移到另外一个集群）",
"ConfigExport.SelectExportEnv" : "选择导出的环境",
Expand Down
62 changes: 57 additions & 5 deletions apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ diff_item_module.controller("DiffItemController",

$scope.itemsKeyedByKey = {};
$scope.allNamespaceValueEqualed = {};
$scope.isTableDiff = true;

$scope.syncData = {
syncToNamespaces: [],
Expand All @@ -54,6 +55,10 @@ diff_item_module.controller("DiffItemController",
toastr.warning($translate.instant('Config.Diff.PleaseChooseTwoCluster'));
return;
}
if (!$scope.isTableDiff && $scope.syncData.syncToNamespaces.length > 2) {
toastr.warning($translate.instant('Config.Diff.TextDiffMostChooseTwoCluster'));
return;
}
const namespaceCnt = $scope.syncData.syncToNamespaces.length;
let loadedNamespaceCnt = 0;
$scope.syncData.syncToNamespaces.forEach(function (namespace) {
Expand All @@ -62,13 +67,39 @@ diff_item_module.controller("DiffItemController",
namespace.clusterName,
namespace.namespaceName).then(function (result) {
loadedNamespaceCnt ++;
result.forEach(function (item) {
if (item.key === "") {
const suffixArray = namespace.namespaceName.match(/[^.]+$/);
result.forEach(function (originItem) {
if (originItem.key === "") {
return
}
var itemsKeyedByClusterName = $scope.itemsKeyedByKey[item.key] || {};
itemsKeyedByClusterName[namespace.env + ':' + namespace.clusterName + ':' + namespace.namespaceName] = item;
$scope.itemsKeyedByKey[item.key] = itemsKeyedByClusterName;
let res = [];
// prop
if (suffixArray.length === 0) {
res.push(originItem)
} else {
namespace.originTextInfo = originItem.value
const suffix = suffixArray[0];
if (suffix === 'yml') {
res = Obj2Prop(
YAML.parse(originItem.value))
} else if (suffix === 'json') {
res = Obj2Prop(
JSON.parse(originItem.value))
} else if (suffix === 'xml') {
const x2js = new X2JS();
res = Obj2Prop(
x2js.xml_str2json(originItem.value))
} else {
//txt
res.push(originItem)
}
}

res.forEach(function (item){
const itemsKeyedByClusterName = $scope.itemsKeyedByKey[item.key] || {};
itemsKeyedByClusterName[namespace.env + ':' + namespace.clusterName + ':' + namespace.namespaceName] = item;
$scope.itemsKeyedByKey[item.key] = itemsKeyedByClusterName;
})
});

//After loading all the compared namespaces, check whether the values are consistent
Expand Down Expand Up @@ -136,3 +167,24 @@ diff_item_module.controller("DiffItemController",
AppUtil.showModal('#showTextModal');
}
}]);
// transfer js obj to properties
function Obj2Prop(obj,prefix){
let result = []
const keys = Object.keys(obj)
keys.forEach(function (key){
let keyPrefix;
if(obj[key] && typeof obj[key]=='object'){
const currentPrefix = key.concat('.');
keyPrefix = prefix? prefix.concat(currentPrefix) : currentPrefix
result = result.concat(Obj2Prop(obj[key],keyPrefix))
}else{
keyPrefix = prefix? prefix.concat(key):key
result.push({
key:keyPrefix,
value:(obj[key] || '')
})
}
})
return result

}
1 change: 1 addition & 0 deletions apollo-portal/src/main/resources/static/vendor/xml2json.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions apollo-portal/src/main/resources/static/vendor/yaml.min.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,8 +233,8 @@

<button type="button" class="btn btn-default btn-sm J_tableview_btn" data-tooltip="tooltip"
data-placement="bottom" title="{{'Component.Namespace.Master.Items.DiffItemTips' | translate }}"
ng-click="goToDiffPage(namespace)" ng-show="namespace.viewType == 'table' && namespace.displayControl.currentOperateBranch == 'master'
&& namespace.isPropertiesFormat">
ng-click="goToDiffPage(namespace)" ng-show=" namespace.displayControl.currentOperateBranch == 'master'
">
<img src="img/diff.png">
{{'Component.Namespace.Master.Items.DiffItem' | translate }}
</button>
Expand Down

0 comments on commit 9b14c3e

Please sign in to comment.