Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refact: add namespace to nested detail pages #15261

Merged
merged 7 commits into from
Nov 23, 2022
Merged

refact: add namespace to nested detail pages #15261

merged 7 commits into from
Nov 23, 2022

Conversation

ChaiWithJai
Copy link
Contributor

@ChaiWithJai ChaiWithJai commented Nov 15, 2022

Closes 15169

Add namespace to Allocation Details and Task Details on the respective overview pages.

image

image

image

@ChaiWithJai ChaiWithJai self-assigned this Nov 15, 2022
@github-actions
Copy link

github-actions bot commented Nov 15, 2022

Ember Asset Size action

As of ff5b68d

Files that got Bigger 🚨:

File raw gzip
nomad-ui.js +2.93 kB +337 B
nomad-ui.css +46 B +10 B

Files that stayed the same size 🤷‍:

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

Copy link

@joshklekamp joshklekamp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll defer to @juliezzhou here, but I'm not in love with the formatting here. The misalignment feels like an error. Would it be better to display this in a single line and format it like the route/url does (i.e. "$job-ID@$namespace-ID")?

@ChaiWithJai
Copy link
Contributor Author

I'll defer to @juliezzhou here, but I'm not in love with the formatting here. The misalignment feels like an error. Would it be better to display this in a single line and format it like the route/url does (i.e. "$job-ID@$namespace-ID")?

That's a great suggestion! I gave it a try just now... one challenge that I see with a single line is that we have to deal with a deeply nested view that goes 5-6 levels deep. In the event of a parameterized job, we'd have overflow. That's probably too much to work around right now considering we have a redesign coming around the corner. IMHO, the most swift solution that solves a user's problem and doesn't require too much work before the redesign, would be to just include the namespace as a smaller text below the name (and even consider just adding the @ sign).

image

Per the ticket, it sounds like user's are looking for a quick fix:

We have different jobs with the same name but in a different namespace (example: job "intranet" we have in namespace "testing", "development" and "production"). You open the desired job in the specific namespace, do your stuff and leave the web page open. When returning to the web page (after a certain period of time) for example to restart the allocation, you want to be certain that you are restarting the allocation in the correct namespace, so not accidently restarting the production allocation.

Would it be unreasonable to get a quick fix in now to resolve the issue, and then consider challenges we may face with balancing look & feel and maintaining a responsive design?

@github-actions
Copy link

github-actions bot commented Nov 15, 2022

Ember Test Audit comparison

main ff5b68d change
passes 1425 1425 0
failures 0 0 0
flaky 0 0 0
duration 10m 07s 470ms 11m 12s 027ms +1m 04s 557ms

@juliezzhou
Copy link

My concern is if it is not called "namespace-1", but "apps" or "default", will it still be clear to the users that it means the namespace?

@ChaiWithJai
Copy link
Contributor Author

My concern is if it is not called "namespace-1", but "apps" or "default", will it still be clear to the users that it means the namespace?

@juliezzhou what would you propose a solution?

The simplest solution I could see would be pattern matching what we do in the URL:

image

Because it matches the pattern that we have in the URL, and the text is smaller that could be enough guidance for the user.

@juliezzhou
Copy link

read through the comment from the customer, the other way we can do is to have a hover state on the job to show the namespace? I know it is a little hidden, but then it won't make the breadcrumb more crowded, and we don't know if all the customers will need to see the namespace?
Screen Shot 2022-11-15 at 3 37 21 PM

@joshklekamp
Copy link

joshklekamp commented Nov 15, 2022

We could also just use $job-ID@$namespace-ID in the page header instead of the breadcrumb. That would reserve space for us in the breadcrumb while making it clear which namespace the job was in.

@juliezzhou
Copy link

Re: Josh's comments on the misalignment, maybe we can align the name like this
Screen Shot 2022-11-15 at 3 40 01 PM
But i still don't think that every user will need this, should we make it so prominent in the breadcrumb?

@ChaiWithJai
Copy link
Contributor Author

Re: Josh's comments on the misalignment, maybe we can align the name like this Screen Shot 2022-11-15 at 3 40 01 PM But i still don't think that every user will need this, should we make it so prominent in the breadcrumb?

@juliezzhou @joshklekamp

The community user filing the ticket mentioned the pain point was leaving a tab, coming back and wanting to take an action to "restart" (or take another action) on an allocation, but being unsure about the job.

I'm unsure if changing the title of the Job Detail page solves the problem, because the user will still need to click back into the page.

And re: the tooltip, that seems like an elegant solution but it still seems like a paper cut in the user experience because I think they just want to visually see which job they're on (jobs are unique by namespace and name).

I think @juliezzhou's suggestion of smaller text with the @ sign is going to be our best path forward.
image

@joshklekamp
Copy link

joshklekamp commented Nov 15, 2022

Yeah, good call out on leaving the page @ChaiWithJai! While it doesn't have to be the breadcrumb, we do need something visually that is persistent across pages to contextualize the namespace.

My preference given all of the conversation and options at this point is that we give Julie a little time to think through this problem. If we end up deciding we want to do this via the breadcrumb, we haven't lost any work. If we decide on a different solution, we will have done right by our users.

If we go with a breadcrumb, I think I would still prefer the text on one line and the same size purely from a design perspective. Visually, having three different type sizes there looks a little inconsistent.

@wdmeest
Copy link

wdmeest commented Nov 18, 2022

Possible solution is to add a new layer to the breadcrumb (to keep the 2 level look)?:

image

Clicking on the namespace gives you all the jobs for that namespace

@joshklekamp
Copy link

Nice @wdmeest, that's a good suggestion too! And thanks for the original issue!

We're doing a little exploration on our side and we'll definitely add this as an option to consider. We're going to do some design work to consider all possible options (both already considered and some not discussed yet) to figure out what might best solve this problem for you and other users.

@ChaiWithJai ChaiWithJai changed the title refact: add namespace to job breadcrumb refact: add namespace to nested detail pages Nov 22, 2022
@ChaiWithJai ChaiWithJai dismissed joshklekamp’s stale review November 23, 2022 16:36

Josh is currently on vacation. Phil has approved the PR per directions from both Josh and Julie. So favoring getting this work in instead of having it linger.

@ChaiWithJai ChaiWithJai merged commit 2d52016 into main Nov 23, 2022
@ChaiWithJai ChaiWithJai deleted the 15169 branch November 23, 2022 16:36
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 24, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[UI] Add namespace to breadcrumb navigation
5 participants