Reverts changes to the runners table

Reverts !21802, it was picked into 11-3-stable
due to being mislabeled and with the wrong milestone.

This commit reverts the changes wrongly added to 11-3-stable

3 files changed, 64 insertions, 89 deletions

diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index fc185ccfaad..764bebd82c6 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -39,7 +39,7 @@
 .table-section {
   white-space: nowrap;
 
-  $section-widths: 5 10 15 20 25 30 40 50 100;
+  $section-widths: 10 15 20 25 30 40 50 100;
   @each $width in $section-widths {
     &.section-#{$width} {
       flex: 0 0 #{$width + '%'};
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index e4fc2985087..43937b01339 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,78 +1,51 @@
-.gl-responsive-table-row{ id: dom_id(runner) }
-  .table-section.section-10.section-wrap
-    .table-mobile-header{ role: 'rowheader' }= _('Type')
-    .table-mobile-content
-      - if runner.instance_type?
-        %span.badge.badge-success shared
-      - elsif runner.group_type?
-        %span.badge.badge-success group
+%tr{ id: dom_id(runner) }
+  %td
+    - if runner.instance_type?
+      %span.badge.badge-success shared
+    - elsif runner.group_type?
+      %span.badge.badge-success group
+    - else
+      %span.badge.badge-info specific
+    - if runner.locked?
+      %span.badge.badge-warning locked
+    - unless runner.active?
+      %span.badge.badge-danger paused
+
+  %td
+    = link_to admin_runner_path(runner) do
+      = runner.short_sha
+  %td
+    = runner.description
+  %td
+    = runner.version
+  %td
+    = runner.ip_address
+  %td
+    - if runner.instance_type? || runner.group_type?
+      n/a
+    - else
+      = runner.projects.count(:all)
+  %td
+    #{runner.builds.count(:all)}
+  %td
+    - runner.tag_list.sort.each do |tag|
+      %span.badge.badge-primary
+        = tag
+  %td
+    - 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
-        %span.badge.badge-info specific
-      - if runner.locked?
-        %span.badge.badge-warning locked
-      - unless runner.active?
-        %span.badge.badge-danger paused
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Runner token')
-    .table-mobile-content
-      = link_to runner.short_sha, admin_runner_path(runner)
-
-  .table-section.section-15
-    .table-mobile-header{ role: 'rowheader' }= _('Description')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.description }
-      = runner.description
-
-  .table-section.section-15
-    .table-mobile-header{ role: 'rowheader' }= _('Version')
-    .table-mobile-content.str-truncated.has-tooltip{ title: runner.version }
-      = runner.version
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('IP Address')
-    .table-mobile-content
-      = runner.ip_address
-
-  .table-section.section-5
-    .table-mobile-header{ role: 'rowheader' }= _('Projects')
-    .table-mobile-content
-      - if runner.instance_type? || runner.group_type?
-        = _('n/a')
-      - else
-        = runner.projects.count(:all)
-
-  .table-section.section-5
-    .table-mobile-header{ role: 'rowheader' }= _('Jobs')
-    .table-mobile-content
-      = runner.builds.count(:all)
-
-  .table-section.section-10.section-wrap
-    .table-mobile-header{ role: 'rowheader' }= _('Tags')
-    .table-mobile-content
-      - runner.tag_list.sort.each do |tag|
-        %span.badge.badge-primary
-          = tag
-
-  .table-section.section-10
-    .table-mobile-header{ role: 'rowheader' }= _('Last contact')
-    .table-mobile-content
-      - if runner.contacted_at
-        = time_ago_with_tooltip runner.contacted_at
-      - else
-        = _('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')
+        = 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')
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 3b2abe82fd1..9280ff4d478 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -56,17 +56,19 @@
   - if @runners.any?
     .runners-content
       .table-holder
-        .gl-responsive-table-row.table-row-header{ role: 'row' }
-          .table-section.section-10{ role: 'rowheader' }= _('Type')
-          .table-section.section-10{ role: 'rowheader' }= _('Runner token')
-          .table-section.section-15{ role: 'rowheader' }= _('Description')
-          .table-section.section-15{ role: 'rowheader' }= _('Version')
-          .table-section.section-10{ role: 'rowheader' }= _('IP Address')
-          .table-section.section-5{ role: 'rowheader' }= _('Projects')
-          .table-section.section-5{ role: 'rowheader' }= _('Jobs')
-          .table-section.section-10{ role: 'rowheader' }= _('Tags')
-          .table-section.section-10{ role: 'rowheader' }= _('Last contact')
-          .table-section.section-10{ role: 'rowheader' }
+        %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
 
           - @runners.each do |runner|
             = render "admin/runners/runner", runner: runner