namespace-panel.html

<div class="panel" style="border-top: 0px;">
    <div class="row namespace-attribute-panel" ng-if="namespace.isPublic">
        <div class="text-center namespace-attribute-public">
            <span data-tooltip="tooltip" data-placement="bottom" title="公共的Namespace"
                  ng-show="namespace.parentAppId == namespace.baseInfo.appId">公共</span>
            <span data-tooltip="tooltip" data-placement="bottom" title="点击跳转到公共的Namespace"
                  ng-show="namespace.parentAppId != namespace.baseInfo.appId"
                  ng-click="goToParentAppConfigPage(namespace)">关联</span>
        </div>
    </div>
    <header class="panel-heading">
        <div class="row">

            <div class="col-md-6 header-namespace">
                <b ng-bind="namespace.viewName" style="font-size: 20px;" data-tooltip="tooltip" data-placement="bottom"
                   title="{{namespace.comment}}"></b>
                <span class="label label-info no-radius" ng-bind="namespace.format"></span>
                                <span class="label label-primary no-radius" ng-show="namespace.itemModifiedCnt > 0">有修改
                                <span class="badge label badge-white" ng-bind="namespace.itemModifiedCnt"></span></span>
                <span class="label label-warning no-radius"
                      ng-show="namespace.lockOwner">当前修改者:{{namespace.lockOwner}}</span>
            </div>
            <div class="col-md-6 text-right header-buttons">
                <button type="button" class="btn btn-success btn-sm J_tableview_btn"
                        data-tooltip="tooltip" data-placement="bottom" title="发布配置"
                        ng-show="namespace.hasReleasePermission || namespace.hasModifyPermission"
                        ng-disabled="namespace.isTextEditing"
                        ng-click="preReleaseNs(namespace)">
                    <img src="img/release.png">
                    发布

                </button>
                <button type="button" class="btn btn-default btn-sm J_tableview_btn"
                        data-tooltip="tooltip" data-placement="bottom" title="回滚配置"
                        ng-show="namespace.hasReleasePermission"
                        ng-click="preRollback(namespace)">
                    <img src="img/rollback.png">
                    回滚
                </button>
                <a type="button" class="btn btn-default btn-sm J_tableview_btn"
                   data-tooltip="tooltip" data-placement="bottom" title="查看发布历史"
                   href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}">
                    <img src="img/release-history.png">
                    发布历史
                </a>
                <a type="button" class="btn btn-default btn-sm J_tableview_btn"
                   data-tooltip="tooltip" data-placement="bottom" title="配置修改、发布权限"
                   href="/namespace/role.html?#/appid={{appId}}&namespaceName={{namespace.baseInfo.namespaceName}}"
                   ng-show="hasAssignUserPermission">
                    <img src="img/assign.png">
                    授权
                </a>
                <a type="button" class="btn btn-default btn-sm J_tableview_btn"
                   data-tooltip="tooltip" data-placement="bottom" title="同步各环境间配置"
                   ng-click="goToSyncPage(namespace)"
                   ng-show="namespace.hasModifyPermission && namespace.isPropertiesFormat">
                    <img src="img/sync.png">
                    同步配置
                </a>
            </div>
        </div>
    </header>

    <header class="panel-heading second-panel-heading">
        <div class="row">
            <div class="col-md-8 pull-left">
                <ul class="nav nav-tabs">
                    <li role="presentation" ng-click="switchView(namespace, 'table')"
                        ng-show="namespace.isPropertiesFormat">
                        <a ng-class="{node_active:namespace.viewType == 'table'}">
                            <img src="img/table.png">
                            表格
                        </a>
                    </li>
                    <li role="presentation" ng-click="switchView(namespace, 'text')">
                        <a ng-class="{node_active:namespace.viewType == 'text'}">
                            <img src="img/text.png">
                            文本
                        </a>
                    </li>
                    <li role="presentation" ng-click="switchView(namespace, 'history')">
                        <a ng-class="{node_active:namespace.viewType == 'history'}">
                            <img src="img/change.png">
                            更改历史
                        </a>
                    </li>
                    <li role="presentation" ng-click="switchView(namespace, 'instance')">
                        <a ng-class="{node_active:namespace.viewType == 'instance'}">
                            <img src="img/machine.png">
                            实例列表
                            <span class="badge badge-grey" ng-bind="namespace.instancesCount"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 text-right">
                <a data-tooltip="tooltip" data-placement="bottom" title="取消修改"
                   ng-show="namespace.isTextEditing && namespace.viewType == 'text'"
                   ng-click="toggleTextEditStatus(namespace)">
                    <img src="img/cancel.png" class="ns_btn">
                </a>
                <a data-tooltip="tooltip" data-placement="bottom" title="修改配置"
                   ng-show="!namespace.isTextEditing && namespace.viewType == 'text' && namespace.hasModifyPermission"
                   ng-click="toggleTextEditStatus(namespace)">
                    <img src="img/edit.png" class="ns_btn">
                </a>

                &nbsp;
                <a data-tooltip="tooltip" data-placement="bottom" title="提交修改"
                   data-toggle="modal" data-target="#commitModal"
                   ng-show="namespace.isTextEditing && namespace.viewType == 'text'"
                   ng-click="modifyByText(namespace)">
                    <img src="img/submit.png" class="ns_btn">
                </a>

                <button type="button" class="btn btn-primary btn-sm"
                        ng-show="namespace.viewType == 'table' && namespace.hasModifyPermission"
                        ng-click="createItem(namespace)">
                    <img src="img/plus.png">
                    新增配置
                </button>

            </div>
        </div>
    </header>
    <!--text view-->
    <!--只读模式下的文本内容,不替换换行符-->
                            <textarea class="form-control no-radius" rows="{{namespace.itemCnt}}"
                                      ng-show="namespace.viewType == 'text' && !namespace.isTextEditing"
                                      ng-disabled="!namespace.isTextEditing" ng-model="namespace.text"
                                      ng-bind="namespace.text">
                                </textarea>
    <!--编辑状态下的文本内容,会过滤掉换行符-->
                            <textarea class="form-control" rows="{{namespace.itemCnt}}" style="border-radius: 0px"
                                      ng-show="namespace.viewType == 'text' && namespace.isTextEditing"
                                      ng-disabled="!namespace.isTextEditing" ng-model="namespace.editText"
                                      ng-bind="namespace.editText">
                                </textarea>

    <!--table view-->
    <div class="namespace-view-table">
        <table class="table table-bordered table-striped text-center table-hover"
               ng-show="namespace.viewType == 'table' && namespace.items.length > 0">
            <thead>
            <tr>
                <th>
                    Key
                </th>
                <th>
                    Value
                </th>
                <th>
                    备注
                </th>
                <th>
                    最后修改人
                </th>
                <th>
                    最后修改时间
                </th>
                <th>
                    操作
                </th>
            </tr>
            </thead>
            <tbody>

            <tr ng-repeat="config in namespace.items" ng-class="{warning:config.isModified}"
                ng-if="config.item.key && !config.isDeleted">
                <td width="20%" title="{{config.item.key}}">
                    <span ng-bind="config.item.key | limitTo: 250"></span>
                    <span ng-bind="config.item.key.length > 250 ? '...' :''"></span>
                </td>
                <td width="25%" title="{{config.item.value}}">
                    <span ng-bind="config.item.value | limitTo: 250"></span>
                    <span ng-bind="config.item.value.length > 250 ? '...': ''"></span>
                </td>
                <td width="20%" title="{{config.item.comment}}">
                    <span ng-bind="config.item.comment | limitTo: 250"></span>
                    <span ng-bind="config.item.comment.length > 250 ?'...' : ''"></span>
                </td>
                <td width="10%" ng-bind="config.item.dataChangeLastModifiedBy">
                </td>
                <td width="15%"
                    ng-bind="config.item.dataChangeLastModifiedTime | date: 'yyyy-MM-dd HH:mm:ss'">
                </td>

                <td width="10%">
                    <img src="img/edit.png" data-tooltip="tooltip" data-placement="bottom" title="修改"
                         ng-click="editItem(namespace, config.item)"
                         ng-show="namespace.hasModifyPermission">
                    <img style="margin-left: 5px;" src="img/cancel.png"
                         data-tooltip="tooltip" data-placement="bottom" title="删除"
                         ng-click="preDeleteItem(namespace, config.item.id)"
                         ng-show="namespace.hasModifyPermission">
                </td>

            </tr>
            </tbody>
        </table>
    </div>

    <!--history view-->
    <div class="J_historyview history-view" ng-show="namespace.viewType == 'history'">
        <div class="media" ng-repeat="commits in namespace.commits">
            <div class="media-body">
                <div class="row">
                    <div class="col-md-6"><h3 class="media-heading" ng-bind="commits.dataChangeCreatedBy"></h3></div>
                    <div class="col-md-6 text-right"><h5 class="media-heading"
                                                         ng-bind="commits.dataChangeCreatedTime  | date: 'yyyy-MM-dd HH:mm:ss'"></h5>
                    </div>
                </div>


                <!--properties format-->
                <table class="table table-bordered table-striped text-center table-hover" style="margin-top: 5px;"
                       ng-if="namespace.isPropertiesFormat">
                    <thead>
                    <tr>
                        <th>
                            Type
                        </th>
                        <th>
                            Key
                        </th>
                        <th>
                            Old Value
                        </th>
                        <th>
                            New Value
                        </th>
                        <th>
                            Comment
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    <!--兼容老数据,不显示item类型为空行和注释的item-->
                    <tr ng-repeat="item in commits.changeSets.createItems" ng-show="item.key">
                        <td width="2%">
                            新增
                        </td>
                        <td width="20%" title="{{item.key}}">

                            <span ng-bind="item.key | limitTo: 250"></span>
                            <span ng-bind="item.key.length > 250 ? '...' :''"></span>
                        </td>
                        <td width="30%">
                        </td>
                        <td width="30%" title="{{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="2%">
                            更新
                        </td>
                        <td width="20%" title="{{item.newItem.key}}">
                            <span ng-bind="item.newItem.key | limitTo: 250"></span>
                            <span ng-bind="item.newItem.key.length > 250 ? '...' :''"></span>
                        </td>
                        <td width="30%" title="{{item.oldItem.value}}">
                            <span ng-bind="item.oldItem.value | limitTo: 250"></span>
                            <span ng-bind="item.oldItem.value.length > 250 ? '...': ''"></span>
                        </td>
                        <td width="30%" title="{{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="2%">
                            删除
                        </td>
                        <td width="20%" title="{{item.key}}">
                            <span ng-bind="item.key | limitTo: 250"></span>
                            <span ng-bind="item.key.length > 250 ? '...' :''"></span>
                        </td>
                        <td width="30%" title="{{item.value}}">
                            <span ng-bind="item.value | limitTo: 250"></span>
                            <span ng-bind="item.value.length > 250 ? '...': ''"></span>
                        </td>
                        <td width="30%">
                        </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>

                <!--not properties format-->
                <div ng-if="!namespace.isPropertiesFormat">
                    <div ng-repeat="item in commits.changeSets.createItems">
                    <textarea class="form-control" rows="20" style="border-radius: 0px"
                              ng-disabled="true" ng-bind="item.value">
                                </textarea>
                    </div>

                    <div ng-repeat="item in commits.changeSets.updateItems">
                    <textarea class="form-control" rows="20" style="border-radius: 0px"
                              ng-disabled="true" ng-bind="item.newItem.value">
                                </textarea>
                    </div>
                </div>


            </div>
            <hr>
        </div>
        <div class="text-center">
            <button type="button" class="btn btn-default" ng-show="!namespace.hasLoadAllCommit"
                    ng-click="loadCommitHistory(namespace)">加载更多
                <span class="glyphicon glyphicon-menu-down"></span></button>
        </div>
    </div>

    <!--instance view-->
    <div class="panel panel-default instance-view" ng-show="namespace.viewType == 'instance'">
        <div class="panel-heading">
            <div class="row text-right" style="padding-right: 15px;">

                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-default"
                            ng-class="{'btn-primary':namespace.instanceViewType == 'latest_release'}"
                            ng-click="switchInstanceViewType(namespace, 'latest_release')"> 使用最新配置的实例
                        <span class="badge" ng-bind="namespace.latestReleaseInstances.total"></span>
                    </button>
                    <button type="button" class="btn btn-default"
                            ng-class="{'btn-primary':namespace.instanceViewType == 'not_latest_release'}"
                            ng-click="switchInstanceViewType(namespace, 'not_latest_release')">使用非最新配置的实例
                        <span class="badge"
                              ng-bind="namespace.instancesCount - namespace.latestReleaseInstances.total"></span>
                    </button>
                    <button type="button" class="btn btn-default"
                            ng-class="{'btn-primary':namespace.instanceViewType == 'all'}"
                            ng-click="switchInstanceViewType(namespace, 'all')">所有实例
                        <span class="badge" ng-bind="namespace.instancesCount"></span>
                    </button>
                </div>
                <button class="btn btn-default btn-sm"
                        data-tooltip="tooltip" data-placement="bottom" title="刷新列表"
                        ng-click="refreshInstancesInfo(namespace)">
                    <img src="../../img/refresh.png"/>
                </button>
            </div>
        </div>

        <!--latest release instances-->
        <div class="panel-body" ng-show="namespace.instanceViewType == 'latest_release'">

            <div class="panel-default" ng-if="namespace.latestReleaseInstances.total > 0">
                <div class="panel-heading">
                    <a target="_blank" data-tooltip="tooltip" data-placement="bottom" title="查看配置"
                       href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}&scrollTo={{namespace.latestRelease.name}}">
                        {{namespace.latestRelease.name}}
                    </a>
                </div>
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <td>App ID</td>
                        <td>Cluster Name</td>
                        <td>Data Center</td>
                        <td>IP</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="instance in namespace.latestReleaseInstances.content">
                        <td width="25%" ng-bind="instance.appId"></td>
                        <td width="25%" ng-bind="instance.clusterName"></td>
                        <td width="25%" ng-bind="instance.dataCenter"></td>
                        <td width="25%" ng-bind="instance.ip"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="row text-center" ng-show="namespace.latestReleaseInstances.content.length < namespace.latestReleaseInstances.total">
                    <button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>

                </div>
            </div>

            <div class="text-center" ng-if="namespace.latestReleaseInstances.total == 0">
                无实例信息
            </div>
        </div>

        <!--not latest release instances-->
        <div class="panel-body" ng-show="namespace.instanceViewType == 'not_latest_release'">
            <div class="panel-default" ng-if="namespace.instancesCount - namespace.latestReleaseInstances.total > 0" ng-repeat="releaseName in namespace.notLatestReleaseNames">
                <div class="panel-heading">
                    <a target="_blank" data-tooltip="tooltip" data-placement="bottom" title="查看配置"
                       href="/config/history.html?#/appid={{appId}}&env={{env}}&clusterName={{cluster}}&namespaceName={{namespace.baseInfo.namespaceName}}&scrollTo={{releaseName}}">
                        {{releaseName}}
                    </a>

                </div>
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <td>App ID</td>
                        <td>Cluster Name</td>
                        <td>Data Center</td>
                        <td>IP</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="instance in namespace.notLatestReleaseInstances[releaseName]">
                        <td width="25%" ng-bind="instance.appId"></td>
                        <td width="25%" ng-bind="instance.clusterName"></td>
                        <td width="25%" ng-bind="instance.dataCenter"></td>
                        <td width="25%" ng-bind="instance.ip"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="text-center" ng-if="namespace.instancesCount - namespace.latestReleaseInstances.total == 0">
                无实例信息
            </div>
        </div>

         <!--all instances-->
        <div class="panel-body" ng-show="namespace.instanceViewType == 'all'">
            <div class="panel-default" ng-if="namespace.instancesCount > 0">
                <table class="table table-bordered table-striped" ng-if="namespace.allInstances">
                    <thead>
                    <tr>
                        <td>App ID</td>
                        <td>Cluster Name</td>
                        <td>Data Center</td>
                        <td>IP</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="instance in namespace.allInstances">
                        <td width="25%" ng-bind="instance.appId"></td>
                        <td width="25%" ng-bind="instance.clusterName"></td>
                        <td width="25%" ng-bind="instance.dataCenter"></td>
                        <td width="25%" ng-bind="instance.ip"></td>
                    </tr>
                    </tbody>
                </table>
                <div class="row text-center" ng-show="namespace.allInstances.length < namespace.instancesCount">
                    <button class="btn btn-default" ng-click="loadInstanceInfo(namespace)">加载更多</button>
                </div>
            </div>
            <div class="text-center" ng-if="namespace.instancesCount == 0">
                无实例信息
            </div>
        </div>



    </div>
</div>