Efficiency by Design: Building Complex Dashboards with Vue
summary
A Kubernetes cluster dashboard is implemented with Vue and Vue Router, built from reusable layout and content components, wired to the cluster through a browser-friendly client that replaces the nonbrowser official library. It uses the GitLab UI (pajamas) for ready CSS and components, adds watch API support for real‑time resource events, and publishes the gitlab-cluster-client with 42,000 weekly downloads. A live demo shows pods deleted and the cluster healing and repopulating the UI, so the integration and real-time updates demonstrably work.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 2:26Deploy Environments team role
- 3:28What is Kubernetes and why it matters
- 4:52Kubernetes dashboard project
- 5:55Complex dashboard challenges
- 7:21Good vs bad dashboard design
- 8:47Dashboard design principles
- 10:11Reusable components benefits
- 10:52Kubernetes dashboard layout
- 13:28Dashboard development planning
- 14:13Vue Router setup
- 15:59Main dashboard layout
- 17:25Page title component
- 18:29Reusable component traits
- 20:16GitLab design system
- 22:05Common dashboard patterns
- 24:35Reusable layouts first iteration
- 27:48Next steps after layout
- 28:08Connecting to data sources
- 29:12Kubernetes API data handling
- 30:15GitLab agent role
- 31:20Cluster client library
- 33:08Using client library
- 34:13Live demo: real-time updates
- 35:16Conclusion
- 35:38Q&A
related talks
28mBuilding Data-Intensive Visualization Applications with Vue
27mVue and Vuex: The good, the bad and the ugly
21mVue JS Best Practices
29mBuilding customer-visible data science dashboards with Altair / Vega / Vue
27mHow We Do Vue At GitLab
39mVue.js - developer friendly, fast and versatile
31mHow do we use Vue js in GitLab
32mVue, simple yet scalable