Merge pull request #555 from lepdou/optimize_portal

check item value hidden chars

apollo-portal/src/main/resources/static/scripts/controller/config/ConfigBaseInfoController.js

@@ -15,6 +15,7 @@ function ConfigBaseInfoController($rootScope, $scope, $window, $location, toastr
 
     if (!appId) {
         $window.location.href = '/index.html';
+        return;
     }
 
     initPage();
@@ -51,6 +52,7 @@ function ConfigBaseInfoController($rootScope, $scope, $window, $location, toastr
     }
 
     function loadAppInfo() {
+
         $scope.notFoundApp = true;
         AppService.load($rootScope.pageContext.appId).then(function (result) {
             $scope.notFoundApp = false;
@@ -60,19 +62,13 @@ function ConfigBaseInfoController($rootScope, $scope, $window, $location, toastr
 
             loadNavTree();
             recordVisitApp();
+            findMissEnvs();
 
             $(".J_appFound").removeClass("hidden");
         }, function (result) {
             $(".J_appNotFound").removeClass("hidden");
         });
-
-        ////// 补缺失的环境 //////
-        $scope.missEnvs = [];
-        AppService.find_miss_envs($rootScope.pageContext.appId).then(function (result) {
-            $scope.missEnvs = AppUtil.collectData(result);
-        }, function (result) {
-
-        });
+    }
 
     $scope.createAppInMissEnv = function () {
         var count = 0;
@@ -92,8 +88,14 @@ function ConfigBaseInfoController($rootScope, $scope, $window, $location, toastr
             });
         });
     };
-    }
 
+    function findMissEnvs() {
+        $scope.missEnvs = [];
+        AppService.find_miss_envs($rootScope.pageContext.appId).then(function (result) {
+            $scope.missEnvs = AppUtil.collectData(result);
+        });
+
+    }
     function recordVisitApp() {
         //save user recent visited apps
         var VISITED_APPS_STORAGE_KEY = "VisitedAppsV2";

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

 directive_module.directive('itemmodal', itemModalDirective);
 
-function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
+function itemModalDirective(toastr, $sce, AppUtil, EventManager, ConfigService) {
     return {
         restrict: 'E',
         templateUrl: '../../views/component/item-modal.html',
@@ -15,7 +15,6 @@ function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
         },
         link: function (scope) {
 
-
             var TABLE_VIEW_OPER_TYPE = {
                 CREATE: 'create',
                 UPDATE: 'update'
@@ -23,6 +22,13 @@ function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
 
             scope.doItem = doItem;
             scope.collectSelectedClusters = collectSelectedClusters;
+            scope.showHiddenChars = showHiddenChars;
+
+            $('#itemModal').on('show.bs.modal', function (e) {
+                scope.showHiddenCharsContext = false;
+                scope.hiddenCharCounter = 0;
+                scope.valueWithHiddenChars = $sce.trustAsHtml('');
+            });
 
             function doItem() {
 
@@ -61,7 +67,6 @@ function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
                                                       namespace: scope.toOperationNamespace
                                                   });
 
-
                             }, function (result) {
                                 toastr.error(AppUtil.errorMsg(result), "添加失败");
                                 scope.item.addItemBtnDisabled = false;
@@ -97,7 +102,6 @@ function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
                         });
                     }
 
-
                 } else {
 
                     if (!scope.item.comment) {
@@ -126,9 +130,48 @@ function itemModalDirective(toastr, AppUtil, EventManager, ConfigService) {
             }
 
             var selectedClusters = [];
+
             function collectSelectedClusters(data) {
                 selectedClusters = data;
             }
+
+            function showHiddenChars() {
+                var value = scope.item.value;
+                if (!value) {
+                    return;
+                }
+
+                var hiddenCharCounter = 0, valueWithHiddenChars = value;
+
+                for (var i = 0; i < valueWithHiddenChars.length; i++) {
+                    var c = valueWithHiddenChars[i];
+                    if (isHiddenChar(c)) {
+                        valueWithHiddenChars = valueWithHiddenChars.replace(c, viewHiddenChar);
+                        hiddenCharCounter++;
+                    }
+                }
+
+                scope.showHiddenCharsContext = true;
+                scope.hiddenCharCounter = hiddenCharCounter;
+                scope.valueWithHiddenChars = $sce.trustAsHtml(valueWithHiddenChars);
+
+            }
+
+            function isHiddenChar(c) {
+                return c == '\t' || c == '\n' || c == ' ';
+            }
+
+            function viewHiddenChar(c) {
+
+                if (c == '\t') {
+                    return '<mark>#制表符#</mark>';
+                } else if (c == '\n') {
+                    return '<mark>#换行符#</mark>';
+                } else if (c == ' ') {
+                    return '<mark>#空格#</mark>';
+                }
+
+            }
         }
     }
 }

apollo-portal/src/main/resources/static/styles/common-style.css

@@ -62,6 +62,10 @@ p, td, span {
     border-top: 1px solid #ddd;
 }
 
+.bg-info, .bg-primary, .bg-warning, .bg-danger, .bg-success {
+    padding: 10px;
+}
+
 .active {
     background: #f5f5f5;
 }
@@ -503,7 +507,6 @@ table th {
     background: url(../img/add.png) no-repeat;
 }
 
-
 .list-group-item .icon-text {
     background-size: 20px;
     background-position: 5% 50%;

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

@@ -6,7 +6,9 @@
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                         aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">
-                    <span ng-show="item.tableViewOperType == 'create' && !toOperationNamespace.isBranch"> 添加配置项</span>
+                    <span ng-show="item.tableViewOperType == 'create' && !toOperationNamespace.isBranch">
+                        添加配置项 <small class="text-info">(温馨提示: 可以通过文本模式批量添加配置)</small>
+                    </span>
                     <span ng-show="item.tableViewOperType == 'create' && toOperationNamespace.isBranch"> 添加灰度配置项</span>
                     <span ng-show="item.tableViewOperType == 'update'"> 修改配置项</span>
                 </h4>
@@ -33,7 +35,13 @@
                                   ng-required="true"
                                   ng-model="item.value">
                             </textarea>
+                        注意: 隐藏字符(空格、换行符、制表符Tab)容易导致配置出错，如果需要检测Value中隐藏字符请点击 <a ng-click="showHiddenChars()">检测隐藏字符</a>
+                        <br>
+                        <div class="bg-info" ng-show="showHiddenCharsContext && hiddenCharCounter == 0">无隐藏字符</div>
+                        <div class="bg-info" ng-bind-html="valueWithHiddenChars" ng-show="showHiddenCharsContext && hiddenCharCounter > 0"></div>
                     </div>
+
+
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">Comment</label>

apollo-portal/src/main/resources/static/views/component/namespace-panel-master-tab.html

@@ -233,7 +233,8 @@
                         </thead>
                         <tbody>
                         <tr ng-repeat="config in namespace.viewItems |orderBy:col:desc"
-                            ng-if="config.item.key">
+                            ng-if="config.item.key"
+                            ng-class="{'warning': !config.item.value}">
                             <td width="8%" class="text-center">
                             <span class="label label-warning no-radius cursor-pointer" ng-if="config.isModified"
                                   data-tooltip="tooltip" data-placement="bottom" title="点击查看已发布的值"