AMBARI-19975. Hive2. Visual Explain -Show additional info when you click on a box, i.e. can drill down to get more info on operators. (pallavkul)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/1d1253a6 Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/1d1253a6 Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/1d1253a6 Branch: refs/heads/branch-feature-AMBARI-12556 Commit: 1d1253a6471113a78dd22faf453439ab13a19e48 Parents: 2364295 Author: pallavkul <[email protected]> Authored: Sat Feb 11 17:06:43 2017 +0530 Committer: pallavkul <[email protected]> Committed: Sat Feb 11 17:06:43 2017 +0530 ---------------------------------------------------------------------- .../ui/app/components/visual-explain-detail.js | 31 +++++++++++++ .../ui/app/components/visual-explain.js | 26 ++++++++++- .../resources/ui/app/routes/queries/query.js | 13 ++++-- .../src/main/resources/ui/app/styles/app.scss | 49 ++++++++++++++++++++ .../components/visual-explain-detail.hbs | 29 ++++++++++++ .../app/templates/components/visual-explain.hbs | 5 ++ 6 files changed, 148 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain-detail.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain-detail.js b/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain-detail.js new file mode 100644 index 0000000..2c9ba00 --- /dev/null +++ b/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain-detail.js @@ -0,0 +1,31 @@ +/** + * 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 default Ember.Component.extend({ + + classNames:['visual-explain-detail-container'], + + actions:{ + closeModal(){ + this.sendAction('closeModal'); + } + } + +}); http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain.js ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain.js b/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain.js index 6551974..6805bb8 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain.js +++ b/contrib/views/hive20/src/main/resources/ui/app/components/visual-explain.js @@ -20,8 +20,13 @@ import Ember from 'ember'; import explain from '../utils/hive-explainer'; export default Ember.Component.extend({ + visualExplainJson:'', + showDetailsModal: false, + + explainDetailData: '', + visualExplainInput: Ember.computed('visualExplainJson', function () { return this.get('visualExplainJson'); }), @@ -39,6 +44,7 @@ export default Ember.Component.extend({ .attr('height', height); const container = svg.append('g'); + const zoom = d3.zoom() .scaleExtent([1 / 10, 4]) @@ -49,16 +55,34 @@ export default Ember.Component.extend({ svg .call(zoom); - const onRequestDetail = data => this.sendAction('showStepDetail', data); + const onRequestDetail = data => this.set('explainDetailData', JSON.stringify( data, null, ' ') ); explain(JSON.parse(this.get('visualExplainInput')), svg, container, zoom, onRequestDetail); }, + click(event){ + + if(this.get('explainDetailData') === ''){ + return; + } + + Ember.run.later(() => { + this.set('showDetailsModal', true); + }, 100); + }, + actions:{ expandQueryResultPanel(){ this.sendAction('expandQueryResultPanel'); + }, + + closeModal(){ + this.set('showDetailsModal', false); + this.set('explainDetailData', ''); + false; } + } }); http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/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 4f60229..72682f5 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 @@ -221,11 +221,8 @@ export default Ember.Route.extend({ .then((status) => { self.get('controller').set('isJobSuccess', true); - self.send('getJob', data); - if(isVisualExplainQuery){ - self.send('showVisualExplain'); - } + self.send('getJob', data); //Last log self.send('fetchLogs'); @@ -290,6 +287,8 @@ export default Ember.Route.extend({ var self = this; var data = data; + let isVisualExplainQuery = this.get('controller').get('isVisualExplainQuery'); + let jobId = data.job.id; let dateSubmitted = data.job.dateSubmitted; @@ -312,6 +311,12 @@ export default Ember.Route.extend({ self.get('controller.model').set('previousPage', previousPage + 1 ); self.get('controller.model').set('nextPage', nextPage + 1); + if(isVisualExplainQuery){ + Ember.run.later(() => { + self.send('showVisualExplain'); + }, 500); + } + }, function(reason) { // on rejection console.log('reason' , reason); http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/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 1dc86d7..6469b2e 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 @@ -318,6 +318,7 @@ pre { .query-editor-results { padding-right: 15px; + position: relative; } .query-result-table { @@ -980,3 +981,51 @@ ul.dropdown-menu { .break-word{ word-break: break-all; } + +.visual-explain-detail-container { + width: 500px; + position: absolute; + top: 50px; + right: 0; + background-color: #FFF; + max-height: 70vh; + overflow-y: auto; +} + +.visual-explain-detail{ + border: 1px solid #DDD; + .close{ + margin: 10px 15px; + z-index: 9999; + } + + .header{ + border-bottom: 1px solid #DDD; padding: 10px 0; + .icon{ + padding:10px; + } + .join-type { + font-size: 20px; font-weight: bold + } + } + + .vector-info{ + border: 1px solid #DDD; padding:20px; background-color:#ED6265; color:#FFF; font-weight: bold; margin: 10px 0; + } + .block{ + border: 1px solid #DDD; padding:20px; margin: 10px 0; + + .block-header{ + font-size: 20px; font-weight: bold; + } + .block-body{ + padding: 10px 0; + } + + .divider{ + height: 1px; border-top:1px solid #DDD; margin: 10px 0; + } + } + +} + http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain-detail.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain-detail.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain-detail.hbs new file mode 100644 index 0000000..3df8e94 --- /dev/null +++ b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain-detail.hbs @@ -0,0 +1,29 @@ +{{! +* 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 class="clearfix visual-explain-detail"> + <div class="pull-right close"> <a href="javascript:void(0)" {{action "closeModal"}}>{{fa-icon "close"}}</a></div> + <div class="clearfix header" > + </div> + <div class="col-md-12"> + <div> </div> + <pre class="prettyprint">{{explainDetailData}}</pre> + </div> +</div> + +{{yield}} http://git-wip-us.apache.org/repos/asf/ambari/blob/1d1253a6/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs ---------------------------------------------------------------------- diff --git a/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs index 4238d43..e0ceaa2 100644 --- a/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs +++ b/contrib/views/hive20/src/main/resources/ui/app/templates/components/visual-explain.hbs @@ -34,4 +34,9 @@ <div id="explain-container" ></div> {{/unless}} +{{#if showDetailsModal}} + {{visual-explain-detail closeModal='closeModal' explainDetailData=explainDetailData}} +{{/if}} + + {{yield}}
