Refine Job Details Page Phase I

[scarlett2018]

What would you like to be added:
Refine current Job Details Page to provide a simpler and easier to understand experience for Job Owners.

Why is this needed:

• Currently, the tasks' status are not clear and exposing in job detailed view. Users are not clear how things going if some of the tasks are not yet started.
• User logs are inside Tracking Pages, and hard to find.
• Diagnostic info are in several pages and not clear enough which is the one user should follow.

---

Mock Up
Task status is displayed and categorized.

Task info

User log is to the task level and extract to the highest level.

User log view

Go to tracking page is moving to 2nd level "..."

[fanyangCS]

For “Retries”,please separate system retries from user retries.

[fanyangCS]

#1990

[scarlett2018]

Task State has been differed to Mid April release, the rest design were committed in 0.11.0.

[sunqinzheng]

Test Cases

• Header
  • "Back To Jobs" button
• Job Summary
  • "Refresh" button
  • Auto refresh dropdown
    • could be tested by checking http requests in browser's developer tools
  • Job config
    • will be opened in monaco editor panel
    • will be disabled if job config doesn't exist (launcher test job)
  • Application summary
    • will be opened in monaco editor panel
  • Go to application tracking page
    • will open yarn app tracking page
  • Go to job metrics page
    • will open grafana job metrics page
• Task Info
  • Task role config (question mark icon button)
    • will be opened in monaco editor callout
  • Task Info could be collapsed/expanded
  • Container List
    • View SSH Info
      • bash commands with comments will be showed in monaco editor panel
      • will be disabled if job is not running
    • Stdout / Stderr
      • last 4096 bytes will be showed in monaco editor panel
      • will be auto refreshed every 10 seconds
        • could be tested by checking http requests in browser's developer tools
      • "View full log" button
        • will open yarn full stderr/stdout log page
    • More icon button -> Go to yarn tracking page
      • will open yarn container tracking page