AMBARI-18330. Add optional digital clock widget attached to page. (alexantonenko)

ambari-web/app/config.js

@@ -61,6 +61,8 @@ App.healthStatusOrange = '#FF8E00';
 App.inactivityRemainTime = 60; // in seconds
 App.enableLogger = true;
 App.stackVersionsAvailable = true;
+App.upgradeHistoryAvailable = false;
+App.enableDigitalClock = false;
 
 // experimental features are automatically enabled if running on brunch server
 App.enableExperimental = false;

ambari-web/app/styles/application.less

@@ -48,6 +48,16 @@ ul.typeahead.dropdown-menu {
   overflow: visible;
   padding-bottom: @footer-height;
   min-width: 980px;
+
+   .clock-view {
+     top: 10px;
+     left: 4px;
+     position: fixed;
+     color: red;
+     font-weight: bold;
+     padding: 4px;
+     background-color: rgba(0, 0, 0, 0.6);
+  }
 }
 
 footer {
@@ -381,6 +391,7 @@ footer {
   .navbar .nav .top-nav-user > li.right {
     float: right;
   }
+
 }
 
 .nav.top-nav-menu,
@@ -6216,7 +6227,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     padding: 5px 25px;
   }
   .right-stack-info {
-    margin-left: 0px;
+    margin-left: 0;
     .available-repos-dropdown {
       a, a.disbled{
         cursor: pointer;
@@ -6282,7 +6293,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     background-color: #f0f0f0;
     font-weight: bold;
     p {
-      margin-bottom: 0px;
+      margin-bottom: 0;
       display: block;
       padding: 8px 15px;
     }
@@ -6378,7 +6389,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
     }
     #use-redhat, #skip-validation {
       input{
-        margin: 0px 10px;
+        margin: 0 10px;
       }
     }
     #use-redhat span.disabled {
@@ -6416,7 +6427,7 @@ input[type="radio"].align-checkbox, input[type="checkbox"].align-checkbox {
         background-image: linear-gradient(top, #fdfdfd, #e3e3e3);
       }
       &.is_selected {
-        margin-left: 0px;
+        margin-left: 0;
       }
     }
   }

ambari-web/app/templates/application.hbs

@@ -16,6 +16,11 @@
 * limitations under the License.
 }}
 
+<div id="main">
+  {{#if App.enableDigitalClock}}
+    {{view App.ClockView}}
+  {{/if}}
+
 <div id="main">
   <div id="top-nav">
     <div class="navbar navbar-static-top">

ambari-web/app/views.js

@@ -20,6 +20,7 @@
 // load all views here
 
 require('views/application');
+require('views/common/clock_view');
 require('views/common/log_search_ui_link_view');
 require('views/common/log_file_search_view');
 require('views/common/log_tail_view');

ambari-web/app/views/common/clock_view.js

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+var App = require('app');
+var dateUtils = require('utils/date/date');
+
+App.ClockView = Em.View.extend({
+  classNames: ['clock-view'],
+  template: Em.Handlebars.compile('<span>{{view.currentTime}}'),
+  dateFormat: 'HH:mm:ss',
+  updateInterval: 1000,
+  /**
+   * Interval function id
+   * @type {Number}
+   */
+  intervalId: null,
+
+  didInsertElement: function() {
+    var self = this;
+    this.set('intervalId', setInterval(function() {
+      self.set('currentTime', dateUtils.dateFormat(new Date().getTime() + App.get('clockDistance'), self.get('dateFormat')));
+    }, this.get('updateInterval')))
+  },
+
+  willDestroyElement: function() {
+    if (this.get('intervalId')) {
+      clearInterval(this.get('intervalId'));
+      this.set('intervalId', null);
+    }
+  }
+});