Commit a9f60785 authored by Dylan Griffith's avatar Dylan Griffith

Merge branch '294246-replace-runner-status-icons-with-svgs' into 'master'

Improve runner status icon usability and a11y

See merge request gitlab-org/gitlab!58781
parents f10a5990 fe8b9e0c
...@@ -11,17 +11,3 @@ ...@@ -11,17 +11,3 @@
background: $blue-400; background: $blue-400;
} }
} }
.runner-status {
&.runner-status-online {
background-color: $green-600;
}
&.runner-status-offline {
background-color: $gray-darkest;
}
&.runner-status-paused {
background-color: $red-500;
}
}
...@@ -4,18 +4,33 @@ module Ci ...@@ -4,18 +4,33 @@ module Ci
module RunnersHelper module RunnersHelper
include IconsHelper include IconsHelper
def runner_status_icon(runner) def runner_status_icon(runner, size: 16, icon_class: '')
status = runner.status status = runner.status
title = ''
icon = 'warning-solid'
span_class = ''
case status case status
when :not_connected when :not_connected
content_tag(:span, title: _("New runner. Has not connected yet")) do title = s_("Runners|New runner, has not connected yet")
sprite_icon("warning-solid", size: 24, css_class: "gl-vertical-align-bottom!") icon = 'warning-solid'
end when :online
title = s_("Runners|Runner is online, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
icon = 'status-active'
span_class = 'gl-text-green-500'
when :offline
title = s_("Runners|Runner is offline, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
icon = 'status-failed'
span_class = 'gl-text-red-500'
when :paused
title = s_("Runners|Runner is paused, last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(runner.contacted_at) }
icon = 'status-paused'
span_class = 'gl-text-gray-600'
end
when :online, :offline, :paused content_tag(:span, class: span_class, title: title, data: { toggle: 'tooltip', container: 'body', testid: 'runner_status_icon', qa_selector: "runner_status_#{status}_content" }) do
content_tag :span, nil, sprite_icon(icon, size: size, css_class: icon_class)
class: "gl-display-inline-block gl-avatar gl-avatar-s16 gl-avatar-circle runner-status runner-status-#{status}",
title: _("Runner is %{status}, last contact was %{runner_contact} ago") % { status: status, runner_contact: time_ago_in_words(runner.contacted_at) }
end end
end end
......
%li.runner{ id: dom_id(runner) } %li.runner{ id: dom_id(runner) }
%h4.gl-font-weight-normal %h4.gl-font-weight-normal
= runner_status_icon(runner) = runner_status_icon(runner, size: 16, icon_class: "gl-vertical-align-middle!")
- if @project_runners.include?(runner) - if @project_runners.include?(runner)
= link_to _("%{token}...") % { token: runner.short_sha }, project_runner_path(@project, runner), class: 'commit-sha has-tooltip', title: _("Partial token for reference only") = link_to _("%{token}...") % { token: runner.short_sha }, project_runner_path(@project, runner), class: 'commit-sha has-tooltip', title: _("Partial token for reference only")
......
---
title: Improve runners status icon usability and accessibility in the project settings
view
merge_request: 58781
author:
type: changed
...@@ -21134,9 +21134,6 @@ msgstr "" ...@@ -21134,9 +21134,6 @@ msgstr ""
msgid "New response for issue #%{issue_iid}:" msgid "New response for issue #%{issue_iid}:"
msgstr "" msgstr ""
msgid "New runner. Has not connected yet"
msgstr ""
msgid "New runners registration token has been generated!" msgid "New runners registration token has been generated!"
msgstr "" msgstr ""
...@@ -27032,9 +27029,6 @@ msgstr "" ...@@ -27032,9 +27029,6 @@ msgstr ""
msgid "Runner API" msgid "Runner API"
msgstr "" msgstr ""
msgid "Runner is %{status}, last contact was %{runner_contact} ago"
msgstr ""
msgid "Runner token" msgid "Runner token"
msgstr "" msgstr ""
...@@ -27113,6 +27107,9 @@ msgstr "" ...@@ -27113,6 +27107,9 @@ msgstr ""
msgid "Runners|Name" msgid "Runners|Name"
msgstr "" msgstr ""
msgid "Runners|New runner, has not connected yet"
msgstr ""
msgid "Runners|Platform" msgid "Runners|Platform"
msgstr "" msgstr ""
...@@ -27128,6 +27125,15 @@ msgstr "" ...@@ -27128,6 +27125,15 @@ msgstr ""
msgid "Runners|Runner #%{runner_id}" msgid "Runners|Runner #%{runner_id}"
msgstr "" msgstr ""
msgid "Runners|Runner is offline, last contact was %{runner_contact} ago"
msgstr ""
msgid "Runners|Runner is online, last contact was %{runner_contact} ago"
msgstr ""
msgid "Runners|Runner is paused, last contact was %{runner_contact} ago"
msgstr ""
msgid "Runners|Shared" msgid "Runners|Shared"
msgstr "" msgstr ""
......
...@@ -10,12 +10,9 @@ module QA ...@@ -10,12 +10,9 @@ module QA
element :coordinator_address, '%code#coordinator_address' # rubocop:disable QA/ElementWithPattern element :coordinator_address, '%code#coordinator_address' # rubocop:disable QA/ElementWithPattern
end end
##
# TODO, phase-out CSS classes added in Ruby helpers.
#
view 'app/helpers/ci/runners_helper.rb' do view 'app/helpers/ci/runners_helper.rb' do
# rubocop:disable Lint/InterpolationCheck # rubocop:disable Lint/InterpolationCheck
element :runner_status, 'runner-status-#{status}' # rubocop:disable QA/ElementWithPattern element :runner_status_icon, 'qa_selector: "runner_status_#{status}_content"' # rubocop:disable QA/ElementWithPattern
# rubocop:enable Lint/InterpolationCheck # rubocop:enable Lint/InterpolationCheck
end end
...@@ -28,7 +25,7 @@ module QA ...@@ -28,7 +25,7 @@ module QA
end end
def has_online_runner? def has_online_runner?
page.has_css?('.runner-status-online') has_element?(:runner_status_online_content)
end end
end end
end end
......
...@@ -3,19 +3,26 @@ ...@@ -3,19 +3,26 @@
require 'spec_helper' require 'spec_helper'
RSpec.describe Ci::RunnersHelper do RSpec.describe Ci::RunnersHelper do
it "returns - not contacted yet" do describe '#runner_status_icon', :clean_gitlab_redis_cache do
runner = FactoryBot.build :ci_runner it "returns - not contacted yet" do
expect(runner_status_icon(runner)).to include("not connected yet") runner = create(:ci_runner)
end expect(runner_status_icon(runner)).to include("not connected yet")
end
it "returns offline text" do it "returns offline text" do
runner = FactoryBot.build(:ci_runner, contacted_at: 1.day.ago, active: true) runner = create(:ci_runner, contacted_at: 1.day.ago, active: true)
expect(runner_status_icon(runner)).to include("Runner is offline") expect(runner_status_icon(runner)).to include("Runner is offline")
end end
it "returns online text" do it "returns online text" do
runner = FactoryBot.build(:ci_runner, contacted_at: 1.second.ago, active: true) runner = create(:ci_runner, contacted_at: 1.second.ago, active: true)
expect(runner_status_icon(runner)).to include("Runner is online") expect(runner_status_icon(runner)).to include("Runner is online")
end
it "returns paused text" do
runner = create(:ci_runner, contacted_at: 1.second.ago, active: false)
expect(runner_status_icon(runner)).to include("Runner is paused")
end
end end
describe '#runner_contacted_at' do describe '#runner_contacted_at' do
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment