feat: adjust ui

apolloconfig · Nov 21, 2024 · 54ddb60 · 54ddb60
1 parent f54cb51
commit 54ddb60
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 88 deletions.
diff --git a/apollo-portal/src/main/resources/static/config/diff.html b/apollo-portal/src/main/resources/static/config/diff.html
@@ -128,28 +128,26 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
                             </div>
                             <div class="col-sm-12 diff-content">
                                 <!--表格对比 properties mode-->
-                                <table class="table table-bordered table-striped table-hover table-fixed" ng-show="isTableDiff">
+                                <table class="table table-bordered table-striped table-hover" ng-show="isTableDiff">
                                 <thead>
                                         <tr>
-                                            <td width="10%">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-bind="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"></td>
-                                            <td ng-repeat="cluster in syncData.syncToNamespaces.slice(1)">
-                                                <span ng-if="itemsKeyedByCluster[cluster.compositedKey]" >
-                                                    <apollodiff  old-str="(itemsKeyedByCluster[syncData.firstClusterKey] || {}).value"
-                                                                 new-str="(itemsKeyedByCluster[cluster.compositedKey] || {}).value"
-                                                                 apollo-id="'clusterDiff:' + key + ':' + cluster.compositedKey">
-                                                    </apollodiff>
+                                            <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"
@@ -171,7 +169,7 @@ <h4 class="modal-title">{{'Config.Diff.Title' | translate }}
             </div>
         </section>
 
-        <showtextmodal text="text" />
+        <showtextmodal text="text" 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
@@ -188,14 +188,10 @@ <h4 class="section-title">{{'Config.History.ChangedItem' | translate }}</h4>
                                                 <span
                                                     ng-bind="change.entity.firstEntity.value.length > 250 ? '...' :''"></span>
                                             </td>
-                                            <td class="cursor-pointer left-overflow" width="35%"
-                                                ng-click="showText(change.entity.secondEntity.value)">
-                                                <span>
-                                                    <apollodiff  old-str="change.entity.firstEntity.value"
-                                                                 new-str="change.entity.secondEntity.value"
-                                                                 apollo-id="'diff:' + change.entity.firstEntity.key">
-                                                    </apollodiff>
-                                                </span>
+                                            <td class="cursor-pointer" width="35%"
+                                                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>
                                             </td>
                                         </tr>
                                     </tbody>
@@ -313,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
@@ -297,6 +297,7 @@
   "Component.Publish.NoPublishedValue": "待发布的值",
   "Component.Publish.ModifyUser": "修改人",
   "Component.Publish.ModifyTime": "修改时间",
+  "Component.Publish.ModifyRecord": "修改记录",
   "Component.Publish.NewAdded": "新",
   "Component.Publish.NewAddedTips": "新增的配置",
   "Component.Publish.Modified": "改",

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 = {};
@@ -195,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/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,18 +95,14 @@ 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
@@ -1185,4 +1181,8 @@ table th {
 
 .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 pre" id="{{apolloId}}">
+<pre class="no-radius" id="{{apolloId}}" style="margin:0">
 <!--
   ~ Copyright 2024 Apollo Authors
   ~