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

persisting polling interval setting with localStorage; added tick marks with numbers to HTML5 slider element

Browse source
This commit is contained in:
Andrea Singh 2014-05-18 15:57:33 -07:00
parent 754187936e
commit cf0fc53d46
4 changed files with 81 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
web/assets/images/tick-mark.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 187 B

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

@ -18,7 +18,7 @@ this.seriesPathFactory()).attr("class","area"),this.stroke&&b.append("svg:path")
var poller; var poller;
var realtimeGraph = function(updatePath) { var realtimeGraph = function(updatePath) {
var timeInterval = parseInt(sessionStorage.timeInterval || '2000'); var timeInterval = parseInt(localStorage.timeInterval || '2000');
var graph = new Rickshaw.Graph( { var graph = new Rickshaw.Graph( {
element: document.getElementById("realtime"), element: document.getElementById("realtime"),
@ -165,27 +165,31 @@ var renderGraphs = function() {
historyGraph(); historyGraph();
}; };
var setSliderLabel = function() { var setSliderLabel = function(val) {
var label = Math.round(parseFloat(sessionStorage.timeInterval) / 1000) + ' sec'; var label = Math.round(parseFloat(val) / 1000) + ' sec';
$('span.current-interval').html(label); $('span.current-interval').html(label);
} }
$(function(){ $(function(){
renderGraphs(); renderGraphs();
if (typeof sessionStorage.timeInterval !== 'undefined'){ if (typeof localStorage.timeInterval !== 'undefined'){
$('span.interval-slider input').val(sessionStorage.timeInterval); $('div.interval-slider input').val(localStorage.timeInterval);
setSliderLabel(); setSliderLabel(localStorage.timeInterval);
} }
$(document).on('change', 'span.interval-slider input', function(){ $(document).on('change', 'div.interval-slider input', function(){
clearInterval(poller); clearInterval(poller);
sessionStorage.timeInterval = $(this).val(); localStorage.timeInterval = $(this).val();
setSliderLabel(); setSliderLabel($(this).val());
resetGraphs(); resetGraphs();
renderGraphs(); renderGraphs();
}); });
$(document).on('mousemove', 'div.interval-slider input', function(){
setSliderLabel($(this).val());
});
}); });
// Reset graphs // Reset graphs

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

@ -370,15 +370,17 @@ img.smallogo {
} }
} }
span.interval-slider { /* Dashboard
float: right; ********************************** */
line-height: 1.3; div.dashboard h3 {
font-size: 0.5em; float: left;
} }
span.interval-slider-label { div.interval-slider {
font-size: 12px; float: right;
margin-right: 5px; line-height: 1.3;
font-size: 0.95em;
padding: 15px 0 0;
} }
span.current-interval { span.current-interval {
@ -388,10 +390,50 @@ span.current-interval {
color: #B1003E; color: #B1003E;
} }
span.interval-slider input { div.interval-slider input {
width: 160px; width: 160px;
} }
/* Polling Slider Ticks
********************************** */
ul.ticks {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
width: 160px;
position: relative;
top: -6px;
}
ul.ticks li {
font-size: 10px;
float: left;
width: 40px;
padding: 5px 0 0;
background: url(../images/tick-mark.png) no-repeat 0 0;
}
ul.ticks li.first {
background-position: 18% 0;
padding-left: 0.5em;
}
ul.ticks li.second {
background-position: 38% 0;
padding-left: 1.266em;
}
ul.ticks li.third {
background-position: 62% 0;
padding-left: 1.8em;
}
ul.ticks li.fourth {
background-position: 82% 0;
padding-left: 2.66em;
}
/* Beacon
********************************** */
.beacon { .beacon {
position: relative; position: relative;
height: 20px; height: 20px;

29
web/views/dashboard.erb
View file

@ -1,18 +1,25 @@
<script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js"></script> <script type="text/javascript" src="<%= root_path %>javascripts/dashboard.js"></script>
<div class= "dashboard clearfix">
<h3 class="clearfix"> <h3 >
<%= t('Dashboard') %> <%= t('Dashboard') %>
<span class="beacon"> <span class="beacon">
<span class="ring"></span> <span class="ring"></span>
<span class="dot"></span> <span class="dot"></span>
</span> </span>
<span class="interval-slider"> </h3>
<div class="interval-slider">
<span class="interval-slider-label"><%= t('PollingInterval') %>:</span> <span class="interval-slider-label"><%= t('PollingInterval') %>:</span>
<span class="current-interval">2 sec</span> <span class="current-interval">2 sec</span>
<br/> <br/>
<input type="range" min="2000" max="20000" step="10" value="2000"/> <input type="range" min="2000" max="20000" step="1000" value="2000"/>
</span> <ul class= "ticks">
</h3> <li class="first">2</li>
<li class="second">8</li>
<li class="third">14</li>
<li class="fourth">20</li>
</ul>
</div>
</div>
<h5></h5> <h5></h5>
<div id="realtime"></div> <div id="realtime"></div>