Identify Components for CICD Director Dashboard
Problem to solve
In our implementation of the CICD Director Dashboard we are looking to provide a view at the group of Operations activities. We need to identify the GitLab UI Components to recreate this low-fi director dashboard: https://docs.google.com/document/d/1YnZBIqtgN11tjugeDM4oGhMBZOhABSNlUrL7yfqRu3o/edit
Intended users
- Rachel (Release Manager)
- Delaney (Development Team Lead)
- Director of Ops
User experience goal
As a director-level user, I would like to go to my group and see relevant CI/CD metrics related to my team's contributions.
Proposal
-
Identify the gitlab UI components we could use to recreate a version of the low fi mock -
Identify or create PJs implementation issues for those components #220491
Next steps
-
When applicable, create UI deliverables for those components (design specs) -
Create high-fidelity mockups and acceptance criteria for the dashboard MVC #199739 (closed) -
Update the CICD director dashboard issue with updated weight for using those GitLab UI Components
Component triage
Use case | Component name | gitlab-ui | Notes |
Issues |
---|---|---|---|---|
Display an empty state when no data is available in the dashboard | Empty state | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/regions-empty-state--default | This component does not yet conform to the correct styling defined in our Design System | see issues |
Wrap inline text for better readability | Friendly wrap | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/utilities-friendly-wrap--default | ||
Displaying messages with text between placeholders (e.g., links, buttons) | GlSprintf | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/utilities-sprintf--sentence-with-link | ||
Loading of dashboard content | Dashboard Skeleton | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/regions-dashboard-skeleton--default | Similar to the Skeleton loader component. Might be interesting to standardize the use and investigate combining the components | see issues |
Notify users of system actions | Alert | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-alert--default | his component does not yet conform to the correct styling defined in our Design System | see issues |
Display project/user avatar | Avatar | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-avatar--project-fallback | see issues | |
Display counter | Badge | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-badge--default | see issues | |
Trigger actions | Button | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--default | This component does not yet conform to the correct styling defined in our Design System | see issues |
Populate the dashboard with data visualization points | Card | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-card--default-card | This component does not yet conform to the correct styling defined in our Design System | see issues |
Visually identify topics in the UI | Icon | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-icon--default | see issues | |
Classify elements | Label | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-label--default | see issues | |
Trigger inline actions | Link | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-link--default-link | see issues | |
Navigate the dashboard content | Pagination | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-pagination--default | see issues | |
Identify elements or provide additional, useful information about the referring elements | Tooltip | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-tooltip--defaults-to-top | This component does not yet conform to the correct styling defined in our Design System | see issues |
Show how values develop over time | Area chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-area-chart--default | This component does not yet conform to the correct styling defined in our Design System | see issues - applicable to all chart components |
Display and compare the number, frequency or other measure (e.g. mean) for different discrete categories of data | Bar chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-bar-chart--default | This component does not yet conform to the correct styling defined in our Design System | |
Show a comparison among different items, or show a comparison of items over time | Column chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-column-chart--default | This component does not yet conform to the correct styling defined in our Design System | |
Show the relationship between two different variables, or reveal distribution trends | Scatter chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-discrete-scatter-chart--default | This component does not yet conform to the correct styling defined in our Design System | |
Show the relationship between two items and provide rating information, such as high to low or poor to excellent | Heatmap | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-heatmap--default | This component does not yet conform to the correct styling defined in our Design System | |
Display the legend of a chart | Chart legend | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-chart-legend--default | This component does not yet conform to the correct styling defined in our Design System | |
Represent continuous data, identify a trend or pattern in your data | Line chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-line-chart--default | This component does not yet conform to the correct styling defined in our Design System | |
Displays chart data series name as a label for chart legend, tooltip, etc | Chart series label | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-chart-series-label--default | This component does not yet conform to the correct styling defined in our Design System | |
Show a single numerical value in a card | Single stat | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-single-stat--default | This component does not yet conform to the correct styling defined in our Design System | |
A very small line chart, typically drawn without axes or coordinates | Sparkline chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-sparkline-chart--default | This component does not yet conform to the correct styling defined in our Design System | |
Show the parts of multiple totals | Stacked Column Chart | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-stacked-column-chart--stacked | This component does not yet conform to the correct styling defined in our Design System | |
Uses GitLab UI's popover component in lieu of echart's tooltip | Chart tooltip | https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-chart-tooltip--default | This component does not yet conform to the correct styling defined in our Design System |
Further details
Users of all levels will want to consume these metrics, so as an MVC we want to provide the leanest version of the Low-fi mock with metrics like:
- Number of releases in group - simple count of all releases ever created for all projects in the group
- % of projects with releases in Group - the ratio of all projects with at least one release : total number of projects
- Last 5 passed pipelines in group
-
Total Runner minutesDuration of the last 30 pipelines in group
Permissions and Security
- We should consider if Group CICD Settings are wide enough permissions for users of all levels to see this dashboard.
What does success look like, and how can we measure that?
- Page views of Director Dashboard
What is the type of buyer?
Edited by Jackie Porter