Vivek's changes

contrib/views/hive/src/main/resources/ui/hive-web/.jshintrc

@@ -2,7 +2,8 @@
   "predef": [
     "document",
     "window",
-    "-Promise"
+    "-Promise",
+    "d3"
   ],
   "browser" : true,
   "boss" : true,

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();

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'));
+  }
+});

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);
+  },
+
+});

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'),
+});

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'
     })
   ],
 

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.");
+        }
+      }
+    }
+  }
+
+});