AMBARI-19339. Hive View 2.0.0: Add ability to expand the query editor and the result pane to take 100% height and width (pallavkul)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/22586153 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/22586153 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/22586153 Branch: refs/heads/branch-dev-patch-upgrade Commit: 22586153eca925d493e9ca97d7ad878977d7a20c Parents: 4fc44e2 Author: pallavkul <[email protected]> Authored: Tue Jan 3 18:51:22 2017 +0530 Committer: pallavkul <[email protected]> Committed: Tue Jan 3 18:51:22 2017 +0530 ---------------------------------------------------------------------- .../ui/app/components/query-result-table.js | 3 ++ .../src/main/resources/ui/app/routes/query.js | 33 ++++++++++++++--- .../src/main/resources/ui/app/styles/app.scss | 28 +++++++++++++-- .../templates/components/query-result-table.hbs | 17 +++++---- .../main/resources/ui/app/templates/query.hbs | 37 +++++++++++++------- 5 files changed, 90 insertions(+), 28 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/22586153/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 1cb1d3d..17df66d 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 @@ -77,6 +77,9 @@ export default Ember.Component.extend({ }, goPrevPage(){ this.sendAction('goPrevPage'); + }, + expandQueryResultPanel(){ + this.sendAction('expandQueryResultPanel'); } } http://git-wip-us.apache.org/repos/asf/ambari/blob/22586153/contrib/views/hive20/src/main/resources/ui/app/routes/query.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/routes/query.js b/contrib/views/hive20/src/main/resources/ui/app/routes/query.js index 699b64c..9e22432 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/routes/query.js +++ b/contrib/views/hive20/src/main/resources/ui/app/routes/query.js @@ -64,7 +64,7 @@ export default Ember.Route.extend({ controller.set('isQueryRunning', false); controller.set('defaultQueryResult', {'schema' :[], 'rows' :[]}); controller.set('queryResult', controller.get('defaultQueryResult')); - controller.set('showPreviousButton', false); + controller.set('hidePreviousButton', true); //For Pagination localStorage.setItem("jobData", JSON.stringify([])); @@ -212,7 +212,7 @@ export default Ember.Route.extend({ console.log('getJob route', data ); self.get('controller').set('queryResult', data); self.get('controller').set('isQueryRunning', false); - self.get('controller').set('showPreviousButton', true); + self.get('controller').set('hidePreviousButton', false); let localArr = JSON.parse(localStorage.getItem("jobData")); localArr.push(data); @@ -248,7 +248,7 @@ export default Ember.Route.extend({ this.get('controller').set('prevPage', prevPage + 1 ); this.get('controller').set('nextPage', nextPage + 1); - this.get('controller').set('showPreviousButton', true); + this.get('controller').set('hidePreviousButton', false); this.get('controller').set('queryResult', JSON.parse(localStorage.getItem("jobData"))[this.get('controller').get('currentPage')] ); } else { @@ -257,6 +257,8 @@ export default Ember.Route.extend({ this.send('goNextPage'); } } + + }, goPrevPage(){ @@ -273,8 +275,31 @@ export default Ember.Route.extend({ this.get('controller').set('queryResult', JSON.parse(localStorage.getItem("jobData"))[this.get('controller').get('currentPage')] ); } else { //console.log('previous limit over'); - this.get('controller').set('showPreviousButton', false); + this.get('controller').set('hidePreviousButton', true); + } + }, + + expandQueryEdidorPanel(){ + Ember.$('.query-editor-panel').toggleClass('query-editor-full-width'); + Ember.$('.database-panel').toggleClass("hide"); + }, + + expandQueryResultPanel(){ + + Ember.$('.query-editor-panel').toggleClass('query-editor-full-width'); + Ember.$('.query-editor-container').toggleClass("hide"); + Ember.$('.database-panel').toggleClass("hide"); + this.send('adjustPanelSize'); + }, + + adjustPanelSize(){ + let isFullHeight = ($(window).height() ==(parseInt(Ember.$('.ember-light-table').css('height'), 10)) ) || false; + if(!isFullHeight){ + Ember.$('.ember-light-table').css('height', '100vh'); + }else { + Ember.$('.ember-light-table').css('height', '70vh'); } } + } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/22586153/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 812ae92..4d8fca4 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 @@ -279,16 +279,35 @@ pre { } } +.query-editor-panel{ + transition:width 0.50s; +} + .query-editor { border: 1px solid darken($database-search-background, 25%); margin-right: 0; } +.query-editor-full-width { + width: 100%; + padding-right: 0; + transition:width 0.50s; +} + .query-editor-controls { padding-top: 15px; padding-bottom: 15px; } +.query-editor-results { + padding-right: 15px; +} + +.query-result-table { + border-top: 1px solid darken($database-search-background, 25%); + padding-top:10px; +} + .database-panel{ .panel-heading { @@ -403,9 +422,14 @@ pre { } .ember-light-table { - width: 95%; + width: 100%; margin: 0 auto; - border-collapse: collapse + border-collapse: collapse; + height: 65vh; //This can be controlled from the hbs also. + } + + .full-vw-height{ + height: 100vh; } .ember-light-table .multi-select { http://git-wip-us.apache.org/repos/asf/ambari/blob/22586153/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 5001c99..376afe7 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 @@ -17,17 +17,16 @@ }} {{#if columns.length}} - <div class="clearfix" style="text-align: right"> - {{#if showPreviousButton}} - <button class="btn btn-success" {{action "goPrevPage" }}>{{fa-icon "arrow-left"}} </button> - {{/if}} - <button class="btn btn-success" {{action "goNextPage" }}>{{fa-icon "arrow-right"}} </button> + <div class="clearfix" style="text-align: right; padding-right:5px"> + <button class="btn btn-default" title="Previous Page" {{action "goPrevPage" }} disabled={{ hidePreviousButton}} >{{fa-icon "arrow-left"}} </button> + <button class="btn btn-default" title="Next Page" {{action "goNextPage" }}>{{fa-icon "arrow-right"}} </button> + <button class="btn btn-default" title="Expand/Collspse" {{action "expandQueryResultPanel" }}>{{fa-icon "expand"}}</button> </div> {{/if}} <div class="clearfix"> -{{#light-table table height='65vh' as |t|}} - {{#if columns.length}} + {{#light-table table height='70vh' as |t|}} + {{#if columns.length}} {{t.head onColumnClick=(action 'onColumnClick') iconAscending='fa fa-sort-asc' @@ -46,8 +45,8 @@ {{/body.loader}} {{/if}} {{/t.body}} - {{/if}} -{{/light-table}} + {{/if}} + {{/light-table}} </div> {{yield}} http://git-wip-us.apache.org/repos/asf/ambari/blob/22586153/contrib/views/hive20/src/main/resources/ui/app/templates/query.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/query.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/query.hbs index d24c7d0..69fc657 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/templates/query.hbs +++ b/contrib/views/hive20/src/main/resources/ui/app/templates/query.hbs @@ -18,17 +18,36 @@ {{multiple-database-search-bar databases=model selected=selected xyz="xyz" }} -<div class="clearfix"> - <div class="col-md-9"> - <div class="row query-editor"> +<div class="clearfix col-md-9 query-editor-panel"> + <div class="query-editor-container"> + <div class="row query-editor" style="position:relative"> + <span style="position: absolute;right: 5px;top: 5px;z-index: 9999;cursor: pointer;" {{action "expandQueryEdidorPanel" }} > + {{fa-icon "expand"}} + </span> {{query-editor query=currentQuery }} </div> <div class="row query-editor-controls"> <button class="btn btn-success" {{action "executeQuery" }}>{{fa-icon "check"}} Execute</button> + + {{#if isQueryRunning}} + <img src="http://www.bba-reman.com/images/fbloader.gif"; height="22" width="32" /> + {{/if}} + + </div> </div> - <div class="col-md-3"> + + <div class="clearfix row query-editor-results" style="position: relative"> + {{query-result-table queryResult=queryResult hidePreviousButton=hidePreviousButton goNextPage='goNextPage' goPrevPage='goPrevPage' expandQueryResultPanel='expandQueryResultPanel' }} + </div> + + +</div> + +<div class="col-md-3 database-panel"> + + <div class="database-container"> <div class="row"> <div class="panel-group database-panel" id="accordion" role="tablist" aria-multiselectable="true"> @@ -69,18 +88,10 @@ </div> </div> </div> -</div> - -<div class="clearfix query-editor-results"> - {{#if isQueryRunning}} - <div style="left:37%; position: relative;"> - <img src="http://www.bba-reman.com/images/fbloader.gif"; height="22" width="32" /> - </div> - {{/if}} - {{query-result-table queryResult=queryResult showPreviousButton=showPreviousButton goNextPage='goNextPage' goPrevPage='goPrevPage' }} </div> + {{#if databaseNotEmpty}} {{database-not-empty name=databaseName close="notEmptyDialogClosed"}} {{/if}}
![http://www.bba-reman.com/images/fbloader.gif"](http://www.bba-reman.com/images/fbloader.gif"){kind=link}