fix show-text-modal.html number display(#3821) (#3851)

* fix show-text-modal number display(#3821)

* update CHANGES.md(#3821)

Co-authored-by: Jared Tan <jian.tan@daocloud.io>

CHANGES.md

@@ -65,6 +65,8 @@ Apollo 1.9.0
 * [fix size of create project button](https://github.com/ctripcorp/apollo/pull/3849)
 * [translation of "portal-how-to-enable-webhook-notification.md"](https://github.com/ctripcorp/apollo/pull/3847)
 * [feature: add history detail for not key-value type of namespace](https://github.com/ctripcorp/apollo/pull/3856)
+* [fix show-text-modal number display](https://github.com/ctripcorp/apollo/pull/3851)
+
 ------------------
 All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/6?closed=1)
 

apollo-portal/src/main/resources/static/scripts/directive/show-text-modal-directive.js

@@ -14,7 +14,37 @@
  * limitations under the License.
  *
  */
-directive_module.directive('showtextmodal', showTextModalDirective);
+directive_module.directive('showtextmodal', showTextModalDirective)
+    .filter('jsonBigIntFilter', function () {
+        return function (text) {
+            if (typeof(text) === "undefined" || typeof JSON.parse(text) !== "object"
+                || !text) {
+                return;
+            }
+
+            const numberRegex = /\d{16,}/g;
+            const splitRegex = /"\d\d+"/;
+            const splitArray = text.split(splitRegex);
+            const matchResult = text.match(numberRegex);
+
+            if (!matchResult) {
+                return text;
+            }
+
+            let resultStr = '';
+            let index = 0;
+
+            Object.keys(splitArray).forEach(function (key) {
+                resultStr = resultStr.concat(splitArray[key]);
+                if (typeof(matchResult[index]) !== "undefined") {
+                    resultStr = resultStr.concat(matchResult[index++])
+                }
+            })
+
+            return resultStr;
+        }
+    });
+
 
 function showTextModalDirective(AppUtil) {
     return {
@@ -31,7 +61,7 @@ function showTextModalDirective(AppUtil) {
             function init() {
                 scope.jsonObject = undefined;
                 if (isJsonText(scope.text)) {
-                    scope.jsonObject = JSON.parse(scope.text);
+                    scope.jsonObject = parseBigInt(scope.text);
                 }
             }
 
@@ -42,6 +72,28 @@ function showTextModalDirective(AppUtil) {
                     return false;
                 }
             }
+
+            function parseBigInt(str) {
+                if (/\d{16,}/.test(str)) {
+                    let replaceMap = [];
+                    let n = 0;
+                    str = str.replace(/"(\\?[\s\S])*?"/g, function (match) {
+                        if (/\d{16,}/.test(match)) {
+                            replaceMap.push(match);
+                            return '"""';
+                        }
+                        return match;
+                    }).replace(/[+\-\d.eE]{16,}/g, function (match) {
+                        if (/^\d{16,}$/.test(match)) {
+                            return '"' + match + '"';
+                        }
+                        return match;
+                    }).replace(/"""/g, function () {
+                        return replaceMap[n++];
+                    })
+                }
+                return JSON.parse(str);
+            }
         }
     }
 }

apollo-portal/src/main/resources/static/views/component/show-text-modal.html

@@ -26,7 +26,7 @@
             <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="!jsonObject" ng-bind="text">
             </pre>
             <pre class="modal-body no-radius" style="margin-bottom: 0" ng-show="jsonObject"
-                ng-bind="jsonObject | json:4">
+                ng-bind="jsonObject | json:4 | jsonBigIntFilter">
             </pre>
         </div>
     </div>