Improved UI for actions in task/supervisor table

[shuqi7]

• The original action column in supervisor/task table mixed the conception of information and action; it only open a JSON object in a new tab without prettifying it. It also gets harder to extend the features in the row if we want to add more in the future
  

• Now: improved UI which combines all the functions into a dialog, that is more functional and easier to extend.

• It shows the JSON in a prettified format and allows users to copy and download the JSON, or view the raw JSON
  
  

[davidagee]

Thanks for the quick turnaround on this, @shuqi7. This is looking great!

A couple of UI comments, mockups here for reference:

• Can we stack the icons and labels vertically in the left sidebar. I see in the diff you're already writing custom CSS for this so flex-direction: column should get you most of the way there.
• Can we ensure the left nav icons are 20px20px
• Left nav looks too wide
• Offset the json text area from the top of the modal
• Design explicitly does not use a button group for action buttons in the bottom left, they should be individual buttons with padding between them
• Separator between left sidebar and content area is missing.
• Adjust padding on footer area
• For the base data grid, reduce width of "Actions" column and center-align the zoom icon.

[vogievetsky]

A number of things from just playing with this:

1. could you make it more aligned:

2. Make sure you guard the actions correctly. For example "Kill" should only show up for running tasks.

3. The log display is messed up notice that it is showing the \n instead of rendering it as a new line

[vogievetsky]

Have a look at grid layouts

[vogievetsky]

Just a minor change request

[vogievetsky]

Looking good. 👍

[clintropolis]

I overall like this change, those tables were very busy, but I'm wondering if perhaps the action buttons, especially 'terminate' and 'suspend'/'resume', are maybe too hidden?

Maybe they would be suited to either be pulled out into their own buttons alongside the info panel, or in some sort of pop-up menu so the things people are likely to do are front and center? Maybe it's fine like this though? I'm not sure either way 🙃

[vogievetsky]

Made a number of updates to revive this PR and rebased this branch on top of the Data loader (GUI) #7572 changes.

Some highlights:

1. My new changes address feedback from @clintropolis above

2. There is now UI for API to drop and reload data by interval #7439

3. Some rewording should address New Router UI: No way to enable/disable datasources. confusing 'drop data' option. #7506

4. Some styling fixed for the supervisor status UI (notice the added title also according to feedback from @davidagee )

[clintropolis]

lgtm 👍