Add labels to filter fields

Author: andycandrea

app/views/mission_control/jobs/jobs/_filters.html.erb

@@ -1,45 +1,55 @@
 <div class="filter level-left">
-  <div class="field is-grouped">
-    <div class="control">
-      <%= form_for :filter, url: application_jobs_path(MissionControl::Jobs::Current.application, jobs_status), method: :get,
-        data: { controller: "form", action: "input->form#debouncedSubmit" } do |form| %>
+  <%= form_for :filter, url: application_jobs_path(MissionControl::Jobs::Current.application, jobs_status), method: :get,
+    data: { controller: "form", action: "input->form#debouncedSubmit" } do |form| %>
 
+    <div class="field is-grouped">
+      <div class="control">
+        <%= form.label :job_class_name, class: "label" %>
         <div class="select is-rounded">
           <%= form.text_field :job_class_name, value: @job_filters[:job_class_name], class: "input", list: "job-classes", placeholder: "Filter by job class...", autocomplete: "off" %>
         </div>
+      </div>
 
+      <div class="control">
+        <%= form.label :queue_name, class: "label" %>
         <div class="select is-rounded">
           <%= form.text_field :queue_name, value: @job_filters[:queue_name], class: "input", list: "queue-names", placeholder: "Filter by queue name...", autocomplete: "off" %>
         </div>
+      </div>
 
-        <% if jobs_status == "finished" %>
+      <% if jobs_status == "finished" %>
+        <div class="control">
+          <%= form.label :finished_at_start, class: "label" %>
           <div class="select is-rounded">
             <%= form.datetime_field :finished_at_start, value: @job_filters[:finished_at]&.begin, class: "input", placeholder: "Finished from" %>
           </div>
+        </div>
 
+        <div class="control">
+          <%= form.label :finished_at_end, class: "label" %>
           <div class="select is-rounded">
             <%= form.datetime_field :finished_at_end, value: @job_filters[:finished_at]&.end, class: "input", placeholder: "Finished to" %>
           </div>
-        <% end %>
+        </div>
+      <% end %>
 
-        <%= hidden_field_tag :server_id, MissionControl::Jobs::Current.server.id %>
+      <%= hidden_field_tag :server_id, MissionControl::Jobs::Current.server.id %>
 
-        <datalist id="job-classes" class="is-hidden">
-          <% job_class_names.each do |job_class_name| %>
-            <option value="<%= job_class_name %>"></option>
-          <% end %>
-        </datalist>
+      <datalist id="job-classes" class="is-hidden">
+        <% job_class_names.each do |job_class_name| %>
+          <option value="<%= job_class_name %>"></option>
+        <% end %>
+      </datalist>
 
-        <datalist id="queue-names" class="is-hidden">
-          <% queue_names.each do |queue_name| %>
-            <option value="<%= queue_name %>"></option>
-          <% end %>
-        </datalist>
-      <% end %>
-    </div>
+      <datalist id="queue-names" class="is-hidden">
+        <% queue_names.each do |queue_name| %>
+          <option value="<%= queue_name %>"></option>
+        <% end %>
+      </datalist>
 
-    <div class="control">
-      <%= link_to "Clear", application_jobs_path(MissionControl::Jobs::Current.application, jobs_status, job_class_name: nil, queue_name: nil, finished_at: nil..nil), class: "button" %>
+      <div class="control is-align-self-flex-end">
+        <%= link_to "Clear", application_jobs_path(MissionControl::Jobs::Current.application, jobs_status, job_class_name: nil, queue_name: nil, finished_at: nil..nil), class: "button" %>
+      </div>
     </div>
-  </div>
+  <% end %>
 </div>