You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ambari.apache.org by nc...@apache.org on 2017/02/13 21:03:49 UTC
[15/50] [abbrv] ambari git commit: 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)
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-dev-patch-upgrade
Commit: 1d1253a6471113a78dd22faf453439ab13a19e48
Parents: 2364295
Author: pallavkul <pa...@gmail.com>
Authored: Sat Feb 11 17:06:43 2017 +0530
Committer: pallavkul <pa...@gmail.com>
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}}