Remove CoffeeScript usage

app/assets/javascripts/barbeque/application.js

@@ -1,7 +1,7 @@
 // This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
-// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// Any JavaScript file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
 // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
 //
 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the

app/assets/javascripts/barbeque/job_definitions.js

@@ -0,0 +1,23 @@
+jQuery(function($) {
+  if (!document.querySelector('.barbeque_job_definitions_controller')) {
+    return;
+  }
+
+  $('.use_slack_notification').bind('change', function(event) {
+    const enabledField = $('.slack_notification_field');
+    if (event.target.value === 'true') {
+      enabledField.removeClass('active');
+    } else {
+      enabledField.addClass('active');
+    }
+  });
+
+  $('.enable_retry_configuration').bind('change', function(event) {
+    const enabledField = $('.retry_configuration_field');
+    if (event.target.value === 'true') {
+      enabledField.removeClass('active');
+    } else {
+      enabledField.addClass('active');
+    }
+  });
+});

app/assets/javascripts/barbeque/job_queues.js

@@ -0,0 +1,123 @@
+jQuery(function($) {
+  if (!document.querySelector('.barbeque_job_queues_controller')) {
+    return;
+  }
+  const sqsDiv = document.getElementById('sqs-attributes');
+  if (!sqsDiv) {
+    return;
+  }
+
+  const { url, metricsUrl } = sqsDiv.dataset;
+  $.getJSON(url).done(data => {
+    renderBox(sqsDiv, 'SQS queue metrics', metricsUrl, data);
+    if (data.dlq) {
+      const dlqDiv = document.getElementById('sqs-dlq-attributes');
+      renderBox(dlqDiv, 'SQS dead-letter queue metrics', metricsUrl, data.dlq);
+    }
+  }).fail(jqxhr => {
+    const errorMessage = document.createElement('div');
+    errorMessage.classList.add('alert');
+    errorMessage.classList.add('alert-danger');
+    errorMessage.appendChild(document.createTextNode(`Server returned ${jqxhr.status}: ${jqxhr.statusText}`));
+
+    const indicator = sqsDiv.querySelector('.loading-indicator');
+    if (indicator) {
+      indicator.parentNode.removeChild(indicator);
+    }
+    sqsDiv.appendChild(errorMessage);
+  });
+});
+
+const renderBox = (div, title, metricsUrl, data) => {
+  const box = document.createElement('div');
+  box.classList.add('box');
+  const boxHeader = document.createElement('div');
+  boxHeader.classList.add('box-header');
+  const boxTitle = document.createElement('h3');
+  boxTitle.classList.add('box-title');
+  boxTitle.classList.add('with_padding');
+  boxTitle.appendChild(document.createTextNode(title));
+  boxHeader.appendChild(boxTitle);
+  const boxBody = document.createElement('div');
+  boxBody.classList.add('box-body');
+  box.appendChild(boxHeader);
+  box.appendChild(boxBody);
+
+  const table = document.createElement('table');
+  table.classList.add('table');
+  table.classList.add('table-bordered');
+  const thead = document.createElement('thead');
+  const theadTr = document.createElement('tr');
+  thead.appendChild(theadTr);
+  const tbody = document.createElement('tbody');
+  const tbodyTr = document.createElement('tr');
+  tbody.appendChild(tbodyTr);
+  for (const [name, value] of Object.entries(data.attributes)) {
+    const th = document.createElement('th');
+    th.appendChild(document.createTextNode(name));
+    theadTr.appendChild(th);
+    const td = document.createElement('td');
+    td.appendChild(document.createTextNode(value));
+    tbodyTr.appendChild(td);
+  }
+  table.appendChild(thead);
+  table.appendChild(tbody);
+  boxBody.appendChild(table);
+
+  const indicator = div.querySelector('.loading-indicator');
+  if (indicator) {
+    indicator.parentNode.removeChild(indicator);
+  }
+  div.appendChild(box);
+
+  const metrics = {
+    NumberOfMessagesSent: 'Sum',
+    ApproximateNumberOfMessagesVisible: 'Sum',
+    ApproximateNumberOfMessagesNotVisible: 'Sum',
+    ApproximateAgeOfOldestMessage: 'Maximum',
+  };
+  const row = document.createElement('div');
+  row.classList.add('row');
+  boxBody.appendChild(row);
+  for (const [metricName, statistic] of Object.entries(metrics)) {
+    $.getJSON(`${metricsUrl}?queue_name=${data.queue_name}&metric_name=${metricName}&statistic=${statistic}`).done(data => {
+      renderChart(row, data);
+    }).fail(jqxhr => {
+      const errorMessage = document.createElement('div');
+      errorMessage.classList.add('alert');
+      errorMessage.classList.add('alert-danger');
+      errorMessage.appendChild(document.createTextNode(`Failed to load SQS metrics ${metricName}: ${jqxhr.status}: ${jqxhr.statusText}`));
+
+      return div.appendChild(errorMessage);
+    });
+  }
+};
+
+const renderChart = function(row, data) {
+  const div = document.createElement('div');
+  div.classList.add('col-md-3');
+  const chartDiv = document.createElement('div');
+  div.appendChild(chartDiv);
+  div.dataset.label = data.label;
+
+  // Insert charts ordered by label name
+  let inserted = false;
+  for (const child of row.children) {
+    if (data.label < child.dataset.label) {
+      row.insertBefore(div, child);
+      inserted = true;
+      break;
+    }
+  }
+  if (!inserted) {
+    row.appendChild(div);
+  }
+
+  return Plotly.plot(chartDiv, [{
+    type: 'scatter',
+    x: data.datapoints.map(point => point.timestamp),
+    y: data.datapoints.map(point => point.value),
+  }], {
+    title: data.label,
+  });
+};

app/views/barbeque/job_definitions/stats.html.haml

@@ -25,15 +25,15 @@
 
 = link_to 'Back', job_definition_path(@job_definition)
 
-:coffee
-  jQuery(($) ->
-    $.getJSON('#{job_definition_execution_stats_path(@job_definition, days: @days)}').then((stats) ->
-      countDiv = document.getElementById('execution-count-chart')
-      timeDiv = document.getElementById('execution-time-chart')
+:javascript
+  jQuery(function($) {
+    $.getJSON('#{job_definition_execution_stats_path(@job_definition, days: @days)}').then(stats => {
+      const countDiv = document.getElementById('execution-count-chart');
+      const timeDiv = document.getElementById('execution-time-chart');
 
-      date_hours = stats.map((stat) -> stat.date_hour)
-      counts = stats.map((stat) -> stat.count)
-      avg_times = stats.map((stat) -> stat.avg_time)
+      const date_hours = stats.map(stat => stat.date_hour);
+      const counts = stats.map(stat => stat.count);
+      const avg_times = stats.map(stat => stat.avg_time);
 
       Plotly.plot(countDiv, [
         {
@@ -44,7 +44,7 @@
         },
       ], {
         title: 'Number of executions (hourly)',
-      })
+      });
       Plotly.plot(timeDiv, [
         {
           type: 'scatter',
@@ -54,6 +54,6 @@
         },
       ], {
         title: 'Average execution time (hourly)',
-      })
-    )
-  )
+      });
+    });
+  });

app/views/barbeque/monitors/index.html.haml

@@ -29,31 +29,35 @@
                   %td= link_to(job[:job_name], job_definition_path(job[:job_id]))
                   %td= job[:count]
 
-:coffee
-  chartDiv = document.getElementById('recently-processed-jobs-chart')
-  recentlyProcesedJobs = JSON.parse(chartDiv.dataset.jobs)
+:javascript
+  const chartDiv = document.getElementById('recently-processed-jobs-chart');
+  const recentlyProcesedJobs = JSON.parse(chartDiv.dataset.jobs);
 
-  countsPerJob = {}
-  for own dateHour, jobs of recentlyProcesedJobs
-    for own jobId, job of jobs
-      name = job.app_name + ' - ' + job.job_name
-      countsPerJob[name] ||= []
-      countsPerJob[name][dateHour] ||= job.count
+  const countsPerJob = {};
+  for (const [dateHour, jobs] of Object.entries(recentlyProcesedJobs)) {
+    for (const job of Object.values(jobs)) {
+      const name = job.app_name + ' - ' + job.job_name;
+      if (!countsPerJob[name]) { countsPerJob[name] = []; }
+      if (!countsPerJob[name][dateHour]) { countsPerJob[name][dateHour] = job.count; }
+    }
+  }
 
-  plotlyArgs = []
-  for own name, series of countsPerJob
-    x = []
-    y = []
-    for own dateHour, count of series
-      x.push(dateHour)
-      y.push(count)
+  const plotlyArgs = [];
+  for (const [name, series] of Object.entries(countsPerJob)) {
+    const x = [];
+    const y = [];
+    for (const [dateHour, count] of Object.entries(series)) {
+      x.push(dateHour);
+      y.push(count);
+    }
     plotlyArgs.push({
       type: 'scatter',
-      name: name,
-      x: x,
-      y: y,
+      name,
+      x,
+      y,
       hoverlabel: {
         namelength: -1,
       }
-    })
-  Plotly.plot(chartDiv, plotlyArgs)
+    });
+  }
+  Plotly.plot(chartDiv, plotlyArgs);

barbeque.gemspec

@@ -22,7 +22,6 @@ Gem::Specification.new do |s|
   s.add_dependency "aws-sdk-s3"
   s.add_dependency "aws-sdk-sns"
   s.add_dependency "aws-sdk-sqs"
-  s.add_dependency "coffee-rails"
   s.add_dependency "hamlit"
   s.add_dependency "jquery-rails"
   s.add_dependency "kaminari", ">= 1.2.1"