You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kylin.apache.org by sh...@apache.org on 2018/07/19 07:18:05 UTC
[kylin] 01/02: KYLIN-3186 add partition_time other feature,
abstract the 'initialPartitionSetting' method and enable the
partition format editable of all data type
This is an automated email from the ASF dual-hosted git repository.
shaofengshi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/kylin.git
commit 4b5fe6de6278f54751ed9a58c336b133895b05c9
Author: Emiya0306 <wo...@qq.com>
AuthorDate: Mon Jul 16 17:10:09 2018 +0800
KYLIN-3186 add partition_time other feature, abstract the 'initialPartitionSetting' method and enable the partition format editable of all data type
- enable the partition format editable of all data type
- optimize stylesheet for responsive style
- add partition_time other feature and abstract the 'initialPartitionSetting' method but not enabled
---
.../app/js/controllers/modelConditionsSettings.js | 113 ++++++++++++++++++---
webapp/app/js/model/cubeConfig.js | 12 ++-
webapp/app/less/app.less | 14 +++
.../modelDesigner/conditions_settings.html | 48 ++++++---
4 files changed, 155 insertions(+), 32 deletions(-)
diff --git a/webapp/app/js/controllers/modelConditionsSettings.js b/webapp/app/js/controllers/modelConditionsSettings.js
index 82abe0b..500db40 100644
--- a/webapp/app/js/controllers/modelConditionsSettings.js
+++ b/webapp/app/js/controllers/modelConditionsSettings.js
@@ -25,6 +25,12 @@
KylinApp.controller('ModelConditionsSettingsCtrl', function ($scope, $modal,MetaModel,modelsManager,VdmUtil) {
$scope.modelsManager = modelsManager;
$scope.availableFactTables = [];
+ // partition date temporary object.
+ // Because ng-chosen cannot watch string value, partition date should be object.
+ // firstValue: For fixing ng-chosen cannot watch first value change.
+ $scope.partition_date = { type: '', format: '', firstValue: '' };
+ $scope.partition_time = { type: '', format: '', firstValue: '' };
+
$scope.initSetting = function (){
$scope.selectedTables={fact:VdmUtil.getNameSpaceAliasName($scope.modelsManager.selectedModel.partition_desc.partition_date_column)}
$scope.selectedTablesForPartitionTime={fact:VdmUtil.getNameSpaceAliasName($scope.modelsManager.selectedModel.partition_desc.partition_time_column)}
@@ -35,31 +41,94 @@ KylinApp.controller('ModelConditionsSettingsCtrl', function ($scope, $modal,Meta
$scope.availableFactTables.push(joinTable[j].alias);
}
}
+
+ $scope.initialPartitionSetting('Date');
+ $scope.initialPartitionSetting('Time');
}
$scope.isFormatEdit = {editable:false};
+
+ /**
+ * initial date or time partition select
+ *
+ * @param {String: 'Date' | 'Time'} partitionFieldName
+ * @desc cubeConfigName: 'partitionDateFormatOpt' or 'partitionTimeFormatOpt'
+ * modelFormatKey: 'partition_date_format' or 'partition_time_format'
+ * scopeName: 'partition_date' or 'partition_time'
+ */
+ $scope.initialPartitionSetting = function(partitionFieldName) {
+ var cubeConfigName = 'partition' + partitionFieldName + 'FormatOpt';
+
+ var lowerCaseName = partitionFieldName.toLowerCase(),
+ modelFormatKey = 'partition_' + lowerCaseName + '_format',
+ scopeName = 'partition_' + lowerCaseName,
+ scopePartitionTypeWatchName = 'partition_' + lowerCaseName + '.type',
+ scopePartitionFormatWatchName = 'partition_' + lowerCaseName + '.format';
+
+ var partitionFormatOpt = $scope.cubeConfig[cubeConfigName];
+ var partition_format = $scope.modelsManager.selectedModel.partition_desc[modelFormatKey];
+
+ if(partitionFormatOpt.indexOf(partition_format) === -1) {
+ $scope[scopeName].type = 'other';
+ $scope[scopeName].format = partition_format;
+ $scope[scopeName].firstValue = partition_format;
+ } else {
+ $scope[scopeName].type = partition_format;
+ $scope[scopeName].format = '';
+ $scope[scopeName].firstValue = partition_format;
+ }
+
+ // Add form change watcher. SetTimeout can escape the first render loop.
+ setTimeout(function() {
+ $scope.$watch(scopePartitionTypeWatchName, function (newValue, oldValue) {
+ // Ng-chosen will change the value of all selects on DOM when you select each first.
+ // So for fixing this bug, we should compare the newValue and oldValue.
+ // firstValue: For fixing ng-chosen cannot watch first value change.
+ if(newValue !== oldValue || ($scope[scopeName].firstValue && $scope[scopeName].firstValue !== newValue && newValue !== 'other')) {
+ if(newValue !== 'other') {
+ $scope.modelsManager.selectedModel.partition_desc[modelFormatKey] = $scope[scopeName].format = newValue;
+ } else {
+ $scope[scopeName].format = '';
+ }
+ $scope[scopeName].firstValue = '';
+ }
+ });
+
+ $scope.$watch(scopePartitionFormatWatchName, function (newValue, oldValue) {
+ if(newValue !== oldValue) {
+ $scope.modelsManager.selectedModel.partition_desc[modelFormatKey] = newValue;
+ }
+ });
+ });
+ };
+
var judgeFormatEditable = function(dateColumn){
if(dateColumn == null){
$scope.isFormatEdit.editable = false;
return;
}
- var column = _.filter($scope.getColumnsByAlias(VdmUtil.getNameSpaceAliasName(dateColumn)),function(_column){
- var columnName=VdmUtil.getNameSpaceAliasName(dateColumn)+"."+_column.name;
- if(dateColumn == columnName){
- return _column;
- }
- });
- var data_type = column[0].datatype;
- if(data_type ==="bigint" ||data_type ==="int" ||data_type ==="integer"){
- $scope.isFormatEdit.editable = false;
- $scope.modelsManager.selectedModel.partition_desc.partition_date_format='yyyyMMdd';
- $scope.partitionColumn.hasSeparateTimeColumn=false;
- $scope.modelsManager.selectedModel.partition_desc.partition_time_column=null;
- $scope.modelsManager.selectedModel.partition_desc.partition_time_format=null;
+ /**
+ * enable the partition format editable of all data type
+ * Edit date: 2018/07/12
+ * Author: Roger
+ */
+ // var column = _.filter($scope.getColumnsByAlias(VdmUtil.getNameSpaceAliasName(dateColumn)),function(_column){
+ // var columnName=VdmUtil.getNameSpaceAliasName(dateColumn)+"."+_column.name;
+ // if(dateColumn == columnName){
+ // return _column;
+ // }
+ // });
+ // var data_type = column[0].datatype;
+ // if(data_type ==="bigint" ||data_type ==="int" ||data_type ==="integer"){
+ // $scope.isFormatEdit.editable = false;
+ // $scope.modelsManager.selectedModel.partition_desc.partition_date_format='yyyyMMdd';
+ // $scope.partitionColumn.hasSeparateTimeColumn=false;
+ // $scope.modelsManager.selectedModel.partition_desc.partition_time_column=null;
+ // $scope.modelsManager.selectedModel.partition_desc.partition_time_format=null;
- return;
- }
+ // return;
+ // }
$scope.isFormatEdit.editable = true;
return;
@@ -96,6 +165,20 @@ KylinApp.controller('ModelConditionsSettingsCtrl', function ($scope, $modal,Meta
"hasSeparateTimeColumn" : false
}
+ $scope.addFormValueWatcher = function() {
+ $scope.$watch('partition_date.type', function (newValue) {
+ if(newValue !== 'other') {
+ $scope.modelsManager.selectedModel.partition_desc.partition_date_format = $scope.partition_date.format = newValue;
+ } else {
+ $scope.partition_date.format = '';
+ }
+ });
+
+ $scope.$watch('partition_date.format', function (newValue) {
+ $scope.modelsManager.selectedModel.partition_desc.partition_date_format = newValue;
+ });
+ };
+
if ($scope.state.mode=='edit'){
$scope.initSetting();
judgeFormatEditable($scope.modelsManager.selectedModel.partition_desc.partition_date_column);
diff --git a/webapp/app/js/model/cubeConfig.js b/webapp/app/js/model/cubeConfig.js
index eacb915..a83d4c9 100644
--- a/webapp/app/js/model/cubeConfig.js
+++ b/webapp/app/js/model/cubeConfig.js
@@ -96,14 +96,22 @@ KylinApp.constant('cubeConfig', {
{name:"minute_start",type:"timestamp"}
],
partitionDateFormatOpt:[
+ 'yyyy-MM-dd HH:mm:ss',
+ 'yyyy-MM-dd HH:mm',
+ 'yyyy-MM-dd HH',
'yyyy-MM-dd',
+ 'yyyyMMddHHMMSS',
+ 'yyyyMMddHHMM',
+ 'yyyyMMddHH',
'yyyyMMdd',
- 'yyyy-MM-dd HH:mm:ss'
+ // 'timestamp',
+ // 'other'
],
partitionTimeFormatOpt:[
'HH:mm:ss',
'HH:mm',
- 'HH'
+ 'HH',
+ // 'other'
],
rowKeyShardOptions:[
true,false
diff --git a/webapp/app/less/app.less b/webapp/app/less/app.less
index 7aa7283..cf9748e 100644
--- a/webapp/app/less/app.less
+++ b/webapp/app/less/app.less
@@ -936,4 +936,18 @@ td.snapshot-usage .tooltip {
}
td.snapshot-usage .tooltip-inner {
max-width: 1024px;
+}
+
+div[ng-controller="ModelConditionsSettingsCtrl"] {
+ .format-input {
+ margin-top: 15px;
+ }
+ select.col-5 + .chosen-container {
+ width: 49% !important;
+ }
+ .format-input.col-5 {
+ display: inline-block;
+ width: 49%;
+ margin-top: 0;
+ }
}
\ No newline at end of file
diff --git a/webapp/app/partials/modelDesigner/conditions_settings.html b/webapp/app/partials/modelDesigner/conditions_settings.html
index cce5de2..10aee84 100644
--- a/webapp/app/partials/modelDesigner/conditions_settings.html
+++ b/webapp/app/partials/modelDesigner/conditions_settings.html
@@ -27,7 +27,7 @@
<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" ng-if="state.mode=='edit'">
- <select style="width: 49%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
+ <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
ng-model="selectedTables.fact"
ng-change="tableChange(selectedTables.fact)"
data-placement=""
@@ -35,7 +35,7 @@
<option value="">--Select Partition Table--</option>
</select>
- <select style="width: 49%" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
+ <select width="'49%'" chosen data-placeholder="e.g. DEFAULT.TEST_KYLIN_FACT.CAL_DT"
ng-model="modelsManager.selectedModel.partition_desc.partition_date_column"
ng-change="partitionChange(modelsManager.selectedModel.partition_desc.partition_date_column)"
data-placement=""
@@ -57,15 +57,24 @@
<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"
+ <select chosen
+ width="'98.5%'"
ng-if="state.mode=='edit'"
+ ng-model="partition_date.type"
+ ng-required="partition_date.type"
ng-disabled="$parent.isFormatEdit.editable!==true"
- data-placement=""
- ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt">
+ ng-class="{ 'col-5': partition_date.type === 'other' }"
+ ng-options="ddt as ddt for ddt in cubeConfig.partitionDateFormatOpt"
+ data-placement="">
<option value="">--Select Date Format--</option>
</select>
+ <input
+ class="form-control format-input"
+ ng-if="partition_date.type === 'other'"
+ ng-model="partition_date.format"
+ ng-required="partition_date.format"
+ ng-class="{ 'col-5': partition_date.type === 'other' }"
+ placeholder="Please enter your custom date format."/>
<span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_date_column">{{(modelsManager.selectedModel.partition_desc.partition_date_format)}}</span>
</div>
</div>
@@ -85,14 +94,14 @@
<div class="row middle-popover">
<label class="control-label col-xs-12 col-sm-3 no-padding-right font-color-default align-right"><b>Partition Time Column </b> <i kylinpopover placement="right" ng-title="Partition Time Column" template="partitionTimeTip.html" class="fa fa-info-circle"></i> </label>
<div class="col-xs-12 col-sm-6">
- <select style="width: 49%" chosen
+ <select width="'49%'" chosen
ng-model="selectedTablesForPartitionTime.fact"
ng-if="state.mode=='edit'"
data-placement=""
ng-options="alias as alias for alias in availableFactTables" >
<option value="">--Select Partition Table--</option>
</select>
- <select style="width: 49%" chosen
+ <select width="'49%'" chosen
ng-model="modelsManager.selectedModel.partition_desc.partition_time_column"
ng-if="state.mode=='edit'"
data-placement=""
@@ -109,14 +118,23 @@
<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">
+ <select chosen
+ width="'98.5%'"
+ ng-if="state.mode=='edit'"
+ ng-model="partition_time.type"
+ ng-required="partition_time.type"
+ ng-class="{ 'col-5': partition_time.type === 'other' }"
+ ng-options="ddt as ddt for ddt in cubeConfig.partitionTimeFormatOpt"
+ data-placement="">
<option value="">--Select Time Format--</option>
</select>
+ <input
+ class="form-control format-input"
+ ng-if="partition_time.type === 'other'"
+ ng-model="partition_time.format"
+ ng-required="partition_time.format"
+ ng-class="{ 'col-5': partition_time.type === 'other' }"
+ placeholder="Please enter your custom time format."/>
<span ng-if="state.mode=='view'&&modelsManager.selectedModel.partition_desc.partition_time_column">{{(modelsManager.selectedModel.partition_desc.partition_time_format)}}</span>
</div>
</div>