From 8e4a73e49303537cd320ec2b975661862315306a Mon Sep 17 00:00:00 2001 From: WTIFS <9314475+WTIFS@users.noreply.github.com> Date: Mon, 25 Nov 2024 20:04:44 +0800 Subject: [PATCH] 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 --- CHANGES.md | 1 + .../main/resources/static/config/diff.html | 27 +++-- .../main/resources/static/config/history.html | 13 +- .../src/main/resources/static/i18n/en.json | 1 + .../src/main/resources/static/i18n/zh-CN.json | 19 +-- .../controller/config/DiffConfigController.js | 13 +- .../config/ReleaseHistoryController.js | 9 ++ .../scripts/directive/diff-directive.js | 1 + .../directive/release-modal-directive.js | 4 + .../directive/show-text-modal-directive.js | 5 +- .../resources/static/styles/common-style.css | 19 ++- .../static/views/component/diff.html | 2 +- .../static/views/component/release-modal.html | 112 ++++++++---------- .../views/component/show-text-modal.html | 12 +- 14 files changed, 139 insertions(+), 99 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index d62918c565f..c584794bdc7 100644 --- 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 index bbfc3098ee5..08ecbacea9d 100644 --- a/apollo-portal/src/main/resources/static/config/diff.html +++ b/apollo-portal/src/main/resources/static/config/diff.html @@ -127,31 +127,38 @@

{{'Config.Diff.Title' | translate }}
+ - + - - + - +
Key + Key Value ( {{'Common.Environment' | translate }} : , {{'Common.Cluster' | translate }} : ) - - + + Comment ( {{'Common.Environment' | translate }} : , {{'Common.Cluster' | translate }} : ) - +
+ + + + ng-bind="(itemsKeyedByCluster[cluster.compositedKey] || {}).comment">
+ + @@ -162,7 +169,7 @@

{{'Config.Diff.Title' | translate }}

- + diff --git a/apollo-portal/src/main/resources/static/config/history.html b/apollo-portal/src/main/resources/static/config/history.html index 9c7d46e7727..fb81125339d 100644 --- a/apollo-portal/src/main/resources/static/config/history.html +++ b/apollo-portal/src/main/resources/static/config/history.html @@ -157,11 +157,11 @@

{{'Config.History.ChangedItem' | translate }}

- +
- - + + @@ -189,10 +189,9 @@

{{'Config.History.ChangedItem' | translate }}

ng-bind="change.entity.firstEntity.value.length > 250 ? '...' :''"> @@ -310,7 +309,7 @@

- + diff --git a/apollo-portal/src/main/resources/static/i18n/en.json b/apollo-portal/src/main/resources/static/i18n/en.json index 69ae8e5e4cf..7cab764e0c6 100644 --- 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 index 8ae676eda59..8c00fee807f 100644 --- 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 index 488169ac3c0..8272ba7d28d 100644 --- 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/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js b/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js index 028cb554b04..45302596938 100644 --- a/apollo-portal/src/main/resources/static/scripts/controller/config/ReleaseHistoryController.js +++ b/apollo-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 index b78525faf81..b9cdc7aaa2b 100644 --- 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 index 89d82a4e97b..9b285c9a8a2 100644 --- 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 index ff55de3dc1c..f023a03ef07 100644 --- 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 index fe92365f48c..350026705d0 100644 --- a/apollo-portal/src/main/resources/static/styles/common-style.css +++ b/apollo-portal/src/main/resources/static/styles/common-style.css @@ -95,7 +95,7 @@ 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 */ @@ -103,6 +103,10 @@ pre, .pre { 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; } \ No newline at end of file diff --git a/apollo-portal/src/main/resources/static/views/component/diff.html b/apollo-portal/src/main/resources/static/views/component/diff.html index 3e36e174add..82cf76643a7 100644 --- 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 @@ -
+
 
                         
-

{{'Config.History.ChangeType' | translate }}{{'Config.History.ChangeKey' | translate }}{{'Config.History.ChangeType' | translate }}{{'Config.History.ChangeKey' | translate }} {{'Config.History.ChangeOldValue' | translate }} {{'Config.History.ChangeNewValue' | translate }}
+ ng-click="showTextDiff(change.entity.firstEntity.value, change.entity.secondEntity.value)"> - +
+
- - - - @@ -108,40 +105,37 @@

-

- -
+ {{'Component.Publish.Key' | translate }} {{'Component.Publish.PublishedValue' | translate }} + {{'Component.Publish.NoPublishedValue' | translate }} - {{'Component.Publish.ModifyUser' | translate }} - - {{'Component.Publish.ModifyTime' | translate }} + + {{'Component.Publish.ModifyRecord' | translate }}
- - + + + + + +
- - - - - - - + + @@ -153,49 +147,47 @@

{{'Component.Publish.Deleted' | translate }} -

- - - -
+ {{'Component.Publish.Key' | translate }} + {{'Component.Publish.MasterValue' | translate }} + {{'Component.Publish.GrayPublishedValue' | translate }} - {{'Component.Publish.GrayNoPublishedValue' | translate }} - - {{'Component.Publish.ModifyUser' | translate }} - - {{'Component.Publish.ModifyTime' | translate }} + {{'Component.Publish.GrayNoPublishedValue' | translate }}{{'Component.Publish.GrayNoPublishedValue' | translate }} + {{'Component.Publish.ModifyRecord' | translate }}
+ + - - + + + + + + + + + + + +
- - - - - - - - @@ -207,13 +199,13 @@

-

- - @@ -274,7 +266,7 @@

-
diff --git a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html b/apollo-portal/src/main/resources/static/views/component/show-text-modal.html index 9a740dc1324..90c54df36fe 100644 --- a/apollo-portal/src/main/resources/static/views/component/show-text-modal.html +++ b/apollo-portal/src/main/resources/static/views/component/show-text-modal.html @@ -23,11 +23,13 @@

{{'Component.ShowText.Title' | translate }}

- 
-
- 
-
+
+ 

+                

+            

+            
+                 
+            

                             
                                 

+                                    
                                         {{'Component.Publish.Key' | translate }}
                                     
+                                    
                                         {{'Component.Publish.MasterValue' | translate }}
                                     
+                                    
                                         {{'Component.Publish.GrayValue' | translate }}
                                     
-                                        {{'Component.Publish.PublishedValue' | translate }}
-                                    
-                                        {{'Component.Publish.NoPublishedValue' | translate }}
-                                    
-                                        {{'Component.Publish.ModifyUser' | translate }}
-                                    
-                                        {{'Component.Publish.ModifyTime' | translate }}
+                                    
+                                        {{'Component.Publish.ModifyRecord' | translate }}
                                     
                                 

                             

-                                        
-                                    
+                                    
+                                        
                                     
+                                    
+                                        
+                                        
+