statisticsview.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
  1. /* global d3 */
  2. /*eslint-disable no-unused-vars*/
  3. var Gauge = function (wrapper, percent, options) {
  4. if (!wrapper || !percent) {
  5. //console.error('wrapper and percentage are required. Please check your code.');
  6. return;
  7. }
  8. var label = (!options.label) ? '' : options.label;
  9. var textClass = options.textClass || 'progress-meter';
  10. var width = options.width || 200,
  11. height = options.height || 200,
  12. twoPi = 2 * Math.PI,
  13. progress = 0,
  14. total = 100,
  15. formatPercent = d3.format('.0%');
  16. var colorScale = d3.scaleLinear()
  17. .domain([0, 0.40, 0.50, 1])
  18. .range(['green', 'green', 'goldenrod', 'red']);
  19. var arc = d3.arc()
  20. .startAngle(0)
  21. .innerRadius(width * 0.4)
  22. .outerRadius(width * 0.5)
  23. ;
  24. var svg = d3.select(wrapper).append('svg')
  25. .attr('width', width)
  26. .attr('height', height)
  27. .attr('fill', '#2E7AF9')
  28. .append('g')
  29. .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
  30. var meter = svg.append('g')
  31. .attr('class', textClass);
  32. meter.append('path')
  33. .attr('class', 'background')
  34. .attr('d', arc.endAngle(twoPi));
  35. var foreground = meter.append('path')
  36. .attr('class', 'foreground');
  37. var text = meter.append('text')
  38. .attr('text-anchor', 'middle');
  39. var text2 = meter.append('text')
  40. .attr('y', height * 0.15)
  41. .attr('text-anchor', 'middle')
  42. .attr('class', 'text2');
  43. text2.text(label);
  44. var animate = function (percentage) {
  45. var i = d3.interpolate(progress, percentage);
  46. foreground.transition().duration(2000)
  47. .tween('progress', function () {
  48. return function (t) {
  49. progress = i(t);
  50. foreground.style('fill', colorScale(progress));
  51. foreground.attr('d', arc.endAngle(twoPi * progress));
  52. text.text(formatPercent(progress));
  53. };
  54. });
  55. };
  56. // init
  57. (function () {
  58. setTimeout(function () {
  59. animate(percent);
  60. }, 500);
  61. })();
  62. return {
  63. update: function (newPercent) {
  64. animate(newPercent);
  65. }
  66. };
  67. };
  68. function upTime(countTo, el) {
  69. var wrapper = document.getElementById('card-uptime');
  70. var element = document.getElementById(el);
  71. var difference = new Date(countTo*1000);
  72. var days = Math.floor(difference / (60 * 60 * 1000 * 24) * 1);
  73. var hours = Math.floor((difference % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
  74. var mins = Math.floor(((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
  75. var secs = Math.floor((((difference % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
  76. clearTimeout(upTime.to);
  77. if (isNaN(days) || isNaN(hours) || isNaN(mins) || isNaN(secs) ) {
  78. wrapper.style.display = 'none';
  79. } else {
  80. days = (days == 1) ? days + ' day ' : days + ' days ';
  81. hours = (hours == 1) ? hours + ' hour ' : hours + ' hours ';
  82. mins = (mins == 1) ? mins + ' minute ' : mins + ' minutes ';
  83. secs = (secs == 1) ? secs + ' second ' : secs + ' seconds';
  84. var timeString = '<span class="upTime">' + days + hours + mins + secs + '</span>';
  85. element.innerHTML = timeString;
  86. wrapper.style.display = 'block';
  87. upTime.to = setTimeout(function() {
  88. countTo = countTo + 1;
  89. upTime(countTo, el);
  90. },1000);
  91. }
  92. }
  93. var analytics = document.getElementById('expiredSts');
  94. var casStatistics = function (urls, messages) {
  95. var timers = {
  96. memory: 5000,
  97. availability: 15000,
  98. tickets: 5000
  99. };
  100. var memoryGauage;
  101. var getRemoteJSON = function(url) {
  102. return $.getJSON( url);
  103. };
  104. var tickets = function() {
  105. var data = getRemoteJSON(urls.tickets);
  106. data.done(function( data ) {
  107. updateElementValue( 'unexpiredTgts', data.unexpiredTgts );
  108. updateElementValue( 'unexpiredSts', data.unexpiredSts );
  109. updateElementValue( 'expiredTgts', data.expiredTgts );
  110. updateElementValue( 'expiredSts', data.expiredSts );
  111. setTimeout( tickets, timers.tickets );
  112. });
  113. };
  114. var updateElementValue = function(el, val) {
  115. $( '#' + el ).text( val );
  116. };
  117. var memory = function() {
  118. var data = getRemoteJSON(urls.memory);
  119. data.done(function( data ) {
  120. updateElementValue('freeMemory', data.freeMemory.toFixed(2));
  121. // updateElementValue('totalMemory', data.totalMemory);
  122. // updateElementValue('maxMemory', data.maxMemory);
  123. // updateElementValue('availableProcessors', data.availableProcessors);
  124. var memCalc = (data.totalMemory / data.maxMemory).toFixed(2);
  125. if ( !memoryGauage ) {
  126. memoryGauage = new Gauge('#maxMemoryGauge', memCalc, {width: 200, height: 200,
  127. label: messages.memoryGaugeTitle,
  128. textClass: 'runtimeStatistics'});
  129. } else {
  130. memoryGauage.update( memCalc );
  131. }
  132. setTimeout( memory, timers.memory );
  133. });
  134. };
  135. var availability = function() {
  136. var data = getRemoteJSON(urls.availability);
  137. data.done(function( data ) {
  138. updateElementValue('upTime', data.upTime);
  139. setTimeout( availability, timers.availability );
  140. });
  141. };
  142. // initialization *******
  143. ( function init () {
  144. $('#loading, .statisticsView').toggle();
  145. tickets();
  146. memory();
  147. // availability();
  148. })();
  149. // Public Methods
  150. return {
  151. getTickets: function() {
  152. return tickets();
  153. },
  154. getMemory: function() {
  155. return memory();
  156. },
  157. getAvailability: function() {
  158. return availability();
  159. },
  160. updateGauge: function(val){
  161. if (memoryGauage) {
  162. memoryGauage.update( val );
  163. } else {
  164. return 'unable to update';
  165. }
  166. }
  167. };
  168. };