[JENKINS-65124] Update weather icons

[janfaracik]

See JENKINS-65124

Small PR to update the weather icons, they now use Ionicons and they also feature colour now too. The status icons are now thinner to match.

New icons

Updated status icons

Proposed changelog entries

• Update weather and status icons

Proposed upgrade guidelines

N/A

Submitter checklist

• (If applicable) Jira issue is well described
• Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• Appropriate autotests or explanation to why this change has no tests
• New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO") if applicable.
• New or substantially changed JavaScript is not defined inline and does not call eval to ease future introduction of Content-Security-Policy directives (see documentation on jenkins.io).
• For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@jenkinsci/sig-ux

Maintainer checklist

Before the changes are marked as ready-for-merge:

• There are at least 2 approvals for the pull request and no outstanding requests for change
• Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• Proper changelog labels are set so that the changelog can be generated automatically
• If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[NotMyFault]

I like :)

[timja]

Looks really good, needs a passing ATH build just in case it's checked there

[basil]

The "changelog weather" on https://www.jenkins.io/changelog/ and https://www.jenkins.io/changelog-stable/ should similarly be updated once it's done in core.

I personally think the "flash" ionicon is not very recognizable as pouring weather, especially in contrast to the other four icons that clearly feature the sun or a cloud. My vote would be to use the "thunderstorm" ionicon for the worst weather status. To me, it is more consistent with the other cloud-based icons while still conveying a degree of severity that is greater than the "rainy" ionicon. The "flash" ionicon, on the other hand, conveys notions of electric charging that do not make sense to me in this context.

[timja]

The "changelog weather" on jenkins.io/changelog and jenkins.io/changelog-stable should similarly be updated once it's done in core.

Mind filing a PR for this @janfaracik please so we don't forget?

[daniel-beck]

Why are we changing icons entirely again, instead of coloring what we currently have?

[Jalict]

Absolutely love these. I was literally just googling around if anyone had made any colored ones and these are so much better at a glance.

[basil]

Why are we changing icons entirely again, instead of coloring what we currently have?

Question was not directed to me, but my understanding is for consistency with the ionicons used elsewhere in the frontend.

[daniel-beck]

Question was not directed to me, but my understanding is for consistency with the ionicons used elsewhere in the frontend.

Comparing the screenshot provided with a live instance of Jenkins, the new weather icons are less consistent with the build status icons right next to them with this change, most notably line thickness. In its current state this is, except for coloring, a step backwards.

[uhafner]

I like the new icons, even though they are not as thick as the status icons. Maybe it would help to make them a little bit thicker? (Or conversely, make the status icons not so thick.)

How do we plan to make plugins compatible that use something like <l:icon alt="Healthy" class="icon-health-00to19 icon-md"/>. I am using that in my warnings plugin configuration and this icon still uses the old UI. Did you search for such occurrences in our org?

[basil]

I like the new icons, even though they are not as thick as the status icons. Maybe it would help to make them a little bit thicker? (Or conversely, make the status icons not so thick.)

👍

From my perspective, if this and #7208 (review) are addressed then I am ready to approve the change.

[timja]

I've edited thunderstorm here:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" preserveAspectRatio="none">
  <g>
    <defs>
      <path id="s-Path_2-d1224"
            d="M317.8422941061358 122.14657717679562 L309.0528009625773 122.14657717679562 C303.6254617067675 72.84415463839592 261.18510741914315 34.54855027531208 210.360995242248 34.54855027531208 C168.61710444290435 34.5083666586214 131.14766173445238 60.920200389498376 117.15448779786634 100.24888097976267 L113.84302282972885 100.24888097976269 C77.6560316373284 100.24888097976269 48.04848936839653 129.8129429269296 48.04848936839653 165.94196957086146 L48.04848936839653 165.94196957086146 C48.04849524224801 202.07824662064135 77.65603474701447 231.64230027531207 113.84302870358033 231.64230027531207 L317.8423051627974 231.64230027531207 C348.036776492248 231.64230027531207 372.673495242248 207.00558152531207 372.673495242248 176.89081766937792 L372.673495242248 176.89081766937792 C372.673495242248 146.783298690961 348.036776492248 122.14657717679562 317.8423051627974 122.14657717679562 Z "/>
      <path id="s-Path_8-d1224" d="M151.5484893683962 232.5485044867732 L311.5484893683962 232.5485044867732 "/>
      <path id="s-Path_7-d1224"
            d="M174.13433790885537 247.54850448677314 L163.22141271213664 297.99116745674246 A6.0 6.0 0.0 0 0 170.08280326763557 305.17645149225297 L192.77510964643525 301.35235177896647 A6.0 6.0 0.0 0 1 199.7189996373311 308.0659257829911 L193.7490187431243 352.61116783976473 A6.0 6.0 0.0 0 0 204.6461884581997 356.7984670351519 L255.59332724182966 282.4081422137506 A6.0 6.0 0.0 0 0 248.77285436365233 273.3167358086601 L228.678496319607 279.90828899341886 A6.0 6.0 0.0 0 1 221.19058576417171 272.09991453433105 L230.40000000000003 247.5485044867732 "/>
      <path id="s-Path_5-d1224" d="M326.5484893683961 324.54850448677325 L314.34848936839626 347.3485044867732 "/>
      <path id="s-Path_4-d1224" d="M315.34848936839626 265.7485044867731 L297.148489368396 302.34850448677344 "/>
      <path id="s-Path_3-d1224" d="M122.34848936839671 322.7485044867733 L111.74848936839635 348.3485044867732 "/>
      <path id="s-Path_1-d1224" d="M111.55703838566531 267.54850448677314 L94.54848936839619 301.12239449998293 "/>
    </defs>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_2-d1224" fill="none" stroke-width="32.0"
           stroke="#73738c" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_7-d1224" fill="none" stroke-width="32.0"
           stroke="#ffb31a" stroke-linecap="round"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_8-d1224" fill="none" stroke-width="29.0"
           stroke="#73738c" stroke-linecap="square"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_5-d1224" fill="none" stroke-width="32.0"
           stroke="#32ade6" stroke-linecap="round"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_4-d1224" fill="none" stroke-width="32.0"
           stroke="#32ade6" stroke-linecap="round"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_3-d1224" fill="none" stroke-width="32.0"
           stroke="#32ade6" stroke-linecap="round"/>
    </g>
    <g style="mix-blend-mode:normal">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-Path_1-d1224" fill="none" stroke-width="32.0"
           stroke="#32ade6" stroke-linecap="round"/>
    </g>
  </g>
</svg>

renders like:

Haven't managed to get it working in Jenkins yet, but maybe useful to you @janfaracik?

(It needs hardcoded strokes replaced with actual vars but used those so it renders in IDE)

[janfaracik]

The "changelog weather" on https://www.jenkins.io/changelog/ and https://www.jenkins.io/changelog-stable/ should similarly be updated once it's done in core.

Will do!

I personally think the "flash" ionicon is not very recognizable as pouring weather, especially in contrast to the other four icons that clearly feature the sun or a cloud. My vote would be to use the "thunderstorm" ionicon for the worst weather status. To me, it is more consistent with the other cloud-based icons while still conveying a degree of severity that is greater than the "rainy" ionicon. The "flash" ionicon, on the other hand, conveys notions of electric charging that do not make sense to me in this context.

I've updated it now :) Cheers

Comparing the screenshot provided with a live instance of Jenkins, the new weather icons are less consistent with the build status icons right next to them with this change, most notably line thickness. In its current state this is, except for coloring, a step backwards.

The status icons will eventually be updated too with matching thicknesses etc, see the prototype linked on Gitter for an early/rough look at them.

How do we plan to make plugins compatible that use something like <l:icon alt="Healthy" class="icon-health-00to19 icon-md"/>. I am using that in my warnings plugin configuration and this icon still uses the old UI. Did you search for such occurrences in our org?

Ah good spot, I'll need to add these icons to the icon translation method.

[janfaracik]

Maybe it would help to make them a little bit thicker? (Or conversely, make the status icons not so thick.)

The latter makes sense to me given that ionicons already has alert-circle, checkmark-circle, close-circle, and ellipsis-horizontal-circle icons that are consistent in thickness with the weather icons being introduced in this PR.

Planning on updates the status icons in another PR if that's alright. Reason I've split the work is that the status icons are going to take a bit more work/be more intensive of a change due to how they work.

[basil]

Planning on updates the status icons in another PR if that's alright.

Decreasing the consistency of the shipping product is not alright. The project's standard is that the main branch must be in FCS (first customer ship)—not alpha or beta—condition at any given point in time. I appreciate that an intensive rework of the status icons as e.g. in https://jenkins-redesign.vercel.app is going to take a large amount of effort, and I am not asking that an intensive rework be done in this PR. But I am asking that either the existing status icons be thinned slightly or the new weather icons be thickened slightly (either tweak a small to medium amount of effort, not a large one) in order to maintain (and not regress) the existing level of consistency in the shipping product.

[janfaracik]

Still need to update the icons inside of the circles - hopefully done tonight.

[janfaracik]

Updated with thinner icons.

[basil]

The final version drastically improves the weather icons while retaining existing levels of congruence with the status icons and without precluding future improvements to the status icons. Well done!

[github-actions]

Please take a moment and address the merge conflicts of your pull request. Thanks!

[timja]

@jenkinsci/core-security-review could you take a look please?

[daniel-beck]

The "aborted" and "failed" icons with thin strokes are easily distinguishable even at the small size, that's great. (I wasn't sure about that earlier.)

Overall this is a huge improvement, and with the thinner status icons the icon-based columns looks consistent. Thank you very much for taking care of that.

I disagree with the change to the legend descriptions, but if the current (soon previous) text is unclear enough for regular core contributors to remove it, we probably need to improve the page more fundamentally.

---

Experiencing the UI with the thinner strokes I do wonder whether the strokes ended up slightly too thin, in particular on the "S" icon size.

The icons have substantially thinner stroke width than the letters of text, which seems awkward. So far this hasn't come up I think, because sidepanel and Manage Jenkins icons are the size corresponding to "L" column icon sizes (although it seems we went from 16-24-32px to 16-20-24px icons at some point?). I realize that I'm the one who asked for icons to be consistent(ly thin), so I indirectly contributed to this, and it's not a blocker. (Perhaps it's just best to get rid of icon size settings?)

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[lemeurherve]

Deployed on infra.ci.jenkin.io, so pretty 🤩

Great job @janfaracik 🎉

[daniel-beck]

Caused JENKINS-73047