Firefox health dashboard

This project show Firefox metrics and insights to help meeting release criteria. Find the official site here. The repository for the backend can be found here.

Developing

Prerequisites

Node

Install Latest LTS Version: 10.15.2 (includes npm 6.4.1) Binaries, installers, and source tarballs are available at https://nodejs.org/en/download/.

To update your npm and install globally, type this into your terminal

npm install npm@latest -g

To test Node. To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool

npm -v

Yarn

yarn is a fast, reliable, and secure dependency management tool. You can now use yarn to install reason and manage its dependencies.

To install Yarn, it is best to consult the official documentation for your particular platform.

To install yarn globally using node, type this into your terminal

npm install -g yarn

Testing

yarn -v

Building

First, fork this repository to another GitHub account. Then you can clone and install:

git clone https://github.com/<YOUR_ACCOUNT>/firefox-health-dashboard.git
cd firefox-health-dashboard
yarn install // This will install all dependencies
yarn start

This will start a local development server on port 5000. Any ESLint errors across the project will be displayed in the terminal during development.

Test local backend changes

In some cases, you might want to make changes to the backend and test them locally. You can do so with yarn start:local.

Troubleshooting

• yarn reset to clear the local cache

Extra information

Neutrino and preset

This project uses Neutrino and the @neutrinojs/react preset. You can read about all features included in this preset in here.

Attributions

• heartbeat icon by Creative Stall from the Noun Project

Making changes to a page

This project is still in development and only certain pages are easy to modify (e.g. the Android page). In this section we will only be describing certain changes that are very easy to make and test.

The modern pages use two important components (DashboardPage and Section):

<DashboardPage title='A title' subtitle='Some subtitle'>
  <Section title='The first section'>
    <div>Sample</div>
  <Section/>
  <Section title='Another section'>
    <div>Bar</div>
  </Section>
</DashboardPage>

Inside of a DashboardPage you include sections and inside of a Section you can use HTML tags or use React containers. Read below for some documented containers.

NOTE: The title parameter is optional and it is available to most containers.

BugzillaGraph

Link to source code.

In a Bugzilla graph you want Bugzilla queries (generally two) to be plotted on a graph. To do so, pass a queries array for each query you want with a label string and a parameter object with standard Bugzilla parameters. The parameters use the same nomenclature you would use when doing a Bugzilla advanced search. See code below for a sample.

You can use startDate with a date (YYYY-MM-DD) to start plotting the data from such date. In other words, all bugs before that date will be counted as created on that date. This is useful if you have bugs that were created few years ago and would make the X axis quite wide.

NOTE: This is the slowest container you will encounter as querying Bugzilla's APIs are quite slow.

Sample code:

<BugzillaGraph
  queries={[
    {
      label: 'Open P1 bugs',
      parameters: {
        component: 'GeckoView',
        resolution: '---',
        priority: ['P1'],
      },
    },
    {
      label: 'Open backlog bugs',
      parameters: {
        component: 'GeckoView',
        resolution: '---',
        priority: ['P2', 'P3'],
      },
    },
  ]}
  startDate='2018-03-01'
  title='GeckoView bugs'
/>

RedashContainer

Link to source code.

The idea is pretty simple. If you can create a Redash query that can plot what you want then you can include it in a Firefox Health page. Changes on Redash will immediately be reflected

On the screenshot below you can see the original Redash query and the same graph within Firefox Health:

All you need for this to work is to pass a URL to the Redash query by using redashQueryUrl and give a URL to the actual JSON data with redashDataUrl. See sample code below.

You can find the JSON URL under the hamburger menu:

Sample code:

<RedashContainer
    title='Total content page load time'
    redashDataUrl='https://sql.telemetry.mozilla.org/api/queries/59397/results.json?api_key=u9eculhXgxqgsluxYGxfXaWQ6g7KCXioEvfwjK83'
    redashQueryUrl='https://sql.telemetry.mozilla.org/queries/59397'
  />

PerfherderGraphContainer

Link to source code.

The Perfherder graphs plot a number of data series which need to be uniquely identified. The parameters used in here have a similar nomenclature as Perfherder uses. The parameters are used to uniquely identify a series.

Use Perfherder directly to determine what are the parameters and values you need. See screenshot below.

Pass a series array with each element describing one of your data series. To define a series you need these parameters:

• label - It will be the legend value
• framework - 1 for Talos, 10 for Raptor and 11 for js-bench.
• platform - Use Perfherder to determine value
• option - Normally 'opt', 'debug' or 'pgo'
• extraOption - OPTIONAL - Normally set it to ['e10s', 'stylo']
  • This only applies to Performance jobs using the Talos benchmark
  • On Perfherder, you will see the test being named sessionrestore opt e10s stylo. All the strings after the option (in our case the word opt) is to be listed inside of an array
• project - 'mozilla-central'
  • This is the repo parameter on Treeherder - https://treeherder.mozilla.org/#/jobs?repo=mozilla-central
• suite - This is equivalent to test on Perfherder
  • On the screenshot above you will see raptor-assorted-dom-chrome opt. We only want the first part before the white space.

You can also pass an optional timerange value, however, this is not necessary for most cases.

NOTE: If you want to add Chrome jobs, you have to notice that they're not running on the same platform as the Firefox jobs. This means that you need to append -nightly to it (e.g. linux64 -> linux64-nightly).

Sample code:

<PerfherderGraphContainer
  title='Speedometer'
  series={[
    {
      label: 'Moto G5 (arm7)',
      framework: 10,
      platform: 'android-hw-g5-7-0-arm7-api-16',
      option: 'opt',
      project: 'mozilla-central',
      suite: 'raptor-speedometer-geckoview',
    },
    {
      label: 'Pixel 2 (arm7)',
      framework: 10,
      option: 'opt',
      platform: 'android-hw-p2-8-0-arm7-api-16',
      project: 'mozilla-central',
      suite: 'raptor-speedometer-geckoview',
    },
    {
      label: 'Pixel 2 (ARM64)',
      framework: 10,
      option: 'opt',
      platform: 'android-hw-p2-8-0-android-aarch64',
      project: 'mozilla-central',
      suite: 'raptor-speedometer-geckoview',
    },
  ]}
/>

Credit