support only show difference keys when compare namespace

CHANGES.md

@@ -26,6 +26,7 @@ Apollo 2.0.0
 * [Catch LinkageError for ClassLoaderUtil.isClassPresent in case class is present but is failed to load](https://github.com/apolloconfig/apollo/pull/4097)
 * [Split helm chart into another repo](https://github.com/apolloconfig/apollo/pull/4125)
 * [fix gray publish refresh item status](https://github.com/apolloconfig/apollo/pull/4128)
+* [Support only show difference keys when compare namespace](https://github.com/apolloconfig/apollo/pull/4165)
 
 ------------------
 All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/8?closed=1)

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

@@ -97,23 +97,27 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                                         ng-click="showCommentDiff=!showCommentDiff">
                                     {{'Config.Diff.HasDiffComment' | translate }}
                                 </label>
+                                <label class="control-label">
+                                    <input type="checkbox" class="comment-toggle" checked="true" ng-checked="onlyShowDiffKeys"
+                                           ng-click="onlyShowDiffKeys=!onlyShowDiffKeys">
+                                    {{'Config.Diff.OnlyShowDiffKeys' | translate }}
+                                </label>
                             </div>
                             <div class="col-sm-12 diff-content">
                                 <table class="table table-bordered table-striped table-hover">
                                     <thead>
                                         <tr>
                                             <td>Key</td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces"
-                                                ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Value'">
+                                            <td ng-repeat="cluster in syncData.syncToNamespaces">
+                                                Value ( {{'Common.Environment' | translate }} : <label ng-bind="cluster.env"></label> , {{'Common.Cluster' | translate }} : <label ng-bind="cluster.clusterName"></label> )
                                             </td>
-                                            <td ng-show="showCommentDiff"
-                                                ng-repeat="cluster in syncData.syncToNamespaces"
-                                                ng-bind="cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName + ':Comment'">
+                                            <td ng-show="showCommentDiff" ng-repeat="cluster in syncData.syncToNamespaces">
+                                                Comment ( {{'Common.Environment' | translate }} : <label ng-bind="cluster.env"></label> , {{'Common.Cluster' | translate }} : <label ng-bind="cluster.clusterName"></label> )
                                             </td>
                                         </tr>
                                     </thead>
                                     <tbody>
-                                        <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey">
+                                        <tr ng-repeat="(key, itemsKeyedByCluster) in itemsKeyedByKey" ng-if="!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">
@@ -175,4 +179,4 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
     <script type="application/javascript" src="../scripts/directive/show-text-modal-directive.js"></script>
 </body>
 
-</html>
+</html>

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

@@ -694,6 +694,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.OnlyShowDiffKeys": "Display only configuration items with different values",
   "Config.Diff.PleaseChooseTwoCluster": "Please select at least 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）",

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

@@ -694,6 +694,7 @@
   "Config.Diff.Tips": "通过比较配置功能，可以查看多个环境、集群间的配置差异",
   "Config.Diff.DiffCluster": "要比较的集群",
   "Config.Diff.HasDiffComment": "是否比较注释",
+  "Config.Diff.OnlyShowDiffKeys": "是否只显示值不一样的配置项",
   "Config.Diff.PleaseChooseTwoCluster": "请至少选择两个集群",
   "ConfigExport.Title": "配置导出导入",
   "ConfigExport.TitleTips" : "（通过导出导入配置，把一个集群的数据（应用、集群、Namespace）迁移到另外一个集群）",

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

@@ -30,6 +30,7 @@ diff_item_module.controller("DiffItemController",
             $scope.diff = diff;
             $scope.syncBtnDisabled = false;
             $scope.showCommentDiff = false;
+            $scope.onlyShowDiffKeys = true;
 
             $scope.collectSelectedClusters = collectSelectedClusters;
 
@@ -40,6 +41,7 @@ diff_item_module.controller("DiffItemController",
             $scope.showText = showText;
 
             $scope.itemsKeyedByKey = {};
+            $scope.allNamespaceValueEqualed = {};
 
             $scope.syncData = {
                 syncToNamespaces: [],
@@ -52,16 +54,40 @@ diff_item_module.controller("DiffItemController",
                     toastr.warning($translate.instant('Config.Diff.PleaseChooseTwoCluster'));
                     return;
                 }
+                const namespaceCnt = $scope.syncData.syncToNamespaces.length;
+                let loadedNamespaceCnt = 0;
                 $scope.syncData.syncToNamespaces.forEach(function (namespace) {
                     ConfigService.find_items(namespace.appId,
                         namespace.env,
                         namespace.clusterName,
                         namespace.namespaceName).then(function (result) {
+                            loadedNamespaceCnt ++;
                             result.forEach(function (item) {
+                                if (item.key === "") {
+                                    return
+                                }
                                 var 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
+                            //itemsKeyedByKey struct : itemKey => namespace => item
+                            if (loadedNamespaceCnt === namespaceCnt) {
+                                Object.keys($scope.itemsKeyedByKey).forEach(function (key) {
+                                    let lastValue = null;
+                                    let allEqualed = true;
+                                    Object.values($scope.itemsKeyedByKey[key]).forEach(function (item) {
+                                        if (lastValue == null) {
+                                            lastValue = item.value;
+                                        }
+                                        if (lastValue !== item.value) {
+                                            allEqualed = false;
+                                        }
+                                    })
+                                    $scope.allNamespaceValueEqualed[key]=allEqualed;
+                                })
+                            }
                         });
                 });
                 $scope.syncItemNextStep(1);