feat: highlight diffs for properties (#5282)

* feat: support properties diff * feat: support gray scale diff * style: add semicolon * feat: support diff in history * feat: adjust ui * style: remove redundant codes * style: recover original css * feat: update css * feat: update CHANGES.md
apolloconfig · Nov 25, 2024 · 8e4a73e · 8e4a73e
1 parent add5715
commit 8e4a73e
Show file tree

Hide file tree

Showing 14 changed files with 139 additions and 99 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -21,6 +21,7 @@ Apollo 2.4.0
 * [Feature: Added the value length limit function for AppId-level configuration items](https://github.com/apolloconfig/apollo/pull/5264)
 * [Fix: ensure clusters order in envClusters open api](https://github.com/apolloconfig/apollo/pull/5277)
 * [Fix: bump xstream from 1.4.20 to 1.4.21 to fix CVE-2024-47072](https://github.com/apolloconfig/apollo/pull/5280)
+* [Feature: highlight diffs for properties](https://github.com/apolloconfig/apollo/pull/5282)
 
 ------------------
 All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/15?closed=1)
diff --git a/apollo-portal/src/main/resources/static/config/diff.html b/apollo-portal/src/main/resources/static/config/diff.html
@@ -127,31 +127,38 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                                 </label>
                             </div>
                             <div class="col-sm-12 diff-content">
+                                <!--表格对比 properties mode-->
                                 <table class="table table-bordered table-striped table-hover" ng-show="isTableDiff">
-                                    <thead>
+                                <thead>
                                         <tr>
-                                            <td>Key</td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces">
+                                            <th>Key</th>
+                                            <th 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">
+                                            </th>
+                                            <th 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>
+                                            </th>
                                         </tr>
                                     </thead>
                                     <tbody>
                                         <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">
+                                            <td ng-bind="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"></td>
+                                            <td ng-repeat="cluster in syncData.syncToNamespaces.slice(1)" class="cursor-pointer"
+                                                ng-click="showTextDiff((itemsKeyedByCluster[syncData.firstClusterKey] || {}).value, (itemsKeyedByCluster[cluster.compositedKey] || {}).value)">
+                                                <span ng-if="itemsKeyedByCluster[cluster.compositedKey]"
+                                                      ng-bind="(itemsKeyedByCluster[cluster.compositedKey] || {}).value">
+                                                </span>
                                             </td>
                                             <td ng-show="showCommentDiff"
                                                 ng-repeat="cluster in syncData.syncToNamespaces"
-                                                ng-bind="(itemsKeyedByCluster[cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName] || {}).comment">
+                                                ng-bind="(itemsKeyedByCluster[cluster.compositedKey] || {}).comment">
                                             </td>
                                         </tr>
                                     </tbody>
                                 </table>
+
+                                <!--纯文本对比 text mode-->
                                 <apollodiff  ng-show="!isTableDiff" old-str="syncData.syncToNamespaces[0].originTextInfo"
                                              new-str="syncData.syncToNamespaces[1].originTextInfo" apollo-id="'releaseStrDiff'">
                                 </apollodiff>
@@ -162,7 +169,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
             </div>
         </section>
 
-        <showtextmodal text="text" />
+        <showtextmodal enable-text-diff='1' old-str="oldStr" new-str="newStr"/>
     </div>
 
 

diff --git a/apollo-portal/src/main/resources/static/config/history.html b/apollo-portal/src/main/resources/static/config/history.html
@@ -157,11 +157,11 @@ <h6 class="col-md-5 text-right" ng-bind="releaseHistory.releaseTimeFormatted"></
                         <section ng-show="history.viewType=='diff'">
                             <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                             <div ng-show="history.changes && history.changes.length > 0">
-                                <table class="no-margin table table-striped table-hover table-bordered">
+                                <table class="no-margin table table-striped table-hover table-bordered table-fixed">
                                     <thead>
                                         <tr>
-                                            <th>{{'Config.History.ChangeType' | translate }}</th>
-                                            <th>{{'Config.History.ChangeKey' | translate }}</th>
+                                            <th width="10%">{{'Config.History.ChangeType' | translate }}</th>
+                                            <th width="12%">{{'Config.History.ChangeKey' | translate }}</th>
                                             <th>{{'Config.History.ChangeOldValue' | translate }}</th>
                                             <th>{{'Config.History.ChangeNewValue' | translate }}</th>
                                         </tr>
@@ -189,10 +189,9 @@ <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                                                     ng-bind="change.entity.firstEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
                                             <td class="cursor-pointer" width="35%"
-                                                ng-click="showText(change.entity.secondEntity.value)">
+                                                ng-click="showTextDiff(change.entity.firstEntity.value, change.entity.secondEntity.value)">
                                                 <span ng-bind="change.entity.secondEntity.value | limitTo: 250"></span>
-                                                <span
-                                                    ng-bind="change.entity.secondEntity.value.length > 250 ? '...' :''"></span>
+                                                <span ng-bind="change.entity.secondEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -310,7 +309,7 @@ <h4 class="text-center empty-container" ng-show="!isConfigHidden">
             </div>
         </section>
 
-        <showtextmodal text="text"></showtextmodal>
+        <showtextmodal text="text" new-str="newStr" old-str="oldStr" enable-text-diff="enableTextDiff"></showtextmodal>
 
         <rollbackmodal app-id="pageContext.appId" env="pageContext.env" cluster="pageContext.clusterName">
         </rollbackmodal>

diff --git a/apollo-portal/src/main/resources/static/i18n/en.json b/apollo-portal/src/main/resources/static/i18n/en.json
@@ -297,6 +297,7 @@
   "Component.Publish.NoPublishedValue": "Unreleased values",
   "Component.Publish.ModifyUser": "Modifier",
   "Component.Publish.ModifyTime": "Modified Time",
+  "Component.Publish.ModifyRecord": "Record",
   "Component.Publish.NewAdded": "New",
   "Component.Publish.NewAddedTips": "New Configuration",
   "Component.Publish.Modified": "Modified",

diff --git a/apollo-portal/src/main/resources/static/i18n/zh-CN.json b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
@@ -291,12 +291,13 @@
   "Component.Publish.ToSeeChange": "查看变更",
   "Component.Publish.CompareWithMasterValue": "与主版本对比",
   "Component.Publish.CompareWithPublishedValue": "与已发布对比",
-  "Component.Publish.PublishedValue": "待发布的值",
-  "Component.Publish.Changes": "Changes",
+  "Component.Publish.PublishedValue": "已发布的值",
+  "Component.Publish.Changes": "改动",
   "Component.Publish.Key": "Key",
-  "Component.Publish.NoPublishedValue": "未发布的值",
+  "Component.Publish.NoPublishedValue": "待发布的值",
   "Component.Publish.ModifyUser": "修改人",
   "Component.Publish.ModifyTime": "修改时间",
+  "Component.Publish.ModifyRecord": "修改记录",
   "Component.Publish.NewAdded": "新",
   "Component.Publish.NewAddedTips": "新增的配置",
   "Component.Publish.Modified": "改",
@@ -310,8 +311,8 @@
   "Component.Publish.ItemNoChange": "配置没有变化",
   "Component.Publish.GrayItemNoChange": "灰度配置没有变化",
   "Component.Publish.NoGrayItems": "没有灰度的配置项",
-  "Component.Publish.Release": "Release Name",
-  "Component.Publish.ReleaseComment": "Comment",
+  "Component.Publish.Release": "版本名称",
+  "Component.Publish.ReleaseComment": "说明",
   "Component.Publish.OpPublish": "发布",
   "Component.Rollback.To": "回滚到",
   "Component.Rollback.Tips": "此操作将会回滚到上一个发布版本，且当前版本作废，但不影响正在修改的配置。可在发布历史页面查看当前生效的版本",
@@ -731,11 +732,11 @@
   "Config.History.ChangedItemTips": "查看此次发布与上次版本的变更",
   "Config.History.AllItem": "全部配置",
   "Config.History.AllItemTips": "查看此次发布的所有配置信息",
-  "Config.History.ChangeType": "Type",
+  "Config.History.ChangeType": "类型",
   "Config.History.ChangeKey": "Key",
-  "Config.History.ChangeValue": "Value",
-  "Config.History.ChangeOldValue": "Old Value",
-  "Config.History.ChangeNewValue": "New Value",
+  "Config.History.ChangeValue": "值",
+  "Config.History.ChangeOldValue": "旧值",
+  "Config.History.ChangeNewValue": "新值",
   "Config.History.ChangeTypeNew": "新增",
   "Config.History.ChangeTypeModify": "修改",
   "Config.History.ChangeTypeDelete": "删除",

diff --git a/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/DiffConfigController.js
@@ -38,7 +38,7 @@ diff_item_module.controller("DiffItemController",
             $scope.backToAppHomePage = backToAppHomePage;
             $scope.switchSelect = switchSelect;
 
-            $scope.showText = showText;
+            $scope.showTextDiff = showTextDiff;
 
             $scope.itemsKeyedByKey = {};
             $scope.allNamespaceValueEqualed = {};
@@ -164,17 +164,19 @@ diff_item_module.controller("DiffItemController",
             function parseSyncSourceData() {
                 var syncData = {
                     syncToNamespaces: [],
-                    syncItems: []
+                    syncItems: [],
+                    firstClusterKey: "",
                 };
                 var namespaceName = $scope.pageContext.namespaceName;
                 selectedClusters.forEach(function (cluster) {
                     if (cluster.checked) {
                         cluster.clusterName = cluster.name;
                         cluster.namespaceName = namespaceName;
+                        cluster.compositedKey = cluster.env + ':' + cluster.clusterName + ':' + cluster.namespaceName;
                         syncData.syncToNamespaces.push(cluster);
                     }
                 });
-
+                syncData.firstClusterKey = selectedClusters[0].compositedKey;
                 return syncData;
             }
 
@@ -193,8 +195,9 @@ diff_item_module.controller("DiffItemController",
                 o.checked = !o.checked;
             }
 
-            function showText(text) {
-                $scope.text = text;
+            function showTextDiff(oldStr, newStr) {
+                $scope.oldStr = oldStr;
+                $scope.newStr = newStr;
                 AppUtil.showModal('#showTextModal');
             }
         }]);

diff --git a/...lo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js b/...lo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js
@@ -53,6 +53,7 @@ function releaseHistoryController($scope, $location, $translate, AppUtil, EventM
     $scope.switchConfigViewType = switchConfigViewType;
     $scope.findReleaseHistory = findReleaseHistory;
     $scope.showText = showText;
+    $scope.showTextDiff = showTextDiff;
 
     EventManager.subscribe(EventManager.EventType.REFRESH_RELEASE_HISTORY, function () {
         location.reload(true);
@@ -207,8 +208,16 @@ function releaseHistoryController($scope, $location, $translate, AppUtil, EventM
     }
 
     function showText(text) {
+        $scope.enableTextDiff = false;
         $scope.text = text;
         AppUtil.showModal("#showTextModal");
     }
+
+    function showTextDiff(oldStr, newStr) {
+        $scope.enableTextDiff = true;
+        $scope.oldStr = oldStr;
+        $scope.newStr = newStr;
+        AppUtil.showModal('#showTextModal');
+    }
 }
 
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/diff-directive.js
@@ -60,6 +60,7 @@ directive_module.directive('apollodiff',
                             part.removed ? 'red' : 'grey';
                         span = document.createElement('span');
                         span.style.color = color;
+                        span.style.display = 'block';
                         pre = part.added ? '+' :
                             part.removed ? '-' : '';
                         span.appendChild(document.createTextNode(pre + part.value));

diff --git a/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/release-modal-directive.js
@@ -34,6 +34,7 @@ function releaseModalDirective($translate, toastr, AppUtil, EventManager, Releas
 
             scope.releaseBtnDisabled = false;
             scope.releaseChangeViewType = 'compareWithPublishedValue';
+            scope.isComparePublished = true;
             scope.releaseComment = '';
             scope.isEmergencyPublish = false;
 
@@ -170,6 +171,9 @@ function releaseModalDirective($translate, toastr, AppUtil, EventManager, Releas
 
             function switchReleaseChangeViewType(type) {
                 scope.releaseChangeViewType = type;
+                scope.isCompareMaster = type === 'compareWithMasterValue';
+                scope.isComparePublished = type === 'compareWithPublishedValue';
+                scope.isNoCompare = type === 'release';
             }
         }
     }

diff --git a/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js
@@ -74,7 +74,10 @@ function showTextModalDirective(AppUtil) {
         transclude: true,
         replace: true,
         scope: {
-            text: '='
+            text: '=',
+            oldStr: '=',
+            newStr: '=',
+            enableTextDiff: '='
         },
         link: function (scope) {
             scope.$watch('text', init);

diff --git a/apollo-portal/src/main/resources/static/styles/common-style.css b/apollo-portal/src/main/resources/static/styles/common-style.css
@@ -95,14 +95,18 @@ p, td, span {
     color: #797979;
 }
 
-pre, .pre {
+pre {
     white-space: pre-wrap; /* Since CSS 2.1 */
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
     white-space: -pre-wrap; /* Opera 4-6 */
     white-space: -o-pre-wrap; /* Opera 7 */
     word-wrap: break-word; /* Internet Explorer 5.5+ */
 }
 
+.pre {
+    white-space: pre;
+}
+
 .hover:hover {
     background: #f5f5f5;
     cursor: pointer
@@ -1172,4 +1176,17 @@ table th {
 #consumer-list .create-btn img {
     width: 16px;
     height: 16px;
+}
+
+.left-overflow {
+    overflow-x: auto;
+    text-align: left;
+}
+
+.table-fixed{
+    table-layout: fixed;
+}
+
+.block {
+    display: block;
 }
diff --git a/apollo-portal/src/main/resources/static/views/component/diff.html b/apollo-portal/src/main/resources/static/views/component/diff.html
@@ -1,4 +1,4 @@
-<pre class="no-radius" id="{{apolloId}}">
+<pre class="no-radius pre" id="{{apolloId}}" style="margin:0">
 <!--
   ~ Copyright 2024 Apollo Authors
   ~