feat: add history details for not key-value type of namespace (#3856)

* fix: size of create project button

* fix: add changes update for change button size

* feat: add history details for not key-value type

* fix: add changes

* fix: add changes link

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

CHANGES.md

@@ -63,6 +63,7 @@ Apollo 1.9.0
 * [fix the issue that release messages might be missed in certain scenarios](https://github.com/ctripcorp/apollo/pull/3819)
 * [use official docker images for manual kubernetes deployment](https://github.com/ctripcorp/apollo/pull/3840)
 * [fix size of create project button](https://github.com/ctripcorp/apollo/pull/3849)
+* [feature: add history detail for not key-value type of namespace](https://github.com/ctripcorp/apollo/pull/3856)
 ------------------
 All issues and pull requests are [here](https://github.com/ctripcorp/apollo/milestone/6?closed=1)
 

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

@@ -538,20 +538,80 @@
                         </table>
 
                         <!--not properties format-->
-                        <div ng-if="!namespace.isPropertiesFormat">
-                            <div ng-repeat="item in commits.changeSets.createItems">
-                                <textarea class="form-control no-radius" rows="20" ng-disabled="true"
-                                    ng-bind="item.value">
-                                </textarea>
-                            </div>
-
-                            <div ng-repeat="item in commits.changeSets.updateItems">
-                                <textarea class="form-control no-radius" rows="20" ng-disabled="true"
-                                    ng-bind="item.newItem.value">
-                                </textarea>
-                            </div>
-                        </div>
+                        <table class="table table-bordered table-striped text-center table-hover"
+                               style="margin-top: 5px;" ng-if="!namespace.isPropertiesFormat">
+                            <thead>
+                            <tr>
+                                <th>
+                                    {{'Component.Namespace.Branch.History.ItemType' | translate }}
+                                </th>
+                                <th>
+                                    {{'Component.Namespace.Branch.History.ItemOldValue' | translate }}
+                                </th>
+                                <th>
+                                    {{'Component.Namespace.Branch.History.ItemNewValue' | translate }}
+                                </th>
+                                <th>
+                                    {{'Component.Namespace.Branch.History.ItemComment' | translate }}
+                                </th>
+                            </tr>
+                            </thead>
+                            <tbody>
 
+                            <!--兼容老数据,不显示item类型为空行和注释的item-->
+                            <tr ng-repeat="item in commits.changeSets.createItems" ng-show="item.key">
+                                <td width="6%">
+                                    {{'Component.Namespace.Branch.History.NewAdded' | translate }}
+                                </td>
+                                <td width="28%">
+                                </td>
+                                <td width="28%" class="cursor-pointer" title="{{item.value}}"
+                                    ng-click="showText(item.value)">
+                                    <span ng-bind="item.value | limitTo: 250"></span>
+                                    <span ng-bind="item.value.length > 250 ? '...': ''"></span>
+                                </td>
+                                <td width="18%" title="{{item.comment}}">
+                                    <span ng-bind="item.comment | limitTo: 250"></span>
+                                    <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
+                                </td>
+                            </tr>
+                            <tr ng-repeat="item in commits.changeSets.updateItems">
+                                <td width="6%">
+                                    {{'Component.Namespace.Branch.History.Modified' | translate }}
+                                </td>
+                                <td width="28%" class="cursor-pointer" title="{{item.oldItem.value}}"
+                                    ng-click="showText(item.oldItem.value)">
+                                    <span ng-bind="item.oldItem.value | limitTo: 250"></span>
+                                    <span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
+                                </td>
+                                <td width="28%" class="cursor-pointer" title="{{item.newItem.value}}"
+                                    ng-click="showText(item.newItem.value)">
+                                    <span ng-bind="item.newItem.value | limitTo: 250"></span>
+                                    <span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span>
+                                </td>
+                                <td width="18%" title="{{item.newItem.comment}}">
+                                    <span ng-bind="item.newItem.comment | limitTo: 250"></span>
+                                    <span ng-bind="item.newItem.comment.length > 250 ?'...' : ''"></span>
+                                </td>
+                            </tr>
+                            <tr ng-repeat="item in commits.changeSets.deleteItems"
+                                ng-show="item.key || item.comment">
+                                <td width="6%">
+                                    {{'Component.Namespace.Branch.History.Deleted' | translate }}
+                                </td>
+                                <td width="28%" title="{{item.value}}">
+                                    <span ng-bind="item.value | limitTo: 250"></span>
+                                    <span ng-bind="item.value.length > 250 ? '...': ''"></span>
+                                </td>
+                                <td width="28%">
+                                </td>
+                                <td width="18%" title="{{item.comment}}">
+                                    <span ng-bind="item.comment | limitTo: 250"></span>
+                                    <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
+                                </td>
+                            </tr>
+                            </tbody>
+                        </table>
 
                     </div>
                     <hr>

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

@@ -835,20 +835,80 @@
                         </table>
 
                         <!--not properties format-->
-                        <div ng-if="!namespace.isPropertiesFormat">
-                            <div ng-repeat="item in commits.changeSets.createItems">
-                                <textarea class="form-control no-radius" rows="20" ng-disabled="true"
-                                    ng-bind="item.value">
-                                </textarea>
-                            </div>
-
-                            <div ng-repeat="item in commits.changeSets.updateItems">
-                                <textarea class="form-control no-radius" rows="20" ng-disabled="true"
-                                    ng-bind="item.newItem.value">
-                                </textarea>
-                            </div>
-                        </div>
+                        <table class="table table-bordered table-striped text-center table-hover"
+                            style="margin-top: 5px;" ng-if="!namespace.isPropertiesFormat">
+                            <thead>
+                                <tr>
+                                    <th>
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.ItemType' | translate }}
+                                    </th>
+                                    <th>
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.ItemOldValue' | translate }}
+                                    </th>
+                                    <th>
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.ItemNewValue' | translate }}
+                                    </th>
+                                    <th>
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.ItemComment' | translate }}
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody>
 
+                                <!--兼容老数据,不显示item类型为空行和注释的item-->
+                                <tr ng-repeat="item in commits.changeSets.createItems" ng-show="item.key">
+                                    <td width="6%">
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.NewAdded' | translate }}
+                                    </td>
+                                    <td width="28%">
+                                    </td>
+                                    <td width="28%" class="cursor-pointer" title="{{item.value}}"
+                                        ng-click="showText(item.value)">
+                                        <span ng-bind="item.value | limitTo: 250"></span>
+                                        <span ng-bind="item.value.length > 250 ? '...': ''"></span>
+                                    </td>
+                                    <td width="18%" title="{{item.comment}}">
+                                        <span ng-bind="item.comment | limitTo: 250"></span>
+                                        <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
+                                    </td>
+                                </tr>
+                                <tr ng-repeat="item in commits.changeSets.updateItems">
+                                    <td width="6%">
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.Updated' | translate }}
+                                    </td>
+                                    <td width="28%" class="cursor-pointer" title="{{item.oldItem.value}}"
+                                        ng-click="showText(item.oldItem.value)">
+                                        <span ng-bind="item.oldItem.value | limitTo: 250"></span>
+                                        <span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
+                                    </td>
+                                    <td width="28%" class="cursor-pointer" title="{{item.newItem.value}}"
+                                        ng-click="showText(item.newItem.value)">
+                                        <span ng-bind="item.newItem.value | limitTo: 250"></span>
+                                        <span ng-bind="item.newItem.value.length > 250 ? '...': ''"></span>
+                                    </td>
+                                    <td width="18%" title="{{item.newItem.comment}}">
+                                        <span ng-bind="item.newItem.comment | limitTo: 250"></span>
+                                        <span ng-bind="item.newItem.comment.length > 250 ?'...' : ''"></span>
+                                    </td>
+                                </tr>
+                                <tr ng-repeat="item in commits.changeSets.deleteItems"
+                                    ng-show="item.key || item.comment">
+                                    <td width="6%">
+                                        {{'Component.Namespace.Master.Items.Body.HistoryView.Deleted' | translate }}
+                                    </td>
+                                    <td width="28%" title="{{item.value}}">
+                                        <span ng-bind="item.value | limitTo: 250"></span>
+                                        <span ng-bind="item.value.length > 250 ? '...': ''"></span>
+                                    </td>
+                                    <td width="28%">
+                                    </td>
+                                    <td width="18%" title="{{item.comment}}">
+                                        <span ng-bind="item.comment | limitTo: 250"></span>
+                                        <span ng-bind="item.comment.length > 250 ?'...' : ''"></span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
 
                     </div>
                     <hr>