You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by zh...@apache.org on 2016/05/19 03:12:53 UTC
kylin git commit: KYLIN-1708 GUI friendly tips for terms in kylin
Repository: kylin
Updated Branches:
refs/heads/master e7779f7e2 -> 92576ccae
KYLIN-1708 GUI friendly tips for terms in kylin
Project: http://git-wip-us.apache.org/repos/asf/kylin/repo
Commit: http://git-wip-us.apache.org/repos/asf/kylin/commit/92576cca
Tree: http://git-wip-us.apache.org/repos/asf/kylin/tree/92576cca
Diff: http://git-wip-us.apache.org/repos/asf/kylin/diff/92576cca
Branch: refs/heads/master
Commit: 92576ccae247bd541dd57cb70d1c99be48622be8
Parents: e7779f7
Author: Jason <ji...@163.com>
Authored: Thu May 19 11:12:02 2016 +0800
Committer: Jason <ji...@163.com>
Committed: Thu May 19 11:12:27 2016 +0800
----------------------------------------------------------------------
webapp/app/js/controllers/cubeEdit.js | 7 +
webapp/app/js/controllers/modelEdit.js | 12 +
webapp/app/js/controllers/modelSchema.js | 21 +-
webapp/app/js/directives/directives.js | 23 ++
webapp/app/js/model/cubeConfig.js | 3 +-
webapp/app/less/app.less | 33 +++
.../cubeDesigner/advanced_settings.html | 198 +++++++++-------
webapp/app/partials/cubeDesigner/info.html | 52 ++--
webapp/app/partials/cubeDesigner/measures.html | 40 ++--
.../partials/cubeDesigner/refresh_settings.html | 28 ++-
.../modelDesigner/conditions_settings.html | 237 +++++++++----------
.../app/partials/modelDesigner/model_info.html | 31 +--
12 files changed, 396 insertions(+), 289 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/js/controllers/cubeEdit.js
----------------------------------------------------------------------
diff --git a/webapp/app/js/controllers/cubeEdit.js b/webapp/app/js/controllers/cubeEdit.js
index b1aa08a..b6fc875 100755
--- a/webapp/app/js/controllers/cubeEdit.js
+++ b/webapp/app/js/controllers/cubeEdit.js
@@ -666,6 +666,13 @@ KylinApp.controller('CubeEditCtrl', function ($scope, $q, $routeParams, $locatio
}
});
+ $scope.removeNotificationEvents = function(){
+ if($scope.cubeMetaFrame.status_need_notify.indexOf('ERROR') == -1){
+ $scope.cubeMetaFrame.status_need_notify.unshift('ERROR');
+ }
+ }
+
+
$scope.$on('DimensionsEdited', function (event) {
if ($scope.cubeMetaFrame) {
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/js/controllers/modelEdit.js
----------------------------------------------------------------------
diff --git a/webapp/app/js/controllers/modelEdit.js b/webapp/app/js/controllers/modelEdit.js
index 903b584..a916aad 100644
--- a/webapp/app/js/controllers/modelEdit.js
+++ b/webapp/app/js/controllers/modelEdit.js
@@ -77,6 +77,9 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati
project:$scope.projectModel.selectedProject
};
+ $scope.partitionColumn ={
+ "hasSeparateTimeColumn" : false
+ }
// ~ init
if ($scope.isEdit = !!$routeParams.modelName) {
@@ -84,6 +87,9 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati
ModelDescService.query({model_name: modelName}, function (model) {
if (model) {
modelsManager.selectedModel = model;
+ if($scope.modelsManager.selectedModel.partition_desc.partition_time_column){
+ $scope.partitionColumn.hasSeparateTimeColumn = true;
+ }
modelsManager.selectedModel.project = ProjectModel.getProjectByCubeModel(modelName);
if(!ProjectModel.getSelectedProject()){
@@ -101,6 +107,12 @@ KylinApp.controller('ModelEditCtrl', function ($scope, $q, $routeParams, $locati
}
+ $scope.toggleHasSeparateColumn = function(){
+ if($scope.partitionColumn.hasSeparateTimeColumn == false){
+ $scope.modelsManager.selectedModel.partition_desc.partition_time_column = null;
+ }
+ }
+
$scope.prepareModel = function () {
// generate column family
$scope.state.project = modelsManager.selectedModel.project;
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/js/controllers/modelSchema.js
----------------------------------------------------------------------
diff --git a/webapp/app/js/controllers/modelSchema.js b/webapp/app/js/controllers/modelSchema.js
index 7885758..e309873 100644
--- a/webapp/app/js/controllers/modelSchema.js
+++ b/webapp/app/js/controllers/modelSchema.js
@@ -28,6 +28,22 @@ KylinApp.controller('ModelSchemaCtrl', function ($scope, QueryService, UserServi
$scope.forms = {};
+ // ~ init
+ if (!$scope.state) {
+ $scope.state = {mode: "view"};
+ }
+
+ if(!$scope.partitionColumn){
+ $scope.partitionColumn ={
+ "hasSeparateTimeColumn" : false
+ }
+ }
+
+ if($scope.state.mode !== "edit" && $scope.modelsManager.selectedModel.partition_desc.partition_time_column){
+ $scope.partitionColumn.hasSeparateTimeColumn = true;
+ }
+
+
$scope.wizardSteps = [
{title: 'Model Info', src: 'partials/modelDesigner/model_info.html', isComplete: false, form: 'model_info_form'},
@@ -54,11 +70,6 @@ KylinApp.controller('ModelSchemaCtrl', function ($scope, QueryService, UserServi
$scope.curStep = $scope.wizardSteps[0];
-
- // ~ init
- if (!$scope.state) {
- $scope.state = {mode: "view"};
- }
//init modelsManager
if ($scope.state.mode == "edit") {
var defer = $q.defer();
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/js/directives/directives.js
----------------------------------------------------------------------
diff --git a/webapp/app/js/directives/directives.js b/webapp/app/js/directives/directives.js
index a3b7bf2..ae90c82 100644
--- a/webapp/app/js/directives/directives.js
+++ b/webapp/app/js/directives/directives.js
@@ -332,4 +332,27 @@ KylinApp.directive('kylinPagination', function ($parse, $q) {
};
}
};
+}).directive('kylinpopover', function ($compile,$templateCache) {
+ return {
+ restrict: "A",
+ link: function (scope, element, attrs) {
+ var popOverContent;
+ var dOptions = {
+ placement : 'right'
+ }
+ popOverContent = $templateCache.get(attrs.template);
+
+ var placement = attrs.placement? attrs.placement : dOptions.placement;
+ var title = attrs.title;
+
+ var options = {
+ content: popOverContent,
+ placement: placement,
+ trigger: "hover",
+ title: title,
+ html: true
+ };
+ $(element).popover(options);
+ }
+ };
});
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/js/model/cubeConfig.js
----------------------------------------------------------------------
diff --git a/webapp/app/js/model/cubeConfig.js b/webapp/app/js/model/cubeConfig.js
index 3f97254..784b081 100644
--- a/webapp/app/js/model/cubeConfig.js
+++ b/webapp/app/js/model/cubeConfig.js
@@ -88,7 +88,8 @@ KylinApp.constant('cubeConfig', {
],
partitionDateFormatOpt:[
'yyyy-MM-dd',
- 'yyyyMMdd'
+ 'yyyyMMdd',
+ 'yyyy-MM-dd HH:mm:ss'
],
partitionTimeFormatOpt:[
'HH:mm:ss',
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/less/app.less
----------------------------------------------------------------------
diff --git a/webapp/app/less/app.less b/webapp/app/less/app.less
index 238e72e..8380800 100644
--- a/webapp/app/less/app.less
+++ b/webapp/app/less/app.less
@@ -792,3 +792,36 @@ input:-moz-placeholder {
.panel-group .panel{
overflow: auto !important;
}
+
+.middle-popover .popover{
+ width: 360px;
+ max-width: 360px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.428571429;
+ color:#808080;
+ background-color: #ffffff;
+}
+
+.middle-popover .popover-content, .large-popover .popover-content{
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 18px;
+ display: inline-flex;
+ display: -webkit-inline-flex;
+ word-break: normal;
+}
+
+.middle-popover .popover-content ol, .large-popover .popover-content ol{
+ -webkit-padding-start: 20px;
+ padding-start: 20px;
+}
+.large-popover .popover{
+ width: 600px;
+ max-width: 600px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color:#808080;
+ line-height: 1.428571429;
+ background-color: #ffffff;
+}
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/cubeDesigner/advanced_settings.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/cubeDesigner/advanced_settings.html b/webapp/app/partials/cubeDesigner/advanced_settings.html
index d59ad0c..0e1f972 100755
--- a/webapp/app/partials/cubeDesigner/advanced_settings.html
+++ b/webapp/app/partials/cubeDesigner/advanced_settings.html
@@ -21,9 +21,16 @@
<ng-form name="forms.cube_setting_form">
<div>
-
<div class="form-group">
- <h4 style="margin-left:42px">Aggregation Groups</h4>
+ <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">
@@ -200,85 +207,97 @@
</div>
- <div class="form-group">
- <h4 style="margin-left:42px">Rowkeys</h4>
- <table style="margin-left:42px; width:92%"
- ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0"
- class="table table-hover table-bordered list"
- >
- <thead>
- <tr>
- <th>ID</th>
- <th style="width:200px;">Column</th>
- <th>Encoding</th>
- <th>Length</th>
- <th>Shard By</th>
- <th ng-if="state.mode=='edit'"></th>
- </tr>
- </thead>
+ <div class="form-group large-popover">
+ <!--<h4 style="margin-left:42px">-->
+ <!--Rowkeys <i class="fa fa-info-circle" style="white-space:pre-wrap" popover-trigger="mouseenter" popover=" 'dict' encoding will try to build a dictionary for the dimension. 'fixed_length' encoding will encode the dimension vlaues by fixed length bytes with padding. 'int' encoding uses variable integer to encode integers"></i>-->
+ <!--</h4>-->
+ <h3 style="margin-left:42px">Rowkeys <i kylinpopover placement="right" title="Rowkey" template="rowkeyTip.html" class="fa fa-info-circle"></i></h3>
+
+ <div style="margin-left:42px">
+ <div class="box-body">
+ <br/>
+
+
+ <table style="margin-left:width:92%"
+ ng-if="cubeMetaFrame.rowkey.rowkey_columns.length > 0"
+ class="table table-hover table-bordered list">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th style="width:200px;">Column</th>
+ <th>Encoding</th>
+ <th>Length</th>
+ <th>Shard By</th>
+ <th ng-if="state.mode=='edit'"></th>
+ </tr>
+ </thead>
- <tbody ui-sortable="{update:resortRowkey()}" ng-model="convertedRowkeys">
+ <tbody ui-sortable="{update:resortRowkey()}" ng-model="convertedRowkeys">
- <tr ng-repeat="rowkey_column in convertedRowkeys track by $index"
- ng-class="state.mode=='edit'?'sort-item':''">
+ <tr ng-repeat="rowkey_column in convertedRowkeys track by $index"
+ ng-class="state.mode=='edit'?'sort-item':''">
- <td>
- <!-- ID -->
- <span class="ng-binding" ng-class="state.mode=='edit'?'badge':''">{{($index + 1)}}</span>
- </td>
- <td>
- <!--Column Name -->
- <input type="text" class="form-control" placeholder="Column Name.." ng-if="state.mode=='edit'"
- ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)"
- tooltip="rowkey column name.." tooltip-trigger="focus"
- ng-model="rowkey_column.column" class="form-control">
-
- <span ng-if="state.mode=='view'">{{rowkey_column.column}}</span>
- </td>
- <td>
- <select ng-if="state.mode=='edit'" style="width:180px;"
- chosen ng-model="rowkey_column.encoding"
- ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);"
- ng-options="dt as dt for dt in store.supportedEncoding">
- <option value=""></option>
- </select>
- <span ng-if="state.mode=='view'">{{rowkey_column.encoding}}</span>
+ <td>
+ <!-- ID -->
+ <span class="ng-binding" ng-class="state.mode=='edit'?'badge':''">{{($index + 1)}}</span>
+ </td>
+ <td>
+ <!--Column Name -->
+ <input type="text" class="form-control" placeholder="Column Name.." ng-if="state.mode=='edit'"
+ ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column)"
+ tooltip="rowkey column name.." tooltip-trigger="focus"
+ ng-model="rowkey_column.column" class="form-control">
+
+ <span ng-if="state.mode=='view'">{{rowkey_column.column}}</span>
+ </td>
+ <td>
+ <select ng-if="state.mode=='edit'" style="width:180px;"
+ chosen ng-model="rowkey_column.encoding"
+ ng-change="refreshRowKey(convertedRowkeys,$index,rowkey_column);"
+ ng-options="dt as dt for dt in store.supportedEncoding">
+ <option value=""></option>
+ </select>
+ <span ng-if="state.mode=='view'">{{rowkey_column.encoding}}</span>
- </td>
- <td>
- <!--Column Length -->
- <input type="text" class="form-control" placeholder="Column Length.." ng-if="state.mode=='edit'"
- tooltip="rowkey column length.." tooltip-trigger="focus"
- ng-disabled="rowkey_column.encoding=='dict'"
- 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=='int' && (rowkey_column.valueLength>8 || rowkey_column.valueLength<1)">int encoding column length should between 1 and 8</small>
- <span ng-if="state.mode=='view'">{{rowkey_column.valueLength}}</span>
- </td>
+ </td>
+ <td>
+ <!--Column Length -->
+ <input type="text" class="form-control" placeholder="Column Length.." ng-if="state.mode=='edit'"
+ tooltip="rowkey column length.." tooltip-trigger="focus"
+ ng-disabled="rowkey_column.encoding=='dict'"
+ 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=='int' && (rowkey_column.valueLength>8 || rowkey_column.valueLength<1)">int encoding column length should between 1 and 8</small>
+ <span ng-if="state.mode=='view'">{{rowkey_column.valueLength}}</span>
+ </td>
- <td>
- <select ng-if="state.mode=='edit'" style="width:180px;"
- chosen ng-model="rowkey_column.isShardBy"
- tooltip="false by default"
- 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>
- <span ng-if="state.mode=='view'">{{rowkey_column.isShardBy}}</span>
- </td>
+ <td>
+ <select ng-if="state.mode=='edit'" style="width:180px;"
+ chosen ng-model="rowkey_column.isShardBy"
+ tooltip="false by default"
+ 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>
+ <span ng-if="state.mode=='view'">{{rowkey_column.isShardBy}}</span>
+ </td>
+
+ <td ng-if="state.mode=='edit'">
+ <button class="btn btn-xs btn-info"
+ ng-click="removeRowkey(convertedRowkeys, $index,rowkey_column)"><i
+ class="fa fa-minus"></i>
+ </button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
- <td ng-if="state.mode=='edit'">
- <button class="btn btn-xs btn-info"
- ng-click="removeRowkey(convertedRowkeys, $index,rowkey_column)"><i
- class="fa fa-minus"></i>
- </button>
- </td>
- </tr>
- </tbody>
- </table>
+
+ </div>
+ </div>
<button class="btn btn-sm btn-info" style="margin-left:42px"
ng-click="addNewRowkeyColumn()" ng-show="state.mode=='edit'">New Rowkey Column<i class="fa fa-plus"></i>
@@ -287,13 +306,28 @@
</div>
- <div class="box box-solid" 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>
</ng-form>
</div>
+
+<script type="text/ng-template" id="rowkeyTip.html">\u2028\u2028
+ <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 dictionary 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>
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/cubeDesigner/info.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/cubeDesigner/info.html b/webapp/app/partials/cubeDesigner/info.html
index ec9fc49..d2bc235 100644
--- a/webapp/app/partials/cubeDesigner/info.html
+++ b/webapp/app/partials/cubeDesigner/info.html
@@ -17,12 +17,12 @@
-->
<div class="row">
- <div class="col-xs-8">
+ <div class="col-xs-12">
<ng-form name="forms.cube_info_form" novalidate>
<!--Project-->
<div class="form-group" ng-class="{'required':state.mode=='edit'}">
<div class="row">
- <label class="col-xs-12 col-sm-3 control-label no-padding-right">
+ <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
<b>Model Name</b>
</label>
<div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.model_name.$invalid && (forms.cube_info_form.model_name.$dirty||forms.cube_info_form.model_name.$submitted)}">
@@ -49,10 +49,10 @@
</div>
<!--Cube Name-->
- <div class="form-group" ng-class="{'required':state.mode=='edit'}">
+ <div class="form-group middle-popover" ng-class="{'required':state.mode=='edit'}">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
- <b>Cube Name</b>
+ <b>Cube Name</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Cube Name" template="cubeNameTip.html"></i>
</label>
<div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.cube_info_form.cube_name.$invalid && (forms.cube_info_form.cube_name.$dirty||forms.cube_info_form.cube_name.$submitted)}">
<input ng-if="state.mode=='edit'" ng-disabled="{{isEdit}}" name="cube_name" type="text" class="form-control"
@@ -71,7 +71,7 @@
<div class="form-group">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
- <b>Notification List</b>
+ <b>Notification Email List</b>
</label>
<div class="col-xs-12 col-sm-6">
<input type="text" class="form-control" placeholder="Comma Separated"
@@ -82,15 +82,16 @@
</div>
<div class="form-group">
- <div class="row">
+ <div class="row middle-popover">
<label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
- <b>Notification Status</b>
+ <b>Notification Events</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Notification Events" template="notificationEventsTip.html"></i>
</label>
<div class="col-xs-12 col-sm-6">
<ui-select
autofocus="true"
close-on-select="false"
+ on-remove="removeNotificationEvents()"
ng-if="state.mode=='edit'" style="width: 100%" multiple ng-model="cubeMetaFrame.status_need_notify">
<ui-select-match placeholder="Select Status...">{{$item}}</ui-select-match>
<ui-select-choices
@@ -120,24 +121,21 @@
</ng-form>
</div>
- <!--Tips-->
- <div class="col-xs-4">
- <div class="box box-solid">
- <div class="box-header widget-header-flat">
- <h4 class="box-title">Tips</h4>
- </div>
- <div class="box-body">
- <div class="row">
- <div class="col-xs-12">
- <ol class="text-info">
- <li>Cube name is unique name of entire system</li>
- <li>Can not edit cube name after created</li>
- <li>Cube must belong to project which you have privilege to create</li>
- <li>Error status will notify by default</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- </div>
</div>
+
+<script id="tip-cube-name.html" type="text/ng-template">
+ <strong>HTML</strong> allowed.<br />
+ Binding allowed: {{ value }}<br />
+ <button ng-click="value = 2">Test</button>
+</script>
+
+<script type="text/ng-template" id="cubeNameTip.html">\u2028\u2028
+<ol>
+ <li>Cube name is unique name of entire system.</li>
+ <li>Can not edit cube name after created.</li>
+</ol>
+</script>
+
+<script type="text/ng-template" id="notificationEventsTip.html">\u2028\u2028
+ <p>ERROR status will trigger a notification anyway.</p>
+</script>
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/cubeDesigner/measures.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/cubeDesigner/measures.html b/webapp/app/partials/cubeDesigner/measures.html
index f0ae86f..9f12317 100755
--- a/webapp/app/partials/cubeDesigner/measures.html
+++ b/webapp/app/partials/cubeDesigner/measures.html
@@ -97,9 +97,9 @@
</div>
</div>
<!--Expression-->
- <div class="form-group">
+ <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>Expression</b></label>
+ <label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default"><b>Expression</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Expression" template="expressionTip.html"></i></label>
<div class="col-xs-12 col-sm-6">
<select class="form-control"
ng-init="newMeasure.function.expression = (!!newMeasure.function.expression)?newMeasure.function.expression:cubeConfig.dftSelections.measureExpression" chosen ng-model="newMeasure.function.expression" required
@@ -130,12 +130,12 @@
</div>
</div>
<!--Param Value-->
- <div class="form-group">
+ <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>Param Value</b>
+ <b>Param Value</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Param Value" template="paramvalueTip.html"></i>
<!--tip for top_n-->
- <small ng-if="newMeasure.function.expression == 'TOP_N'" class="help-block" style="color:#b94a48">(SUM|ORDER BY Column for TOP_N)</small>
+ <small ng-if="newMeasure.function.expression == 'TOP_N'" class="help-block" style="color:#3a87ad">(SUM|ORDER BY Column for TOP_N)</small>
</label>
@@ -232,25 +232,6 @@
</div>
</div>
- <!--Tips-->
- <div class="col-xs-4">
- <div class="box box-solid">
- <div class="box-header">
- <h4 class="box-title">Tips</h4>
- </div>
- <div class="box-body">
- <div class="row">
- <div class="col-xs-12">
- <ol class="text-info">
- <li>All cubes have to contain one measure for Count(1), suggest use "_Count_" as name (Has been generated automatically)</li>
- <li>Only accept single column in param value with "Column" type</li>
- <li>Distinct Count is approximate, please indicate Error Rate, higher accuracy degree accompanied with larger storage size and longer build time</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- </div>
</div>
</div>
<div class="box-footer">
@@ -339,3 +320,14 @@
<button class="btn btn-primary" ng-click="cancel()">Close</button>
</div>
</script>
+
+<script type="text/ng-template" id="expressionTip.html">\u2028\u2028
+ <p>All cubes have to contain one measure for Count(1), suggest use "_Count_" as name (Has been generated automatically)</p>
+</script>
+
+<script type="text/ng-template" id="paramvalueTip.html">\u2028\u2028
+ <ol>
+ <li>Only accept single column in param value with "Column" type</li>
+ <li>Distinct Count is approximate, please indicate Error Rate, higher accuracy degree accompanied with larger storage size and longer build time</li>
+ </ol>
+</script>
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/cubeDesigner/refresh_settings.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/cubeDesigner/refresh_settings.html b/webapp/app/partials/cubeDesigner/refresh_settings.html
index 814c453..4c18639 100755
--- a/webapp/app/partials/cubeDesigner/refresh_settings.html
+++ b/webapp/app/partials/cubeDesigner/refresh_settings.html
@@ -28,9 +28,11 @@
<td>
<!--Cube Size-->
<div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Auto Merge Time
- Ranges(days)</b></label>
+ <div class="row middle-popover">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
+ <b>Auto Merge Thresholds</b>
+ <i class="fa fa-info-circle" kylinpopover title="Auto Merge Thresholds" template="autoMergeThresholdsTip.html" placement="right"></i>
+ </label>
<div class="col-xs-12 col-sm-6">
<!--retention range is store in CubeInstance, will convert to cubeMetaFrame for front end-->
@@ -71,7 +73,7 @@
</table>
<button class="btn btn-xs btn-info" ng-show="state.mode=='edit'"
ng-click="addNewMergeTimeRange()">
- New Merge Range<i class="fa fa-plus"></i>
+ New Thresholds <i class="fa fa-plus"></i>
</button>
</div>
<div class="row" ng-if="state.mode=='view'">
@@ -96,18 +98,16 @@
<td>
<!--Cube Size-->
<div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Retention
- Range(days)</b></label>
+ <div class="row middle-popover">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default">
+ <b>Retention Threshold</b> <i class="fa fa-info-circle" title="Retention Threshold" kylinpopover template="retentionTip.html" placement="right"></i>
+ </label>
<div class="col-xs-12 col-sm-6">
<!--retention range is store in CubeInstance, will convert to cubeMetaFrame for front end-->
<input type="text" retention-format class="form-control ng-scope ng-pristine ng-valid"
placeholder="how many days cube retention" ng-model="cubeMetaFrame.retention_range"
ng-if="state.mode=='edit'">
- <small class="help-block text-red" ng-show="state.mode=='edit'">(by default it's '0',which will keep
- all historic cube segments ,or will keep latest [Retention Range] days cube segments )
- </small>
<span ng-if="state.mode=='view'">{{cubeMetaFrame.retention_range | millisecondsToDay}}</span>
</div>
</div>
@@ -154,3 +154,11 @@
</div>
</ng-form>
</div>
+
+<script type="text/ng-template" id="autoMergeThresholdsTip.html">\u2028\u2028
+ <p>The thresholds will be checked ascendingly to see if any consectuive segments' time range has exceeded it. For example the [7 days, 30 days] will result in daily incremental segments being merged every 7 days, and the 7-days segments will get merged every 30 days.</p>
+</script>
+
+<script type="text/ng-template" id="retentionTip.html">\u2028\u2028
+<p>By default it's '0',which will keep all historic cube segments ,or will keep latest [Retention Threshold] days cube segments.</p>
+</script>
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/modelDesigner/conditions_settings.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/modelDesigner/conditions_settings.html b/webapp/app/partials/modelDesigner/conditions_settings.html
index 2a46698..d000aab 100644
--- a/webapp/app/partials/modelDesigner/conditions_settings.html
+++ b/webapp/app/partials/modelDesigner/conditions_settings.html
@@ -17,121 +17,119 @@
-->
<div class="row">
- <div class="col-xs-8">
+ <div class="col-xs-12">
<ng-form name="forms.model_setting_form" novalidate>
+
+ <h3>Partition</h3>
+ <div class="box-body">
<!--Cube Partition Type-->
- <div class="form-group" ng-hide="true">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Type</b></label>
- <div class="col-xs-12 col-sm-6">
- <select class="form-control"
- ng-if="state.mode=='edit'"
- chosen ng-model="modelsManager.selectedModel.partition_desc.partition_type"
- ng-options="ddt as ddt for ddt in cubeConfig.cubePartitionTypes">
- <option value=""></option>
- </select>
- <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.partition_desc.partition_type}}</span>
- </div>
- </div>
- </div>
+ <div class="form-group" ng-hide="true">
+ <div class="row">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Type</b></label>
+ <div class="col-xs-12 col-sm-6">
+ <select class="form-control"
+ ng-if="state.mode=='edit'"
+ chosen ng-model="modelsManager.selectedModel.partition_desc.partition_type"
+ ng-options="ddt as ddt for ddt in cubeConfig.cubePartitionTypes">
+ <option value=""></option>
+ </select>
+ <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.partition_desc.partition_type}}</span>
+ </div>
+ </div>
+ </div>
- <!--Partition Column-->
- <div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Date Column</b></label>
- <div class="col-xs-12 col-sm-6">
+ <!--Partition Column-->
+ <div class="form-group">
+ <div class="row middle-popover">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Date Column</b> <i kylinpopover placement="right" title="Partition Date Column" template="partitionTip.html" class="fa fa-info-circle"></i></label>
+ <div class="col-xs-12 col-sm-6">
- <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
- ng-model="modelsManager.selectedModel.partition_desc.partition_date_column"
- ng-if="state.mode=='edit'"
- data-placement=""
- ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonColumns(modelsManager.selectedModel.fact_table)" >
- <option value="">--Select Partition Column--</option>
- </select>
- <small class="help-block text-red" ng-show="state.mode=='edit'">(Column Type should be DATE or TIMESTAMP Type)</small>
-
- <span ng-if="state.mode=='view'">
- {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}</span>
- </div>
- </div>
- </div>
+ <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
+ ng-model="modelsManager.selectedModel.partition_desc.partition_date_column"
+ ng-if="state.mode=='edit'"
+ data-placement=""
+ ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonColumns(modelsManager.selectedModel.fact_table)" >
+ <option value="">--Select Partition Column--</option>
+ </select>
+ <!--<small class="text-info" ng-show="state.mode=='edit'">(Column Type should be DATE or TIMESTAMP Type)</small>-->
- <!--Date Format-->
- <div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Date Format</b></label>
- <div class="col-xs-12 col-sm-6">
- <select style="width: 100%" chosen
- ng-required="modelsManager.selectedModel.partition_desc.partition_date_format"
- ng-model="modelsManager.selectedModel.partition_desc.partition_date_format"
- ng-if="state.mode=='edit'"
- data-placement=""
- ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt">
- <option value="">--Select Date Format--</option>
- </select>
- <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span>
- </div>
+ <span ng-if="state.mode=='view'">
+ {{!!(modelsManager.selectedModel.partition_desc.partition_date_column)?modelsManager.selectedModel.partition_desc.partition_date_column: ''}}</span>
+ </div>
+ </div>
</div>
- </div>
- <!--Partition Time Column-->
- <div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Time Column</b></label>
- <div class="col-xs-12 col-sm-6">
-
- <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
- ng-model="modelsManager.selectedModel.partition_desc.partition_time_column"
- ng-if="state.mode=='edit'"
- data-placement=""
- ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonTimeColumns(modelsManager.selectedModel.fact_table)" >
- <option value="">--Select Partition Column--</option>
- </select>
- <small class="help-block text-red" ng-show="state.mode=='edit'">(Column Type should be TIME Type)</small>
-
- <span ng-if="state.mode=='view'">
- {{!!(modelsManager.selectedModel.partition_desc.partition_time_column)?modelsManager.selectedModel.partition_desc.partition_time_column: ''}}</span>
+ <!--Date Format-->
+ <div class="form-group">
+ <div class="row">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Date Format</b></label>
+ <div class="col-xs-12 col-sm-6">
+ <select style="width: 100%" chosen
+ ng-required="modelsManager.selectedModel.partition_desc.partition_date_format"
+ ng-model="modelsManager.selectedModel.partition_desc.partition_date_format"
+ ng-if="state.mode=='edit'"
+ data-placement=""
+ ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt">
+ <option value="">--Select Date Format--</option>
+ </select>
+ <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span>
+ </div>
</div>
</div>
- </div>
- <!--Time Format-->
- <div class="form-group">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Time Format</b></label>
- <div class="col-xs-12 col-sm-6">
- <select style="width: 100%" chosen
- ng-required="modelsManager.selectedModel.partition_desc.partition_time_format"
- ng-model="modelsManager.selectedModel.partition_desc.partition_time_format"
- ng-if="state.mode=='edit'"
- data-placement=""
- ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt">
- <option value="">--Select Time Format--</option>
- </select>
- <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span>
+ <!--Date Format-->
+ <div class="form-group middle-popover">
+ <div class="row">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Has a separate "time of the day" column ?</b> <i kylinpopover placement="right" title="Separate Time Column" template="separateTimeColumnTip.html" class="fa fa-info-circle"></i></label>
+ <div class="col-xs-12 col-sm-6">
+ <toggle-switch on-label="Yes" off-label="No" ng-disabled="state.mode!=='edit'" ng-click="toggleHasSeparateColumn()" ng-model="partitionColumn.hasSeparateTimeColumn"></toggle-switch>
+ </div>
</div>
</div>
- </div>
+ <!--Partition Time Column-->
+ <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true">
+ <div class="row middle-popover">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Partition Time Column</b> <i kylinpopover placement="right" title="Partition Time Column" template="partitionTimeTip.html" class="fa fa-info-circle"></i></label>
+ <div class="col-xs-12 col-sm-6">
- <div class="form-group" ng-show="userService.hasRole('ROLE_ADMIN')">
- <div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Cube Size</b></label>
- <div class="col-xs-12 col-sm-6">
- <select class="form-control"
- ng-if="state.mode=='edit'"
- chosen ng-model="modelsManager.selectedModel.capacity"
- ng-options="ddt as ddt for ddt in cubeConfig.cubeCapacities">
- <option value=""></option>
- </select>
- <span ng-if="state.mode=='view'">{{modelsManager.selectedModel.capacity}}</span>
- </div>
+ <select style="width: 100%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
+ ng-model="modelsManager.selectedModel.partition_desc.partition_time_column"
+ ng-if="state.mode=='edit'"
+ data-placement=""
+ ng-options="modelsManager.selectedModel.fact_table+'.'+columns.name as modelsManager.selectedModel.fact_table+'.'+columns.name for columns in getPartitonTimeColumns(modelsManager.selectedModel.fact_table)" >
+ <option value="">--Select Partition Column--</option>
+ </select>
+ <!--<small class="text-info" ng-show="state.mode=='edit'">(Column Type should be TIME Type)</small>-->
+
+ <span ng-if="state.mode=='view'">
+ {{!!(modelsManager.selectedModel.partition_desc.partition_time_column)?modelsManager.selectedModel.partition_desc.partition_time_column: ''}}</span>
</div>
+ </div>
</div>
+ <!--Time Format-->
+ <div class="form-group" ng-if="partitionColumn.hasSeparateTimeColumn == true">
+ <div class="row">
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Time Format</b></label>
+ <div class="col-xs-12 col-sm-6">
+ <select style="width: 100%" chosen
+ ng-required="modelsManager.selectedModel.partition_desc.partition_time_format"
+ ng-model="modelsManager.selectedModel.partition_desc.partition_time_format"
+ ng-if="state.mode=='edit'"
+ data-placement=""
+ ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt">
+ <option value="">--Select Time Format--</option>
+ </select>
+ <span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <h3>Filter</h3>
<!--Filter Condition-->
- <div class="form-group">
+ <div class="form-group box-body middle-popover">
<div class="row">
- <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Filter</b></label>
+ <label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default"><b>Filter</b> <i kylinpopover placement="right" title="Filter" template="filterTip.html" class="fa fa-info-circle"></i></label>
<div class="col-xs-12 col-sm-6">
<!--edit mode-->
@@ -161,26 +159,27 @@
</div>
</ng-form>
</div>
-
- <div class="col-xs-4">
- <div class="box box-solid">
- <div class="box-header">
- <h4 class="box-title">Tips</h4>
- </div>
- <div class="box-body">
- <div class="row">
- <div class="col-xs-12">
- <ol class="text-info">
- <li>Partition date column not required,leave as default if cube always need full build</li>
- <li>Partition date column will select 'date' type column from fact table</li>
- <li>Where clause to filter data from source</li>
- <li>Do not include date column which will be used for incremental refresh</li>
- <li>Do not include "Where"</li>
- <li>Please verify SQL when finish cube design from SQL view of cube</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- </div>
</div>
+
+<script type="text/ng-template" id="partitionTip.html">
+ <ol>
+ <li>Partition date column not required,leave as default if cube always need full build</Li>
+ <li>Column should contain date value (type can be Date, Timestamp, String, VARCHAR, etc.)</li>
+ </ol>
+</script>
+
+<script type="text/ng-template" id="partitionTimeTip.html">\u2028\u2028
+ <p>Column should contain time value (type can be Timestamp, String, VARCHAR, etc.)</p>
+</script>
+
+<script typ type="text/ng-template" id="filterTip.html">\u2028\u2028
+ <ol>
+ <li>Where clause to filter data from source</li>
+ <li>Do not include date column which will be used for incremental refresh</li>
+ <li>Do not include "Where"</li>
+ </ol>
+</script>
+
+<script type="text/ng-template" id="separateTimeColumnTip.html">\u2028\u2028
+<p>For cases where fact table saves date and hour at two columns (KYLIN-1427)</p>
+</script>
http://git-wip-us.apache.org/repos/asf/kylin/blob/92576cca/webapp/app/partials/modelDesigner/model_info.html
----------------------------------------------------------------------
diff --git a/webapp/app/partials/modelDesigner/model_info.html b/webapp/app/partials/modelDesigner/model_info.html
index a6ad300..cab710b 100644
--- a/webapp/app/partials/modelDesigner/model_info.html
+++ b/webapp/app/partials/modelDesigner/model_info.html
@@ -17,15 +17,15 @@
-->
<div class="row">
- <div class="col-xs-8">
+ <div class="col-xs-12">
<!--Project-->
<ng-form name="forms.model_info_form" novalidate>
<!--Model Name-->
- <div class="form-group" ng-class="{'required':state.mode=='edit'}">
+ <div class="form-group middle-popover" ng-class="{'required':state.mode=='edit'}">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label no-padding-right font-color-default">
- <b>Model Name</b>
+ <b>Model Name</b> <i class="fa fa-info-circle" kylinpopover placement="right" title="Model Name" template="modelNameTip.html"></i>
</label>
<div class="col-xs-12 col-sm-6" ng-class="{'has-error':forms.model_info_form.model_name.$invalid && (forms.model_info_form.model_name.$dirty||forms.model_info_form.$submitted)}">
@@ -61,24 +61,6 @@
</ng-form>
</div>
- <!--Tips-->
- <div class="col-xs-4">
- <div class="box box-solid">
- <div class="box-header widget-header-flat">
- <h4 class="box-title">Tips</h4>
- </div>
- <div class="box-body">
- <div class="row">
- <div class="col-xs-12">
- <ol class="text-info">
- <li>Model must belong to project which you have privilege to create</li>
- <li>Model name is unique name of entire system</li>
- </ol>
- </div>
- </div>
- </div>
- </div>
- </div>
</div>
<div class="row" ng-hide="true">
@@ -97,3 +79,10 @@
</div>
</div>
</div>
+
+<script type="text/ng-template" id="modelNameTip.html">\u2028\u2028
+<ol>
+ <li>Model name is unique name of entire system.</li>
+ <li>Can not edit model name after created.</li>
+</ol>
+</script>