Skip to content

Application details page design

Alexander Matyushentsev edited this page Mar 30, 2018 · 2 revisions

Use cases:

View expected and actual application state.

Actions: User finds the required app on application list page and navigates to app details page.

UI elements:

  • Resources tree - hierarchical representation of all resources which belongs to the application
  • Resources status - echo resources which described in app spec (such as deployments/services) has status icon. Status icon indicates if actual resource state is in sync with expected state.

View application summary

Actions: User clicks on application icon or clicks 'Details' item from the top right menu; selects 'Summary' tab UI elements:

  • Summary table - includes basic app information such as cluster, namespace, repo url, env path and status

View/override application parameters

Actions: User clicks on application icon or clicks 'Details' item from the top right menu; selects 'Parameters' tab UI elements:

  • Parameters table - list of application parameters
  • Parameter override indicator - icon which indicates that parameter is overridden
  • Override pencil - hover icon; when clicked turn parameter value label into input text box and save/cancel buttons; allows to override parameter

View/override application deployment history

Actions: User clicks on application icon or clicks 'Details' item from the top right menu; selects 'History' tab UI elements:

  • Recent deployments list - contains information about recent app deloyments. Each item includes: deployment date/time and how long deployment was running. Top 5 parameters.

View resource details

Actions: User clicks required resource icon on tree hierarchy UI elements:

  • Basic properties - includes generic properties like name, kind, version. For most important resource kinds like Deployment, Service, Pod we should include most important resource properties.
  • Schema diff - if resource is defined in app schema then resource details panel contains schema diff viewer.

Pod logs:

Actions: User finds required pod in app hierarchy and selects 'View logs' menu item UI elements:

Pod console:

Actions: User finds required pod in app hierarchy and selects 'Console' menu item UI elements: