feature:check json value

CHANGES.md

@@ -26,6 +26,7 @@ Apollo 2.1.0
 * [Allow users to delete AppNamespace](https://github.com/apolloconfig/apollo/pull/4499)
 * [fix the deleted at timestamp issue](https://github.com/apolloconfig/apollo/pull/4493)
 * [add configuration processor for portal developers](https://github.com/apolloconfig/apollo/pull/4521)
+* [Add a potential json value check feature](https://github.com/apolloconfig/apollo/pull/4519)
 
 ------------------
 All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/11?closed=1)

apollo-portal/src/main/resources/static/i18n/en.json

@@ -71,6 +71,10 @@
   "Component.ConfigItem.ItemValueTips": "Note: Hidden characters (Spaces, Newline, Tab) easily cause configuration errors. If you want to check hidden characters in Value, please click",
   "Component.ConfigItem.ItemValueShowDetection": "Check Hidden Characters",
   "Component.ConfigItem.ItemValueNotHiddenChars": "No Hidden Characters",
+  "Component.ConfigItem.ItemJSONValueTips": "Note: Check if JSON string is in correct format，Please click",
+  "Component.ConfigItem.ItemJSONValueDetection": "Check JSON Format",
+  "Component.ConfigItem.ValidItemJSONValue": "Valid JSON",
+  "Component.ConfigItem.InvalidItemJSONValue": "Invalid JSON",
   "Component.ConfigItem.ItemComment": "Comment",
   "Component.ConfigItem.ChooseCluster": "Select Cluster",
   "Component.MergePublish.Title": "Full Release",

apollo-portal/src/main/resources/static/i18n/zh-CN.json

@@ -71,6 +71,10 @@
   "Component.ConfigItem.ItemValueTips": "注意: 隐藏字符（空格、换行符、制表符Tab）容易导致配置出错，如果需要检测 Value 中隐藏字符，请点击",
   "Component.ConfigItem.ItemValueShowDetection": "检测隐藏字符",
   "Component.ConfigItem.ItemValueNotHiddenChars": "无隐藏字符",
+  "Component.ConfigItem.ItemJSONValueTips": "注意: 检测JSON字符串格式是否正确，请点击",
+  "Component.ConfigItem.ItemJSONValueDetection": "检测JSON格式",
+  "Component.ConfigItem.ValidItemJSONValue": "JSON格式正确",
+  "Component.ConfigItem.InvalidItemJSONValue": "JSON格式错误",
   "Component.ConfigItem.ItemComment": "Comment",
   "Component.ConfigItem.ChooseCluster": "选择集群",
   "Component.MergePublish.Title": "全量发布",

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

@@ -39,11 +39,20 @@ function itemModalDirective($translate, toastr, $sce, AppUtil, EventManager, Con
             scope.doItem = doItem;
             scope.collectSelectedClusters = collectSelectedClusters;
             scope.showHiddenChars = showHiddenChars;
+            scope.detectJSON = detectJSON;
+            scope.check = check;
 
             $('#itemModal').on('show.bs.modal', function (e) {
                 scope.showHiddenCharsContext = false;
                 scope.hiddenCharCounter = 0;
                 scope.valueWithHiddenChars = $sce.trustAsHtml('');
+                scope.showCheckJSONHint = false;
+                scope.showJSONDetectContext = false;
+                scope.jsonDetectResult = $sce.trustAsHtml('');
+            });
+
+            $('#itemModal').on('shown.bs.modal', function (e) {
+                scope.$apply("check()");
             });
 
             $("#valueEditor").textareafullscreen();
@@ -154,6 +163,40 @@ function itemModalDirective($translate, toastr, $sce, AppUtil, EventManager, Con
                 selectedClusters = data;
             }
 
+            function check(){
+                var value = scope.item.value;
+                if (!value || value.length < 2) {
+                    scope.showCheckJSONHint = false;
+                    scope.showJSONDetectContext = false;
+                    return;
+                }
+                //this way may more effective than regex
+                var signal = value.charAt(0)+value.charAt(value.length-1);
+                if(signal === "{}" || signal === "[]"){
+                    scope.showCheckJSONHint = true;
+                }else{
+                    scope.showCheckJSONHint = false;
+                    scope.showJSONDetectContext = false;
+                }
+            }
+
+            function detectJSON() {
+                var value = scope.item.value;
+                if (!value) {
+                    scope.showJSONDetectContext = false;
+                    return;
+                }
+                var res = "";
+                try {
+                    JSON.parse(value);
+                    res = $translate.instant('Component.ConfigItem.ValidItemJSONValue')
+                } catch(e) {
+                    res = $translate.instant('Component.ConfigItem.InvalidItemJSONValue')
+                }
+                scope.showJSONDetectContext = true;
+                scope.jsonDetectResult = $sce.trustAsHtml(res);
+            }
+
             function showHiddenChars() {
                 var value = scope.item.value;
                 if (!value) {

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

@@ -46,15 +46,22 @@ <h4 class="modal-title">
                     <label class="col-sm-2 control-label">{{'Component.ConfigItem.ItemValue' | translate }}</label>
                     <div class="col-sm-10" valdr-form-group>
                         <textarea id="valueEditor" name="value" class="form-control" rows="6" tabindex="2"
-                            ng-required="false" ng-model="item.value">
+                            ng-required="false" ng-model="item.value" ng-change="check()">
                             </textarea>
                         {{'Component.ConfigItem.ItemValueTips' | translate }} <a
                             ng-click="showHiddenChars()">{{'Component.ConfigItem.ItemValueShowDetection' | translate }}</a>
                         <br>
+                        <div ng-show="showCheckJSONHint">
+                            {{'Component.ConfigItem.ItemJSONValueTips' | translate }} <a
+                                ng-click="detectJSON()">{{'Component.ConfigItem.ItemJSONValueDetection' | translate }}</a>
+                        </div>
+                        <br>
                         <div class="bg-info" ng-show="showHiddenCharsContext && hiddenCharCounter == 0">
                             {{'Component.ConfigItem.ItemValueNotHiddenChars' | translate }}</div>
                         <div class="bg-info" ng-bind-html="valueWithHiddenChars"
                             ng-show="showHiddenCharsContext && hiddenCharCounter > 0"></div>
+                        <div class="bg-info" ng-bind-html="jsonDetectResult"
+                             ng-show="showJSONDetectContext"></div>
                     </div>