TEZ-4329. Import external tez component em-table (#146)

Co-authored-by: Sreenath Somarajapuram <[email protected]>
(cherry picked from commit 0ccf440)

tez-ui/src/main/resources/META-INF/LICENSE.txt

@@ -232,7 +232,6 @@ The Apache TEZ tez-ui bundles the following files under the MIT License:
  - more-js v0.8.2 (https://github.com/sreenaths/snippet-ss)
  - snippet-ss v1.11.0 (https://github.com/sreenaths/snippet-ss)
  - em-tgraph v0.0.4 (https://github.com/sreenaths/em-tgraph)
- - em-table v0.3.12 (https://github.com/sreenaths/em-table)
  - ember-cli-app-version v1.0.0 (https://github.com/EmberSherpa/ember-cli-app-version) - Authored by Taras Mankovski <[email protected]>
  - ember-cli-auto-register v1.1.0 (https://github.com/williamsbdev/ember-cli-auto-register) - Copyright © 2015 Brandon Williams http://williamsbdev.com
  - ember-cli-content-security-policy v0.4.0 (https://github.com/rwjblue/ember-cli-content-security-policy)

tez-ui/src/main/webapp/app/components/em-table-cell.js

@@ -0,0 +1,124 @@
+/**
+ * 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 layout from '../templates/components/em-table-cell';
+
+export default Ember.Component.extend({
+  layout: layout,
+
+  classNames: ['table-cell'],
+  classNameBindings: ['innerCell', 'isWaiting'],
+
+  innerCell: Ember.computed('index', function () {
+    if(this.get('index')) {
+      return 'inner';
+    }
+  }),
+
+  row: null,
+  columnDefinition: null,
+
+  isWaiting: false,
+
+  _value: null,
+  _observedPath: null,
+  _comment: null,
+  _cellContent: Ember.computed({
+    set: function (key, value, prevValue) {
+      if(value !== prevValue) {
+        this.highlightCell();
+      }
+      return value;
+    }
+  }),
+
+  _addObserver: function (path) {
+    this._removeObserver();
+    this.get('row').addObserver(path, this, this._onValueChange);
+    this.set('_observedPath', path);
+  },
+
+  _removeObserver: function () {
+    var path = this.get('_observedPath');
+    if(path) {
+      this.get('row').removeObserver(path, this, this._onValueChange);
+      this.set('_observedPath', null);
+    }
+  },
+
+  _pathObserver: Ember.on('init', Ember.observer('row', 'columnDefinition.contentPath', 'columnDefinition.observePath', function () {
+    var path = this.get('columnDefinition.contentPath');
+    if(path && this.get('columnDefinition.observePath')) {
+      this._addObserver(path);
+    }
+  })),
+
+  _onValueChange: function (row, path) {
+    this.set('_value', row.get(path));
+  },
+
+  setContent: function (content) {
+    var comment;
+
+    if(content && content.hasOwnProperty("content")) {
+      comment = content.comment;
+      content = content.content;
+    }
+
+    this.setProperties({
+      _comment: comment,
+      _cellContent: content,
+      isWaiting: false
+    });
+  },
+
+  _cellContentObserver: Ember.on('init', Ember.observer('row', 'columnDefinition', '_value', function () {
+    var cellContent = this.get('columnDefinition').getCellContent(this.get('row'), this.get("_value")),
+        that = this;
+
+    if(cellContent && cellContent.then) {
+      cellContent.then(function (content) {
+        that.setContent(content);
+      });
+      this.set('isWaiting', true);
+    }
+    else if(cellContent === undefined && this.get('columnDefinition.observePath')) {
+      this.set('isWaiting', true);
+    }
+    else {
+      this.setContent(cellContent);
+    }
+  })),
+
+  highlightCell: function () {
+    var element = this.$();
+    if(element) {
+      element.removeClass("bg-transition");
+      element.addClass("highlight");
+      Ember.run.later(function () {
+        element.addClass("bg-transition");
+        element.removeClass("highlight");
+      }, 100);
+    }
+  },
+
+  willDestroy: function () {
+    this._removeObserver();
+  }
+});

tez-ui/src/main/webapp/app/components/em-table-column.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 layout from '../templates/components/em-table-column';
+
+export default Ember.Component.extend({
+  layout: layout,
+
+  definition: null,
+  rows: null,
+  index: 0,
+
+  tableDefinition: null,
+  dataProcessor: null,
+  adjustedWidth: null,
+  defaultWidth: "",
+
+  classNames: ['table-column'],
+  classNameBindings: ['inner', 'extraClassNames'],
+
+  inner: Ember.computed('index', function () {
+    return !!this.get('index');
+  }),
+
+  extraClassNames: Ember.computed("definition.classNames", function () {
+    var classNames = this.get("definition.classNames");
+    if(classNames) {
+      return classNames.join(" ");
+    }
+  }),
+
+  didInsertElement: function () {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.setWidth();
+      this.setMinWidth();
+    });
+  },
+
+  setMinWidth: Ember.observer("definition.minWidth", function () {
+    this.$().css("minWidth", this.get('definition.minWidth'));
+  }),
+
+  setWidth: Ember.observer("adjustedWidth", "defaultWidth", function () {
+    var thisElement = this.$();
+    thisElement.css("width", this.get('adjustedWidth') || this.get('defaultWidth'));
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.get('parentView').send('columnWidthChanged', thisElement.width(), this.get("definition"), this.get("index"));
+    });
+  }),
+
+  _onColResize: function (event) {
+    var data = event.data,
+        width;
+
+    if(!data.startEvent) {
+      data.startEvent = event;
+    }
+
+    width = data.startWidth + event.clientX - data.startEvent.clientX;
+    data.thisObj.set('adjustedWidth', width);
+  },
+
+  _endColResize: function (event) {
+    var thisObj = event.data.thisObj;
+    Ember.$(document).off('mousemove', thisObj._onColResize);
+    Ember.$(document).off('mouseup', thisObj._endColResize);
+  },
+
+  actions: {
+    sort: function () {
+      var definition = this.get('definition'),
+          beforeSort = definition.get('beforeSort');
+
+      if(!beforeSort || beforeSort.call(definition, definition)) {
+        let columnId = this.get('definition.id'),
+            sortOrder = this.get('tableDefinition.sortOrder') === 'desc' ? 'asc' : 'desc';
+
+        this.get('parentView').send('sort', columnId, sortOrder);
+      }
+    },
+    startColResize: function () {
+      var mouseTracker = {
+        thisObj: this,
+        startWidth: this.$().width(),
+        startEvent: null
+      };
+
+      Ember.$(document).on('mousemove', mouseTracker, this._onColResize);
+      Ember.$(document).on('mouseup', mouseTracker, this._endColResize);
+    }
+  }
+});