From 5659fa561f77b0aada1c7581e37d9209b9ad9ad4 Mon Sep 17 00:00:00 2001 From: WTIFS <9314475+WTIFS@users.noreply.github.com> Date: Sun, 1 Dec 2024 10:24:32 +0800 Subject: [PATCH] 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 --- CHANGES.md | 1 + .../src/main/resources/static/i18n/en.json | 1 + .../src/main/resources/static/i18n/zh-CN.json | 1 + .../src/main/resources/static/img/brush.png | Bin 0 -> 2636 bytes .../scripts/directive/item-modal-directive.js | 12 ++++++++++++ .../directive/namespace-panel-directive.js | 12 ++++++++++++ .../static/views/component/item-modal.html | 3 +++ .../component/namespace-panel-master-tab.html | 7 +++++++ 8 files changed, 37 insertions(+) create mode 100644 apollo-portal/src/main/resources/static/img/brush.png diff --git a/CHANGES.md b/CHANGES.md index d0296dbee35..b0c62dc988c 100644 --- 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 index 6be0df9228f..f1dfca0b78a 100644 --- 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 index d3706b41e9e..d6fbd3ce87b 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..e40cab82ded4de44e71bd2857338da663cd71ee8 GIT binary patch literal 2636 zcmeHIS5OlO6AneBLm(b4944T26ahg(gv2BiC6oY)MnU8VNB}{qpl}>WiJ(CQg`f#t zDIWhxFQJH1jRZk~BvJw~f)_x_MG%gA`DgCop6>N#zTIzk_Iudb-I>jB#oEhBt4jj_ z069kol=~j{{biD3d%ocIrRqHrx$bU{6q)EZO597Nt~q#L2LNQ0|1uFk0Yw!65XHEj z@j&kt&Fp>t!+#U_Hxu|)EGXW)r0z&}EDo^$094OVM^aQ>UqKP1=0#zC+1mY@CnIux zveBSrq|j3}DNP*y$HXnjKHM}LoVjz{5-Ur-I{*CFZ@);3m2EF;uRKn)lWz`>h;&}c zM@>nv_~wip8)VNJOKX9l6}!g#Eo^582|xuVnrk56ZGZL?u+cV>SsPd;}#`1WUn zh2!X(xb)wjXgYnw9MT}QSzQ7EBt{%j2#;9Gm!fzg2(8)~W9I;=R}$NJdrH|#z3K7l zy*{l59Xkke-)RF-B{JDBE(O|GlIujS%QO{Jn@ zPn8ow4;~*P2qlEY{9ahZwoVmn+K0s~Oce>&H$pc9V(5nk;G#l0%=dsERO6qp*(kX( z6EC!UVUqmr9lZf+8JTydx?MSdeJN}zu`S@+OS%I{D*c{q{R4SqsAZ(y?DHuI$=Wfh zNur(8*RsAdz%~pe=egh&Oui}#y>aXZ_!SpUd--=p&cnf9F>RWC3Y71&pm5~~H;XAU zrFc;?S(cYcB=>Ug4 zq__^B&@A&W>&=P2|Cm zP2Uop)!bZZ@8ojf)8(R823KjcYh-<{7<+Xj_&aViI(3_I!DmA&yKFZa#PUe;ST!*R znK0+tZV3ltzG_qibZEKr6PE1eJYEOZ3OJZobg`@y($FN)b!Hd!<|OSmdZ8=xTItM< z7ox13%(Hn2?HQ<=hMd9S@#@ONVHOql2=l{xIyU&MWT<0rE;vvJuhZH|h1QHAKb~e$ zEpF8F7ZX|uX*``Khy_jsp>3?_R!-+{wLYw7R#CjUTOmLTg|<4Jc}-t6tEIj5%IB+W zCjq57Dlz|v*=Au&5IVP6xAFCEc#m&lKH070#rcB$p=re#Xv&noUE z732rpvI9!!K}9o<+5v&CDI%HaNl;l=lsM>e5)?|66axW8(5lpQNxg0W8uc%vzG>-P zYC7@%=tMuB9VT7g$L_Kuu+!4?{?@{t7<*NEORZ5!T}mZrGwEqZcL-QoUm>e5trG5UY(A<2!4tYp zFsyDte(*2klN8B>E*cnG`=OlE5E0#dzkOvp;K+73ERi4{8@r$rd-QJKjhueA8gRAY zn*UXN?2HMACORLPyc_x;Xc+Ac zh=BL3#7YYyj`#;C77}4mudWzaUW%n;Xa(HIE31hQXT5@%d^zZO;LBk3_hZ?bta_ce z>-pQuWb1Rc&eN_R&@*~=EJ0R9&rdv4G8u}YrXT!Uh)Q>GTGAdUiwJomT+ltXyMi8b znp*mp|F(A+>yO#gU-uq(Uv$ppfhCMwu#qLTY{qk)AI6pjqUKQj!5+=qP^rlBErZ>j z>IRpJf%w}ts;3kO(dI5Z)j1czlURy@R?xcMoq1?HAF}2gB&W*&KU%{n9Y5^Ns-1_{ zt=$VTRrA_yVZaaVQ<$-~PShrW*>_x)U8mStMP zaX%IljOqAoVG&;FB0h+QGD#wCG7HN#7P86fDo3?c6(rRwciXf?s#P+cSeg)r#(`dR zNHpHPgBaKJ;8m_qW1FW2O7?Mh$*fS`&?syyo3vd~@9T5!Xmj%1;t5y08p7I^@t z*f`h|v^i#cB`T9tB@@eliPZ_lOY_Qb^$PAzFbjBB?EDr3A8e`rH;knDB9^A*ZG6q5u@dd+fTNZH{ksU;Dp^j dpoxIm5jzzo!h30C>9_Z)0gh-asut;+{3lYzXHNhC literal 0 HcmV?d00001 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 index 8176acce542..a7752ec301c 100644 --- 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 index ce47f7f681a..ea811ce34a7 100644 --- 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 index 1ed8b0ee7ef..b5d210a75f3 100644 --- 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 @@

{{'Component.ConfigItem.ItemValueTips' | translate }} {{'Component.ConfigItem.ItemValueShowDetection' | translate }}
+ + {{'Component.ConfigItem.FormatItemValue' | translate }} +
{{'Component.ConfigItem.ItemNumberError' | translate }}
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 index c93bd8f90a4..e028c9ed02e 100644 --- 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)">   + + +