Dashboard UI
A
Written by Aldion Ambari
Updated over a week ago

I. Introduction

The organization dashboard consists of all the projects for the selected organization. The projects are listed in widgets which include insights on builds and tests. The user can customize the list by filtering the projects of which to show or hide, refresh the entire list, change the view to grid or list, sort them, update the order of the projects by drag and drop and lastly create a new project.

Every widget has its own features. By clicking on the widget the user is redirected to a page with the build history for the project. Clicking on one of the tests inside the widget will redirect the user to a page with the trace history for the project.

In the project build history and trace build history there are options to filter the list and also an option to view the report of the project history or trace history.

II. Dashboard

The dashboard option can be found in the header navigation in project home. The navigation option will appear only if the user has an organization already selected.

Clicking on the option will redirect the user to the Dashboard which will list the projects for the selected organization. The user can change the organization from the top header and the projects will also be updated accordingly.

As mentioned above the dashboard consists of some options that change the state of the projects:

  1. Filtering of projects (which ones to show or hide)

  2. Refreshing the entire list of projects

  3. Changing the view to grid or list

  4. Sorting

  5. Create new project

The widget as can be seen shows enough insights presented as stats and charts where the user has a complete look of the activities for the project. Options to interact with the widget are:

  1. Collapse the widget

  2. In the bottom right corner of the widget there is a handler to resize the widget

  3. Filter the insights by date range

  4. View the project build history

  5. Run all traces (clicking on the arrow will list options to run by tag)

  6. Clicking on the tests will redirect to trace build history

  7. Filter the trace trend chart by browser

  8. Filter the trace trend chart by item or all

Besides these features the user can also drag and drop the widget in the preferred order.

III. Project Build History

The user can reach the project build history by clicking on the ‘View Build History’ button or by clicking on the name of the widget, both options located on the header of the project widget.

The project build history lists all builds that have been created including detailed information about the status of the build, number bugs depending on the status, initiator, build date, number of tests in a build, execution time and also an option to view the full report for a certain build.

In this page the user can do the following actions:

  1. Go back to the dashboard

  2. Filter the table by initiator, tag, status and by date range

  3. Open the report for the selected build

  4. Load more builds in the table

The build report can be opened by clicking on the icon in the last column of the table where builds are listed. Besides the information shown in the row for a certain build, the report provides the user a section with information on how to stabilize the build (if unstable), screenshots for where the test failed (if unstable), link for the test results of each browser, option to download the report and also a section showing which tests are stable with expected results.

The actions to interact with are a few in this modal:

  1. Download the report

  2. Collapsing the section

  3. This point includes all links in the modal underlined and colored with blue. The link can be either a browser type or a screenshot, both redirect the user to the cause of the result for a certain test.

IV. Trace Build History

The trace build history page can be accessed by clicking on one of the tests in the highest failing tests table located in the widget.

Similar to the project build history this page lists all builds for a trace that have been created. The table includes information about the status of the trace, build date, the browser in which has been executed, build date, execution time and also an option to view the report details for a certain trace.

In this page the user can do the following actions:

  1. Go back to the dashboard

  2. Filter the table by initiator, browser, status and by date range

  3. Open the report for the selected build

  4. Load more builds in the table

The trace build report can be opened by clicking on the icon in the last column of the table where the trace builds are listed. It consists of two tabs, summary and commands.

The summary tab includes information on how to stabilize the build if it’s unstable, the browsers in which it has failed, the duration, the step where it failed and also screenshots of the clicked action before the failure occurs.

The commands tab includes all activities that occurred on the running process.

Did this answer your question?