Support grayscale feature for non-properties namespaces(#4316)

CHANGES.md

@@ -29,6 +29,6 @@ Apollo 2.2.0
 * [[Multi-Database Support][h2] Support run on h2](https://github.com/apolloconfig/apollo/pull/4851)
 * [Fix the issue that env special case handling is missing in some case](https://github.com/apolloconfig/apollo/pull/4887)
 * [Fix the issue that namespace content being cleared when identical content is pasted into the namespace](https://github.com/apolloconfig/apollo/pull/4922)
-
+* [Support grayscale feature for non-properties namespaces](https://github.com/apolloconfig/apollo/pull/4952)
 ------------------
 All issues and pull requests are [here](https://github.com/apolloconfig/apollo/milestone/13?closed=1)

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

@@ -123,6 +123,7 @@
   "Component.Namespace.Branch.Body.Modify": "Modified",
   "Component.Namespace.Branch.Body.AddedByGrayscale": "Specific configuration for grayscale version",
   "Component.Namespace.Branch.Body.Added": "New",
+  "Component.Namespace.Branch.Body.Op.Compare": "Compare",
   "Component.Namespace.Branch.Body.Op.Modify": "Modify",
   "Component.Namespace.Branch.Body.Op.Delete": "Delete",
   "Component.Namespace.MasterBranch.Body.Title": "Configuration of the main version",

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

@@ -123,6 +123,7 @@
   "Component.Namespace.Branch.Body.Modify": "改",
   "Component.Namespace.Branch.Body.AddedByGrayscale": "灰度版本特有的配置",
   "Component.Namespace.Branch.Body.Added": "新",
+  "Component.Namespace.Branch.Body.Op.Compare": "比较",
   "Component.Namespace.Branch.Body.Op.Modify": "修改",
   "Component.Namespace.Branch.Body.Op.Delete": "删除",
   "Component.Namespace.MasterBranch.Body.Title": "主版本的配置",
@@ -288,7 +289,9 @@
   "Component.Publish.AllPublish": "全量发布",
   "Component.Publish.AllPublishTips": "（全量发布的配置会作用于全部的实例）",
   "Component.Publish.ToSeeChange": "查看变更",
-  "Component.Publish.PublishedValue": "发布的值",
+  "Component.Publish.change1": "与主版本的值对比",
+  "Component.Publish.change2": "与已发布的值对比",
+  "Component.Publish.PublishedValue": "正在发布的值",
   "Component.Publish.Changes": "Changes",
   "Component.Publish.Key": "Key",
   "Component.Publish.NoPublishedValue": "未发布的值",

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

@@ -418,4 +418,3 @@ function controller($rootScope, $scope, $translate, toastr, AppUtil, EventManage
 
 }
 
-

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

@@ -48,7 +48,8 @@ directive_module.directive('apollodiff',
                     var oldStr = scope.oldStr == undefined ? '' : scope.oldStr;
                     var newStr = scope.newStr == undefined ? '' : scope.newStr;
 
-                    var diff = JsDiff.diffLines(oldStr, newStr),
+                    var oldStrRes = oldStr.replace(/\r/g, "");
+                    var diff = JsDiff.diffLines(oldStrRes, newStr),
                         fragment = document.createDocumentFragment();
 
                     diff.forEach(function (part) {

apollo-portal/src/main/resources/static/scripts/directive/namespace-panel-directive.js

@@ -917,7 +917,6 @@ function directive($window, $translate, toastr, AppUtil, EventManager, Permissio
 
             //normal release and gray release
             function publish(namespace) {
-
                 if (!namespace.hasReleasePermission) {
                     AppUtil.showModal('#releaseNoPermissionDialog');
                     return;

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

@@ -33,7 +33,7 @@ function releaseModalDirective($translate, toastr, AppUtil, EventManager, Releas
             scope.release = release;
 
             scope.releaseBtnDisabled = false;
-            scope.releaseChangeViewType = 'change';
+            scope.releaseChangeViewType = 'change2';
             scope.releaseComment = '';
             scope.isEmergencyPublish = false;
 

apollo-portal/src/main/resources/static/vendor/bootstrap/css/bootstrap.min.css

@@ -3974,7 +3974,7 @@ tbody.collapse.in {
 }
 
 .btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group {
-    margin-left: -1px
+    margin-left: 0px
 }
 
 .btn-toolbar {

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

@@ -39,7 +39,7 @@ <h4 class="modal-title">
                     </label>
                     <div class="col-sm-10" valdr-form-group>
                         <input type="text" name="key" class="form-control" ng-model="item.key" tabindex="1"
-                            ng-required="true" ng-disabled="item.tableViewOperType != 'create'" />
+                            ng-required="true" ng-disabled="item.tableViewOperType == 'update' || !toOperationNamespace.isPropertiesFormat" />
                     </div>
                 </div>
                 <div class="form-group">
@@ -48,7 +48,7 @@ <h4 class="modal-title">
                         {{'Component.ConfigItem.ItemTypeName' | translate }}
                     </label>
                     <div class="col-sm-10" valdr-form-group>
-                        <select class="form-control" name="type" ng-model="item.type" ng-change="changeType()">
+                        <select class="form-control" name="type" ng-model="item.type" ng-change="changeType()" ng-disabled="!toOperationNamespace.isPropertiesFormat">
                             <option value="0">{{'Component.ConfigItem.ItemTypeString' | translate }}</option>
                             <option value="1">{{'Component.ConfigItem.ItemTypeNumber' | translate }}</option>
                             <option value="2">{{'Component.ConfigItem.ItemTypeBoolean' | translate }}</option>
@@ -86,9 +86,9 @@ <h4 class="modal-title">
 
                 </div>
                 <div class="form-group">
-                    <label class="col-sm-2 control-label">{{'Component.ConfigItem.ItemComment' | translate }}</label>
+                    <label class="col-sm-2 control-label" ng-show="toOperationNamespace.isPropertiesFormat">{{'Component.ConfigItem.ItemComment' | translate }}</label>
                     <div class="col-sm-10" valdr-form-group>
-                        <textarea class="form-control" name="comment" ng-model="item.comment" tabindex="3" rows="2">
+                        <textarea class="form-control" name="comment" ng-model="item.comment" tabindex="3" rows="2" ng-show="toOperationNamespace.isPropertiesFormat">
                         </textarea>
                     </div>
                 </div>

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

@@ -69,8 +69,7 @@
             <div class="row">
                 <div class="col-md-12 pull-left">
                     <ul class="nav nav-tabs">
-                        <li role="presentation" ng-click="switchView(namespace.branch, 'table')"
-                            ng-show="namespace.isPropertiesFormat">
+                        <li role="presentation" ng-click="switchView(namespace.branch, 'table')">
                             <a ng-class="{node_active:namespace.branch.viewType == 'table'}">
                                 <img src="img/table.png">
                                 {{'Component.Namespace.Branch.Tab.Configuration' | translate }}
@@ -111,7 +110,7 @@
                     <div class="panel-heading">
                         {{'Component.Namespace.Branch.Body.Item' | translate }}
                         <button type="button" class="btn btn-primary btn-sm pull-right" style="margin-top: -4px;"
-                            ng-show="namespace.hasModifyPermission" ng-click="createItem(namespace.branch)">
+                                ng-show="namespace.isPropertiesFormat && namespace.hasModifyPermission" ng-click="createItem(namespace.branch)">
                             <img src="img/plus.png">
                             {{'Component.Namespace.Branch.Body.AddedItem' | translate }}
                         </button>

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

@@ -91,7 +91,7 @@
 
                 <a type="button" class="btn btn-default btn-sm" data-tooltip="tooltip" data-placement="bottom"
                     title="{{'Component.Namespace.Master.Items.GrayscaleTips' | translate }}"
-                    ng-show="!namespace.hasBranch && namespace.isPropertiesFormat && namespace.hasModifyPermission"
+                    ng-show="!namespace.hasBranch && namespace.hasModifyPermission"
                     ng-click="preCreateBranch(namespace)">
                     <img src="img/test.png">
                     {{'Component.Namespace.Master.Items.Grayscale' | translate }}

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

@@ -40,11 +40,15 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
 
                 <div class="form-group pre-scrollable">
                     <div class="col-sm-2 control-label" ng-if="!toReleaseNamespace.isPropertiesFormat">
-                        <div class="row">
-                            <div class="btn-group btn-group-xs" style="padding-right: 10px" role="group">
+                        <div class="btn-group-vertical">
+                            <div class="btn-group btn-group-xs" role="group">
+                                <button type="button" class="btn btn-default" ng-if="toReleaseNamespace.isBranch"
+                                        ng-class="{active:releaseChangeViewType=='change1'}"
+                                        ng-click="switchReleaseChangeViewType('change1')">{{'Component.Publish.change1' | translate }}
+                                </button>
                                 <button type="button" class="btn btn-default"
-                                    ng-class="{active:releaseChangeViewType=='change'}"
-                                    ng-click="switchReleaseChangeViewType('change')">{{'Component.Publish.ToSeeChange' | translate }}
+                                    ng-class="{active:releaseChangeViewType=='change2'}"
+                                    ng-click="switchReleaseChangeViewType('change2')">{{'Component.Publish.change2' | translate }}
                                 </button>
                                 <button type="button" class="btn btn-default"
                                     ng-class="{active:releaseChangeViewType=='release'}"
@@ -216,9 +220,14 @@ <h4 class="modal-title" ng-show="toReleaseNamespace.isBranch && toReleaseNamespa
                         </table>
 
                         <!--file format -->
+                        <div ng-repeat="config in toReleaseNamespace.branchItems" ng-if="!toReleaseNamespace.isPropertiesFormat&&toReleaseNamespace.isBranch"
+                             ng-show="releaseChangeViewType=='change1'">
+                            <apollodiff old-str="config.masterReleaseValue" new-str="config.newValue" apollo-id="'releaseStrDiff1'">
+                            </apollodiff>
+                        </div>
                         <div ng-repeat="item in toReleaseNamespace.items" ng-if="!toReleaseNamespace.isPropertiesFormat"
-                            ng-show="releaseChangeViewType=='change'">
-                            <apollodiff old-str="item.oldValue" new-str="item.newValue" apollo-id="'releaseStrDiff'">
+                            ng-show="releaseChangeViewType=='change2'">
+                            <apollodiff old-str="item.oldValue" new-str="item.newValue" apollo-id="'releaseStrDiff2'">
                             </apollodiff>
                         </div>
                         <div ng-repeat="item in toReleaseNamespace.items" ng-if="!toReleaseNamespace.isPropertiesFormat"

docs/en/usage/apollo-user-guide.md

@@ -353,6 +353,16 @@ Fill in the popup box with the value to be grayed out: 3000 and click Submit.
 
 ![gray-release-config-submitted](https://cdn.jsdelivr.net/gh/apolloconfig/apollo@master/doc/images/gray-release/gray-release-config-submitted.png)
 
+After the grayscale configuration, confirm the grayscale configuration and the major version configuration.
+
+Click on the `Grayscale Publish` button.
+
+![](../../../doc/images/gray-release/click-gray-release.png)
+
+Confirm the grayscale configuration to be released by comparing the value of the major version and the published value of the grayscale version.
+
+![](../../../doc/images/gray-release/gray-release-diff-items.png)
+
 ## 5.4 Configuring grayscale rules
 
 Switch to the `Gray Rule` Tab and click the `Add Rule` button

docs/zh/usage/apollo-user-guide.md

@@ -334,6 +334,16 @@ Apollo目前提供Java客户端，具体信息请点击[Java客户端使用文
 
 ![gray-release-config-submitted](https://cdn.jsdelivr.net/gh/apolloconfig/apollo@master/doc/images/gray-release/gray-release-config-submitted.png)
 
+灰度配置完成后，确认灰度的配置和主版本配置
+
+点击`灰度发布`按钮
+
+![](../../../doc/images/gray-release/click-gray-release.png)
+
+与主版本的值和灰度版本已发布的值对比，确认将要发布的灰度配置
+
+![](../../../doc/images/gray-release/gray-release-diff-items.png)
+
 ## 5.4 配置灰度规则
 切换到`灰度规则`Tab，点击`新增规则`按钮