AMBARI-20042. HiveView2.0 : For large datasets, query results overlaps. (dipayanb)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/fb01ba54 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/fb01ba54 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/fb01ba54 Branch: refs/heads/branch-feature-AMBARI-20053 Commit: fb01ba548464e87d3d7ec8b45eefc9e7378d4af6 Parents: 60aaaea Author: Dipayan Bhowmick <dipayan.bhowm...@gmail.com> Authored: Tue Feb 21 12:57:09 2017 +0530 Committer: Dipayan Bhowmick <dipayan.bhowm...@gmail.com> Committed: Tue Feb 21 13:10:54 2017 +0530 ---------------------------------------------------------------------- .../ui/app/components/query-result-table.js | 22 +++- .../resources/ui/app/helpers/extract-value.js | 27 +++++ .../resources/ui/app/mixins/table-common.js | 86 ---------------- .../resources/ui/app/routes/queries/query.js | 2 - .../src/main/resources/ui/app/styles/app.scss | 101 ++----------------- .../templates/components/query-result-table.hbs | 67 ++++++------ .../hive20/src/main/resources/ui/package.json | 1 - 7 files changed, 91 insertions(+), 215 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/components/query-result-table.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/components/query-result-table.js b/contrib/views/hive20/src/main/resources/ui/app/components/query-result-table.js index ea6dbc9..a2eb349 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/components/query-result-table.js +++ b/contrib/views/hive20/src/main/resources/ui/app/components/query-result-table.js @@ -17,8 +17,6 @@ */ import Ember from 'ember'; -import Table from 'ember-light-table'; -import TableCommon from '../mixins/table-common'; export default Ember.Component.extend({ @@ -28,6 +26,15 @@ export default Ember.Component.extend({ queryResult: {'schema' :[], 'rows' :[]}, + columnFilterText: null, + columnFilter: null, + + columnFilterDebounced: Ember.observer('columnFilterText', function() { + Ember.run.debounce(this, () => { + this.set('columnFilter', this.get('columnFilterText')) + }, 500); + }), + columns: Ember.computed('queryResult', function() { let queryResult = this.get('queryResult'); let columnArr =[]; @@ -61,8 +68,11 @@ export default Ember.Component.extend({ return rowArr; }), - table: Ember.computed('queryResult', 'rows', 'columns', function() { - return new Table(this.get('columns'), this.get('rows')); + filteredColumns: Ember.computed('columns', 'columnFilter', function() { + if (!Ember.isEmpty(this.get('columnFilter'))) { + return this.get('columns').filter((item) => item.label.indexOf(this.get('columnFilter')) > -1 ); + } + return this.get('columns'); }), showSaveHdfsModal:false, @@ -130,6 +140,10 @@ export default Ember.Component.extend({ showVisualExplain(){ this.sendAction('showVisualExplain'); + }, + + clearColumnsFilter() { + this.set('columnFilterText'); } } http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/helpers/extract-value.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/helpers/extract-value.js b/contrib/views/hive20/src/main/resources/ui/app/helpers/extract-value.js new file mode 100644 index 0000000..76b3dee --- /dev/null +++ b/contrib/views/hive20/src/main/resources/ui/app/helpers/extract-value.js @@ -0,0 +1,27 @@ +/** + * 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. + */ + +import Ember from 'ember'; + +export function extractValue(params,/*, hash*/) { + let map = params[0]; + let key = params[1]; + return map[key]; +} + +export default Ember.Helper.helper(extractValue); http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/mixins/table-common.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/mixins/table-common.js b/contrib/views/hive20/src/main/resources/ui/app/mixins/table-common.js deleted file mode 100644 index 4a2f517..0000000 --- a/contrib/views/hive20/src/main/resources/ui/app/mixins/table-common.js +++ /dev/null @@ -1,86 +0,0 @@ -/** - * 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. - */ - -import Ember from 'ember'; -import Table from 'ember-light-table'; - -const { - inject, - isEmpty - } = Ember; - -export default Ember.Mixin.create({ - store: inject.service(), - - page: 0, - limit: 10, - dir: 'asc', - sort: 'firstName', - - isLoading: false, - canLoadMore: true, - - model: null, - columns: null, - table: null, - - init() { - this._super(...arguments); - - let table = new Table(this.get('columns'), this.get('model'), { enableSync: true }); - let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sort')); - - // Setup initial sort column - if (sortColumn) { - sortColumn.set('sorted', true); - } - - this.set('table', table); - }, - - fetchRecords() { - this.set('isLoading', true); - this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir'])).then((records) => { - this.get('model').pushObjects(records.toArray()); - this.set('canLoadMore', !isEmpty(records)); - }).finally(() => { - this.set('isLoading', false); - }); - }, - - actions: { - onScrolledToBottom() { - if (this.get('canLoadMore')) { - this.incrementProperty('page'); - this.fetchRecords(); - } - }, - - onColumnClick(column) { - if (column.sorted) { - this.setProperties({ - dir: column.ascending ? 'asc' : 'desc', - sort: column.get('valuePath'), - canLoadMore: true, - page: 0 - }); - this.get('model').clear(); - } - } - } -}); http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/routes/queries/query.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/routes/queries/query.js b/contrib/views/hive20/src/main/resources/ui/app/routes/queries/query.js index 04bb1da..d3768c1 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/routes/queries/query.js +++ b/contrib/views/hive20/src/main/resources/ui/app/routes/queries/query.js @@ -410,8 +410,6 @@ export default Ember.Route.extend(UILoggerMixin, { Ember.run.later(() => { this.transitionTo('queries.query.results', myWs); }, 1 * 1000); - - }, openWorksheetModal(){ http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss b/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss index 3e89ceb..fd1f0eb 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss +++ b/contrib/views/hive20/src/main/resources/ui/app/styles/app.scss @@ -325,6 +325,14 @@ pre { padding-top:10px; } +.query-result { + .table { + margin-top: 10px; + display: inline-block; + overflow: auto; + } +} + .database-panel{ .panel-heading { @@ -438,103 +446,10 @@ pre { } } - .ember-light-table { - width: 100%; - margin: 0 auto; - border-collapse: collapse; - height: 65vh; //This can be controlled from the hbs also. - } - .full-vw-height{ height: 100vh; } - .ember-light-table .multi-select { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none - } - - .ember-light-table tfoot .lt-column { - border-top: 1px solid #DADADA - } - - .ember-light-table thead .lt-column { - border-bottom: 1px solid #DADADA - } - - .ember-light-table tfoot th.is-dragging, - .ember-light-table thead th.is-dragging { - opacity: .75; - background: #eee - } - - .ember-light-table tfoot th.is-drag-target.drag-right, - .ember-light-table thead th.is-drag-target.drag-right { - border-right: 1px dotted #DADADA - } - - .ember-light-table tfoot th.is-drag-target.drag-left, - .ember-light-table thead th.is-drag-target.drag-left { - border-left: 1px dotted #DADADA - } - - .ember-light-table .lt-column { - font-weight: 200; - font-size: 12px; - padding: 10px - } - - .ember-light-table .lt-column .lt-sort-icon { - width: 15px - } - - .ember-light-table .lt-column.lt-group-column { - border: none!important; - padding-bottom: 10px - } - - .ember-light-table .lt-column .lt-column-resizer { - border-right: 1px dashed #ccc; - border-left: 1px dashed #ccc - } - - .ember-light-table .lt-row { - height: 50px - } - - .ember-light-table .lt-row.is-selected { - background-color: #DEDEDE!important - } - - .ember-light-table .lt-row:not(.is-selected):hover { - background-color: #F5F4F4!important - } - - .ember-light-table .lt-row:last-of-type td { - border-bottom-width: 0 - } - - .ember-light-table .lt-row.lt-expanded-row:hover, - .ember-light-table .lt-row.lt-no-data:hover { - background-color: transparent!important - } - - .ember-light-table .lt-row.lt-expanded-row td, - .ember-light-table .lt-row.lt-no-data td { - padding: 15px - } - - .ember-light-table .lt-row td { - border-color: #DADADA; - border-width: 0 0 1px; - border-style: solid; - font-size: 13px; - padding: 0 10px - } - tfoot tr>td { border-top: 1px solid #DADADA; padding: 10px 10px 0; http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/app/templates/components/query-result-table.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/components/query-result-table.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/components/query-result-table.hbs index 2590796..395987f 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/templates/components/query-result-table.hbs +++ b/contrib/views/hive20/src/main/resources/ui/app/templates/components/query-result-table.hbs @@ -16,8 +16,17 @@ * limitations under the License. }} - <div class="clearfix" style="text-align: right; padding-right:5px"> - <span class="dropdown"> + <div class="clearfix"> + <div class="col-md-2"> + <div class="row input-group"> + {{input type="text" value=columnFilterText placeholder="Filter columns" class="form-control"}} + <span class="input-group-btn"> + <button class="btn btn-default" {{action "clearColumnsFilter"}}>{{fa-icon "times"}} </button> + </span> + </div> + </div> + <div class="pull-right"> + <span class="dropdown"> <button class="btn btn-default dropdown-toggle" title="Actions" data-toggle="dropdown">{{fa-icon "bars"}} </button> <ul class="dropdown-menu dropdown-menu-right"> <li><a href="#" {{action "openSaveHdfsModal" }} class="text-uppercase">{{fa-icon "save"}} Save To HDFS</a></li> @@ -25,35 +34,35 @@ </ul> </span> - <button class="btn btn-default" title="Previous Page" {{action "goPrevPage" payloadTitle }} disabled={{not hasPrevious}} >{{fa-icon "arrow-left"}} </button> - <button class="btn btn-default" title="Next Page" {{action "goNextPage" payloadTitle}} disabled={{not hasNext}} >{{fa-icon "arrow-right"}} </button> - <button class="btn btn-default" title="Expand/Collspse" {{action "expandQueryResultPanel" }}>{{fa-icon "expand"}}</button> - + <button class="btn btn-default" title="Previous Page" {{action "goPrevPage" payloadTitle }} disabled={{not hasPrevious}} >{{fa-icon "arrow-left"}} </button> + <button class="btn btn-default" title="Next Page" {{action "goNextPage" payloadTitle}} disabled={{not hasNext}} >{{fa-icon "arrow-right"}} </button> + <button class="btn btn-default" title="Expand/Collspse" {{action "expandQueryResultPanel" }}>{{fa-icon "expand"}}</button> + </div> </div> - <div class="clearfix"> - {{#light-table table height='70vh' as |t|}} - {{#if columns.length}} - {{t.head - onColumnClick=(action 'onColumnClick') - iconAscending='fa fa-sort-asc' - iconDescending='fa fa-sort-desc' - fixed=true - }} - - {{#t.body - canSelect=false - onScrolledToBottom=(action 'onScrolledToBottom') - as |body| - }} - {{#if isLoading}} - {{#body.loader}} - {{table-loader}} - {{/body.loader}} - {{/if}} - {{/t.body}} - {{/if}} - {{/light-table}} + <div class="col-md-12"> + <div class="row"> + <div class="query-result"> + <table class="table table-striped"> + <thead> + <tr> + {{#each filteredColumns as |column|}} + <th>{{column.label}}</th> + {{/each}} + </tr> + </thead> + <tbody> + {{#each rows as |row|}} + <tr> + {{#each filteredColumns as |column|}} + <td>{{extract-value row column.valuePath}}</td> + {{/each}} + </tr> + {{/each}} + </tbody> + </table> + </div> + </div> </div> {{#if showSaveHdfsModal}} http://git-wip-us.apache.org/repos/asf/ambari/blob/fb01ba54/contrib/views/hive20/src/main/resources/ui/package.json ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/package.json b/contrib/views/hive20/src/main/resources/ui/package.json index a066bfd..5c0da36 100644 --- a/contrib/views/hive20/src/main/resources/ui/package.json +++ b/contrib/views/hive20/src/main/resources/ui/package.json @@ -48,7 +48,6 @@ "ember-export-application-global": "^1.0.5", "ember-font-awesome": "2.2.0", "ember-i18n": "4.5.0", - "ember-light-table": "1.8.0", "ember-load-initializers": "^0.5.1", "ember-modal-dialog": "0.9.0", "ember-moment": "7.2.0",