kotovalexarian-likes-github/mperham--sidekiq
1
0
Fork 0
mirror of https://github.com/mperham/sidekiq.git synced 2022-11-09 13:52:34 -05:00
Code Releases Activity

Add ajax beacon to dashboard.

Browse source
This commit is contained in:
Brandon Hilkert 2013-01-02 17:49:12 -05:00
parent 0ae9b5579c
commit ab942628d4
3 changed files with 98 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/assets/javascripts/dashboard.js
View file

@ -54,6 +54,7 @@ var realtimeGraph = function(updatePath) {
Sidekiq.failed = data.failed; Sidekiq.failed = data.failed;
updateStatsSummary(data); updateStatsSummary(data);
pulseBeacon();
}); });
i++; i++;
}, timeInterval); }, timeInterval);
@ -114,6 +115,14 @@ var updateStatsSummary = function(data) {
$('ul.summary li.enqueued span.count').html(data.enqueued.numberWithDelimiter()) $('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) { Number.prototype.numberWithDelimiter = function(delimiter) {
var number = this + '', delimiter = delimiter || ','; var number = this + '', delimiter = delimiter || ',';
var split = number.split('.'); var split = number.split('.');

87
web/assets/stylesheets/application.css
View file

@ -268,6 +268,92 @@ img.smallogo {
font-size: 0.9em; 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 { .history-heading {
padding-right: 15px; padding-right: 15px;
} }
@ -343,7 +429,6 @@ img.smallogo {
} }
/* Rickshaw */ /* Rickshaw */
.rickshaw_graph .detail { .rickshaw_graph .detail {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;

4
web/views/dashboard.slim
View file

@ -1,6 +1,8 @@
script type="text/javascript" src="#{{root_path}}javascripts/dashboard.js" script type="text/javascript" src="#{{root_path}}javascripts/dashboard.js"
h3 Dashboard h3
| Dashboard
span.beacon
h5 Real-time h5 Real-time
#realtime #realtime