Refresh javascripts (#5036)

Refactor Web UI javascripts: - Remove jQuery - Remove dropdown.js, unused - Update app JS to use vanilla JS
sidekiq · Nov 1, 2021 · 4d30390 · 4d30390
1 parent 343b090
commit 4d30390
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 154 deletions.
diff --git a/lib/sidekiq/web/application.rb b/lib/sidekiq/web/application.rb
@@ -91,8 +91,8 @@ def self.set(key, val)
 
       @count = (params["count"] || 25).to_i
       @queue = Sidekiq::Queue.new(@name)
-      (@current_page, @total_size, @messages) = page("queue:#{@name}", params["page"], @count, reverse: params["direction"] == "asc")
-      @messages = @messages.map { |msg| Sidekiq::JobRecord.new(msg, @name) }
+      (@current_page, @total_size, @jobs) = page("queue:#{@name}", params["page"], @count, reverse: params["direction"] == "asc")
+      @jobs = @jobs.map { |msg| Sidekiq::JobRecord.new(msg, @name) }
 
       erb(:queue)
     end

diff --git a/web/assets/javascripts/application.js b/web/assets/javascripts/application.js
diff --git a/web/assets/javascripts/dashboard.js b/web/assets/javascripts/dashboard.js
diff --git a/web/assets/stylesheets/application-rtl.css b/web/assets/stylesheets/application-rtl.css
@@ -46,10 +46,6 @@ form .btn-group .btn {
   .navbar .poll-wrapper {
     margin: 4px 0 0 4px;
   }
-
-  .navbar .dropdown-menu a {
-    text-align: right;
-  }
 }
 
 .navbar-footer .navbar ul.nav a.navbar-brand {

diff --git a/web/assets/stylesheets/application.css b/web/assets/stylesheets/application.css
@@ -266,18 +266,6 @@ table .table-checkbox label {
   .navbar .poll-wrapper {
     margin: 4px 4px 0 0;
   }
-
-  .navbar .dropdown-menu {
-    min-width: 120px;
-  }
-
-  .navbar .dropdown-menu a {
-    text-align: left;
-  }
-}
-
-.nav .dropdown {
-  display: none;
 }
 
 .navbar-footer .navbar ul.nav {

diff --git a/web/views/_footer.erb b/web/views/_footer.erb
@@ -9,7 +9,7 @@
             <p class="navbar-text redis-url" title="<%= redis_connection_and_namespace %>"><%= redis_connection_and_namespace %></p>
           </li>
           <li>
-            <p class="navbar-text server-utc-time"><%= server_utc_time %></p>
+            <p id="serverUtcTime" class="navbar-text server-utc-time"><%= server_utc_time %></p>
           </li>
           <li>
             <p class="navbar-text"><a style="color: gray;" href="https://github.com/mperham/sidekiq/wiki">docs</a></p>

diff --git a/web/views/_summary.erb b/web/views/_summary.erb
@@ -1,39 +1,39 @@
 <ul class="list-unstyled summary row">
   <li class="processed col-sm-1">
-    <span class="count"><%= number_with_delimiter(stats.processed) %></span>
+    <span id="txtProcessed" class="count"><%= number_with_delimiter(stats.processed) %></span>
     <span class="desc"><%= t('Processed') %></span>
   </li>
   <li class="failed col-sm-1">
-    <span class="count"><%= number_with_delimiter(stats.failed) %></span>
+    <span id="txtFailed" class="count"><%= number_with_delimiter(stats.failed) %></span>
     <span class="desc"><%= t('Failed') %></span>
   </li>
   <li class="busy col-sm-1">
     <a href="<%= root_path %>busy">
-      <span class="count"><%= number_with_delimiter(workers.size) %></span>
+      <span id="txtBusy" class="count"><%= number_with_delimiter(workers.size) %></span>
       <span class="desc"><%= t('Busy') %></span>
     </a>
   </li>
   <li class="enqueued col-sm-1">
     <a href="<%= root_path %>queues">
-      <span class="count"><%= number_with_delimiter(stats.enqueued) %></span>
+      <span id="txtEnqueued" class="count"><%= number_with_delimiter(stats.enqueued) %></span>
       <span class="desc"><%= t('Enqueued') %></span>
     </a>
   </li>
   <li class="retries col-sm-1">
     <a href="<%= root_path %>retries">
-      <span class="count"><%= number_with_delimiter(stats.retry_size) %></span>
+      <span id="txtRetries" class="count"><%= number_with_delimiter(stats.retry_size) %></span>
       <span class="desc"><%= t('Retries') %></span>
     </a>
   </li>
   <li class="scheduled col-sm-1">
     <a href="<%= root_path %>scheduled">
-      <span class="count"><%= number_with_delimiter(stats.scheduled_size) %></span>
+      <span id="txtScheduled" class="count"><%= number_with_delimiter(stats.scheduled_size) %></span>
       <span class="desc"><%= t('Scheduled') %></span>
     </a>
   </li>
   <li class="dead col-sm-1">
     <a href="<%= root_path %>morgue">
-      <span class="count"><%= number_with_delimiter(stats.dead_size) %></span>
+      <span id="txtDead" class="count"><%= number_with_delimiter(stats.dead_size) %></span>
       <span class="desc"><%= t('Dead') %></span>
     </a>
   </li>

diff --git a/web/views/dashboard.erb b/web/views/dashboard.erb
@@ -2,16 +2,16 @@
 <div class= "dashboard clearfix">
   <h3 >
     <%= t('Dashboard') %>
-    <span class="beacon">
+    <span id="beacon" class="beacon">
       <span class="ring"></span>
       <span class="dot"></span>
     </span>
   </h3>
   <div class="interval-slider ltr">
     <span class="interval-slider-label"><%= t('PollingInterval') %>:</span>
-    <span class="current-interval">5 sec</span>
+    <span id="sldr-text" class="current-interval">5 sec</span>
     <br/>
-    <input type="range" min="2000" max="20000" step="1000" value="5000"/>
+    <input id="sldr" type="range" min="2000" max="20000" step="1000" value="5000"/>
   </div>
 </div>
 
@@ -47,35 +47,35 @@
   <div class="stats-container">
     <% if @redis_info.fetch("redis_version", nil) %>
       <div class="stat">
-        <h3 class="redis_version"><%= @redis_info.fetch("redis_version") %></h3>
+        <h3 id="redis_version"><%= @redis_info.fetch("redis_version") %></h3>
         <p><%= t('Version') %></p>
       </div>
     <% end %>
 
     <% if @redis_info.fetch("uptime_in_days", nil) %>
       <div class="stat">
-        <h3 class="uptime_in_days"><%= @redis_info.fetch("uptime_in_days") %></h3>
+        <h3 id="uptime_in_days"><%= @redis_info.fetch("uptime_in_days") %></h3>
         <p><%= t('Uptime') %></p>
       </div>
     <% end %>
 
     <% if @redis_info.fetch("connected_clients", nil) %>
       <div class="stat">
-        <h3 class="connected_clients"><%= @redis_info.fetch("connected_clients") %></h3>
+        <h3 id="connected_clients"><%= @redis_info.fetch("connected_clients") %></h3>
         <p><%= t('Connections') %></p>
       </div>
     <% end %>
 
     <% if @redis_info.fetch("used_memory_human", nil) %>
       <div class="stat">
-        <h3 class="used_memory_human"><%= @redis_info.fetch("used_memory_human") %></h3>
+        <h3 id="used_memory_human"><%= @redis_info.fetch("used_memory_human") %></h3>
         <p><%= t('MemoryUsage') %></p>
       </div>
     <% end %>
 
     <% if @redis_info.fetch("used_memory_peak_human", nil) %>
       <div class="stat">
-        <h3 class="used_memory_peak_human"><%= @redis_info.fetch("used_memory_peak_human") %></h3>
+        <h3 id="used_memory_peak_human"><%= @redis_info.fetch("used_memory_peak_human") %></h3>
         <p><%= t('PeakMemoryUsage') %></p>
       </div>
     <% end %>

diff --git a/web/views/queue.erb b/web/views/queue.erb
@@ -20,31 +20,31 @@
       <th><%= t('Arguments') %></th>
       <th></th>
     </thead>
-    <% @messages.each_with_index do |msg, index| %>
-      <tr>
+    <% @jobs.each_with_index do |job, index| %>
+      <tr title="<%= job.jid %>">
         <% if params[:direction] == 'asc' %>
           <td><%= @count * (@current_page - 1) + index + 1 %></td>
         <% else %>
           <td><%= @total_size - (@count * (@current_page - 1) + index) %></td>
         <% end %>
         <td>
-          <%= h(msg.display_class) %>
-          <%= display_tags(msg, nil) %>
+          <%= h(job.display_class) %>
+          <%= display_tags(job, nil) %>
         </td>
         <td>
-          <% a = msg.display_args %>
+          <% a = job.display_args %>
           <% if a.inspect.size > 100 %>
-            <span class="worker_<%= index %>"><%= h(a.inspect[0..100]) + "... " %></span>
-            <button data-toggle="collapse" data-target=".worker_<%= index %>" class="btn btn-default btn-xs"><%= t('ShowAll') %></button>
-            <div class="toggle worker_<%= index %>"><%= display_args(a) %></div>
+            <span id="job_<%= index %>"><%= h(a.inspect[0..100]) + "... " %></span>
+            <button data-toggle="job_<%= index %>" class="btn btn-default btn-xs"><%= t('ShowAll') %></button>
+            <div class="toggle" id="job_<%= index %>_full"><%= display_args(a) %></div>
           <% else %>
-            <%= display_args(msg.display_args) %>
+            <%= display_args(job.display_args) %>
           <% end %>
         </td>
         <td>
           <form action="<%= root_path %>queues/<%= CGI.escape(@name) %>/delete" method="post">
             <%= csrf_tag %>
-            <input name="key_val" value="<%= h msg.value %>" type="hidden" />
+            <input name="key_val" value="<%= h job.value %>" type="hidden" />
             <input class="btn btn-danger btn-xs" type="submit" name="delete" value="<%= t('Delete') %>" data-confirm="<%= t('AreYouSure') %>" />
           </form>
         </td>