feature:compare config

CHANGES.md

@@ -16,6 +16,6 @@ Apollo 2.1.0
 * [Optimize the UI experience of open platform authorization management](https://github.com/apolloconfig/apollo/pull/4436)
 * [Allow users to associate multiple public namespaces at a time](https://github.com/apolloconfig/apollo/pull/4437)
 * [Move apollo-demo, scripts/docker-quick-start and scripts/apollo-on-kubernetes out of main repository](https://github.com/apolloconfig/apollo/pull/4440)
-
+* [Add search key when comparing Configuration items](https://github.com/apolloconfig/apollo/pull/4459)
 ------------------
 All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/11?closed=1)

apollo-portal/src/main/resources/static/config/diff.html

@@ -92,6 +92,11 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                     <div class="row" style="margin-top: 10px;">
                         <div class="form-horizontal">
                             <div class="col-sm-12">
+                                <label class="control-label">
+                                    <input type="text" class="comment-toggle"
+                                           ng-model="searchKey"
+                                           placeholder="{{'Config.Diff.SearchKey' | translate }}">
+                                </label>
                                 <label class="control-label">
                                     <input type="checkbox" class="comment-toggle" ng-checked="showCommentDiff"
                                         ng-click="showCommentDiff=!showCommentDiff">
@@ -117,7 +122,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey" ng-if="!onlyShowDiffKeys || (onlyShowDiffKeys && !allNamespaceValueEqualed[key])">
+                                        <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey" ng-if="(searchKey === '' || key.indexOf(searchKey) !== -1 ) && (!onlyShowDiffKeys || (onlyShowDiffKeys && !allNamespaceValueEqualed[key]))">
                                             <td width="15%" ng-bind="key"></td>
                                             <td ng-repeat="cluster in syncData.syncToNamespaces"
                                                 ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).value">

apollo-portal/src/main/resources/static/i18n/en.json

@@ -701,6 +701,7 @@
   "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.HasDiffComment": "Whether to compare comments or not",
+  "Config.Diff.SearchKey": "search configuration",
   "Config.Diff.OnlyShowDiffKeys": "Only display configuration items with different values",
   "Config.Diff.PleaseChooseTwoCluster": "Please select at least two clusters",
   "ConfigExport.Title": "Config Export/Import",

apollo-portal/src/main/resources/static/i18n/zh-CN.json

@@ -701,6 +701,7 @@
   "Config.Diff.Tips": "通过比较配置功能，可以查看多个环境、集群间的配置差异",
   "Config.Diff.DiffCluster": "要比较的集群",
   "Config.Diff.HasDiffComment": "是否比较注释",
+  "Config.Diff.SearchKey": "搜索配置项",
   "Config.Diff.OnlyShowDiffKeys": "是否只显示值不一样的配置项",
   "Config.Diff.PleaseChooseTwoCluster": "请至少选择两个集群",
   "ConfigExport.Title": "配置导出导入",

apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js

@@ -28,10 +28,10 @@ diff_item_module.controller("DiffItemController",
             var sourceItems = [];
 
             $scope.diff = diff;
+            $scope.searchKey = ''
             $scope.syncBtnDisabled = false;
             $scope.showCommentDiff = false;
             $scope.onlyShowDiffKeys = true;
-
             $scope.collectSelectedClusters = collectSelectedClusters;
 
             $scope.syncItemNextStep = syncItemNextStep;