High Level Design
bb-portal is an open source project written in React and Go that can display Bazel build output in browsable, digestible fashion. The service consumes Build Event Protocol (BEP) data, from local files or as streamed via the Build Event Service protocol.
BBportal provides additional build metrics and insights into overall performance of the build system by storing, analyzing and providing query functionality for client side metrics as provided by the BES. Invocations can be grouped into builds. BBportal can be broken down conceptually into two main micro services.
Backend - a grpc backend service written in go that listens for bep events from bazel clients and serializes those events to a persistent data store. the backend also serves endpoints for the frontend and the graphql api server
Frontend - a frontend service written in react/nextjs which provides a user interface for consuming and exploring the bep events stored by the backend
GRPC server A grpc server running on port 8082 written in go that responds to events emitted by the bazel client. Events are formatted in the build event service protocol. These events are stored into a database.
The database schema and access layers are managed via an ORM called the entgo.io framework. At present the backend database implementation is is sql-lite. There is also support for postgres as the backend. There is an auto-generated schema here
There is an HTTP server running on port 8081 that responds to HTTP traffic and routes requests
In addition to the grpc server, there is also a graphql api which translates graphql requests into sql queries. Much of the logic for this graphql server is created by a project called 99-designs which tries to generate the graphql schema based on go code.
There is also a reverse proxy that passes requests for other routes not explictly handled by the backend to the frontend
The backend also contains a few additional api route and methods, and is extensible.
The frontend is a react app that uses nextjs and typescript. If the overall application design loosely follows a Model, View Controller design pattern, then the frontend is the View. The frontend queries the /graphql endpoint for data and then provides multiple ways to explore that data.
Metrics analysis is basically what bb-portal does. It takes the data it reads from the database about a particular bazel invocation and provides some visual graphical representations of that data. Primarily
There is also functionality to explore build targets and tests
We can analyze data collected to provide trends. Currently we provide a graph for build duration, as well as graphs over time for build and test targets. You can also query the graphql api for data to build your own dashboards in grafana or similar data visualization tool
| Component | Description |
|---|---|
| entgo.io | schema first entity framework ORM for go |
| gqlgen | generate open graphql boilerplate code |
| nextjs | Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations |
| antd | a frontend design framework for react |
| react | React is a JavaScript library for building user interfaces, particularly for single-page applications (SPAs) |
| bazel | Bazel is an open-source build and test tool similar to Make, Maven, and Gradle. It uses a human-readable, high-level build language. Bazel supports projects in multiple languages and builds outputs for multiple platforms. Bazel supports large codebases across multiple repositories, and large numbers of users. |
| sqlite | SQLite is a C-language library that implements a small, fast, self-contained, high-reliability, full-featured, SQL database engine. |
| recharts | A composable charting library built on React components |
Below shows a diagram of a simple deployment in kubernetes
