tez-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From rbalamo...@apache.org
Subject tez git commit: TEZ-1809. Provide a error bar to report errors to users in Tez-UI (Sreenath Somarajapuram via Rajesh Balamohan)
Date Tue, 02 Dec 2014 08:07:52 GMT
Repository: tez
Updated Branches:
  refs/heads/TEZ-8 50897b23e -> 6a653871e


TEZ-1809. Provide a error bar to report errors to users in Tez-UI (Sreenath Somarajapuram
via Rajesh Balamohan)


Project: http://git-wip-us.apache.org/repos/asf/tez/repo
Commit: http://git-wip-us.apache.org/repos/asf/tez/commit/6a653871
Tree: http://git-wip-us.apache.org/repos/asf/tez/tree/6a653871
Diff: http://git-wip-us.apache.org/repos/asf/tez/diff/6a653871

Branch: refs/heads/TEZ-8
Commit: 6a653871e4a3516f264ec3952737c6a7e558dd71
Parents: 50897b2
Author: Rajesh Balamohan <rbalamohan@hortonworks.com>
Authored: Tue Dec 2 13:37:38 2014 +0530
Committer: Rajesh Balamohan <rbalamohan@hortonworks.com>
Committed: Tue Dec 2 13:37:38 2014 +0530

----------------------------------------------------------------------
 tez-ui/src/main/webapp/app/index.html           | 11 +++
 .../webapp/app/scripts/helpers/error-bar.js     | 81 ++++++++++++++++++++
 tez-ui/src/main/webapp/app/styles/main.less     | 76 ++++++++++++++++++
 3 files changed, 168 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/tez/blob/6a653871/tez-ui/src/main/webapp/app/index.html
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/index.html b/tez-ui/src/main/webapp/app/index.html
index 418ad02..7e2644f 100644
--- a/tez-ui/src/main/webapp/app/index.html
+++ b/tez-ui/src/main/webapp/app/index.html
@@ -71,6 +71,17 @@
 
     <script src="scripts/configs.js"></script>
 
+    <div class="error-bar">
+      <div class="main-container">
+        <div class="message-container">
+          <span class="error-icon"></span>&nbsp;
+          <span class="message"></span>
+        </div><div class="close-container">
+          <div class="close">&#65516;</div>
+        </div>
+        <div class="details"></div>
+    </div>
+
   </body>
 </html>
     

http://git-wip-us.apache.org/repos/asf/tez/blob/6a653871/tez-ui/src/main/webapp/app/scripts/helpers/error-bar.js
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/scripts/helpers/error-bar.js b/tez-ui/src/main/webapp/app/scripts/helpers/error-bar.js
new file mode 100644
index 0000000..b0e876f
--- /dev/null
+++ b/tez-ui/src/main/webapp/app/scripts/helpers/error-bar.js
@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+
+
+/*
+ * A singleton class to control the error bar.
+ */
+App.Helpers.ErrorBar = (function () {
+  var _instance; // Singleton instance of the class
+
+  var ErrorBar = Em.Object.extend({
+    init: function () {
+      var errorBar = $('.error-bar');
+      errorBar.find('.close').click(function () {
+        if(_instance) {
+          _instance.hide();
+        }
+      });
+    },
+    /*
+     * Displays an error message in the error bar.
+     * @param message String Error message
+     * @param details String HTML to be displayed as details.
+     */
+    show: function (message, details) {
+      var errorBar = $('.error-bar'),
+          messageElement;
+
+      errorBar.find('.expander').unbind('click');
+      errorBar.find('.details').removeClass('visible');
+
+      if(details) {
+        messageElement = $('<a class="expander" href="#">' + message + '</a>');
+        messageElement.click(function () {
+          errorBar.find('.details').toggleClass('visible');
+        });
+
+        errorBar.find('.details').html(details.replace(/\n/g, "<br />"));
+      }
+      else {
+        messageElement = $('<span>' + message + '</span>');
+      }
+
+      errorBar.find('.message').empty().append(messageElement);
+      errorBar.addClass('visible');
+    },
+
+    /*
+     * Hides if the error bar is visible.
+     */
+    hide: function () {
+      var errorBar = $('.error-bar').first();
+
+      errorBar.find('.expander').unbind('click');
+      errorBar.find('.details').removeClass('visible');
+
+      errorBar.removeClass('visible');
+    }
+  });
+
+  ErrorBar.getInstance = function(){
+    return _instance || (_instance = ErrorBar.create());
+  };
+  return ErrorBar;
+})();
+

http://git-wip-us.apache.org/repos/asf/tez/blob/6a653871/tez-ui/src/main/webapp/app/styles/main.less
----------------------------------------------------------------------
diff --git a/tez-ui/src/main/webapp/app/styles/main.less b/tez-ui/src/main/webapp/app/styles/main.less
index ae27e07..6ffdceb 100644
--- a/tez-ui/src/main/webapp/app/styles/main.less
+++ b/tez-ui/src/main/webapp/app/styles/main.less
@@ -21,10 +21,12 @@
 @logo-orange: #D27A22;
 @bg-lite: #f5f5f5;
 @border-lite: #e5e5e5;
+@bg-red-light: #FFE6E6;
 
 @white: #fff;
 
 @text-color: #666666;
+@text-red: red;
 
 @top-nav-bg-color-from: #d5d5d5;
 @top-nav-bg-color-to: #f0f0f0;
@@ -125,6 +127,80 @@ body, html, body > .ember-view {
   .navbar {
     margin-bottom: 0px;
   }
+
+}
+
+.error-bar {
+  position: fixed;
+  bottom: -50px;
+  width: 100%;
+  z-index: 1000;
+
+  .main-container {
+    margin: 0px 30px;
+
+    .message-container, .close-container {
+      .inline-block;
+      vertical-align: top;
+    }
+
+    .message-container {
+      width:90%;
+
+      .align-children-left;
+
+      .error-icon {
+        .task-status;
+        .failed;
+        margin-top: 3px;
+      }
+    }
+
+    .close-container {
+      width:10%;
+
+      .align-children-right;
+    }
+  }
+
+  -webkit-transition: bottom .2s cubic-bezier(0.175, 0.885, 0.320, 1); /* older webkit */
+  -webkit-transition: bottom .2s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  -moz-transition: bottom .2s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  -o-transition: bottom .2s cubic-bezier(0.175, 0.885, 0.320, 1.275);
+  transition: bottom .2s cubic-bezier(0.175, 0.885, 0.320, 1.275); /* easeOutBack */
+
+  background-color: #F5F5DC;
+  color: @text-red;
+
+  padding: 5px 0px 15px 0px;
+  margin: 0px;
+  min-height: 50px;
+
+  border-top: 1px @border-lite solid;
+
+  a {
+    color: @text-red !important;
+  }
+
+  .message {
+    display: none;
+  }
+
+  .details {
+    display: none;
+
+    &.visible {
+      display: inline;
+    }
+  }
+
+  &.visible {
+    bottom: -10px;
+
+    .message {
+      display: inline;
+    }
+  }
 }
 
 .fa-icon(@name) {


Mime
View raw message