mirrors/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-12-18 12:14:21 +00:00
Code Issues Projects Releases Packages Wiki Activity
Page: Frontend: Code structure, architecture and plans for the future
Pages
FAQ Frontend Test Guidelines Frontend: Code structure, architecture and plans for the future Home
8 Frontend: Code structure, architecture and plans for the future
Marcus Efraimsson edited this page 2018-08-14 13:59:28 +02:00
Table of Contents

Frontend

The Grafana frontend is a single page application written in angular and react and sass. Built using webpack. Angular is the main framework that handles the URL -> component routing.

Structure

The frontend code lives in the public folder.

Location Description
app/app.ts This is where the angular app is bootstrapped.
app/sass Frontend css styles
app/core common components and services
app/features components and services organized by feature
app/routes URL -> angular or react component mapping
app/stores Mobx stores
app/plugins All built-in plugins live here (panels, data sources)
app/containers React containers and container-specific components

Central components & services

  • backendSrv: used for all backend API requests and data source requests.
  • templateSrv: used by dashboard components to interpolate a string containing template variables
  • timeSrv: used by dashboard components to interact with the dashboard time range
  • dashboardSrv: used to get current dashboard and save / load actions.
  • bridgeSrv: bridges React and angular world (especially around interacting with URL state)

Unit testing

We value clean & readable code that is loosely coupled and covered by unit tests. We use Jest for all of our JavaScript tests.

see our guidelines for more details.

React + Angular

We are in the process of migrating the complete code base to React. This will be a multi-year effort. The reasons for this work is to make sure Grafana remains a modern frontend application with clean and maintainable code. AngularJS has lots of issues that make complex HTML rendering expensive and hard to maintain. We also see React being a much simpler and easy framework to learn and work with. It will likely remain relevant for much longer than AngularJS and most importantly it will be far easier to attract talented frontend developers if we use this framework than stick with AngularJS forever.

Currently, some whole pages are written in React and some components are written in react. It is easy to use a react component in an angular component. The other way around is a bit trickier but possible.

In progress refactoring/rewrites

  • Angular -> React rewrites

Future refactoring/rewrites

  • Simplify code structure (move components out of app/core to app/components)
  • Fix inconsistent naming of files. Angular and other js components use snake case file naming while react components use PascalCase.
  • Make it possible to write panel and data source plugins in React.
  • backendSrv and use of angular $http, need to migrate to fetch

Challenges for the future

  • In browser integration testing
  • Plugin regression testing (capture images of different states of panels maybe?)
  • Dashboard url state handled via viewStateSrv is very messy.