[UI] Batches UI Improvements

[cjllanwarne]

Screenshots should give the main overview of the changes
Questions for reviewers.

Technical:

• Are there any CSS conventions within Hail? I assume I need to migrate the ad-hoc "style" tags into CSS?
• There still seems to be a bunch of unused space after truncated batch names. I'm not sure why

UX:

• I've moved the status indicator to the front of the line. Is that ok?
  • to help with layout within the batch-name box
  • to put it in a reliable place (ie not moving around based on how long the name is)
• I'm not really sure I like the change to Pending. Curious for others' thoughts

Example: Batches page

(layout and columns)

Before:

After:

Example: Batch Details page

(Renaming confusing 'Pending' field)

Before:

After:

Fixes #14628. Adds and shuffles content on the new Batches table

[cjllanwarne]

@jmarshall curious for your thoughts on these example screenshots. Does this address your concerns from the original ticket?

[patrick-schultz]

Are there any CSS conventions within Hail? I assume I need to migrate the ad-hoc "style" tags into CSS?

See the PR #14562 where Daniel introduced the new UI. He decided to use tailwind, which apparently (I don't know much about frontend stuff) prefers to keep styling in the html.

I've moved the status indicator to the front of the line. Is that ok?

I like it.

I'm not really sure I like the change to Pending. Curious for others' thoughts

In the template do we have the number of running jobs available? If so maybe we split "Pending" into "Pending" and "Running". Otherwise I think this is fine.

[patrick-schultz]

These are all great changes

[chrisvittal]

I think this improves UI clarity. Nice change!

[chrisvittal]

I like this. To me, 'Pending' implies 'not running', so this improves clarity.