ui: Common filters buttons

[or-shachar]

Summary

I think we should add onfigurable quick-filter buttons at the top of the workflow history view.
Something like:

MOCK

Use Cases

Problem

• Sometimes our server runs many workflows of different kinds (I'm talking about hundreds of runs per day).
• To navigate to different history views of different contexts, user needs to either:
  - Re-type the filter every time. Sometimes the drop-down even misses some of the possible values (I guess due to this)
  - Use browser bookmarks (local to machine / user account).

Suggested solution:

• As a user, I want to quickly jump to different views with different label filtering
• As an admin, I want all users to enjoy common filters.
• Seems like we have unused real estate on the top of the page that can accommodate more custom buttons.

Maybe as part of the configmap I can provide something like this:

navColor: lightslategray # maybe this should be moved to `web` as well
web:
   navColor: lightslategray
   common_filters:
        - name: "TEST BACKEND"
          filter: "label=deploy/type=backend&label=deploy/env=test"
        - name: "TEST INFRA"
          filter: "label=deploy/type=infra&label=deploy/env=stage"
        - name: "STAGE BACKEND"
          filter: "label=deploy/type=backend&label=deploy/env=stage"
        - name: "STAGE INFRA"
          filter: "label=deploy/type=infra&label=deploy/env=stage"

---

Message from the maintainers:

Love this enhancement proposal? Give it a 👍. We prioritise the proposals with the most 👍.

[terrytangyuan]

This should be achievable via #10808.

[or-shachar]

@terrytangyuan - Awesome!

@rbreeze - looks amazing!

Excuse my frontend ignorance, but will this make the link open up in a new tab / reload the page?

          ...this.state.links.map(link => ({
              title: link.name,
              iconClassName: 'fa fa-external-link',
              action: () => (window.location.href = link.url)

If so - maybe we should add another type of link that simply changes the filter on the current view without reloading the page?

WDYT?

[terrytangyuan]

I think it opens up a new tab. cc @rbreeze @jiachengxu who contributed this for feedback.

[moonyoungCHAE]

If a way of filtering without reloading the page is added by config map, it will be convenient because the filters set by the user on the UI will be maintained. However, I think it could cause confusion if the filtering button is located at the same level as the existing reload button. So it would be better to use the existed way to redirect url.

[agilgur5]

If so - maybe we should add another type of link that simply changes the filter on the current view without reloading the page?

that could be done as a field on the links spec. e.g. newTab: true or something