TEZ-4328. Import external tez component em-helpers

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

@@ -233,7 +233,6 @@ The Apache TEZ tez-ui bundles the following files under the MIT License:
  - 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)
- - em-helpers v0.5.8 (https://github.com/sreenaths/em-helpers)
  - ember-cli-app-version v1.0.0 (https://github.com/EmberSherpa/ember-cli-app-version) - Authored by Taras Mankovski <tarasm@gmail.com>
  - 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-breadcrumbs.js

@@ -0,0 +1,69 @@
+/**
+ * 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-breadcrumbs';
+
+export default Ember.Component.extend({
+  layout: layout,
+
+  itemStyle: Ember.computed("items", function () {
+    var itemCount = this.get("items.length");
+
+    if(itemCount) {
+      let widthPercent = 100 / itemCount;
+      return new Ember.Handlebars.SafeString(`max-width: ${widthPercent}%`);
+    }
+  }),
+
+  normalizedItems: Ember.computed("items", function () {
+    var items = this.get("items");
+
+    if(items) {
+      let lastIndex = items.length - 1;
+      items = items.map(function (item, index) {
+        var itemDef = {
+          text: item.text || "",
+          classNames: item.classNames || [],
+        };
+
+        Ember.assert("classNames must be an array", Array.isArray(itemDef.classNames));
+
+        if(index === lastIndex) {
+          itemDef.classNames.push("active");
+        }
+        else {
+          itemDef.routeName = item.routeName;
+          itemDef.model = item.model;
+          itemDef.href = item.href;
+          if(item.queryParams) {
+            itemDef.queryParams = {
+              isQueryParams: true,
+              values: item.queryParams
+            };
+          }
+        }
+
+        itemDef.classNames = itemDef.classNames.join(" ");
+        return itemDef;
+      });
+    }
+
+    return items;
+  })
+});

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

@@ -0,0 +1,102 @@
+/**
+ * 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-progress';
+
+export default Ember.Component.extend({
+  layout: layout,
+
+  value: 0,
+  valueMin: 0,
+  valueMax: 1,
+
+  classNames: ["em-progress-container"],
+  classNameBindings: ["animated", "striped"],
+
+  striped: false,
+  style: null,
+
+  progressBar: null,
+
+  widthPercent: Ember.computed("value", "valueMin", "valueMax", function () {
+    var value = this.get("value"),
+        valueMin = this.get("valueMin"),
+        valueMax = this.get("valueMax");
+
+    if(value < valueMin) {
+      value = valueMin;
+    }
+    else if(value > valueMax) {
+      value = valueMax;
+    }
+
+    value -= valueMin;
+    valueMax -= valueMin;
+
+    return (value / valueMax) * 100;
+  }),
+
+  progressText: Ember.computed("widthPercent", function () {
+    var percent = parseInt(this.get("widthPercent"));
+    if(isNaN(percent)) {
+      percent = 0;
+    }
+    return percent + "%";
+  }),
+
+  animated: Ember.computed("widthPercent", "striped", function () {
+    return this.get('striped') && this.get('widthPercent') > 0 && this.get('widthPercent') < 100;
+  }),
+
+  progressBarClasses: Ember.computed("style", "striped", "animated", function () {
+    var classes = [],
+        style = this.get("style");
+
+    if(style) {
+      classes.push(`progress-bar-${style}`);
+    }
+    if(this.get("striped")) {
+      classes.push("progress-bar-striped");
+    }
+    if(this.get("animated")) {
+      classes.push("active");
+    }
+
+    return classes.join(" ");
+  }),
+
+  renderProgress: Ember.observer("progressBar", "widthPercent", function () {
+    var widthPercent = this.get('widthPercent');
+    this.get("progressBar").width(widthPercent + "%");
+  }),
+
+  didInsertElement: function () {
+    Ember.run.scheduleOnce('afterRender', this, function() {
+      this.setProperties({
+        progressBar: this.$(".progress-bar")
+      });
+    });
+  },
+
+  willDestroy: function () {
+    this.setProperties({
+      progressBar: null,
+    });
+  }
+});

tez-ui/src/main/webapp/app/helpers/txt.js

@@ -0,0 +1,62 @@
+/**
+ * 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 formatters from '../utils/formatters';
+
+export function txt(value, hash) {
+  var message,
+      dataType = hash.type,
+      formatter = hash.formatter,
+      titleAttr = "";
+
+  if(value) {
+    value = value[0];
+  }
+
+  if(value instanceof Error) {
+    message = value.message;
+    titleAttr = `title="${value.message}" `;
+  }
+  else {
+    try {
+      if(value !== undefined && !formatter && dataType) {
+        formatter = formatters[dataType];
+      }
+
+      if(formatter && value !== undefined && value !== null) {
+        value = formatter(value, hash);
+      }
+
+      if(value === undefined || value === null) {
+        message = 'Not Available!';
+      }
+      else {
+        return Ember.String.htmlSafe(Ember.Handlebars.Utils.escapeExpression(value.toString()));
+      }
+    }
+    catch(error) {
+      message = "Invalid Data!";
+      Ember.Logger.error(error);
+    }
+  }
+
+  return Ember.String.htmlSafe(`<span ${titleAttr}class="txt-message"> ${message} </span>`);
+}
+
+export default Ember.Helper.helper(txt);

tez-ui/src/main/webapp/app/styles/app.less

@@ -44,6 +44,8 @@
 @import "em-table-status-cell";
 @import "query-timeline";
 @import "home-table-controls";
+@import "em-progress";
+@import "em-breadcrumbs";
 
 // Modals
 @import "column-selector";
@@ -54,3 +56,6 @@
 @import "details-page";
 @import "swimlane-page";
 @import "vertex-configs-page";
+
+// Helpers
+@import "txt";

tez-ui/src/main/webapp/app/styles/em-breadcrumbs.less

@@ -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.
+ */
+
+
+@import "bower_components/snippet-ss/less/no";
+
+.breadcrumb {
+  .no-wrap;
+  li {
+    .no-wrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

tez-ui/src/main/webapp/app/styles/em-progress.less

@@ -0,0 +1,52 @@
+/**
+ * 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 "bower_components/bootstrap/less/variables";
+@import "bower_components/snippet-ss/less/effects";
+
+.progress {
+  .progress-bar {
+    .progress-text {
+      padding-left: 10px;
+      .text-outer-glow(@progress-bar-bg);
+    }
+  }
+
+  .progress-bar-success {
+    .progress-text {
+      .text-outer-glow(@progress-bar-success-bg);
+    }
+  }
+  .progress-bar-info {
+    .progress-text {
+      .text-outer-glow(@progress-bar-info-bg);
+    }
+  }
+  .progress-bar-warning {
+    .progress-text {
+      .text-outer-glow(@progress-bar-warning-bg);
+    }
+  }
+  .progress-bar-danger {
+    .progress-text {
+      .text-outer-glow(@progress-bar-danger-bg);
+    }
+  }
+}
+

tez-ui/src/main/webapp/app/styles/shared.less

@@ -86,3 +86,7 @@ b {
     }
   }
 }
+
+.em-message {
+  opacity: .5;
+}

tez-ui/src/main/webapp/app/styles/txt.less

@@ -0,0 +1,24 @@
+/**
+ * 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 "./shared";
+
+.txt-message {
+  .em-message;
+}