workerholic 0.0.15 → 0.0.16

data/web/public/javascripts/application.js

@@ -2,14 +2,42 @@ var App = {
   queuedJobsCountHistory: [],
   failedJobsCountHistory: [],
   jobsCompletedHistory: [],
+  jobsCompletedPerSecondHistory: [],
   totalMemoryHistory: [],
+  maxTime: 240,
+  freshDataCount: function() {
+    return (this.maxTime / 5) + 1;
+  },
   tab: null,
+  removeStaleData: function() {
+    if (this.queuedJobsCountHistory.length > this.freshDataCount) {
+      this.queuedJobsCountHistory.pop();
+      this.failedJobsCountHistory.pop();
+      this.jobsCompletedHistory.pop();
+      this.totalMemoryHistory.pop();
+    }
+  },
+  getUrlParameter: function(param) {
+    var pageUrl = decodeURIComponent(window.location.search.substring(1));
+    var urlVariables = pageUrl.split('&')
+    var parameterName;
+
+    for (var i = 0; i < urlVariables.length; i++) {
+      parameterName = urlVariables[i].split('=');
+
+      if (parameterName[0] === param) {
+        return parameterName[1] === undefined ? true : parameterName[1];
+      }
+    }
+  },
   getOverviewData: function() {
     $.ajax({
       url: '/overview-data',
       context: this,
       success: function(data) {
         var deserializedData = JSON.parse(data);
+        var workersCount = deserializedData.workers_count;
+        var scheduledJobsCount = deserializedData.scheduled_jobs;
 
         var completedJobs = deserializedData.completed_jobs.reduce(function(sum, subArray) {
           return sum + subArray[1];
@@ -25,29 +53,34 @@ var App = {
           return sum + queue[1];
         }, 0);
 
-        // var totalMemory = deserializedData.memory_usage ...
+        var memoryUsage = deserializedData.memory_usage;
+        var totalMemoryUsage = 0;
+
+        for (id in memoryUsage) {
+          totalMemoryUsage = totalMemoryUsage + parseInt(memoryUsage[id]);
+          if ($('#process_' + id).length === 1) {
+            $('#process_' + id).text(parseInt(memoryUsage[id]) / 1000 + ' MB');
+          } else {
+            $('.nested').last().after("<tr class='nested'><td>" + id + "</td><td id='process_" + id + "''>" + memoryUsage[id] + "</td></tr>")
+          }
+        }
 
         this.queuedJobsCountHistory.unshift(queuedJobsCount);
         this.failedJobsCountHistory.unshift(failedJobsCount);
         this.jobsCompletedHistory.unshift(completedJobs);
-        // totalMemoryHistory.unshift(totalMemory); Waiting for data
-
-        if (this.queuedJobsCountHistory.length > 13) {
-          this.queuedJobsCountHistory.pop();
-          this.failedJobsCountHistory.pop();
-          this.jobsCompletedHistory.pop();
-          this.totalMemoryHistory.pop();
-        }
+        this.totalMemoryHistory.unshift(totalMemoryUsage / 1000);
+        this.jobsCompletedPerSecondHistory.unshift((this.jobsCompletedHistory[0] - this.jobsCompletedHistory[1]) / 5 || 0);
 
+        this.removeStaleData();
         this.drawChart();
 
-        var workersCount = deserializedData.workers_count;
-
         $('.completed_jobs').text(completedJobs);
         $('.failed_jobs').text(failedJobsCount);
         $('.queue_count').text(queuedJobs.length);
         $('.queued_jobs_count').text(queuedJobsCount);
+        $('.scheduled_jobs').text(scheduledJobsCount);
         $('.workers_count').text(workersCount);
+        $('.memory_usage').text(totalMemoryUsage / 1000 + ' MB');
       }
     });
   },
@@ -94,6 +127,33 @@ var App = {
       }
     })
   },
+  getHistoryData: function() {
+    var className = $('#class_selector select').find(':selected').val();
+    var days = this.getUrlParameter('days') || 7;
+
+    $('#button_' + days).addClass('is-dark');
+
+    $('#class_selector').on('change', function(e) {
+      location = window.location.origin + window.location.pathname + '?days=' + days + '&class=' + e.target.value;
+    });
+
+    $('#day_tabs a').on('click', function(e) {
+      e.preventDefault();
+      location = window.location.origin + window.location.pathname + '?days=' + $(e.target).attr('data-day') + '&class=' + className;
+    });
+
+    $.ajax({
+      url: '/historic-data',
+      data: {
+        days: days,
+        className: className,
+      },
+      dataType: 'json',
+      success: function(data) {
+        this.drawHistoryChart(days, className, data['completed_jobs'], data['failed_jobs']);
+      }.bind(this)
+    })
+  },
   drawChart: function() {
     var processedJobsChart = new CanvasJS.Chart('jobs_processed_container', {
       title: {
@@ -107,7 +167,7 @@ var App = {
         tickColor: 'silver',
         animationEnabled: true,
         title: 'Time ago (s)',
-        maximum: 60
+        maximum: this.maxTime
       },
       toolTip: {
         shared: true
@@ -124,22 +184,8 @@ var App = {
         name: "Jobs completed",
         color: "blue",
         markerType: 'circle',
-        lineThickness: 2,
-        dataPoints: [
-          { x: '0', y: (this.jobsCompletedHistory[0] - this.jobsCompletedHistory[1]) / 5 || 0 },
-          { x: '5', y: (this.jobsCompletedHistory[1] - this.jobsCompletedHistory[2]) / 5 || 0 },
-          { x: '10', y: (this.jobsCompletedHistory[2] - this.jobsCompletedHistory[3]) / 5 || 0 },
-          { x: '15', y: (this.jobsCompletedHistory[3] - this.jobsCompletedHistory[4]) / 5 || 0 },
-          { x: '20', y: (this.jobsCompletedHistory[4] - this.jobsCompletedHistory[5]) / 5 || 0 },
-          { x: '25', y: (this.jobsCompletedHistory[5] - this.jobsCompletedHistory[6]) / 5 || 0 },
-          { x: '30', y: (this.jobsCompletedHistory[6] - this.jobsCompletedHistory[7]) / 5 || 0 },
-          { x: '35', y: (this.jobsCompletedHistory[7] - this.jobsCompletedHistory[8]) / 5 || 0 },
-          { x: '40', y: (this.jobsCompletedHistory[8] - this.jobsCompletedHistory[9]) / 5 || 0 },
-          { x: '45', y: (this.jobsCompletedHistory[9] - this.jobsCompletedHistory[10]) / 5 || 0 },
-          { x: '50', y: (this.jobsCompletedHistory[10] - this.jobsCompletedHistory[11]) / 5 || 0 },
-          { x: '55', y: (this.jobsCompletedHistory[11] - this.jobsCompletedHistory[12]) / 5 || 0 },
-          { x: '60', y: (this.jobsCompletedHistory[12] - this.jobsCompletedHistory[13]) / 5 || 0 },
-        ]
+        lineThickness: 6,
+        dataPoints: this.setDataPoints(this.jobsCompletedPerSecondHistory, this.freshDataCount()),
       }]
     });
 
@@ -156,7 +202,7 @@ var App = {
         animationEnabled: true,
         title: 'Time ago (s)',
         // minimum: 0,
-        maximum: 60
+        maximum: this.maxTime,
       },
       toolTip: {
         shared: true
@@ -170,11 +216,11 @@ var App = {
       data: [{
         type: "line",
         showInLegend: true,
-        lineThickness: 2,
+        lineThickness: 6,
         name: "Queued Jobs",
         markerType: "circle",
         color: "#F08080",
-        dataPoints: this.setDataPoints(this.queuedJobsCountHistory),
+        dataPoints: this.setDataPoints(this.queuedJobsCountHistory, this.freshDataCount()),
       }],
     });
 
@@ -191,7 +237,7 @@ var App = {
         animationEnabled: true,
         title: 'Time ago (s)',
         // minimum: 0,
-        maximum: 60
+        maximum: this.maxTime,
       },
       toolTip: {
         shared: true
@@ -208,8 +254,8 @@ var App = {
           name: "Failed Jobs",
           color: "#20B2AA",
           markerType: 'circle',
-          lineThickness: 2,
-          dataPoints: this.setDataPoints(this.failedJobsCountHistory),
+          lineThickness: 6,
+          dataPoints: this.setDataPoints(this.failedJobsCountHistory, this.freshDataCount()),
         },
       ]
     });
@@ -227,7 +273,7 @@ var App = {
         animationEnabled: true,
         title: 'Time ago (s)',
         // minimum: 0,
-        maximum: 60
+        maximum: this.maxTime
       },
       toolTip: {
         shared: true
@@ -244,8 +290,8 @@ var App = {
         name: "Memory usage",
         color: "#20B2AA",
         markerType: 'circle',
-        lineThickness: 2,
-        dataPoints: this.setDataPoints(this.totalMemoryHistory),
+        lineThickness: 6,
+        dataPoints: this.setDataPoints(this.totalMemoryHistory, this.freshDataCount()),
       }],
     });
 
@@ -254,27 +300,110 @@ var App = {
     processedJobsChart.render();
     totalMemoryChart.render();
   },
-  setDataPoints: function(array) {
-    data = [
-      { x: '0', y: array[0] },
-      { x: '5', y: array[1] },
-      { x: '10', y: array[2] },
-      { x: '15', y: array[3] },
-      { x: '20', y: array[4] },
-      { x: '25', y: array[5] },
-      { x: '30', y: array[6] },
-      { x: '35', y: array[7] },
-      { x: '40', y: array[8] },
-      { x: '45', y: array[9] },
-      { x: '50', y: array[10] },
-      { x: '55', y: array[11] },
-      { x: '60', y: array[12] },
-    ];
+  drawHistoryChart: function(days, className, completed_jobs, failed_jobs) {
+    var completedHistoryChart = new CanvasJS.Chart('history_container_completed', {
+      title: {
+        text: 'Completed History for ' + days + ' days',
+        fontFamily: 'Arial',
+        fontSize: 24,
+      },
+      axisX: {
+        // reversed: true,
+        gridColor: 'Silver',
+        tickColor: 'silver',
+        animationEnabled: true,
+        title: 'Date',
+        minimum: parseInt((completed_jobs['date_ranges'][days]) * 1000),
+      },
+      toolTip: {
+        shared: true
+      },
+      theme: "theme2",
+      axisY: {
+        gridColor: "Silver",
+        tickColor: "silver",
+        title: 'Jobs'
+      },
+      data: [{
+        type: "line",
+        showInLegend: true,
+        name: "Completed Job for " + className,
+        color: "#20B2AA",
+        markerType: 'circle',
+        lineThickness: 2,
+        xValueType: 'dateTime',
+        dataPoints: this.setHistoryDataPoints(completed_jobs),
+      }],
+    });
+
+    var failedHistoryChart = new CanvasJS.Chart('history_container_failed', {
+      title: {
+        text: 'Failed History for ' + days + ' days',
+        fontFamily: 'Arial',
+        fontSize: 24,
+      },
+      axisX: {
+        gridColor: 'Silver',
+        tickColor: 'silver',
+        animationEnabled: true,
+        title: 'Date',
+        minimum: parseInt((completed_jobs['date_ranges'][days]) * 1000),
+      },
+      toolTip: {
+        shared: true
+      },
+      theme: "theme2",
+      axisY: {
+        gridColor: "Silver",
+        tickColor: "silver",
+        title: 'Jobs'
+      },
+      data: [{
+        type: "line",
+        showInLegend: true,
+        name: "Failed Jobs for " + className,
+        color: "#20B2AA",
+        markerType: 'circle',
+        lineThickness: 2,
+        xValueType: 'dateTime',
+        dataPoints: this.setHistoryDataPoints(failed_jobs),
+      }],
+    });
+
+    completedHistoryChart.render();
+    failedHistoryChart.render();
+  },
+  setHistoryDataPoints: function(jobs) {
+    data = []
+
+    for (var i = 0; i <= jobs['date_ranges'].length; i++) {
+      var point = { x: this.getLocalDate(parseInt(jobs['date_ranges'][i])).getTime(), y: jobs['job_counts'][i]};
+
+      data.push(point);
+    }
+
+    return data;
+  },
+  setDataPoints: function(array, count) {
+    var data = [];
+
+    for (var i = 0; i <= count; i++) {
+      var point = { x: (i * 5).toString(), y: array[i] };
+      data.push(point);
+    }
 
     return data;
   },
+  getLocalDate: function(seconds) {
+    var date = new Date(seconds * 1000);
+    var day = date.getUTCDate();
+    var month = date.getUTCMonth();
+    var year = date.getUTCFullYear();
+
+    return new Date(year, month, day);
+  },
   setActiveTab: function() {
-    this.tab = $(location).attr('href').split('/').pop();
+    this.tab = $(location).attr('href').match(/(?:(?!\?).)*/)[0].split('/').pop();
     var $active = $('a[href=' + this.tab + ']');
 
     $active.css('background', '#a2a2a2');
@@ -300,10 +429,15 @@ var App = {
         this.getDetailData();
       }.bind(this), 5000);
     }
+
+    if (tab === 'history') {
+      this.getHistoryData();
+    }
   },
   bindEvents: function() {
     $('#memory_usage').on('click', function(e) {
       $('.nested th').toggle();
+      $('.nested td').toggle();
     });
   },
   init: function() {

data/web/public/stylesheets/application.css

@@ -64,10 +64,16 @@ nav a:hover {
 }
 
 .chart {
+  height: 300px;
+  width: 100%;
   margin-top: 50px;
 }
 
-.nested th {
+.nested th, .nested td {
   display: none;
   padding-left: 50px
 }
+
+#day_tabs {
+  margin-top: 50px;
+}

data/web/views/history.erb

@@ -0,0 +1,22 @@
+<div id="day_tabs">
+  <a class='button' id="button_7" data-day="7" href='/history?days=7'>7 Days</a>
+  <a class='button' id="button_30" data-day="30" href='/history?days=30'>30 Days</a>
+  <a class='button' id="button_180" data-day="180" href='/history?days=180'>180 Days</a>
+  <a class='button' id="button_365" data-day="365" href='/history?days=365'>365 Days</a>
+</div>
+
+<div class="select" id="class_selector">
+  <select>
+    <option disabled>Select a class</option>
+    <option value='completed'>Completed</option>
+    <% @classes.each do |class_name| %>
+      <option value="<%= class_name %>" <%= 'selected' if class_name == @class %>><%= class_name %></option>
+    <% end %>
+  </select>
+</div>
+
+<div id="history_container_completed" class="chart">
+</div>
+
+<div id="history_container_failed" class="chart">
+</div>

data/web/views/layout.erb

@@ -19,8 +19,8 @@
         <li class='column'><a href='overview'>Overview</a></li>
         <li class='column'><a href='details'>Job Details</a></li>
         <li class='column'><a href='queues'>Queues</a></li>
-        <!-- <li class='column'><a href='workers'>Workers</a></li>
-        <li class='column'><a href='failed'>Failed</a></li>
+        <li class='column'><a href='history'>History</a></li>
+        <!-- <li class='column'><a href='failed'>Failed</a></li>
         <li class='column'><a href='scheduled'>Scheduled</a></li> -->
       </ul>
     </nav>

data/web/views/overview.erb

@@ -1,10 +1,3 @@
-<!-- <div id="statistics">
-  <h2>Your current jobs overview</h2>
-  <p id="completed">Finished Jobs: 0</p>
-  <p>Jobs in queue: 100,000,000</p>
-  <p id="failed">Jobs failed: 10,000,000</p>
-</div> -->
-
 <table class='table is-striped'>
   <thead>
     <tr>
@@ -21,6 +14,10 @@
       <td>Queued Jobs</td>
       <td class='queued_jobs_count count'></td>
     </tr>
+    <tr>
+      <td>Scheduled Jobs</td>
+      <td class='scheduled_jobs count'></td>
+    </tr>
     <tr>
       <td>Failed Jobs</td>
       <td class='failed_jobs count'></td>
@@ -35,23 +32,29 @@
     </tr>
     <tr id='memory_usage'>
       <td>Total Memory Usage</td>
-      <td class='memory_usage count'>0</td>
+      <td class='memory_usage count'></td>
     </tr>
     <tr class='nested'>
       <th>Process Id</th>
       <th>Memory Usage</th>
     </tr>
+    <% @processes.each do |id, memory| %>
+      <tr class='nested'>
+        <td><%= id %></td>
+        <td id='process_<%= id %>'></td>
+      </tr>
+    <% end %>
   </tbody>
 </table>
 
-<div id="queued_jobs_container" class="chart" style="height: 300px; width: 100%">
+<div id="queued_jobs_container" class="chart">
 </div>
 
-<div id="failed_jobs_container" class="chart" style="height: 300px; width: 100%">
+<div id="failed_jobs_container" class="chart">
 </div>
 
-<div id="jobs_processed_container" class="chart"  style="height: 300px; width: 100%">
+<div id="jobs_processed_container" class="chart">
 </div>
 
-<div id="total_memory_container" class="chart" style="height: 300px; width: 100%">
+<div id="total_memory_container" class="chart">
 </div>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: workerholic
 version: !ruby/object:Gem::Version
-  version: 0.0.15
+  version: 0.0.16
 platform: ruby
 authors:
 - Antoine Leclercq
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-02 00:00:00.000000000 Z
+date: 2017-08-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: redis
@@ -117,6 +117,7 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- app_test/bm.rb
 - app_test/job_test.rb
 - app_test/run.rb
 - bin/workerholic
@@ -157,6 +158,8 @@ files:
 - spec/queue_spec.rb
 - spec/sorted_set_spec.rb
 - spec/spec_helper.rb
+- spec/statistics_api_spec.rb
+- spec/statistics_storage_spec.rb
 - spec/storage_spec.rb
 - spec/worker_balancer_spec.rb
 - spec/worker_spec.rb
@@ -166,6 +169,7 @@ files:
 - web/public/stylesheets/whitespace-reset.css
 - web/views/details.erb
 - web/views/failed.erb
+- web/views/history.erb
 - web/views/layout.erb
 - web/views/overview.erb
 - web/views/queues.erb
@@ -211,6 +215,8 @@ test_files:
 - spec/queue_spec.rb
 - spec/sorted_set_spec.rb
 - spec/spec_helper.rb
+- spec/statistics_api_spec.rb
+- spec/statistics_storage_spec.rb
 - spec/storage_spec.rb
 - spec/worker_balancer_spec.rb
 - spec/worker_spec.rb