You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@tez.apache.org by rb...@apache.org on 2014/12/02 09:07:52 UTC
tez git commit: TEZ-1809. Provide a error bar to report errors to
users in Tez-UI (Sreenath Somarajapuram via Rajesh Balamohan)
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 <rb...@hortonworks.com>
Authored: Tue Dec 2 13:37:38 2014 +0530
Committer: Rajesh Balamohan <rb...@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>
+ <span class="message"></span>
+ </div><div class="close-container">
+ <div class="close">￬</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) {