Merge branch 'feature/runner-state-filter-for-admin-view' into 'master'

Feature: State filter for admin runners view

See merge request gitlab-org/gitlab-ce!19625

4 files changed, 123 insertions, 69 deletions

diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index 43937b01339..9c15226f0ec 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,5 +1,5 @@
-%tr{ id: dom_id(runner) }
-  %td
+.gl-responsive-table-row{ id: dom_id(runner) }
+  = render layout: 'runner_table_cell', locals: { label: _('Type') } do
     - if runner.instance_type?
       %span.badge.badge-success shared
     - elsif runner.group_type?
@@ -11,41 +11,50 @@
     - unless runner.active?
       %span.badge.badge-danger paused
 
-  %td
-    = link_to admin_runner_path(runner) do
-      = runner.short_sha
-  %td
+  = render layout: 'runner_table_cell', locals: { label: _('Runner token') } do
+    = link_to runner.short_sha, admin_runner_path(runner)
+
+  = render layout: 'runner_table_cell', locals: { label: _('Description') } do
     = runner.description
-  %td
+
+  = render layout: 'runner_table_cell', locals: { label: _('Version') } do
     = runner.version
-  %td
+
+  = render layout: 'runner_table_cell', locals: { label: _('IP Address') } do
     = runner.ip_address
-  %td
+
+  = render layout: 'runner_table_cell', locals: { label: _('Projects') } do
     - if runner.instance_type? || runner.group_type?
-      n/a
+      = _('n/a')
     - else
       = runner.projects.count(:all)
-  %td
-    #{runner.builds.count(:all)}
-  %td
+
+  = render layout: 'runner_table_cell', locals: { label: _('Jobs') } do
+    = runner.builds.count(:all)
+
+  = render layout: 'runner_table_cell', locals: { label: _('Tags') } do
     - runner.tag_list.sort.each do |tag|
       %span.badge.badge-primary
         = tag
-  %td
+
+  = render layout: 'runner_table_cell', locals: { label: _('Last contact') } do
     - if runner.contacted_at
       = time_ago_with_tooltip runner.contacted_at
     - else
-      Never
-  %td.admin-runner-btn-group-cell
-    .float-right.btn-group
-      = link_to admin_runner_path(runner), class: 'btn btn-sm btn-default has-tooltip', title: 'Edit', ref: 'tooltip', aria: { label: 'Edit' }, data: { placement: 'top', container: 'body'} do
-        = icon('pencil')
-       
-      - if runner.active?
-        = link_to [:pause, :admin, runner], method: :get, class: 'btn btn-sm btn-default has-tooltip', title: 'Pause', ref: 'tooltip', aria: { label: 'Pause' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
-          = icon('pause')
-      - else
-        = link_to [:resume, :admin, runner], method: :get, class: 'btn btn-default btn-sm has-tooltip', title: 'Resume', ref: 'tooltip', aria: { label: 'Resume' }, data: { placement: 'top', container: 'body'} do
-          = icon('play')
-      = link_to [:admin, runner], method: :delete, class: 'btn btn-danger btn-sm has-tooltip', title: 'Remove', ref: 'tooltip', aria: { label: 'Remove' }, data: { placement: 'top', container: 'body', confirm: "Are you sure?" } do
-        = icon('remove')
+      = _('Never')
+
+  .table-section.table-button-footer.section-10
+    .btn-group.table-action-buttons
+      .btn-group
+        = link_to admin_runner_path(runner), class: 'btn btn-default has-tooltip', title: _('Edit'), ref: 'tooltip', aria: { label: _('Edit') }, data: { placement: 'top', container: 'body'} do
+          = icon('pencil')
+      .btn-group
+        - if runner.active?
+          = link_to [:pause, :admin, runner], method: :get, class: 'btn btn-default has-tooltip', title: _('Pause'), ref: 'tooltip', aria: { label: _('Pause') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+            = icon('pause')
+        - else
+          = link_to [:resume, :admin, runner], method: :get, class: 'btn btn-default has-tooltip', title: _('Resume'), ref: 'tooltip', aria: { label: _('Resume') }, data: { placement: 'top', container: 'body'} do
+            = icon('play')
+      .btn-group
+        = link_to [:admin, runner], method: :delete, class: 'btn btn-danger has-tooltip', title: _('Remove'), ref: 'tooltip', aria: { label: _('Remove') }, data: { placement: 'top', container: 'body', confirm: _('Are you sure?') } do
+          = icon('remove')
diff --git a/app/views/admin/runners/_runner_table_cell.html.haml b/app/views/admin/runners/_runner_table_cell.html.haml
new file mode 100644
index 00000000000..78526ee6d23
--- /dev/null
+++ b/app/views/admin/runners/_runner_table_cell.html.haml
@@ -0,0 +1,4 @@
+.table-section.section-10
+  .table-mobile-header{ role: 'rowheader' }= label
+  .table-mobile-content
+    = yield
diff --git a/app/views/admin/runners/_sort_dropdown.html.haml b/app/views/admin/runners/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..b201e6bf10e
--- /dev/null
+++ b/app/views/admin/runners/_sort_dropdown.html.haml
@@ -0,0 +1,11 @@
+- sorted_by = sort_options_hash[@sort]
+
+.dropdown.inline.prepend-left-10
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' } }
+    = sorted_by
+    = icon('chevron-down')
+  %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+    %li
+      = sortable_item(sort_title_created_date,     page_filter_path(sort: sort_value_created_date,     label: true), sorted_by)
+      = sortable_item(sort_title_contacted_date,   page_filter_path(sort: sort_value_contacted_date,   label: true), sorted_by)
+
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 9280ff4d478..4dc076c95c5 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -1,77 +1,107 @@
-- breadcrumb_title "Runners"
+- breadcrumb_title _('Runners')
 - @no_container = true
 
 %div{ class: container_class }
   .bs-callout
     %p
-      A 'Runner' is a process which runs a job.
-      You can setup as many Runners as you need.
+      = (_"A 'Runner' is a process which runs a job. You can setup as many Runners as you need.")
       %br
-      Runners can be placed on separate users, servers, even on your local machine.
+      = _('Runners can be placed on separate users, servers, even on your local machine.')
       %br
 
     %div
-      %span Each Runner can be in one of the following states:
+      %span= _('Each Runner can be in one of the following states:')
       %ul
         %li
           %span.badge.badge-success shared
-          \- Runner runs jobs from all unassigned projects
+          \-
+          = _('Runner runs jobs from all unassigned projects')
         %li
           %span.badge.badge-success group
-          \- Runner runs jobs from all unassigned projects in its group
+          \-
+          = _('Runner runs jobs from all unassigned projects in its group')
         %li
           %span.badge.badge-info specific
-          \- Runner runs jobs from assigned projects
+          \-
+          = _('Runner runs jobs from assigned projects')
         %li
           %span.badge.badge-warning locked
-          \- Runner cannot be assigned to other projects
+          \-
+          = _('Runner cannot be assigned to other projects')
         %li
           %span.badge.badge-danger paused
-          \- Runner will not receive any new jobs
+          \-
+          = _('Runner will not receive any new jobs')
 
   .bs-callout.clearfix
     .float-left
       %p
-        You can reset runners registration token by pressing a button below.
+        = _('You can reset runners registration token by pressing a button below.')
       .prepend-top-10
-        = button_to _("Reset runners registration token"), reset_runners_token_admin_application_settings_path,
+        = button_to _('Reset runners registration token'), reset_runners_token_admin_application_settings_path,
           method: :put, class: 'btn btn-default',
-          data: { confirm: _("Are you sure you want to reset registration token?") }
+          data: { confirm: _('Are you sure you want to reset registration token?') }
 
   = render partial: 'ci/runner/how_to_setup_shared_runner',
            locals: { registration_token: Gitlab::CurrentSettings.runners_registration_token }
 
-  .append-bottom-20.clearfix
-    .float-left
-      = form_tag admin_runners_path, id: 'runners-search', class: 'form-inline', method: :get do
-        .form-group
-          = search_field_tag :search, params[:search], class: 'form-control input-short', placeholder: 'Runner description or token', spellcheck: false
-        = submit_tag 'Search', class: 'btn'
-
-    .float-right.light
-      Runners currently online: #{@active_runners_cnt}
+  .bs-callout
+    %p
+      = _('Runners currently online: %{active_runners_count}') % { active_runners_count: @active_runners_count }
 
-  %br
+  .row-content-block.second-block
+    = form_tag admin_runners_path, id: 'runners-search', method: :get, class: 'filter-form js-filter-form' do
+      .filtered-search-wrapper
+        .filtered-search-box
+          = dropdown_tag(custom_icon('icon_history'),
+            options: { wrapper_class: 'filtered-search-history-dropdown-wrapper',
+            toggle_class: 'filtered-search-history-dropdown-toggle-button',
+            dropdown_class: 'filtered-search-history-dropdown',
+            content_class: 'filtered-search-history-dropdown-content',
+            title: _('Recent searches') }) do
+            .js-filtered-search-history-dropdown{ data: { full_path: admin_runners_path } }
+          .filtered-search-box-input-container.droplab-dropdown
+            .scroll-container
+              %ul.tokens-container.list-unstyled
+                %li.input-token
+                  %input.form-control.filtered-search{ { id: 'filtered-search-runners', placeholder: _('Search or filter results...') } }
+            #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown
+              %ul{ data: { dropdown: true } }
+                %li.filter-dropdown-item{ data: { action: 'submit' } }
+                  = button_tag class: %w[btn btn-link] do
+                    = icon('search')
+                    %span
+                      = _('Press Enter or click to search')
+              %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+                %li.filter-dropdown-item
+                  = button_tag class: %w[btn btn-link] do
+                    -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                    -# haml lint's ClassAttributeWithStaticValue
+                    %i.fa{ class: "#{'{{icon}}'}" }
+                    %span.js-filter-hint
+                      {{hint}}
+                    %span.js-filter-tag.dropdown-light-content
+                      {{tag}}
+            #js-dropdown-admin-runner-status.filtered-search-input-dropdown-menu.dropdown-menu
+              %ul{ data: { dropdown: true } }
+                - Ci::Runner::AVAILABLE_STATUSES.each do |status|
+                  %li.filter-dropdown-item{ data: { value: status } }
+                    = button_tag class: %w[btn btn-link] do
+                      = status.titleize
+          = button_tag class: %w[clear-search hidden] do
+            = icon('times')
+        .filter-dropdown-container
+          = render 'sort_dropdown'
 
   - if @runners.any?
-    .runners-content
+    .runners-content.content-list
       .table-holder
-        %table.table
-          %thead
-            %tr
-              %th Type
-              %th Runner token
-              %th Description
-              %th Version
-              %th IP Address
-              %th Projects
-              %th Jobs
-              %th Tags
-              %th= link_to 'Last contact', admin_runners_path(safe_params.slice(:search).merge(sort: 'contacted_asc'))
-              %th
+        .gl-responsive-table-row.table-row-header{ role: 'row' }
+          - [_('Type'), _('Runner token'), _('Description'), _('Version'), _('IP Address'), _('Projects'), _('Jobs'), _('Tags'), _('Last contact')].each do |label|
+            .table-section.section-10{ role: 'rowheader' }= label
 
-          - @runners.each do |runner|
-            = render "admin/runners/runner", runner: runner
-      = paginate @runners, theme: "gitlab"
+        - @runners.each do |runner|
+          = render 'admin/runners/runner', runner: runner
+      = paginate @runners, theme: 'gitlab'
   - else
-    .nothing-here-block No runners found
+    .nothing-here-block= _('No runners found')