UI: Namespaces redesign #10444

DingoEatingFuzz · 2021-04-24T21:34:22Z

This rethinks namespaces as a filter on list pages rather than a global setting. Namespaces are still part of job and CSI volume identifiers, so there was lots of plumbing involved.

The biggest net-new feature here is being able to select All (*) to list all jobs or CSI volumes across namespaces.

This PR has the following in it (in hindsight it should have been multiple PRs, sorry)

New SingleSelectDropdown component that wraps Ember Power Select and gives it a similar API as MultiSelectDropdown
Refactored multi select dropdown stories as facet stories and includes new ones for the single select dropdown
Removes the namespaces selector from the gutter menu
Conditionally adds a namespaces facet to the jobs, optimize, and csi volumes pages (when there are namespaces other than default)
Conditionally adds a namespaces column to jobs and volume tables
Removes some of the namespaces logic from the system service
Changes some data plumbing for jobs and volumes now that query is being used to add the namespace param rather than it being added invisibly within the data layer based on the global namespace setting.

github-actions · 2021-04-24T21:40:25Z

Ember Asset Size action

As of 735f056

Files that got Bigger 🚨:

File	raw	gzip
nomad-ui.js	+2.62 kB	+420 B
nomad-ui.css	+1.89 kB	+180 B

Files that stayed the same size 🤷‍:

File	raw	gzip
vendor.js	0 B	0 B
vendor.css	0 B	0 B

github-actions · 2021-04-24T22:09:13Z

Ember Test Audit comparison

	main	`735f056`	change
passes	1078	1078	0
failures	0	0	0
flaky	1	0	-1
duration	7m 55s 868ms	7m 41s 915ms	-13s 953ms

backspace

I left a few comments but nothing truly blocking.

I tried this out locally, though it’s extensive and I’m not sure I exercised everything.

The behaviour with cachedNamespace is a bit surprising maybe, because it’s only used before a controller has been visited; subsequent visits have the same namespace instead of the shared/cached one. But that’s just query parameters for you!

I noticed that pagination might need resetting when the filter has caused the collection to shrink:

But then it’s also a thing with other facets so we can declare that out of scope 😆

backspace · 2021-04-27T14:49:59Z

ui/app/templates/components/exec/open-button.hbs

Quite minor but is .editorconfig not working somehow 🤔

Is this about the lack of newline? I know I don't have the editor config vim plugin. I should get it though...

ya it’s configured to not add newlines in Handlebars files; it probably doesn’t matter in this case but sometimes it matters

backspace · 2021-04-27T14:52:08Z

ui/app/styles/components/dropdown.scss

+
+    &[aria-selected='true'] {
+      background: $blue-050;
+    }
  }

  .dropdown-empty {


This is barely noticeable but I saw that a descender in the namespace dropdown was truncated:

It’s more prominent in Storybook:

Yeah, I noticed that but let it slide 😞 I think it's some default ember-power-selector styles that need to be overwritten.

backspace · 2021-04-27T15:01:48Z

ui/tests/pages/storage/volumes/list.js

-      label: text(),
-    }),
+  facets: {
+    namespace: singleFacet('[data-test-namespace-facet]'),


Nice that you were able to adapt the existing interface 🤩

backspace · 2021-04-27T15:15:57Z

ui/app/services/system.js

@@ -113,37 +113,6 @@ export default class SystemService extends Service {
    return namespaces.length && namespaces.some(namespace => namespace.get('id') !== 'default');
  }

-  @computed('namespaces.[]')


Since system.cachedNamespace is set and used elsewhere, what do you think of adding a “declaration” for it, and maybe an explanatory comment?

In the same style as the multi select dropdown

This way it includes all of the facet components (right now multi select and single select).

…level active one

Either deleting irrelevant tests or marking failing tests as TODO pending new namespaces implementation.

… ones This is the bulk of this refactor: Namespace should no longer be global because lists should support various namespace configurations. Furthermore, namespace is an attribute of the ID of a job but a filter on the jobs list page. Therefore, they should be modeled differently.

… to be preloaded

…ndex page

…ptimize page

Without this, the optimize page is hidden despite the existence of recommendations.

This can happen if a job doesn't have a namespace (which shouldn't actually ever happen, but it can in tests).

DingoEatingFuzz · 2021-04-29T18:32:58Z

I documented the cachedNamespace property, and while doing so a flaky test discovered a bug, so I fixed that too.

github-actions · 2021-04-29T18:54:12Z

Ember Test Audit flaky tests

Ember Test Audit detected these flaky tests on main:

Integration | Utility | exec-command-editor-xterm-adapter: it supports typing ^U to delete the entire command

ChaiWithJai · 2021-07-12T20:05:06Z

ui/app/abilities/abstract.js

+  get _namespace() {
+    if (!this.namespace) return 'default';
+    if (typeof this.namespace === 'string') return this.namespace;
+    return get(this.namespace, 'name');
  }


activeNamespace was previously set in our models based on query parameters. We're noticing that we can't detect namespace-specific policy capabilities (with ACL's).

Should we continue the behavior of setting system.activeNamespace in our models to grab namespaces from the query params.

Also, since we're setting namespace to default on line 17, what's the purpose of the control flow logic on lines 19-22.

Maybe we can set this value based on qpNamespace

github-actions · 2022-11-18T02:32:21Z

I'm going to lock this pull request because it has been closed for 120 days ⏳. This helps our maintainers find and focus on the active contributions.
If you have found a problem that seems related to this change, please open a new issue and complete the issue template so we can capture all the details necessary to investigate further.

DingoEatingFuzz added the theme/ui label Apr 24, 2021

DingoEatingFuzz requested a review from backspace April 24, 2021 21:34

vercel bot deployed to Preview – nomad-storybook-and-ui April 24, 2021 21:36 View deployment

vercel bot temporarily deployed to Preview – nomad April 24, 2021 21:36 Inactive

backspace approved these changes Apr 27, 2021

View reviewed changes

DingoEatingFuzz added 23 commits April 29, 2021 10:15

New single select dropdown in the style of multiselect

d08fd8d

Add single select dropdown story

7921a00

Style the single select dropdown

1ec464b

In the same style as the multi select dropdown

Rename multi-select-dropdown stories to filter-facets stories

33e14cd

This way it includes all of the facet components (right now multi select and single select).

Modernize: use 'this.' when accessing properties in templates

8de3cc9

Stories for single select dropdown

09594ee

Test coverage for the single select dropdown component

6bc9e99

Remove namespace selection from the system service

3cf82ae

Remove system.activeNamespace lookups from everywhere

cc17102

Rewrite abilities to assume a provided namespace instead of a system-…

64bcf19

…level active one

Remove the namespace selector from the gutter menu

698e91e

Correct unit tests for the namespaces change

ba1a163

Namespaces tests triage

0b1635d

Either deleting irrelevant tests or marking failing tests as TODO pending new namespaces implementation.

Support namespaces wildcard in mirage

d5e3a29

Properly watch namespaced records

e8112a0

Load related resources now that jobs and namesapces aren't guaranteed…

a821ea3

… to be preloaded

Correct tests now that namespace logic has been moved into the jobs i…

76322f1

…ndex page

Mirage: support namespace=* for volumes

d86b08e

Mirage: no longer need 501 support for namespaces

1b31b7a

Add the namespaces facet to the volumes list page

8b28da2

Mirage: Properly handle namespaces in volume getter

1dde3de

Require the namespace query param on volume detail pages

9952600

DingoEatingFuzz added 7 commits April 29, 2021 10:16

Replace the all namespaces toggle with a namespaces dropdown on the o…

bc16d6e

…ptimize page

Add namespace facet tests to all impacted pages

99edf9b

Always show the namespace facet, even when getting a forbidden error

5812852

Include namespace in job and volume rows when a cluster has namespaces

af91fa1

Persist namespace selection across pages that have a namespace filter

017fe38

Add the DAS feature to the smallCluster scenario

7bef355

Without this, the optimize page is hidden despite the existence of recommendations.

Volume controller linting (prettier conflict)

4fa121a

DingoEatingFuzz force-pushed the f-ui/namespaces-redesign branch from 9128e56 to b5163de Compare April 29, 2021 17:16

vercel bot temporarily deployed to Preview – nomad April 29, 2021 17:16 Inactive

vercel bot deployed to Preview – nomad-storybook-and-ui April 29, 2021 17:16 View deployment

Document the new cachedNamespace system service property

a81e2b8

DingoEatingFuzz force-pushed the f-ui/namespaces-redesign branch from b5163de to a81e2b8 Compare April 29, 2021 18:06

vercel bot temporarily deployed to Preview – nomad April 29, 2021 18:06 Inactive

vercel bot deployed to Preview – nomad-storybook-and-ui April 29, 2021 18:06 View deployment

Guard against no namespace passed into a can/cannot helper

735f056

This can happen if a job doesn't have a namespace (which shouldn't actually ever happen, but it can in tests).

vercel bot temporarily deployed to Preview – nomad April 29, 2021 18:22 Inactive

vercel bot deployed to Preview – nomad-storybook-and-ui April 29, 2021 18:22 View deployment

backspace merged commit 9239168 into main Apr 29, 2021

backspace deleted the f-ui/namespaces-redesign branch April 29, 2021 20:01

backspace mentioned this pull request May 21, 2021

[ui] Nomad 1.1 cuts letter in new namespace selector. #10635

Open

ChaiWithJai reviewed Jul 12, 2021

View reviewed changes

github-actions bot locked as resolved and limited conversation to collaborators Nov 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Namespaces redesign #10444

UI: Namespaces redesign #10444

DingoEatingFuzz commented Apr 24, 2021

github-actions bot commented Apr 24, 2021 •

edited

Loading

github-actions bot commented Apr 24, 2021 •

edited

Loading

backspace left a comment

backspace Apr 27, 2021

DingoEatingFuzz Apr 29, 2021

backspace Apr 29, 2021

backspace Apr 27, 2021

DingoEatingFuzz Apr 29, 2021

backspace Apr 27, 2021

backspace Apr 27, 2021

DingoEatingFuzz commented Apr 29, 2021

github-actions bot commented Apr 29, 2021

ChaiWithJai Jul 12, 2021

ChaiWithJai Jul 12, 2021

github-actions bot commented Nov 18, 2022

UI: Namespaces redesign #10444

UI: Namespaces redesign #10444

Conversation

DingoEatingFuzz commented Apr 24, 2021

github-actions bot commented Apr 24, 2021 • edited Loading

Ember Asset Size action

github-actions bot commented Apr 24, 2021 • edited Loading

Ember Test Audit comparison

backspace left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DingoEatingFuzz commented Apr 29, 2021

github-actions bot commented Apr 29, 2021

Ember Test Audit flaky tests

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 18, 2022

github-actions bot commented Apr 24, 2021 •

edited

Loading

github-actions bot commented Apr 24, 2021 •

edited

Loading