<!--
* 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 class="row" ng-controller="CubesCtrl"  style="margin-top:15px;">

<loading ng-if="loading" text="Loading Cubes..."></loading>

<!--Table-->
<div class="dataTables_wrapper no-footer">
    <div class="row">
      <div class="col-xs-9">
        <label class="table-header-text">Cubes</label>
      </div>
      <div class="col-xs-3">
      <form style="display: inline;float:right;" >
          <span class="input-icon input-icon-right nav-search">
            <input type="text" placeholder="Search by name" class="nav-search-input" ng-model="listParams.cubeName" />
            <i class="ace-icon fa fa-search blue" ng-click="cubeList.removeAll();reload()"></i>
          </span>
      </form>
      </div>
    </div>

    <div ng-if="!loading && cubeList.cubes.length == 0">
        <div no-result text="No Cube."></div>
    </div>
    <table ng-if="cubeList.cubes.length > 0" class="table table-striped table-bordered table-hover dataTable no-footer">
        <!--Header-->
        <thead>
        <tr style="cursor: pointer">
            <th ng-repeat="theaditem in cubeConfig.theaditems"
                ng-click="state.filterAttr= theaditem.attr;state.reverseColumn=theaditem.attr;state.filterReverse=!state.filterReverse;">
                {{theaditem.name}}
                <i ng-if="state.reverseColumn!= theaditem.attr"
                   class="fa fa-unsorted"></i>
                <i ng-if="state.reverseColumn== theaditem.attr && !state.filterReverse"
                   class="fa fa-sort-asc"></i>
                <i ng-if="state.reverseColumn== theaditem.attr && state.filterReverse"
                   class="fa fa-sort-desc"></i>
            </th>
            <th>Actions</th>
            <th>Admins</th>
        </tr>
        </thead>
        <!--Body-->
        <tbody ng-repeat="cube in cubeList.cubes | orderObjectBy:state.filterAttr:state.filterReverse ">
        <tr ng-class="{accordion:true}" style="cursor: pointer"  ng-click="cube.showDetail=!cube.showDetail;loadDetail(cube)">
            <td>
                <i ng-show="!cube.showDetail" class="fa fa-chevron-circle-right blue"></i>
                <i ng-show="cube.showDetail" class="fa fa-chevron-circle-down blue"></i>
                {{ cube.name}}
            </td>
            <td>
                <span class="label"
                      ng-class="{'label-success': cube.status=='READY', 'label-default': cube.status=='DISABLED', 'label-warning': cube.status=='DESCBROKEN'}">
                    {{ cube.status}}
                </span>
            </td>
            <td><span tooltip-html-unsafe="<div style='text-align:left'>
                Source Table Size: {{dataSize(cube.input_records_size)}}<br/>
                Expansion Rate: {{(cube.input_records_size>0? cube.size_kb*1024/cube.input_records_size : 0) * 100 | number:2}}%
                </div>">{{dataSize(cube.size_kb*1024)}}</span></td>
            <td><span tooltip-html-unsafe="<div style='text-align:left'>
                Source Table Size: {{dataSize(cube.input_records_size)}}<br/>
                Expansion Rate: {{(cube.input_records_size>0? cube.size_kb*1024/cube.input_records_size : 0) * 100 | number:2}}%
                </div>">{{ cube.input_records_count | number:0}}</span></td>
            <td>{{ (cube.last_build_time | utcToConfigTimeZone) }}</td>
            <td>{{ cube.owner}}</td>
            <td>{{ cube.create_time_utc | utcToConfigTimeZone}}</td>
            <td>
                <div ng-click="$event.stopPropagation();" class="btn-group">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle"
                            data-toggle="dropdown">
                        Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                    </button>
                    <ul ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask,permissions.OPERATION.mask)" class="dropdown-menu" role="menu" style="right:0;left:auto;">
                        <li ng-if="cube.status!='READY' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))">
                            <a ng-click="dropCube(cube)" tooltip="Drop the cube, related jobs and data permanently.">Drop</a></li>
                        <li ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask)">
                            <a ng-click="cubeEdit(cube);">Edit</a></li>
                        <li ng-if="cube.status!='DESCBROKEN'"><a ng-click="startJobSubmit(cube);">Build</a></li>
                        <li ng-if="cube.status!='DESCBROKEN'"><a ng-click="startRefresh(cube)">Refresh</a></li>
                        <li ng-if="cube.status!='DESCBROKEN'"><a ng-click="startMerge(cube)">Merge</a></li>
                        <li ng-if="cube.status!='DESCBROKEN'"><a ng-click="startLookupRefresh(cube);">Lookup Refresh</a></li>
                        <li ng-if="cube.status=='READY' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))"><a ng-click="disable(cube)">Disable</a></li>
                        <li ng-if="cube.status=='DISABLED' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))"><a ng-click="enable(cube)">Enable</a></li>
                        <li ng-if="cube.status=='DISABLED' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))"><a ng-click="startDeleteSegment(cube)">Delete Segment</a></li>
                        <li ng-if="cube.status=='DISABLED' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))"><a ng-click="purge(cube)">Purge</a></li>
                        <li ng-if="cube.status!='DESCBROKEN' && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask))"><a ng-click="cloneCube(cube)">Clone</a></li>
                        <li ng-if="cube.status=='READY' && isAutoMigrateCubeEnabled() && (userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask)) "><a ng-click="migrateCube(cube)">Migrate</a></li>

                    </ul>
                    <span ng-if="!(userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask, permissions.OPERATION.mask))" class="dropdown-menu" role="menu">
                      N/A
                    </span>
                </div>
            </td>
            <td >
                <div ng-click="$event.stopPropagation();" class="btn-group" ng-if="userService.hasRole('ROLE_ADMIN') || hasPermission('cube',cube, permissions.ADMINISTRATION.mask, permissions.MANAGEMENT.mask)">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                        Action <span class="ace-icon fa fa-caret-down icon-on-right"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" style="right:0;left:auto;">
                        <li ng-if="cube.status!='READY'"><a href="cubes/edit/{{cube.name}}/descriptionjson">Edit CubeDesc</a></li>
                        <li><a href="cubes/view/{{cube.name}}/instancejson">View Cube</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <tr ng-show="cube.showDetail">
            <td colspan="10" style="padding: 10px 30px 10px 30px;">
                <div ng-include src="'partials/cubes/cube_detail.html'"></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="row">
    <div class="col-xs-12">
        <kylin-pagination data="cubeList.cubes" load-func="list" action="action"/>
    </div>
</div>
<div ng-if="cubeList.cubes.length" class="pull-left font-color-default" style="font-size: 15px" >
    <strong>Storage: {{getTotalSize(cubeList.cubes)}}</strong>
</div>

<div ng-include="'partials/jobs/job_submit.html'"></div>
<div ng-include="'partials/cubes/streaming_build_tip.html'"></div>
<div ng-include="'partials/jobs/job_refresh.html'"></div>
<div ng-include="'partials/jobs/job_merge.html'"></div>
<div ng-include="'partials/projects/project_create.html'"></div>
<div ng-include="'partials/models/model_detail.html'"></div>
<div ng-include="'partials/cubes/cube_clone.html'"></div>
<div ng-include="'partials/cubes/cube_delete_segment.html'"></div>
<div ng-include="'partials/jobs/lookup_refresh.html'"></div>
</div>
