diff --git a/web/assets/javascripts/dashboard.js b/web/assets/javascripts/dashboard.js index 13d38866..b67e2247 100644 --- a/web/assets/javascripts/dashboard.js +++ b/web/assets/javascripts/dashboard.js @@ -54,6 +54,7 @@ var realtimeGraph = function(updatePath) { Sidekiq.failed = data.failed; updateStatsSummary(data); + pulseBeacon(); }); i++; }, timeInterval); @@ -114,6 +115,14 @@ var updateStatsSummary = function(data) { $('ul.summary li.enqueued span.count').html(data.enqueued.numberWithDelimiter()) } +var pulseBeacon = function(){ + $beacon = $('.beacon') + $beacon.addClass('pulse').delay(1000).queue(function(){ + $(this).removeClass('pulse'); + $(this).dequeue(); + }) +} + Number.prototype.numberWithDelimiter = function(delimiter) { var number = this + '', delimiter = delimiter || ','; var split = number.split('.'); diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css index 2b3fd470..6f97ddce 100755 --- a/web/assets/stylesheets/application.css +++ b/web/assets/stylesheets/application.css @@ -268,6 +268,92 @@ img.smallogo { font-size: 0.9em; } +.beacon { + width: 10px; + height: 10px; + background-color: #80002d; + display: inline-block; + border-radius: 10px; + margin-left: 10px; + margin-bottom: 5px; + box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + -webkit-box-shadow: 0 0 9px #666; + border: 3px solid transparent; +} + +.beacon.pulse { + -webkit-animation: beacon-pulse 1s ease-out; + -moz-animation: beacon-pulse 1s ease-out; + animation: beacon-pulse 1s ease-out; + -webkit-animation-iteration-count: 1; + -moz-animation-iteration-count: 1; + animation-iteration-count: 1; +} + +@-webkit-keyframes beacon-pulse { + from { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } + 50% { + background-color: #c90047; + -webkit-box-shadow: 0 0 18px #666; + -moz-box-shadow: 0 0 18px #666; + box-shadow: 0 0 18px #666; + } + to { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } +} + +@-moz-keyframes beacon-pulse { + from { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } + 50% { + background-color: #c90047; + -webkit-box-shadow: 0 0 18px #666; + -moz-box-shadow: 0 0 18px #666; + box-shadow: 0 0 18px #666; + } + to { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } +} + +@keyframes beacon-pulse { + from { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } + 50% { + background-color: #c90047; + -webkit-box-shadow: 0 0 18px #666; + -moz-box-shadow: 0 0 18px #666; + box-shadow: 0 0 18px #666; + } + to { + background-color: #80002d; + -webkit-box-shadow: 0 0 9px #666; + -moz-box-shadow: 0 0 9px #666; + box-shadow: 0 0 9px #666; + } +} + .history-heading { padding-right: 15px; } @@ -343,7 +429,6 @@ img.smallogo { } /* Rickshaw */ - .rickshaw_graph .detail { pointer-events: none; position: absolute; diff --git a/web/views/dashboard.slim b/web/views/dashboard.slim index 2d1324c0..0f8124e3 100644 --- a/web/views/dashboard.slim +++ b/web/views/dashboard.slim @@ -1,6 +1,8 @@ script type="text/javascript" src="#{{root_path}}javascripts/dashboard.js" -h3 Dashboard +h3 + | Dashboard + span.beacon h5 Real-time #realtime