feat: add JSON format button in apollo-portal (#5287)

* feat: support json format * feat: add try catch * feat: update CHANGES.md * feat: add toastr hints --------- Co-authored-by: Jason Song <[email protected]>
apolloconfig · Dec 1, 2024 · 5659fa5 · 5659fa5
1 parent 37081e9
commit 5659fa5
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 0 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -23,6 +23,7 @@ Apollo 2.4.0
 * [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)
 * [Feature: Add rate limiting function to ConsumerToken](https://github.com/apolloconfig/apollo/pull/5267)
+* [Feature: add JSON formatting function in apollo-portal](https://github.com/apolloconfig/apollo/pull/5287)
 
 ------------------
 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/i18n/en.json b/apollo-portal/src/main/resources/static/i18n/en.json
@@ -72,6 +72,7 @@
   "Component.ConfigItem.ItemValueTips": "Note: Special characters (Spaces, Newline, Tab, Chinese comma) easily cause configuration errors. If you want to check special characters in Value, please click",
   "Component.ConfigItem.ItemValueShowDetection": "Check Special Characters",
   "Component.ConfigItem.ItemValueNotHiddenChars": "No Special Characters",
+  "Component.ConfigItem.FormatItemValue": "Format Content",
   "Component.ConfigItem.ItemComment": "Comment",
   "Component.ConfigItem.ChooseCluster": "Select Cluster",
   "Component.ConfigItem.ItemTypeName": "Type",

diff --git a/apollo-portal/src/main/resources/static/i18n/zh-CN.json b/apollo-portal/src/main/resources/static/i18n/zh-CN.json
@@ -72,6 +72,7 @@
   "Component.ConfigItem.ItemValueTips": "注意: 特殊字符(空格、换行符、制表符Tab、中文逗号)容易导致配置出错，如果需要检测 Value 中特殊字符，请点击",
   "Component.ConfigItem.ItemValueShowDetection": "检测特殊字符",
   "Component.ConfigItem.ItemValueNotHiddenChars": "无特殊字符",
+  "Component.ConfigItem.FormatItemValue": "格式化",
   "Component.ConfigItem.ItemComment": "Comment",
   "Component.ConfigItem.ChooseCluster": "选择集群",
   "Component.ConfigItem.ItemTypeName": "类型",

diff --git a/apollo-portal/src/main/resources/static/img/brush.png b/apollo-portal/src/main/resources/static/img/brush.png
diff --git a/apollo-portal/src/main/resources/static/scripts/directive/item-modal-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/item-modal-directive.js
@@ -41,6 +41,7 @@ function itemModalDirective($translate, toastr, $sce, AppUtil, EventManager, Con
             scope.showHiddenChars = showHiddenChars;
             scope.changeType = changeType;
             scope.validateItemValue = validateItemValue;
+            scope.formatContent = formatContent;
 
             $('#itemModal').on('show.bs.modal', function (e) {
                 scope.showHiddenCharsContext = false;
@@ -243,6 +244,17 @@ function itemModalDirective($translate, toastr, $sce, AppUtil, EventManager, Con
                 }
 
             }
+
+            // 格式化
+            function formatContent() {
+                if (scope.showJsonError) {
+                    return;
+                }
+                var raw = scope.item.value;
+                if (scope.item.type === '3') {
+                    scope.item.value = JSON.stringify(JSON.parse(raw), null, 4);
+                }
+            }
         }
     }
 }

diff --git a/apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js b/apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js
@@ -86,6 +86,7 @@ function directive($window, $translate, toastr, AppUtil, EventManager, Permissio
             scope.mergeAndPublish = mergeAndPublish;
             scope.addRuleItem = addRuleItem;
             scope.editRuleItem = editRuleItem;
+            scope.formatContent = formatContent;
 
             scope.deleteNamespace = deleteNamespace;
             scope.exportNamespace = exportNamespace;
@@ -734,6 +735,17 @@ function directive($window, $translate, toastr, AppUtil, EventManager, Permissio
                 }
             }
 
+            // 格式化
+            function formatContent(namespace) {
+                try {
+                    if (namespace.format === 'json') {
+                        namespace.editText = JSON.stringify(JSON.parse(namespace.editText), null, 4);
+                    }
+                } catch (e) {
+                    toastr.error('format content failed: ' + e.message);
+                }
+            }
+
             function goToSyncPage(namespace) {
                 if (!scope.lockCheck(namespace)) {
                     return false;

diff --git a/apollo-portal/src/main/resources/static/views/component/item-modal.html b/apollo-portal/src/main/resources/static/views/component/item-modal.html
@@ -65,6 +65,9 @@ <h4 class="modal-title">
                         {{'Component.ConfigItem.ItemValueTips' | translate }} <a
                             ng-click="showHiddenChars()">{{'Component.ConfigItem.ItemValueShowDetection' | translate }}</a>
                         <br>
+                        <!-- 格式化 -->
+                        <a ng-show="item.type == '3'" ng-click="formatContent()">{{'Component.ConfigItem.FormatItemValue' | translate }}</a>
+                        <br>
                         <div ng-show="showNumberError" ng-model="showNumberError" style="color:red">
                             {{'Component.ConfigItem.ItemNumberError' | translate }}
                         </div>

diff --git a/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html b/apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html
@@ -190,6 +190,13 @@
                         ng-show="namespace.isTextEditing && namespace.viewType == 'text' && namespace.isSyntaxCheckable"
                         ng-click="syntaxCheck(namespace)">
                     &nbsp;
+                    <!-- 格式化按钮 -->
+                    <img src="img/brush.png" class="ns_btn cursor-pointer" data-tooltip="tooltip"
+                         data-placement="bottom"
+                         title="{{'Component.ConfigItem.FormatItemValue' | translate }}"
+                         ng-show="namespace.isTextEditing && namespace.viewType == 'text' && namespace.format == 'json'"
+                         ng-click="formatContent(namespace)">
+                    &nbsp;
                     <img src="img/cancel.png" class="ns_btn cursor-pointer" data-tooltip="tooltip"
                         data-placement="bottom"
                         title="{{'Component.Namespace.Master.Items.CancelChanged' | translate }}"