<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div ng-controller="CubeCtrl" class="nav-tabs-custom" style="margin-top:40px;">
    <ul class="nav nav-tabs">
        <li class="{{(!cube.visiblePage || cube.visiblePage=='metadata')? 'active':''}}">
            <a href="" ng-click="cube.visiblePage='metadata'">Grid</a>
        </li>
        <!--</li>-->
        <li class="{{cube.visiblePage=='sql'? 'active':''}}">
            <a href="" ng-click="cube.visiblePage='sql';getCubeSql(cube)">SQL</a>
        </li>
        <li class="{{cube.visiblePage=='json'? 'active':''}}"
            ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask) && !newAccess">
            <a href="" ng-click="cube.visiblePage='json';">JSON(Cube)</a>
        </li>
        <!--<li class="{{cube.visiblePage=='access'? 'active':''}}"-->
            <!--ng-if="!kylinConfig.isExternalAclEnabled()">-->
            <!--<a href="" ng-click="cube.visiblePage='access';listAccess(cube, 'CubeInstance');">Access</a>-->
        <!--</li>-->
        <li class="{{cube.visiblePage=='notification'? 'active':''}}"
            ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask) && !newAccess">
            <a href="" ng-click="cube.visiblePage='notification';getNotifyListString(cube);">Notification</a>
        </li>
        <li class="{{cube.visiblePage=='hbase'? 'active':''}}"
            ng-if="userService.hasRole('ROLE_ADMIN')  || hasPermission('cube' ,cube, permissions.ADMINISTRATION.mask) && !newAccess">
            <a href="" ng-click="cube.visiblePage='hbase';getHbaseInfo(cube)">Storage</a>
        </li>
        <li class="{{cube.visiblePage=='planner'? 'active':''}}" ng-if="(userService.hasRole('ROLE_ADMIN') || hasPermission('cube', cube, permissions.ADMINISTRATION.mask) && !newAccess) && isShowCubeplanner">
            <a href="" ng-click="cube.visiblePage='planner';getCubePlanner(cube);">Planner</a>
        </li>
        <li class="{{cube.visiblePage=='streaming'? 'active':''}}" ng-if="(userService.hasRole('ROLE_ADMIN') || hasPermission('cube', cube, permissions.ADMINISTRATION.mask)  && !newAccess) && cube.streamingV2">
            <a href="" ng-click="cube.visiblePage='streaming';getStreamingInfo(cube)">Streaming</a>
       </li>
    </ul>

    <div class="cube-detail" ng-if="!cube.visiblePage || cube.visiblePage=='metadata'">
        <div ng-include="'partials/cubes/cube_schema.html'" ng-controller="CubeSchemaCtrl"
             ng-init="state={mode:'view', cubeName:cube.name};"></div>
    </div>

    <div ng-show="cube.visiblePage=='sql'" class="cube-detail">
        <div ng-if="cube.sql">
            <pre style="background-color: white;border: 0px">{{cube.sql}}</pre>
        </div>
        <div ng-if="!cube.sql">
            <span calss="text-info">No SQL GENERATED.</span>
        </div>
    </div>

    <div ng-show="cube.visiblePage=='json'" class="cube-detail">
        <pre ng-if="!state.jsonEdit"
             style="background-color: white;border: 0px">{{angular.toJson(cleanStatus(cube.detail), true)}}</pre>
    </div>

    <!--<div ng-show="cube.visiblePage=='json_model'" class="cube-detail">-->
          <!--<pre ng-if="!state.jsonEdit"-->
               <!--style="background-color: white;border: 0px">{{angular.toJson(cleanStatus(model), true)}}</pre>-->
    <!--</div>-->
    <!--<div ng-show="cube.visiblePage=='graph'" id="cube_graph_{{cube.name}}" class="cube-detail cube_graph">-->
    <!--</div>-->

    <!--<div class="cube-detail" ng-if="cube.visiblePage=='access'">-->
        <!--<div class="row">-->
            <!--<div class="col-xs-1"></div>-->
            <!--<div class="col-xs-10">-->
                <!--<div ng-include src="'partials/common/access.html'" ng-init="entity=cube;type='CubeInstance';"></div>-->
            <!--</div>-->
            <!--<div class="col-xs-1"></div>-->
        <!--</div>-->
    <!--</div>-->

    <div class="cube-detail" ng-show="cube.visiblePage=='notification'">
        <div style="margin: 15px;">
            <form>
                <h5>Notification List(Comma Separated)</h5>
                <div class="form-group">
                    <input ng-model="cube.notifyListString" class="form-control" placeholder="Notification List..." />
                </div>
                <div class="form-group">
                    <button class="btn btn-primary btn-sm" ng-click="updateNotifyList(cube)">Save</button>
                </div>
                <div class="space-4"></div>
            </form>
        </div>
    </div>

  <div class="cube-detail" ng-show="cube.visiblePage=='hbase'">
        <div style="margin: 15px; overflow: hidden;">
            <div ng-if="cube.hbase">
              <div class="hr hr8 hr-double hr-dotted"></div>
              <h5><b>Segment Number:</b> <span class="blue">{{cube.hbase.length}}</span> <b>Total Size:</b> <span class="blue">{{cube.totalSize | bytes}}</span></h5>
            </div>
            <div ng-repeat="table in cube.hbase" class="cube-segment-list" ng-class="{'cube-broken-segment': table.regionCount === 0}">
                <h5><b>Segment:</b> {{table.segmentName}}</h5>
                <ul>
                    <li ng-if="cube.streaming">Status: <span>{{table.segmentStatus}}</span></li>
                    <li ng-if="cube.model.partition_desc.partition_date_column">Start Time: <span>{{table.dateRangeStart | reverseToGMT0}}</span></li>
                    <li ng-if="cube.model.partition_desc.partition_date_column">End Time: <span>{{table.dateRangeEnd | reverseToGMT0}}</span></li>
                    <li>Source Count: <span>{{table.sourceCount}}</span></li>
                    <li>HBase Table: <span>{{table.tableName}}</span></li>
                    <li>Region Count: <span ng-class="{'red': table.regionCount == 0}">{{table.regionCount}}</span></li>
                    <li>Size: <span>{{table.tableSize | bytes}}</span></li>
                </ul>
            </div>
            <div ng-if="cube.hbase.length == 0">
                <h5>No Storage Info.</h5>
            </div>
        </div>
    </div>
    <div class="cube-detail" ng-if="cube.visiblePage=='planner'">
        <div style="padding: 15px;">
            <div class="row">
                <div class="col-sm-12">
                    <h4 style="display: inline;">Cuboid Distribution</h4>
                    <button ng-if="enableRecommend" class="btn btn-success btn-sm pull-right" ng-click="getRecommendCuboids(cube)" ng-if="currentData">
                        Recommend
                    </button>
                    <div ng-if="cube.cuboid_last_optimized" class="pull-right" style="padding: 5px;">Last Optimized Time: {{cube.cuboid_last_optimized | utcToConfigTimeZone}}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                     <nvd3 options="currentOptions" data="currentData" api="currentChart.api"></nvd3>
                </div>
                <div class="col-md-6 col-sm-12" ng-if="recommendData">
                    <nvd3 options="recommendOptions" data="recommendData"></nvd3>
                </div>
            </div>
            <div class="row cube-planner-column" ng-if="currentData || recommendData">
                <table class="table table-bordered">
                    <tbody>
                        <tr ng-repeat="row in cube.detail.rowkey.rowkey_columns track by $index" ng-if="$index % 5 == 0" class="row">
                            <th ng-class="{'column-in-cuobid': selectCuboid.charAt($index) == 1, 'column-not-in-cuboid': selectCuboid.charAt($index) == 0}">{{cube.detail.rowkey.rowkey_columns[$index].column}}</th>
                            <th ng-class="{'column-in-cuobid': selectCuboid.charAt($index + 1) == 1, 'column-not-in-cuboid': selectCuboid.charAt($index + 1) == 0}">{{cube.detail.rowkey.rowkey_columns[$index + 1].column}}</th>
                            <th ng-class="{'column-in-cuobid': selectCuboid.charAt($index + 2) == 1, 'column-not-in-cuboid': selectCuboid.charAt($index + 2) == 0}">{{cube.detail.rowkey.rowkey_columns[$index + 2].column}}</th>
                            <th ng-class="{'column-in-cuobid': selectCuboid.charAt($index + 3) == 1, 'column-not-in-cuboid': selectCuboid.charAt($index + 3) == 0}">{{cube.detail.rowkey.rowkey_columns[$index + 3].column}}</th>
                            <th ng-class="{'column-in-cuobid': selectCuboid.charAt($index + 4) == 1, 'column-not-in-cuboid': selectCuboid.charAt($index + 4) == 0}">{{cube.detail.rowkey.rowkey_columns[$index + 4].column}}</th>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="dropup pull-right" style="margin-left: 10px;" ng-if="recommendData">
                        <button class="btn btn-default dropdown-toggle" type="button" id="export" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Export
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="export">
                            <li><a ng-href="{{config.service.url}}cubes/{{cube.name}}/cuboids/export?top=10" target="_blank" >Top 10</a></li>
                            <li><a ng-href="{{config.service.url}}cubes/{{cube.name}}/cuboids/export?top=50" target="_blank" >Top 50</a></li>
                            <li><a ng-href="{{config.service.url}}cubes/{{cube.name}}/cuboids/export?top=100" target="_blank" >Top 100</a></li>
                        </ul>
                    </div>
                    <button class="btn btn-success btn-next pull-right" ng-click="optimizeCuboids(cube)" ng-if="recommendData">
                        Optimize
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="cube-detail" ng-if="cube.visiblePage=='streaming'">
        <div style="padding: 15px; color: #212121;">
            <div class="row" ng-repeat="(rsId, replicaSet) in replicaSets" style="padding-left: 10px; padding-right: 10px;">
                <div class="col-sm-1" style="text-align: center; background-color: #f5f5f5; border: 1px solid #ffffff; height: 100px; padding-top: 30px; padding-bottom: 30px; color: #455A64;">
                    <span>Replica Set ID: {{rsId}}</span>
                </div>

                <div class="col-sm-11" style="padding-left: 0px; padding-right: 0px;">
                    <div class="cube-receiver-stats" ng-class="receiverStats.style" ng-repeat="(node, receiverStats) in replicaSet" ng-click="nodeStatsDetail(node, receiverStats)">
                        <div class="col-sm-12 node-info" ng-class="{'text-red':receiverStats.receiver_state != 'HEALTHY'}">
                            {{node}}
                        </div>
                        <div class="col-sm-12 rate-metric" ng-if="receiverStats.partition_consume_stats">
                            {{receiverStats.consumer_info.one_min_rate | number:0}} <span class="unit">msg/s</span>
                        </div>
                        <div class="col-sm-12 rate-metric" ng-if="!receiverStats.partition_consume_stats">
                            N/A
                        </div>
                        <div class="row">
                            <div class="col-sm-2 col-sm-offset-1 detail-metric">
                                5'
                            </div>
                            <div class="col-sm-2 detail-metric">
                                15'
                            </div>
                            <div class="col-sm-2 detail-metric">
                                avg
                            </div>
                            <div class="col-sm-2 detail-metric">
                                consume
                            </div>
                            <div class="col-sm-2 detail-metric">
                                ingest
                            </div>
                        </div>
                        <div class="row" ng-if="receiverStats.partition_consume_stats">
                            <div class="col-sm-2 col-sm-offset-1 detail-metric">
                                {{receiverStats.consumer_info.five_min_rate | number:0}}<span>msg/s</span>
                            </div>
                            <div class="col-sm-2 detail-metric">
                                {{receiverStats.consumer_info.fifteen_min_rate | number:0}}<span>msg/s</span>
                            </div>
                            <div class="col-sm-2 detail-metric">
                                {{receiverStats.consumer_info.avg_rate | number:0}}<span>msg/s</span>
                            </div>
                            <div class="col-sm-2 detail-metric">
                                {{receiverStats.consumer_info.total_consume}}
                            </div>
                            <div class="col-sm-2 detail-metric">
                                {{receiverStats.total_ingest}}
                            </div>
                        </div>
                        <div class="row" ng-if="!receiverStats.partition_consume_stats">
                            <div class="col-sm-2 col-sm-offset-1 detail-metric">
                                N/A
                            </div>
                            <div class="col-sm-2 detail-metric">
                                N/A
                            </div>
                            <div class="col-sm-2 detail-metric">
                                N/A
                            </div>
                            <div class="col-sm-2 detail-metric">
                                N/A
                            </div>
                            <div class="col-sm-2 detail-metric">
                                {{receiverStats.total_ingest || 'N/A'}}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="nodeStatsDetail.html">
    <div class="modal-header">
        <div class="box-header">
            <h3 class="box-title">{{node}}</h3>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" ng-click="cancel()"><i class="fa fa-times"></i></button>
            </div>
        </div>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-offset-1 col-md-3 text-right">Latest Event Time</div>
            <div class="col-md-7">{{receiverStats.latest_event_time ?  (receiverStats.latest_event_time | reverseToGMT0) : ''}}</div>
        </div>
        <div class="row">
            <div class="col-md-offset-1 col-md-3 text-right">Latest Event Ingest Time</div>
            <div class="col-md-7">{{receiverStats.latest_event_ingest_time ? (receiverStats.latest_event_ingest_time | reverseToGMT0) : ''}}</div>
        </div>
        <div class="row">
            <div class="col-md-offset-1 col-md-3 text-right">Segments</div>
            <div class="col-md-7">
                <!-- TODO add color for segment & partition-->
                <a href="javascript:void(0);" ng-repeat="(segmentName, segmentInfo) in receiverStats.segment_stats" kylinpopover placement="top" class="segment" title="Segment Info" trigger="focus" content="segment name: {{segmentName}}</br>segment state: {{segmentInfo.segment_state}}</br>fragment number: {{segmentInfo.store_stats.num_fragments}}</br>row number in memory: {{segmentInfo.store_stats.num_rows_in_mem}}</br>latest event latency: {{segmentInfo.latest_event_latency}}ms</br>latest event time: {{!!segmentInfo.latest_event_time ? (segmentInfo.latest_event_time | reverseToGMT0) : ''}}</br>segement create time: {{segmentInfo.segment_create_time | reverseToGMT0}}</br>last update time: {{segmentInfo.segment_last_update_time | reverseToGMT0}}">
                    <i class="fa fa-database" style="font-size: 1.5em; color: #86bad8; margin-right: 5px;" ng-class="{'active': segmentInfo.segment_state === 'ACTIVE'}"></i>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1 col-md-3 text-right">Partitions</div>
            <div class="col-md-7" ng-if="receiverStats.partition_consume_stats">
                <a href="javascript:void(0);" ng-repeat="partitionInfo in receiverStats.partition_consume_stats" kylinpopover placement="top" title="Partition Info" trigger="focus" content="Partition Id: {{partitionInfo.partition_id}}</br>Offset Info: {{partitionInfo.offset_info}}</br>1 Minute Rate: {{partitionInfo.one_min_rate | number:0}} msg/s</br>5 Minute Rate: {{partitionInfo.five_min_rate | number:0}} msg/s</br>15 Minute Rate: {{partitionInfo.fifteen_min_rate | number:0}} msg/s</br>AVG Rate: {{partitionInfo.avg_rate | number:0}} msg/s</br>Total Consume: {{partitionInfo.total_consume}}<br/>Cosume Lag: {{partitionInfo.consume_lag}}">
                    <i class="fa fa-list-ul" style="font-size:1.5em; color:#3c8dbc; margin-right: 5px;"></i>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-1 col-md-3 text-right">Cosume Lag</div>
            <div class="col-md-7">{{receiverStats.consume_lag}}</div>
        </div>
    </div>
</script>