ambari-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From yus...@apache.org
Subject [2/2] ambari git commit: Vivek's changes
Date Tue, 07 Jul 2015 21:11:41 GMT
Vivek's changes


Project: http://git-wip-us.apache.org/repos/asf/ambari/repo
Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/7d059e7d
Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/7d059e7d
Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/7d059e7d

Branch: refs/heads/trunk
Commit: 7d059e7dc184b3828e1f5f5dc291a9b064dfa5cd
Parents: 26dcf89
Author: Vivek Ratnavel <vivekratnavel90@gmail.com>
Authored: Tue Jul 7 14:11:35 2015 -0700
Committer: Vivek Ratnavel <vivekratnavel90@gmail.com>
Committed: Tue Jul 7 14:11:35 2015 -0700

----------------------------------------------------------------------
 .../src/main/resources/ui/hive-web/.jshintrc    |    3 +-
 .../src/main/resources/ui/hive-web/Brocfile.js  |   12 +
 .../hive-web/app/components/draggable-view.js   |   34 +
 .../hive-web/app/components/droppable-view.js   |   53 +
 .../app/components/visualization-view.js        |  149 +
 .../ui/hive-web/app/controllers/query-tabs.js   |   10 +
 .../app/controllers/visualization-ui.js         |  109 +
 .../ui/hive-web/app/initializers/i18n.js        |    4 +-
 .../ui/hive-web/app/mixins/draggable.js         |   26 +
 .../ui/hive-web/app/mixins/droppable.js         |   25 +
 .../hive-web/app/mixins/jquery-drag-widget.js   |  109 +
 .../hive-web/app/mixins/jquery-drop-widget.js   |  111 +
 .../ui/hive-web/app/mixins/jquery-ui.js         |  110 +
 .../resources/ui/hive-web/app/styles/app.scss   |    1 +
 .../resources/ui/hive-web/app/styles/vars.scss  |    4 +
 .../hive-web/app/styles/visualization-view.scss |  103 +
 .../app/templates/components/draggable-view.hbs |   19 +
 .../app/templates/components/droppable-view.hbs |   19 +
 .../templates/components/visualization-view.hbs |   39 +
 .../hive-web/app/templates/visualization-ui.hbs |   56 +
 .../ui/hive-web/app/views/visualization-ui.js   |   37 +
 .../src/main/resources/ui/hive-web/bower.json   |    5 +-
 .../resources/ui/hive-web/vendor/vega-lite.js   | 6177 ++++++++++++++++++
 23 files changed, 7212 insertions(+), 3 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc b/contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc
index c1fe863..0195538 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc
@@ -2,7 +2,8 @@
   "predef": [
     "document",
     "window",
-    "-Promise"
+    "-Promise",
+    "d3"
   ],
   "browser" : true,
   "boss" : true,

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/Brocfile.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/Brocfile.js b/contrib/views/hive/src/main/resources/ui/hive-web/Brocfile.js
index 318d1f8..223a581 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/Brocfile.js
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/Brocfile.js
@@ -51,4 +51,16 @@ app.import('vendor/codemirror/codemirror.css');
 app.import('vendor/codemirror/show-hint.css');
 app.import('vendor/dagre.min.js');
 
+app.import('bower_components/d3/d3.js');
+app.import('bower_components/vega/vega.js');
+//app.import('bower_components/vega-lite/vega-lite.js');
+app.import('vendor/vega-lite.js');
+app.import('bower_components/eventEmitter/eventEmitter.js');
+app.import('bower_components/get-size/get-size.js');
+app.import('bower_components/eventie/eventie.js');
+app.import('bower_components/unipointer/unipointer.js');
+app.import('bower_components/unidragger/unidragger.js');
+app.import('bower_components/classie/classie.js');
+app.import('bower_components/get-style-property/get-style-property.js');
+app.import('bower_components/draggabilly/draggabilly.js');
 module.exports = app.toTree();

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/components/draggable-view.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/components/draggable-view.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/draggable-view.js
new file mode 100644
index 0000000..d98d722
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/draggable-view.js
@@ -0,0 +1,34 @@
+/**
+ * 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 draggable from 'hive/mixins/draggable';
+
+export default Ember.Component.extend(draggable, {
+
+  classNames: ['btn', 'btn-custom', 'btn-sm', 'column-drag'],
+  helper_drag: 'clone',
+  revert_drag: 'invalid',
+
+  drag_drag : function(event, ui) {
+    console.log(this.get('name') + "dragged");
+  },
+  create_drag: function(event, ui) {
+    this.$().attr("data-name", this.get('name'));
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/components/droppable-view.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/components/droppable-view.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/droppable-view.js
new file mode 100644
index 0000000..2bbcc8a
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/droppable-view.js
@@ -0,0 +1,53 @@
+/**
+ * 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 droppable from 'hive/mixins/droppable';
+
+export default Ember.Component.extend(droppable, {
+  classNames: ['drop-target'],
+  activeClass_drop: 'active',
+  hoverClass_drop: 'ui-state-hover',
+  self: this,
+
+  drop_drop: function(event, ui) {
+    var draggable_name = this.$(ui.draggable).attr('data-name');
+    console.log(draggable_name + " dropped");
+    console.log(ui);
+    console.log(this.$(ui.draggable).first());
+    this.$().html("");
+    this.$().addClass("disabled");
+    //this.$().append( this.$(ui.draggable).first().clone() );
+    var field_name =
+    this.$("<div/>")
+      .addClass( "pull-left btn-text truncate" )
+      .html(draggable_name);
+    var remove_field =
+    this.$("<div/>")
+      .addClass("pull-right no-padding close-container")
+      .html("<i class='fa fa-close field-remove pull-right'></i>");
+    this.$("<div/>")
+      .append(field_name)
+      .append(remove_field)
+      .css("padding", "3px 10px")
+      .appendTo( this.$() );
+
+    this.set('disabled_drop', true);
+  },
+
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/components/visualization-view.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/components/visualization-view.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/visualization-view.js
new file mode 100644
index 0000000..d9652ae
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/components/visualization-view.js
@@ -0,0 +1,149 @@
+/**
+ * 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({
+  tagName: 'visualization-view',
+
+  initDragAndDrop: function() {
+    /*Ember.run.later(function(){
+      self.$('.column-drag').draggable({
+        helper: "clone",
+        revert: "invalid"
+      });
+      self.$(".droppable.active").droppable({
+        activeClass: "ui-state-default",
+        hoverClass: "ui-state-hover",
+        drop: function( event, ui ) {
+          self.$( this )
+            .addClass( "ui-state-highlight").html("Dropped");
+          console.log(event);
+          console.log(ui);
+
+        }
+      });
+    });*/
+  }.observes('json'),
+
+  testing: function () {
+    var self = this;
+
+    var draggable = this.$('.column-drag').draggabilly({});
+    draggable.on( 'dragEnd', function( event, pointer ) {
+      console.log("Drag ended");
+    });
+  },
+
+  initVisualization: function () {
+    var vled = {
+      version: 0.1,
+      spec: {}
+    };
+    var self = this;
+    vled.data = {
+      values: [
+        {"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
+        {"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
+        {"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
+      ]
+      };
+    vled.format = function() {
+      var el = d3.select('#vlspec'),
+        spec = JSON.parse(el.property('value')),
+        text = JSON.stringify(spec, null, '  ', 60);
+      el.property('value', text);
+    };
+
+    vled.parse = function() {
+      var spec;
+      try {
+        spec = JSON.parse(d3.select('#vlspec').property('value'));
+      } catch (e) {
+        console.warn(e);
+        return;
+      }
+      var done = function() {
+        // only add url if data is not provided explicitly
+        var theme = (spec.data && spec.data.values) ? {} : {
+          data: {
+            "values": vled.data.values
+          }
+        };
+        vled.data.stats = vl.summary(vled.data.values).reduce(function(s, p) {
+          s[p.field] = p;
+          return s;
+        },{});
+        vled.loadSpec(spec, theme);
+      };
+
+      done();
+    };
+
+
+    vled.loadSpec = function(vlspec, theme) {
+
+      var spec = vl.compile(vlspec, vled.data.stats, theme);
+
+      self.$('textarea').trigger('autosize.resize');
+
+      vled.vis = null; // DEBUG
+      console.log("Inside loadSpec");
+      console.log(spec);
+      console.log(theme);
+      vg.parse.spec(spec, function(chart) {
+        vled.vis = chart({el:'#vis', renderer: 'svg'});
+        console.log("Inside Vega Parse");
+        vled.vis.update();
+        vled.vis.on('mouseover', function(ev, item) {
+          console.log(item);
+        });
+      });
+    };
+
+
+    vled.init = function() {
+
+      // Initialize application
+      d3.select('#btn_spec_parse').on('click', vled.parse);
+
+      console.log("Inside init()");
+      document.getElementById('vlspec').value = JSON.stringify({
+        "data": {
+          "values": [
+            {"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
+            {"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
+            {"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
+          ]
+        },
+        "marktype": "bar",
+        "encoding": {
+          "y": {"type": "Q","name": "y"},
+          "x": {"type": "O","name": "x"}
+        }
+      });
+
+      vled.parse();
+      vled.format();
+    };
+
+    vled.init();
+    this.set('vled', vled);
+    //this.testing();
+  }.on('didInsertElement'),
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/query-tabs.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/query-tabs.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/query-tabs.js
index 4f5176c..24fe5f8 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/query-tabs.js
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/query-tabs.js
@@ -70,6 +70,16 @@ export default Ember.Controller.extend({
       badgeProperty: 'count',
       onTabOpen: 'markMessagesAsSeen',
       tooltip: Ember.I18n.t('tooltips.notifications')
+    }),
+    Ember.Object.create({
+      iconClass: 'fa-area-chart',
+      id: 'visualization-icon',
+      action: 'toggleOverlay',
+      tooltip: Ember.I18n.t('tooltips.visualization'),
+      into: 'index',
+      outlet: 'overlay',
+      template: 'visualization-ui',
+      onTabOpen: 'onTabOpen'
     })
   ],
 

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/visualization-ui.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/visualization-ui.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/visualization-ui.js
new file mode 100644
index 0000000..2810df7
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/controllers/visualization-ui.js
@@ -0,0 +1,109 @@
+/**
+* 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 constants from 'hive/utils/constants';
+
+export default Ember.Controller.extend({
+
+  needs: [ constants.namingConventions.index,
+            constants.namingConventions.openQueries,
+            constants.namingConventions.jobResults
+          ],
+  index         : Ember.computed.alias('controllers.' + constants.namingConventions.index),
+  openQueries   : Ember.computed.alias('controllers.' + constants.namingConventions.openQueries),
+  results   : Ember.computed.alias('controllers.' + constants.namingConventions.jobResults),
+  jsonResults: 'Empty',
+  cachedObjects: [],
+  queryId: function () {
+      return this.get('index.model.queryId');
+  }.property('index.model.queryId'),
+  forcedContent: function () {
+    return this.get('index.model.forcedContent');
+  }.property('index.model.forcedContent'),
+  test: '',
+
+  actions: {
+    onTabOpen: function () {
+      var self = this;
+      this.set('test', 'Hello Query id: ' + this.get('queryId') + ' Query: ' + this.get('forcedContent'));
+      var tab;
+      var model = this.get('index.model');
+
+      if (model) {
+        console.log("Model present");
+        var oq = this.get('openQueries');
+
+        tab = oq.getTabForModel(model);
+
+        if (tab) {
+          console.log("Tab present");
+          this.set('test', 'Tab id: ' + tab.id + ' Tab type: ' + tab.type);
+        }
+        var query = oq.getQueryForModel(model);
+        query = this.get('index').buildQuery(query, false, false);
+        console.log("Query: " + query);
+        console.log("Title: " + model.get('title'));
+        console.log("Query: " + model.get('forcedContent'));
+        console.log("Model id: " + model.get('id'));
+        console.log("Status: " + model.status);
+        console.log("Model");
+        console.log(model);
+        console.log('Result Object: ');
+        console.log(this.get('results'));
+        console.log("Cached Results: ");
+        console.log(this.get('results').get('cachedResults'));
+        console.log("Formatted Results: ");
+        console.log(this.get('results').get('formattedResults'));
+
+        var existingJob = this.get('results').get('cachedResults').findBy('id', model.get('id'));
+        var url = this.container.lookup('adapter:application').buildURL();
+        url += '/' + constants.namingConventions.jobs + '/' + model.get('id') + '/results?first=true&count=1000';
+
+        if (existingJob) {
+          console.log("Job exists");
+          Ember.$.getJSON(url).then(function (results) {
+
+            var columns = results.schema;
+            var rows = results.rows;
+
+            if (!columns || !rows) {
+              return;
+            }
+
+            columns = columns.map(function (column) {
+              return {
+                name: column[0],
+                type: column[1],
+                index: column[2] - 1 //normalize index to 0 based
+              };
+            });
+
+            self.set('jsonResults', {columns: columns, rows: rows.slice(0,10)});
+
+          }, function (err) {
+            self.set('error', err.responseText);
+          });
+        } else {
+          this.set("error", "No visualization available. Please execute a query to visualize data.");
+        }
+      }
+    }
+  }
+
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/initializers/i18n.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/initializers/i18n.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/initializers/i18n.js
index af5e3a7..67158ec 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/app/initializers/i18n.js
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/initializers/i18n.js
@@ -38,6 +38,7 @@ TRANSLATIONS = {
     settings: 'Settings',
     visualExplain: 'Visual Explain',
     tez: 'Tez',
+    visualization: 'Visualization',
     notifications: 'Notifications',
     expand: 'Expand query panel',
     makeSettingGlobal: 'Make setting global',
@@ -113,7 +114,8 @@ TRANSLATIONS = {
       visualExplain: 'Visual Explain',
       tez: 'TEZ',
       status: 'Status: ',
-      messages: 'Messages'
+      messages: 'Messages',
+      visualization: 'Visualization'
     },
     download: 'Save results...',
     tableSample: '{{tableName}} sample'

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/draggable.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/draggable.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/draggable.js
new file mode 100644
index 0000000..8509c5b
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/draggable.js
@@ -0,0 +1,26 @@
+/**
+ * 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 dragWidget from 'hive/mixins/jquery-drag-widget'
+
+export default Ember.Mixin.create(dragWidget, {
+  uiDragOptions: ['disabled_drag', 'addClasses_drag', 'appendTo_drag', 'axis_drag', 'cancel_drag', 'connectToSortable_drag', 'containment_drag', 'cursor_drag',
+    'delay_drag', 'distance_drag', 'grid_drag', 'handle_drag', 'helper_drag', 'iframeFix_drag', 'opacity_drag', 'revert_drag', 'scope_drag', 'snap_drag', 'snapMode_drag', 'stack_drag'],
+  uiDragEvents: ['create_drag', 'start_drag', 'drag_drag', 'stop_drag'],
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/droppable.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/droppable.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/droppable.js
new file mode 100644
index 0000000..8e0b480
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/droppable.js
@@ -0,0 +1,25 @@
+/**
+ * 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 dropWidget from 'hive/mixins/jquery-drop-widget'
+
+export default Ember.Mixin.create(dropWidget, {
+  uiDropOptions: ['accept_drop', 'activeClass_drop', 'addClasses_drop', 'disabled_drop', 'greedy_drop', 'hoverClass_drop', 'scope_drop', 'tolerance_drop'],
+  uiDropEvents: ['create_drop', 'activate_drop', 'deactivate_drop', 'over_drop', 'out_drop', 'drop_drop'],
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drag-widget.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drag-widget.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drag-widget.js
new file mode 100644
index 0000000..3f58fe9
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drag-widget.js
@@ -0,0 +1,109 @@
+/**
+ * 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.Mixin.create({
+
+  didInsertElement: function () {
+    this._super();
+    // Make jQuery UI options available as Ember properties
+    var options = this._gatherDragOptions();
+
+    // Make sure that jQuery UI events trigger methods on this view.
+    this._gatherDragEvents(options);
+
+    // Create a new instance of the jQuery UI widget based on its `uiType`
+    // and the current element.
+    var ui = jQuery.ui['draggable'](options, this.get('element'));
+
+    // Save off the instance of the jQuery UI widget as the `ui` property
+    // on this Ember view.
+    this.set('ui', ui);
+  },
+
+  willDestroyElement: function () {
+    var ui = this.get('ui');
+
+    if (ui) {
+      // Tear down any observers that were created to make jQuery UI
+      // options available as Ember properties.
+      var observers = this._observers;
+      for (var prop in observers) {
+        if (observers.hasOwnProperty(prop)) {
+          this.removeObserver(prop, observers[prop]);
+        }
+      }
+      ui._destroy();
+    }
+  },
+
+  // Each jQuery UI widget has a series of options that can be configured.
+  // For instance, to disable a button, you call
+  // `button.options('disabled', true)` in jQuery UI. To make this compatible
+  // with Ember bindings, any time the Ember property for a
+  // given jQuery UI option changes, we update the jQuery UI widget.
+  _gatherDragOptions: function () {
+    var uiDragOptions = this.get('uiDragOptions'), options = {};
+
+    // The view can specify a list of jQuery UI options that should be treated
+    // as Ember properties.
+    uiDragOptions.forEach(function (key) {
+      options[key.split('_')[0]] = this.get(key);
+
+      // Set up an observer on the Ember property. When it changes,
+      // call jQuery UI's `setOption` method to reflect the property onto
+      // the jQuery UI widget.
+      var observer = function () {
+        var value = this.get(key);
+        this.get('ui')._setOption(key.split('_')[0], value);
+      };
+
+      this.addObserver(key, observer);
+
+      // Insert the observer in a Hash so we can remove it later.
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  // Each jQuery UI widget has a number of custom events that they can
+  // trigger. For instance, the progressbar widget triggers a `complete`
+  // event when the progress bar finishes. Make these events behave like
+  // normal Ember events. For instance, a subclass of JQ.ProgressBar
+  // could implement the `complete` method to be notified when the jQuery
+  // UI widget triggered the event.
+  _gatherDragEvents: function (options) {
+    var uiDragEvents = this.get('uiDragEvents') || [], self = this;
+    console.log(uiDragEvents);
+    uiDragEvents.forEach(function (event) {
+      var callback = self[event];
+
+      if (callback) {
+        // You can register a handler for a jQuery UI event by passing
+        // it in along with the creation options. Update the options hash
+        // to include any event callbacks.
+        options[event.split('_')[0]] = function (event, ui) {
+          callback.call(self, event, ui);
+        };
+      }
+    });
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drop-widget.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drop-widget.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drop-widget.js
new file mode 100644
index 0000000..e00df94
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-drop-widget.js
@@ -0,0 +1,111 @@
+/**
+ * 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.Mixin.create({
+
+  didInsertElement: function () {
+    this._super();
+    // Make jQuery UI options available as Ember properties
+    var options = this._gatherDropOptions();
+
+    // Make sure that jQuery UI events trigger methods on this view.
+    this._gatherDropEvents(options);
+
+    // Create a new instance of the jQuery UI widget based on its `uiType`
+    // and the current element.
+    var ui = jQuery.ui['droppable'](options, this.get('element'));
+    //var ui = jQuery(this.get('element'))['droppable']();
+
+    // Save off the instance of the jQuery UI widget as the `ui` property
+    // on this Ember view.
+    this.set('ui', ui);
+  },
+
+  willDestroyElement: function () {
+    var ui = this.get('ui');
+
+    if (ui) {
+      // Tear down any observers that were created to make jQuery UI
+      // options available as Ember properties.
+      var observers = this._observers;
+      for (var prop in observers) {
+        if (observers.hasOwnProperty(prop)) {
+          this.removeObserver(prop, observers[prop]);
+        }
+      }
+      ui._destroy();
+    }
+  },
+
+  // Each jQuery UI widget has a series of options that can be configured.
+  // For instance, to disable a button, you call
+  // `button.options('disabled', true)` in jQuery UI. To make this compatible
+  // with Ember bindings, any time the Ember property for a
+  // given jQuery UI option changes, we update the jQuery UI widget.
+  _gatherDropOptions: function () {
+    var uiDropOptions = this.get('uiDropOptions'), options = {};
+
+    // The view can specify a list of jQuery UI options that should be treated
+    // as Ember properties.
+    uiDropOptions.forEach(function (key) {
+      options[key.split('_')[0]] = this.get(key);
+
+      // Set up an observer on the Ember property. When it changes,
+      // call jQuery UI's `setOption` method to reflect the property onto
+      // the jQuery UI widget.
+      var observer = function () {
+        var value = this.get(key);
+        this.get('ui')._setOption(key.split('_')[0], value);
+      };
+
+      this.addObserver(key, observer);
+
+      // Insert the observer in a Hash so we can remove it later.
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  // Each jQuery UI widget has a number of custom events that they can
+  // trigger. For instance, the progressbar widget triggers a `complete`
+  // event when the progress bar finishes. Make these events behave like
+  // normal Ember events. For instance, a subclass of JQ.ProgressBar
+  // could implement the `complete` method to be notified when the jQuery
+  // UI widget triggered the event.
+  _gatherDropEvents: function (options) {
+    var uiDropEvents = this.get('uiDropEvents') || [], self = this;
+    console.log(uiDropEvents);
+    uiDropEvents.forEach(function (event) {
+      var callback = self[event];
+
+      if (callback) {
+        // You can register a handler for a jQuery UI event by passing
+        // it in along with the creation options. Update the options hash
+        // to include any event callbacks.
+        options[event.split('_')[0]] = function (event, ui) {
+          callback.call(self, event, ui);
+        };
+      }
+    });
+  }
+});
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-ui.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-ui.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-ui.js
new file mode 100644
index 0000000..2712f8c
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/mixins/jquery-ui.js
@@ -0,0 +1,110 @@
+/**
+ * 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.Mixin.create({
+
+  didInsertElement: function () {
+    // Make jQuery UI options available as Ember properties
+    var options = this._gatherOptions();
+
+    // Make sure that jQuery UI events trigger methods on this view.
+    this._gatherEvents(options);
+
+    // Create a new instance of the jQuery UI widget based on its `uiType`
+    // and the current element.
+    var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
+
+    // Save off the instance of the jQuery UI widget as the `ui` property
+    // on this Ember view.
+    this.set('ui', ui);
+  },
+
+  willDestroyElement: function () {
+    var ui = this.get('ui');
+
+    if (ui) {
+      // Tear down any observers that were created to make jQuery UI
+      // options available as Ember properties.
+      var observers = this._observers;
+      for (var prop in observers) {
+        if (observers.hasOwnProperty(prop)) {
+          this.removeObserver(prop, observers[prop]);
+        }
+      }
+      ui._destroy();
+    }
+  },
+
+  // Each jQuery UI widget has a series of options that can be configured.
+  // For instance, to disable a button, you call
+  // `button.options('disabled', true)` in jQuery UI. To make this compatible
+  // with Ember bindings, any time the Ember property for a
+  // given jQuery UI option changes, we update the jQuery UI widget.
+  _gatherOptions: function () {
+    var uiOptions = this.get('uiOptions'), options = {};
+
+    // The view can specify a list of jQuery UI options that should be treated
+    // as Ember properties.
+    uiOptions.forEach(function (key) {
+      options[key] = this.get(key);
+
+      // Set up an observer on the Ember property. When it changes,
+      // call jQuery UI's `setOption` method to reflect the property onto
+      // the jQuery UI widget.
+      var observer = function () {
+        var value = this.get(key);
+        this.get('ui')._setOption(key, value);
+      };
+
+      this.addObserver(key, observer);
+
+      // Insert the observer in a Hash so we can remove it later.
+      this._observers = this._observers || {};
+      this._observers[key] = observer;
+    }, this);
+
+    return options;
+  },
+
+  // Each jQuery UI widget has a number of custom events that they can
+  // trigger. For instance, the progressbar widget triggers a `complete`
+  // event when the progress bar finishes. Make these events behave like
+  // normal Ember events. For instance, a subclass of JQ.ProgressBar
+  // could implement the `complete` method to be notified when the jQuery
+  // UI widget triggered the event.
+  _gatherEvents: function (options) {
+    var uiEvents = this.get('uiEvents') || [], self = this;
+    console.log(uiEvents);
+    uiEvents.forEach(function (event) {
+      var callback = self[event];
+
+      if (callback) {
+        // You can register a handler for a jQuery UI event by passing
+        // it in along with the creation options. Update the options hash
+        // to include any event callbacks.
+        options[event] = function (event, ui) {
+          callback.call(self, event, ui);
+        };
+      }
+    });
+  }
+});
+
+

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/app.scss
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/app.scss b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/app.scss
index 6507d6b..2f31e6f 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/app.scss
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/app.scss
@@ -21,6 +21,7 @@
 @import 'mixins';
 @import 'notifications';
 @import 'query-tabs';
+@import 'visualization-view';
 
 a {
   word-wrap: break-word;

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/vars.scss
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/vars.scss b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/vars.scss
index 184ac9d..ae97c50 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/vars.scss
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/vars.scss
@@ -19,3 +19,7 @@
 $panel-background: #f5f5f5;
 $placeholder-color: #aaa;
 $border-color: #ddd;
+$btn-custom-background: #F2F2F2;
+$btn-custom-color: #333;
+$green-border: #4EB350;
+$unica-one: #5E9FA3;

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/visualization-view.scss
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/visualization-view.scss b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/visualization-view.scss
new file mode 100644
index 0000000..63e1918
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/styles/visualization-view.scss
@@ -0,0 +1,103 @@
+/**
+* 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.
+*/
+
+.column-drag {
+  width: 180px;
+  margin: 3px 8px;
+  cursor: move !important;
+}
+
+#columns-container {
+  width: 200px;
+}
+
+.btn-custom {
+  color: $btn-custom-color;
+  border-color: $border-color;
+  background-color: $btn-custom-background;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: left;
+}
+
+.drop-target {
+  display: inline-block;
+  float: left;
+  margin: -5px 10px;
+  width: 200px;
+  height: 30px;
+  color: #DDDDDD;
+  border-radius: 5px;
+  border: 1px dashed $border-color;
+}
+
+.drop-target.active {
+  border: 2px dashed $green-border;
+  background-color: #B2D3B2;
+  color: #343434;
+}
+
+.drop-target.disabled {
+  background-color: $btn-custom-background;
+}
+
+.inline-block {
+  display: inline-block;
+  float: left;
+}
+
+.droppable-text {
+  margin: 4px 10px;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.field-remove {
+  color: #808080;
+  margin-top: 2px;
+  &:hover {
+    color: #564C4C;
+    //font-size: 1.1em;
+  }
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.no-margin {
+  margin: 0px !important;
+}
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+}
+
+.btn-text {
+  color: $btn-custom-color;
+  width: 91.66%;
+}
+
+.close-container {
+  width: 8.34%;
+}

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/draggable-view.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/draggable-view.hbs b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/draggable-view.hbs
new file mode 100644
index 0000000..06b7be0
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/draggable-view.hbs
@@ -0,0 +1,19 @@
+{{!
+* 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.
+}}
+
+{{name}}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/droppable-view.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/droppable-view.hbs b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/droppable-view.hbs
new file mode 100644
index 0000000..b212cbd
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/droppable-view.hbs
@@ -0,0 +1,19 @@
+{{!
+* 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="droppable-text">Drag & drop a column...</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/visualization-view.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/visualization-view.hbs b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/visualization-view.hbs
new file mode 100644
index 0000000..be620d8
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/components/visualization-view.hbs
@@ -0,0 +1,39 @@
+{{!
+* 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 id="visualization_container">
+    <div class="panel panel-info">
+        <div class="panel-body">
+            <div style="clear:both;">
+              <div class="inline-block" style="margin-right:10px;"><strong>Positional</strong></div>
+                <div class="inline-block"> X: </div> {{droppable-view}}
+                <div class="inline-block"> Y: </div> {{droppable-view}}
+                <div class="inline-block"> Col: </div> {{droppable-view}}
+                <div class="inline-block"> Row: </div> {{droppable-view}}
+              <div style="clear:both;"></div>
+            </div>
+        </div>
+    </div>
+    <div id="columns-container">
+      {{yield}}
+    </div>
+  {{textarea id="vlspec" rows="15" cols="20"}}
+    <br/><button type="button" class="btn btn-success" id="btn_spec_parse">Parse</button>
+    <br/><br/>
+    <div id="vis"></div>
+</div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/visualization-ui.hbs
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/visualization-ui.hbs b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/visualization-ui.hbs
new file mode 100644
index 0000000..ddd716a
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/templates/visualization-ui.hbs
@@ -0,0 +1,56 @@
+{{!
+* 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 id="visualization" class="index-overlay">
+  {{#panel-widget headingTranslation="titles.query.visualization"}}
+    {{#if error}}
+      <div class="alert alert-danger" role="alert"><strong>{{error}}</strong></div>
+    {{else}}
+      <div>
+          <h3>Visualization</h3>
+          {{#visualization-view json=jsonResults}}
+            {{#each column in jsonResults.columns}}
+              {{draggable-view name=column.name}}
+            {{/each}}
+          {{/visualization-view}}
+      </div>
+      <div><h3>JSON Result: </h3><br/>
+        <div id="query-results">
+          <table class="table table-expandable">
+              <thead>
+              <tr>
+                {{#each column in jsonResults.columns}}
+                    <th> {{column.name}} </th>
+                {{/each}}
+              </tr>
+              </thead>
+              <tbody>
+              {{#each row in jsonResults.rows}}
+                  <tr>
+                    {{#each item in row}}
+                        <td>{{item}}</td>
+                    {{/each}}
+                  </tr>
+              {{/each}}
+              </tbody>
+          </table>
+        </div>
+      </div>
+    {{/if}}
+  {{/panel-widget}}
+</div>

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/app/views/visualization-ui.js
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/app/views/visualization-ui.js b/contrib/views/hive/src/main/resources/ui/hive-web/app/views/visualization-ui.js
new file mode 100644
index 0000000..b1c10df
--- /dev/null
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/app/views/visualization-ui.js
@@ -0,0 +1,37 @@
+/**
+ * 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.View.extend({
+  didInsertElement: function () {
+    var target = this.$('#visualization');
+    var panel = this.$('#visualization .panel-body').first();
+
+    panel.css('min-height', $('.main-content').height());
+    target.animate({ width: $('.main-content').width() }, 'fast');
+  },
+
+  willDestroyElement: function () {
+    var target = this.$('#visualization');
+    var panel = this.$('#visualization .panel-body');
+
+    panel.css('min-height', 0);
+    target.css('width', 0);
+  }
+});

http://git-wip-us.apache.org/repos/asf/ambari/blob/7d059e7d/contrib/views/hive/src/main/resources/ui/hive-web/bower.json
----------------------------------------------------------------------
diff --git a/contrib/views/hive/src/main/resources/ui/hive-web/bower.json b/contrib/views/hive/src/main/resources/ui/hive-web/bower.json
index 37ea901..c0454d6 100644
--- a/contrib/views/hive/src/main/resources/ui/hive-web/bower.json
+++ b/contrib/views/hive/src/main/resources/ui/hive-web/bower.json
@@ -17,7 +17,10 @@
     "blanket": "~1.1.5",
     "jquery-ui": "~1.11.2",
     "selectize": "~0.12.0",
-    "pretender": "0.1.0"
+    "pretender": "0.1.0",
+    "vega": "~1.5.0",
+    "vega-lite": "https://github.com/vivekratnavel/vega-lite.git",
+    "draggabilly": "~1.2.4"
   },
   "resolutions": {
     "ember": "1.10.0"


Mime
View raw message