webapp/app/partials/cubeDesigner/advanced_settings.html

<!--
* 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="CubeAdvanceSettingCtrl">
    <ng-form name="forms.cube_setting_form">
      <div>
        <div class="form-group">
          <h3 style="margin-left:42px;">Aggregation Groups </h3>
          <div style="margin-left:22px;">
            <div class="box-body">
              <div class="col-xs-12">
                Visit <a href="http://kylin.apache.org/blog/2016/02/18/new-aggregation-group" target="_blank">aggregation group</a> for more about aggregation group.
              </div>
            </div>
          </div>
          <table style="margin-left:42px; width:92%"
                 ng-if="cubeMetaFrame.aggregation_groups.length > 0"
                 class="table table-hover list">
            <tr class="row">
              <th class="col-xs-1">ID</th>
              <th class="col-xs-3">
                <span>Aggregation Groups</span>
                <span style="margin-left:42px">
                  <i kylinpopover placement="left" title="Max Dimension Combination" template="dimCapTip.html" class="fa fa-info-circle"></i>
                  Max Dimension Combination:
                  <input onInput="this.value=this.value.replace(/[^0-9]/g, '')" type="text" ng-model="dim_cap" ng-change="changeDimCap(dim_cap)" ng-disabled="state.mode !== 'edit'" style="margin-left:5px; width:20px;">
                </span>
              </th>
              <th></th>
              <th ng-if="state.mode=='edit'" class="col-xs-1"></th>
            </tr>

            <tr ng-repeat="aggregation_group in cubeMetaFrame.aggregation_groups track by $index" ng-init="rowIndex = $index" class="row">
              <td class="col-xs-1">
                <!-- ID -->
                <b>{{($index + 1)}}</b>
              </td>
              <td class="col-xs-11">
                <table class="table">
                  <tr class="row">
                    <td class="col-xs-3" style="min-width:130px;">
                      Includes
                    </td>
                    <td class="col-xs-8">
                      <!-- Dimensions -->

                      <ui-select
                        autofocus="true"
                        close-on-select="false"    ng-disabled="instance.status=='READY'"
                        on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.includes">
                        <ui-select-match placeholder="Select Column...">{{$item.column}}</ui-select-match>
                        <ui-select-choices
                          repeat="rowkey_column.column as rowkey_column in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          {{rowkey_column.column}}
                        </ui-select-choices>
                      </ui-select>
                      <p ng-if="state.mode=='view'">
                        {{aggregation_group.includes}}</p>
                    </td>
                    <td class="col-xs-1">
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Mandatory Dimensions
                    </td>
                    <td class="col-xs-8">
                      <ui-select
                        close-on-select="false"
                        autofocus="true"       ng-disabled="instance.status=='READY'"
                        on-select="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        on-remove="refreshAggregationGroup(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group)"
                        ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="aggregation_group.select_rule.mandatory_dims">
                        <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                        <ui-select-choices
                          repeat="column in aggregation_group.includes | filter:$select.search">
                          {{column}}
                        </ui-select-choices>
                      </ui-select>

                      <p ng-if="state.mode=='view'">
                        {{aggregation_group.select_rule.mandatory_dims}}</p>
                    </td>
                    <td class="col-xs-1">
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Hierarchy Dimensions
                    </td>
                    <td class="col-xs-9">
                      <table class="table">
                        <tr class="row" ng-repeat="hierarchyDims in aggregation_group.select_rule.hierarchy_dims">
                          <td class="col-xs-10">
                            <ui-select
                              close-on-select="false"
                              autofocus="true"      ng-disabled="instance.status=='READY'"
                              on-select="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)"
                              on-remove="refreshAggregationHierarchy(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,hierarchyDims)"
                              ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="hierarchyDims">
                              <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                              <ui-select-choices
                                repeat="column in aggregation_group.includes | filter:$select.search">
                                {{column}}
                              </ui-select-choices>
                            </ui-select>
                            <p ng-if="state.mode=='view'">
                              {{hierarchyDims}}</p>
                          </td>
                          <td class="col-xs-2">
                            <button class="btn btn-sm btn-info"  ng-disabled="instance.status=='READY'"
                                    ng-click="removeHierarchy(aggregation_group,hierarchyDims)"
                                    ng-show="state.mode=='edit'"><i class="fa fa-minus"></i>
                            </button>
                          </td>
                        </tr>
                        <tr class="row">
                          <td class="col-xs-12">
                            <button class="btn btn-sm btn-info"     ng-disabled="instance.status=='READY'"
                                    ng-click="addNewHierarchy(aggregation_group)" ng-show="state.mode=='edit'">New Hierarchy<i class="fa fa-plus"></i>
                            </button>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr class="row">
                    <td class="col-xs-3">
                      Joint Dimensions
                    </td>
                    <td class="col-xs-9">
                      <table class="table">
                        <tr class="row" ng-repeat="jointDims in aggregation_group.select_rule.joint_dims">
                          <td class="col-xs-10">
                            <!-- Dimensions -->
                            <ui-select
                              close-on-select="false"
                              autofocus="true"    ng-disabled="instance.status=='READY'"
                              on-select="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)"
                              on-remove="refreshAggregationJoint(cubeMetaFrame.aggregation_groups, rowIndex, aggregation_group,$index,jointDims)"
                              ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="jointDims">
                              <ui-select-match placeholder="Select Column...">{{$item}}</ui-select-match>
                              <ui-select-choices
                                repeat="column in aggregation_group.includes | filter:$select.search">
                                {{column}}
                              </ui-select-choices>
                            </ui-select>
                            <p ng-if="state.mode=='view'">
                              {{jointDims}}</p>
                          </td>
                          <td class="col-xs-2">
                            <button class="btn btn-sm btn-info"   ng-disabled="instance.status=='READY'"
                                    ng-click="removeJointDims(aggregation_group,jointDims)"
                                    ng-show="state.mode=='edit'"><i class="fa fa-minus"></i>
                            </button>
                          </td>
                        </tr>
                        <tr class="row">
                          <td class="col-xs-12">
                            <button class="btn btn-sm btn-info"      ng-disabled="instance.status=='READY'"
                                    ng-click="addNewJoint(aggregation_group)" ng-show="state.mode=='edit'">New Joint<i class="fa fa-plus"></i>
                            </button>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td ng-if="state.mode=='edit'" class="col-xs-1">
                <button class="btn btn-xs btn-info"   ng-disabled="instance.status=='READY'"
                        ng-click="removeElement(cubeMetaFrame.aggregation_groups, aggregation_group)"><i
                  class="fa fa-minus"></i>
                </button>
              </td>
            </tr>
          </table>
          <button class="btn btn-sm btn-info" style="margin-left:42px" ng-click="addNewAggregationGroup()"  ng-disabled="instance.status=='READY'"
                  ng-show="state.mode=='edit'">New Aggregation Group<i class="fa fa-plus"></i>
          </button>
        </div>
        <div class="form-group large-popover" >
          <h3 style="margin-left:42px">Rowkeys  <i kylinpopover placement="right" title="Rowkey" template="rowkeyTip.html" class="fa fa-info-circle"></i></h3>
          <div style="padding: 0 42px; word-break: normal;">
            <b>Important: </b>Dimension's positioin on HBase rowkey is critical for performance. You can drag and drop to adjust the sequence. In short, put filtering dimension before non-filtering dimension, and  put high cardinality dimension before low cardinality dimension.
          </div>
          <div style="margin-left:42px">
              <div class="box-body">
                <table style="width:92%;position:relative"
                       ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0"
                       class="table table-hover table-bordered list">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th class="col-xs-5">Column</th>
                    <th>Encoding</th>
                    <th>Length</th>
                    <th>Shard By</th>
                  </tr>
                  </thead>

                  <tbody ng-if="state.mode!=='edit'" ng-model="convertedRowkeys">
                <!--<tbody ng-if="state.mode!='edit'" ng-model="convertedRowkeys">-->

                <tr ng-repeat="rowkey_column in convertedRowkeys track by $index">

                  <td>
                    <!-- ID -->
                    <span class="ng-binding">{{($index + 1)}}</span>
                  </td>
                  <td>
                    <!--Column Name -->
                    <span>{{rowkey_column.column}}</span>
                  </td>

                  <td>
                    <span>{{rowkey_column.encoding}}</span>

                  </td>
                  <td>
                    <span>{{rowkey_column.valueLength}}</span>
                  </td>

                  <td>
                   <span>{{rowkey_column.isShardBy}}</span>
                  </td>
                </tr>
                </tbody>


                  <tbody ng-show="state.mode=='edit'" ui-sortable="sortableOptions" ng-model="convertedRowkeys">
                  <!--<tbody ng-if="state.mode!='edit'" ng-model="convertedRowkeys">-->

                  <tr ng-repeat="rowkey_column in convertedRowkeys track by $index"
                      class="sort-item">

                    <td>
                      <!-- ID -->
                      <span class="ng-binding badge">{{($index + 1)}}</span>
                    </td>
                    <td>
                      <!--Column Name -->
                      <input type="text" class="form-control" placeholder="Column Name.."
                             ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)"  ng-disabled="true"
                             tooltip="rowkey column name.." tooltip-trigger="focus"
                             ng-model="rowkey_column.column" class="form-control">
                    </td>

                    <td>
                      <select  style="width:180px;"     ng-disabled="instance.status=='READY'"
                              chosen ng-model="rowkey_column.encoding"
                              ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);"
                              ng-options="dt.value as dt.name for dt in getEncodings(rowkey_column.column)">
                        <option value=""></option>
                      </select>
                    </td>
                    <td>
                      <!--Column Length -->
                      <input type="text" class="form-control" placeholder="Column Length.."
                             tooltip="rowkey column length.." tooltip-trigger="focus"
                             ng-disabled="rowkey_column.encoding.indexOf('dict')>=0||rowkey_column.encoding.indexOf('date')>=0||rowkey_column.encoding.indexOf('time')>=0||instance.status=='READY'"
                             ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);"
                             ng-model="rowkey_column.valueLength" class="form-control">

                      <small class="help-block red" ng-show="state.mode=='edit' && rowkey_column.encoding.indexOf('integer')>=0 && (rowkey_column.valueLength>8 || rowkey_column.valueLength<1)">integer encoding column length should between 1 and 8</small>
                    </td>

                    <td>
                      <select  style="width:180px;"
                              chosen ng-model="rowkey_column.isShardBy"
                              tooltip="false by default"     ng-disabled="instance.status=='READY'"
                              data-placeholder="false by default"
                              ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column,true)"
                              ng-options="dt as dt for dt in cubeConfig.rowKeyShardOptions">
                        <option value=""></option>
                      </select>
                      <small class="help-block red" ng-show="state.mode=='edit' && rule.shardColumnAvailable==false && rowkey_column.isShardBy == true">at most one 'shard by' column is allowed.</small>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
          </div>
        </div>
        <!--Edit Mandatory Cuboids-->
        <div class="form-group large-popover" ng-if="state.mode=='edit' || (cubeMetaFrame.mandatory_dimension_set_list.length > 0 && state.mode!=='edit')">
          <h3 style="margin-left:42px">Mandatory Cuboids</h3>
          <div style="margin-left:42px;">
            <div class="box-body">
              <!-- view mode-->
              <table ng-if="cubeMetaFrame.mandatory_dimension_set_list.length > 0 && state.mode!=='edit'" class="table table-hover table-bordered list" style="table-layout: fixed;width:92%;">
                <thead>
                  <tr>
                    <th>Cuboids</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="dimensionSet in cubeMetaFrame.mandatory_dimension_set_list">
                    <td>
                      <p>{{dimensionSet}}</p>
                    </td>
                  </tr>
                </tbody>
              </table>
              <!-- edit mode-->
              <table ng-if="state.mode=='edit'" class="table table-hover table-bordered list" style="table-layout: fixed;width:92%;">
                <thead>
                  <tr>
                    <th>Cuboids</th>
                    <th style="width:5%"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="dimensionSet in cubeMetaFrame.mandatory_dimension_set_list">
                    <td>
                      <ui-select multiple ng-model="dimensionSet" theme="bootstrap" sortable="true" close-on-select="false" class="form-control">
                        <ui-select-match placeholder="Select Dimension...">{{$item.column}}</ui-select-match>
                        <ui-select-choices repeat="dimension.column as dimension in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          <div ng-bind-html="dimension.column | highlight: $select.search"></div>
                        </ui-select-choices>
                      </ui-select>
                    </td>
                    <td>
                      <button class="btn btn-xs btn-info" ng-click="removeDimensionSet($index)"><i class="fa fa-minus"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <ui-select multiple ng-model="mandatoryDimensionSet.select" theme="bootstrap" sortable="true" close-on-select="false" class="form-control">
                        <ui-select-match placeholder="Select Dimension...">{{$item.column}}</ui-select-match>
                        <ui-select-choices repeat="dimension.column as dimension in cubeMetaFrame.rowkey.rowkey_columns | filter:$select.search">
                          <div ng-bind-html="dimension.column | highlight: $select.search"></div>
                        </ui-select-choices>
                      </ui-select>
                    </td>
                    <td>
                      <button class="btn btn-xs btn-info" ng-click="addDimensionSet()"><i class="fa fa-plus"></i>
                      </button>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2">
                      <label>Import cuboids from file:</label>
                      <input type="file" name="cuboids" id="cuboids" style="display: inline;"/>
                      <button class="btn btn-xs btn-info" ng-click="uploadMandatoryDimensionSetList()">Upload</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--Cube Engine-->
        <div class="form-group large-popover" style="margin-bottom:30px;">
          <h3 style="margin-left:42px;margin-bottom:30px;">Cube Engine  <i kylinpopover placement="right" title="Cube Engine" template="CubeEngineTip.html" class="fa fa-info-circle"></i></h3>
          <div class="row" style="margin-left:42px">
            <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Engine Type :</b></label>
            <div class="col-xs-12 col-sm-6">
              <select style="width: 100%" chosen
                      ng-model="cubeMetaFrame.engine_type"
                      ng-if="state.mode=='edit'"
                      ng-options="et.value as et.name for et in cubeConfig.engineType">
                <option value="">--Select Engine Type--</option>
              </select>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==2">MapReduce</span>
              <span ng-if="state.mode=='view'&&cubeMetaFrame.engine_type==4">Spark</span>
            </div>
          </div>
        </div>
        <div class="form-group large-popover">
          <h3 style="margin-left:42px">Advanced Dictionaries  <i kylinpopover placement="right" title="Advanced Dictionaries" template="AdvancedDictionariesTip.html" class="fa fa-info-circle"></i></h3>
          <div style="margin-left:42px">
            <div class="box-body">
              <br/>
              <table class="table table-striped table-hover">
                <thead>
                <tr>
                  <th>Column</th>
                  <th>Builder Class</th>
                  <th>Reuse</th>
                  <th ng-if="state.mode=='edit'">Actions</th>
                </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="dictionaries in cubeMetaFrame.dictionaries | filter: state.measureFilter track by $index">
                    <td>
                      <!--Column -->
                      <span>{{dictionaries.column}}</span>
                    </td>
                    <td>
                      <!--Builder-->
                      <span>{{dictionaries.builder}}</span>
                    </td>
                    <td>
                      <!--Reuse-->
                      <span>{{dictionaries.reuse}}</span>
                    </td>
                    <td ng-if="state.mode=='edit'">
                      <!--Edit Button -->
                      <button class="btn btn-xs btn-info" ng-click="addNewDictionaries(dictionaries, $index)" ng-disabled="instance.status=='READY'">
                        <i class="fa fa-pencil"></i>
                      </button>
                      <!--Remove Button -->
                      <button class="btn btn-xs  btn-danger" ng-click="removeElement(cubeMetaFrame.dictionaries, dictionaries)" ng-disabled="instance.status=='READY'">
                        <i class="fa fa-trash-o"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <!--Add Dictionaries Button-->
        <div class="form-group" style="margin-left:42px;">
          <button class="btn btn-sm btn-info" ng-click="addNewDictionaries()" ng-show="state.mode=='edit' && !addNew" ng-disabled="instance.status=='READY'">
            <i class="fa fa-plus"></i> Dictionaries
          </button>
       </div>
       <!--Edit Dictionary-->
       <ng-form name="edit_mes_form" style="margin-left:42px;">
         <div class="box box-solid"  ng-if="addNew" style="margin-left:42px;">
           <div class="box-header">
             <h4 class="box-title text-info">Edit Dictionaries</h4>
           </div>
           <div class="box-body">
             <div class="row">
               <div class="col-xs-8">
                 <!--Column-->
                 <div class="form-group middle-popover">
                   <div class="row">
                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Column</b></label>
                     <div class="col-xs-12 col-sm-6">
                       <select class="form-control" chosen
                               ng-model="newDictionaries.column"
                               ng-change="measureReturnTypeUpdate();"
                               ng-options="column as column for column in getFactColumns()" required>
                         <option value="">-- Select a Column --</option>
                       </select>
                     </div>
                   </div>
                 </div>
                 <div class="form-group">
                   <div class="row" style="margin-left:5px;">
                     <label class="radio-inline ng-binding ng-scope">
                       <input type="radio" name="reuse" ng-value=false ng-model="isReuse"  ng-change="change()"/><b>Builder Class</b>
                     </label>
                     <label class="radio-inline ng-binding ng-scope">
                       <input type="radio" name="reuse"  ng-value=true ng-model="isReuse" ng-change="change()"/><b>Reuse</b>
                     </label>
                   </div>
                 </div>
                 <!--Builder-->
                 <div class="form-group" ng-if="!isReuse" >
                   <div class="row">
                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Builder Class</b></label>
                     <div class="col-xs-12 col-sm-6">
                       <select class="form-control" chosen
                               ng-model="newDictionaries.builder"
                               ng-options="item.value as item.name for item in cubeConfig.buildDictionaries"
                               required>
                         <option value="">-- Select a builder class--</option>
                       </select>
                     </div>
                   </div>
                 </div>
                 <!--Reuse-->
                 <div class="form-group middle-popover" ng-if="isReuse" >
                   <div class="row">
                     <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Reuse</b></label>
                     <div class="col-xs-12 col-sm-6">
                       <select class="form-control" chosen
                               ng-model="newDictionaries.reuse"
                               ng-change="measureReturnTypeUpdate();"
                               ng-options="column as column for column in getFactColumns()" required>
                         <option value="">-- Select a Column --</option>
                       </select>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="box-footer">
             <button class="btn btn-sm btn-info" ng-disabled="edit_mes_form.$invalid"
                     ng-click="saveNewDictionaries()" ng-show="state.mode=='edit'">OK</button>
             <button class="btn btn-link" ng-click="clearNewDictionaries()">Cancel</button>
           </div>
         </div>
         <!-- Advanced Lookup Table-->
         <div class="form-group large-popover" style="margin-bottom:30px;">
           <h3 style="margin-left:42px;margin-bottom:30px;">Advanced Snapshot Table  <i kylinpopover placement="right" title="Advanced Snapshot Table" template="AdvanceSnapshotTableTip.html" class="fa fa-info-circle"></i></h3>
           <div style="margin-left:42px">
             <div class="box-body">
               <br/>
               <table class="table table-striped table-hover">
                 <thead>
                 <tr>
                   <th>Snapshot Table</th>
                   <th>Type</th>
                   <th>Global</th>
                   <th ng-if="state.mode=='edit'">Actions</th>
                 </tr>
                 </thead>
                 <tbody>
                   <tr ng-repeat="snapshotTable in cubeMetaFrame.snapshot_table_desc_list track by $index">
                     <td>
                       <p>{{snapshotTable.table_name}}</p>
                     </td>
                     <td>
                       <p>{{snapshotTable.storage_type}}</p>
                     </td>
                     <td>
                       <input type="checkbox" ng-model="snapshotTable.global" disabled="true">
                     </td>
                     <td ng-if="state.mode=='edit'">
                       <button class="btn btn-xs btn-info" ng-click="addNewSnapshot(snapshotTable, $index)" ng-disabled="instance.status=='READY'">
                         <i class="fa fa-pencil"></i>
                       </button>
                       <button class="btn btn-xs  btn-danger" ng-click="removeSnapshotTable($index)" ng-disabled="instance.status=='READY'">
                         <i class="fa fa-trash-o"></i>
                       </button>
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
           </div>
           <!-- Add  Snapshot-->
           <div class="form-group" style="margin-left:42px;">
             <button class="btn btn-sm btn-info" ng-click="addNewSnapshot()" ng-show="state.mode=='edit' && !addNewSanpshot" ng-disabled="instance.status=='READY'">
               <i class="fa fa-plus"></i> Snapshot Table
             </button>
           </div>
           <!--Edit Snapshot-->
           <div class="box box-solid"  ng-if="addNewSanpshot" style="margin-left:42px;">
             <div class="box-header">
               <h4 class="box-title text-info">Edit Snapshot</h4>
             </div>
             <div class="box-body">
               <div class="row">
                 <div class="col-xs-8">
                   <!--Column-->
                   <div class="form-group middle-popover">
                     <div class="row">
                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Snapshot Table</b></label>
                       <div class="col-xs-12 col-sm-6">
                         <select style="width:95%" chosen ng-model="newSnapshot.select.table_name"
                              ng-options="tableName as tableName for tableName in cubeLookups">
                         <option value=""></option>
                       </select>
                       </div>
                     </div>
                   </div>
                   <div class="form-group">
                     <div class="row">
                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Type</b></label>
                       <div class="col-xs-12 col-sm-6">
                         <select style="width:95%" chosen ng-model="newSnapshot.select.storage_type"
                              ng-change="changeSnapshotStorage(newSnapshot.select)"
                              ng-options="storageType.value as storageType.name for storageType in cubeConfig.snapshotStorageTypes">
                           <option value=""></option>
                         </select>
                       </div>
                     </div>
                   </div>
                   <!--Builder-->
                   <div class="form-group" ng-if="!isReuse" >
                     <div class="row">
                       <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Global</b></label>
                       <div class="col-xs-12 col-sm-6">
                         <input type="checkbox" ng-model="newSnapshot.select.global" ng-disabled="(newSnapshot.select.storage_type == 'hbase')">
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div class="box-footer">
               <button class="btn btn-sm btn-info"
                     ng-click="addSnapshot(newSnapshot.select)" ng-show="state.mode=='edit'">OK</button>
               <button class="btn btn-link" ng-click="cancelEditSnapshot()">Cancel</button>
             </div>
           </div>
         </div>
         <!--Edit ColumnFamily-->
         <div class="form-group large-popover" >
           <h3 style="margin-left:42px">Advanced ColumnFamily  <i kylinpopover placement="right" title="Advanced ColumnFamily" template="AdvancedColumnFamilyTip.html" class="fa fa-info-circle"></i></h3>
           <div style="margin-left:42px">
             <div class="box-body">
               <!-- VIEW MODE -->
               <div class="row"  ng-if="state.mode=='view' || instance.segments.length > 0 && cubeMetaFrame.hbase_mapping.column_family.length > 0">
                 <table class="table table-striped table-hover">
                   <thead>
                   <tr>
                     <th class="col-xs-1">CF</th>
                     <th class="col-xs-11">Measures</th>
                   </tr>
                   </thead>
                   <tbody class="cube-dimension">
                   <tr ng-repeat="colFamily in cubeMetaFrame.hbase_mapping.column_family | filter:dimState.filter track by $index">
                     <!--ID -->
                     <td class="col-xs-1">
                       <b>{{colFamily.name}}</b>
                     </td>
                     <!--Name -->
                     <td class="col-xs-11">
                       <span>{{getCFDisplayString(colFamily)}}</span>
                     </td>
                   </tr>
                   </tbody>
                 </table>
               </div>

               <!-- EDIT MODE -->
               <div  ng-if="state.mode=='edit' && instance.segments.length == 0" class="form-group " style="width: 100%">
                 <table ng-if="cubeMetaFrame.hbase_mapping.column_family.length > 0"
                        class="table table-hover">

                   <tr class="row">
                     <th class="col-xs-1">CF</th>
                     <th class="col-xs-10">Measures</th>
                     <th class="col-xs-1">Actions</th>
                   </tr>

                   <tr ng-repeat="colFamily in cubeMetaFrame.hbase_mapping.column_family" ng-init="rowIndex = $index" class="row">
                     <td class="col-xs-1">
                       <b>{{colFamily.name}}</b>
                     </td>

                     <td class="col-xs-10">
                       <ui-select
                         style="width: 100%"
                         close-on-select="false"
                         on-select="refreshColumnFamily(cubeMetaFrame.hbase_mapping.column_family, rowIndex, colFamily)"
                         on-remove="refreshColumnFamily(cubeMetaFrame.hbase_mapping.column_family, rowIndex, colFamily)"
                         ng-model="colFamily.columns[0].measure_refs"
                         multiple>
                         <ui-select-match placeholder="Select Measure...">{{$item}}</ui-select-match>
                         <ui-select-choices repeat="measure in getAllMeasureNames() | filter:$select.search |assignedMeasureNames:getAssignedMeasureNames()">
                           {{measure}}
                         </ui-select-choices>
                       </ui-select>
                     </td>

                     <td class="col-xs-1">
                       <!--Remove Button -->
                       <button ng-if="colFamily.columns[0].measure_refs.length == 0" class="btn btn-xs btn-info" ng-click="removeElement(cubeMetaFrame.hbase_mapping.column_family, colFamily)">
                         <i class="fa fa-minus"></i>
                       </button>
                     </td>

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

               <div class="form-group" >
                 <button class="btn btn-sm btn-info" ng-click="addColumnFamily()" ng-show="state.mode=='edit' && instance.segments.length == 0">
                   <i class="fa fa-plus"></i> ColumnFamily
                 </button>
               </div>

             </div>
           </div>
         </div>
       </ng-form>
     </div>
   </ng-form>
 </div>

<script type="text/ng-template" id="dimCapTip.html">
  <div>
    <ol style="font-size:12px;">
      <li>Dimension limitations mean max dimensions may be contained within a group of SQL queries.</li>
      <li>In a set of queries, if each query required the number of dimensions is not more than five, you can set 5 here.</li>
    </ol>
  </div>
</script>
<script type="text/ng-template" id="rowkeyTip.html">
  <div>
    <h4>Shard By this column?</h4>
    <p>
      If specified as "true", cube data will be sharded according to its value.
    </p>

    <h4>RowKey Encoding</h4>
    <ol>
      <li>
        "dict" encoding will try to build a dictionaries for the dimension
      </li>
      <li>
        "fixed_length" encoding will encode the dimension vlaues by fixed length bytes with padding
      </li>
      <li>
        "int" encoding uses variable integer to encode integers
      </li>
    </ol>
  </div>
</script>
<script type="text/ng-template" id="AdvancedDictionariesTip.html">
  <div>
    <h4>Special settings for dictionaries.</h4>
    <ol>
      <li>
        "Global Dictionary" is the default dict for precise count distinct measure, which support rollup among all segments.
      </li>
      <li>
        "Segment Dictionary" is the special dict for precise count distinct measure, which is based on one segment and could not
        support rollup among segments.
        Specifically, if your cube isn't partitioned or you can ensure all your SQLs will group by your partition_column,
        you could use "Segment Dictionary" instead of "Global Dictionary".
      </li>
    </ol>
  </div>
</script>

<script type="text/ng-template" id="AdvancedColumnFamilyTip.html">
  <div>
    <h4>If there are more than one ultrahigh cardinality precise count distinct measures,
        you could assign these measures to more column family.</h4>
  </div>
</script>
<script type="text/ng-template" id="CubeEngineTip.html" >
  <div>
    <h4>
       Select cube engine for building cube.
    </h4>
  </div>
</script>

<script type="text/ng-template" id="AdvanceSnapshotTableTip.html">
  <div>
    <h4>Advance snapshot design for global lookup table and provide different storage type.</h4>
  </div>
</script>