file.diff

diff --git a/app/assets/javascripts/proxy_status/logs.js b/app/assets/javascripts/proxy_status/logs.js
deleted file mode 100644
index 0df7e900e..000000000
--- a/app/assets/javascripts/proxy_status/logs.js
+++ /dev/null
@@ -1,98 +0,0 @@
-function filterLogsReset() {
-  var table = $('#table-proxy-status-logs').DataTable();
-  table.search('').draw();
-}
-
-function filterLogsByLevel(filter) {
-  filterLogsReset();
-  var table = $('#table-proxy-status-logs').DataTable();
-  table.column(1).search(filter, true, false).draw();
-}
-
-function filterLogsByMessage(expression) {
-  filterLogsReset();
-  changeFilterSelection(1);
-  var table = $('#table-proxy-status-logs').DataTable();
-  table.column(1).search('ERROR|FATAL', true, false).draw();
-  table.column(2).search(expression, true, false).draw();
-}
-
-function changeFilterSelection(index) {
-  var filter = $('#logs-filter');
-  filter[0].options[index].selected = true
-  filter.trigger('change');
-  filterLogsByLevel(filter.val());
-}
-
-function activateLogsDataTable() {
-  $('#table-proxy-status-logs').dataTable({
-    dom: "<'row'<'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
-    autoWidth: false,
-    columnDefs: [{
-      render: function ( data, type, row ) {
-        return data;
-      },
-      width: "15%",
-      targets: 0
-    },{
-      width: "10%",
-      targets: 1
-    }]});
-  var filter = $('#logs-filter');
-  activate_select2(filter);
-  filter.on('change', function() { filterLogsByLevel(filter.val()) });
-
-  $('#logEntryModal').on('show.bs.modal', function (event) {
-    var link = $(event.relatedTarget);
-    var modal = $(this);
-    var datetime = link.data('time');
-    var utc_datetime = link.data('utc-time');
-    modal.find('#modal-bt-timegmt').text(utc_datetime);
-    modal.find('#modal-bt-time').text(datetime);
-    modal.find('#modal-bt-level').text(link.data('level'));
-    if (link.data('message')) modal.find('#modal-bt-message').text(link.data('message'));
-    if (link.data('backtrace')) modal.find('#modal-bt-backtrace').text(link.data('backtrace'));
-  })
-  // Activate tooltips for fields with ellipsis
-  tfm.tools.activateTooltips('#table-proxy-status-logs');
-}
-
-function expireLogs(item, from) {
-  table_url = item.getAttribute('data-url');
-  errors_url = item.getAttribute('data-url-errors');
-  modules_url = item.getAttribute('data-url-modules');
-  if (table_url && errors_url && modules_url) {
-    $.ajax({
-      type: 'POST',
-      url: table_url,
-      data: 'from=' + from,
-      success: function(result) {
-        $("#logs").html(result);
-        activateLogsDataTable();
-      },
-      complete: function(){
-        reloadOnAjaxComplete(item);
-      }
-    })
-    $.ajax({
-      type: 'GET',
-      url: errors_url,
-      success: function(result) {
-        $("#ajax-errors-card").html(result);
-      },
-      complete: function(){
-        reloadOnAjaxComplete(item);
-      }
-    })
-    $.ajax({
-      type: 'GET',
-      url: modules_url,
-      success: function(result) {
-        $("#ajax-modules-card").html(result);
-      },
-      complete: function(){
-        reloadOnAjaxComplete(item);
-      }
-    })
-  }
-}
diff --git a/app/views/smart_proxies/logs/_failed_modules.html.erb b/app/views/smart_proxies/logs/_failed_modules.html.erb
index a986d25ef..999a7c500 100644
--- a/app/views/smart_proxies/logs/_failed_modules.html.erb
+++ b/app/views/smart_proxies/logs/_failed_modules.html.erb
@@ -1,6 +1,6 @@
 <% if modules.present? %>
   <% modules.each do |module_name, error_message| %>
-    <a href="#logs" onclick="filterLogsByMessage('<%= module_name %>')" data-toggle="tooltip" data-placement="top" title="<%= error_message %>"><%= Feature.name_map[module_name] || module_name.humanize %></a>
+    <a href="#logs" onclick="tfm.smartProxy.filterLogsByMessage('<%= module_name %>')" data-toggle="tooltip" data-placement="top" title="<%= error_message %>"><%= Feature.name_map[module_name] || module_name.humanize %></a>
   <% end %>
 <% else %>
   <%= _("No Failed Features") %>
diff --git a/app/views/smart_proxies/logs/_list.html.erb b/app/views/smart_proxies/logs/_list.html.erb
index c6e116ef5..ee1d722ec 100644
--- a/app/views/smart_proxies/logs/_list.html.erb
+++ b/app/views/smart_proxies/logs/_list.html.erb
@@ -1,7 +1,7 @@
 <%= render :partial => "smart_proxies/logs/modal" %>
 <div class="fr filter">
   <%= _('Filter by level:') %> <%= logs_filter_tag %>
-  <%= link_to_function_if_authorized(_('Refresh'), "expireLogs(this, -1)", hash_for_expire_logs_smart_proxy_path(:id => @smart_proxy), {
+  <%= link_to_function_if_authorized(_('Refresh'), "tfm.smartProxy.expireLogs(this, -1)", hash_for_expire_logs_smart_proxy_path(:id => @smart_proxy), {
     :data => {
       :"url" => expire_logs_smart_proxy_path(:id => @smart_proxy),
       :"url-errors" => errors_card_smart_proxy_path(:id => @smart_proxy),
diff --git a/app/views/smart_proxies/logs/_modules_card.html.erb b/app/views/smart_proxies/logs/_modules_card.html.erb
index c6c02428d..658b4e030 100644
--- a/app/views/smart_proxies/logs/_modules_card.html.erb
+++ b/app/views/smart_proxies/logs/_modules_card.html.erb
@@ -5,7 +5,7 @@
   <div class="card-pf-body">
     <p class="card-pf-aggregate-status-notifications">
       <% if names.count > 0 %>
-        <span class="card-pf-aggregate-status-notification"><a href="#logs" onclick="filterLogsByMessage('<%= names.join('|') %>')" data-toggle="tooltip" data-placement="top" title="<%= n_('Failed features: %s', 'Failed features: %s', names.count) % names.join(', ') %>"><span class="pficon pficon-warning-triangle-o"></span><%= names.count %></a></span>
+        <span class="card-pf-aggregate-status-notification"><a href="#logs" onclick="tfm.smartProxy.filterLogsByMessage('<%= names.join('|') %>')" data-toggle="tooltip" data-placement="top" title="<%= n_('Failed features: %s', 'Failed features: %s', names.count) % names.join(', ') %>"><span class="pficon pficon-warning-triangle-o"></span><%= names.count %></a></span>
       <% else %>
         <span class="card-pf-aggregate-status-notification"><span class="pficon pficon-ok"></span></span>
       <% end %>
diff --git a/app/views/smart_proxies/plugins/_logs.html.erb b/app/views/smart_proxies/plugins/_logs.html.erb
index 8eed4a542..7fc0a1f66 100644
--- a/app/views/smart_proxies/plugins/_logs.html.erb
+++ b/app/views/smart_proxies/plugins/_logs.html.erb
@@ -1,3 +1,3 @@
 <div class="tab-pane" id="logs" data-ajax-url="<%= log_pane_smart_proxy_path(:smart_proxy_id => @smart_proxy) %>"
-    data-on-complete="activateLogsDataTable"><%= spinner %>
+    data-on-complete="tfm.smartProxy.activateLogsDataTable"><%= spinner %>
 </div>
diff --git a/webpack/assets/javascripts/proxy_status/logs.js b/webpack/assets/javascripts/proxy_status/logs.js
new file mode 100644
index 000000000..5baec5eae
--- /dev/null
+++ b/webpack/assets/javascripts/proxy_status/logs.js
@@ -0,0 +1,117 @@
+
+function filterLogsReset() {
+  const table = $('#table-proxy-status-logs').DataTable();
+  table.search('').draw();
+}
+
+function filterLogsByLevel(filter) {
+  filterLogsReset();
+  const table = $('#table-proxy-status-logs').DataTable();
+  table
+    .column(1)
+    .search(filter, true, false)
+    .draw();
+}
+
+export function filterLogsByMessage(expression) {
+  filterLogsReset();
+  changeFilterSelection(1);
+  const table = $('#table-proxy-status-logs').DataTable();
+  table
+    .column(1)
+    .search('ERROR|FATAL', true, false)
+    .draw();
+  table
+    .column(2)
+    .search(expression, true, false)
+    .draw();
+}
+
+function changeFilterSelection(index) {
+  const filter = $('#logs-filter');
+  filter[0].options[index].selected = true;
+  filter.trigger('change');
+  filterLogsByLevel(filter.val());
+}
+
+export function activateLogsDataTable() {
+  $('#table-proxy-status-logs').dataTable({
+    dom: "<'row'<'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
+    autoWidth: false,
+    columnDefs: [
+      {
+        render(data, type, row) {
+          return data;
+        },
+        width: '15%',
+        targets: 0,
+      },
+      {
+        width: '10%',
+        targets: 1,
+      },
+    ],
+  });
+  const filter = $('#logs-filter');
+  //
+  activate_select2(filter);
+  filter.on('change', () => {
+    filterLogsByLevel(filter.val());
+  });
+
+  $('#logEntryModal').on('show.bs.modal', function({ relatedTarget }) {
+    const link = $(relatedTarget);
+    const modal = $(this);
+    const datetime = link.data('time');
+    const utc_datetime = link.data('utc-time');
+    modal.find('#modal-bt-timegmt').text(utc_datetime);
+    modal.find('#modal-bt-time').text(datetime);
+    modal.find('#modal-bt-level').text(link.data('level'));
+    if (link.data('message'))
+      modal.find('#modal-bt-message').text(link.data('message'));
+    if (link.data('backtrace'))
+      modal.find('#modal-bt-backtrace').text(link.data('backtrace'));
+  });
+  // Activate tooltips for fields with ellipsis
+  activateTooltips('#table-proxy-status-logs');
+}
+
+function expireLogs(item, from) {
+  const table_url = item.getAttribute('data-url');
+  const errors_url = item.getAttribute('data-url-errors');
+  const modules_url = item.getAttribute('data-url-modules');
+  if (table_url && errors_url && modules_url) {
+    $.ajax({
+      type: 'POST',
+      url: table_url,
+      data: `from=${from}`,
+      success(result) {
+        $('#logs').html(result);
+        activateLogsDataTable();
+      },
+      complete() {
+        reloadOnAjaxComplete(item);
+      },
+    });
+    $.ajax({
+      type: 'GET',
+      url: errors_url,
+      success(result) {
+        $('#ajax-errors-card').html(result);
+      },
+      complete() {
+        reloadOnAjaxComplete(item);
+      },
+    });
+    $.ajax({
+      type: 'GET',
+      url: modules_url,
+      success(result) {
+        $('#ajax-modules-card').html(result);
+      },
+      complete() {
+        reloadOnAjaxComplete(item);
+      },
+    });
+  }
+}