theodo / falco

Falco helps you monitor, analyze, and optimize your websites.

Falco · an Open Source WebPageTest runner

Falco helps you monitor, analyze, and optimize your websites.

Features

• 🔬 Automatically run audits multiple times a day in many conditions
• 📈 See the evolution of key performance metrics to easily spot regressions
• 👥 Invite the whole team so that everyone (devs, ops, product, marketing…) is involved in performance
• 🗺 Audit the performance of individual URLs or entire user journeys (even on Single Page Apps!)
• 📸 Easily access and compare WebPageTest results between audits
• 🙈 Can be used with your own Private Instance of WebPageTest

You can try a demo version by logging in to https://falco.theo.do with the credentials demo / demodemo.

Quick start

You can deploy Falco on Heroku by clicking on the following button:

You will need to provide your credit card details to Heroku, but you will be under the free tier by default. You can find more details on why they are needed and Heroku’s pricing policy in the docs.

After deployment, you can connect to Falco (and the admin interface at /admin/) with the credentials admin and admin: make sure to change your password after connecting!

Heroku Teams user? Click here to deploy Falco.

Heroku Teams do not allow for free Dynos, thus the above button will not work. Instead, you can click the following, Heroku Teams-specific button that will create “hobby”-sized dynos:

Docs

Full documentation for Falco lives on the docs website.

Contributing

Thanks for your interest in contributing! There are many ways to contribute to this project. Get started here.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Nicolas Goutay 🎨 💻 🖋 🚇 📖	Guillaume Cornet 💻 🚇 🎨	Kevin Raynel 🚇	Gontier Cécile 💻	Louis Pinsard 💻	Vincent Larrat 💻 🛡️	antkahn 💻
François Farge 💻	EtienneGrall 💻 ️️️️♿️	Alexandre Fauquette 💻	0xflotus 📖	Roy 📖	Albéric Trancart 🤔	Carlos Cobo 💻
Andreas Wagner 📖	Mohammad Parvin 🌍	Roman Ovchinnikov 📖	Thoonsen Maxime 📖	MathildeDuboille 📖 ️️️️♿️ 💻	Brendan Daoud 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

Sponsor

The ongoing development of Falco is proudly sponsored by Theodo.

Our Paris, London & New York teams of full-stack developers and agile experts bring together the tech, the talent and the experience to develop your web, mobile and software applications in record time.

falco's Issues

Root package.json is possibly useless

Following #94, it looks like I introduced the root package.json file as a “fix” to some GitHub security notification in #20. However, two things strike me as strange:

• Instead of bumping the versions in frontend/package.json, I created a whole new one, which doesn’t really make sense;
• I bumped the lodash version even though lodash is not listed in the project’s frontend dependencies. Moreover, @types/lodash is listed as DevDependencies although lodash isn’t.

I guess I was pretty tired when I made those changes, but they were harmless so I consider myself lucky.

A suggested course of action:

• Bump react-app-rewire-webpack-bundle-analyzer in frontend/package.json to 1.1.0 (to fix the initial security issue) and run the yarn analyze command in frontend to see if it’s still working correctly;
• Remove the @types/lodash dev dependency and run yarn start to see if no TS errors appear.

This would have the following benefits:

• Fix the security issue in react-app-rewire-webpack-bundle-analyzer
• Clean up the repository
• Ease up the setup of the Falco project locally as, for now, people may be tempted to run yarn && yarn start in the root dir instead of frontend/

This PR is up for grabs if anyone’s interested (maybe @toqueteos?)!

[☂️Umbrella issue] Falco should work with private WebPageTest instances

That one’s a biggie, so this issue will be used as a place to keep track of all the information pertaining to running Falco with private WPT instances.

Motivation

There are many reasons to run you own WebPageTest instance:

• Access and audit restricted websites that are only accessible within your own network
• Credentials and audit results do not leave your own network
• No rate limiting, meaning that you can run as many audits as you want, whenever you want
• No queueing or wait times
• Reducing the load on the public instances

Related resources

• The WebPageTest technical wiki from the Wikimedia Foundation
• The GitHub docs on the WebPageTest repository
• The dedicated Slack channel (over at #webpagetest-instances)
• The dedicated WebPageTest forum

Implementation plan

• Deploy a private WebPageTest instance: http://webpagetest.theo.do
• Run a manual audit on the private instance (PI)
• In development, run automated audits with Falco on the PI
• Decide whether using a PI should be a project-based or an instance-based setting
• Integrate the available configurations from the PI to publicly available configurations
• Do not ask for a WebPageTest API Key if audits are solely ran on a PI even private instances need an API Key

Miscellaneous

• How can we whitelist Heroku’s IP adresses for the private instance?

This section is a work in progress

Manual deployment instructions

Heroku may not meet the expectation of every team wanting to use Falco.

A popular alternative is using Docker (possibly coupled with Docker Compose) for users who’d rather deploy Falco themselves, on their own machines.

Enhance the usability of the edition of Audit parameters

Here are a few suggestions to enhance the edition of audit parameters:

• When I add an audit parameter, if I click on the configuration select list, I should not exit the edition mode;
• When I add an audit parameter, if I hit Enter my input is submitted
• When I add an audit parameter, the new line in the table is aligned with existing ones (see screenshot).

@alexfauquette would you be willing to work on this? @LouisPinsard can help you navigate this corner of the codebase :)

Creating a new page/script should launch an audit on that page automatically

When a user creates a new page /script, this page doesn’t have any audit in the works until the next automatic batch of audits (or any manual audit).

This means that when the users comes back to the “audits” view, the page will have the little red dot and an error message, which can be confusing.

We can make it so that on creating a new page / script, a new audit is started automatically in all environments so that the user will instead see the orange dot, and will have audit results faster.

Add a doc section to troubleshoot failed audits

Related to #67

The Falco interface does not give much details about why a particular audit failed. To troubleshoot failed audits, one needs to follow a not-particularly-intuitive series of step that deserve to be documented.

Maybe we can think of making those steps simpler later on!

Fix popins dimensions

Reproduction

Steps to reproduce:

1. Open a popin
2. Try to resize your browser

Expected Behavior

The popin should keep the same proportions

Actual Behavior

The popin overlaps the window

How

• Probably use vh and vw as units to scale popins
• add scroll in the metrics popin

Images in the “My Projects” popup menu should have an empty alt tag

Thanks to @AlbericTrancart for the report.

From https://a11yproject.com/checklist/#section-images

Decorative images do not communicate information that is required to understanding the website's content. Historically they were used for flourishes and spacer gif images, but are less relevant for modern websites. Empty alt attributes are also sometimes known as null alt attributes.

feat(docs): add issue templates for issues and pull requests

Currently there are a lot of ways people adding issues and pull requests to this repository. It's great that they contribute to this repo, but I think it's better when that can be streamlined and every issue and/or PR provides the same information.

There's this GitHub Help article about issue and pull request templates which can help in setting this up.

I think a great example of issue templates are the ones from Angular Components and Moment.

Notification alert when web site is down

Feature Description

It would be nice to have some kind of notification (email / SMS) when sites are down or response time below a certain treshold.

Use Case

This feature, similar to what is offered by services like Uptime Robot, would allow sysadmins to respond quicker to problems.

Documentation should be easier to edit

Docusaurus allows for a nice Edit this page button on every docs page, allowing users to easily jump into the GitHub edit interface and push a PR:

This seems straigthforward to add to Falco docs, and would be a nice addition.

bug(a11y): The docs/landing page has accessibility issues

Following an accessibility audit by @AlbericTrancart, here are the problems that need solving on https://getfal.co:

Images

• The company logos all have the same, “BNP Paribas” alt (#83)
  
• Decorative images should have an empty alt (#83)
  

Content

• The HTML is invalid according to the W3C validator (link to audit): 14 errors, 5 warnings
• There is a jump from h1 to h3 without any h2 tags (#83)

CSS

• The responsive sidebar should be masked via display:none or aria-hidden

Navigation

• The “Read the docs” and “Deploy to Heroku” buttons do not have any focus style (#83)
• There is no skip to content link

No visual confirmation of actions on the project settings page

The toaster system we set up last month seems broken on the project settings page:

We should see the following behavior:

• A toaster appears on the top-right corner of the page telling the user the action succeeded (or failed)
• No jump in the scroll

@LouisPinsard is currently working on it.

Celery/SSL issue when installing with Docker Compose

See #45 for context.

A fresh install with Docker Compose fails with the following stacktrace, in both Celery worker and Celery Beat:

celery_1   | [2019-10-24 12:58:16,886: WARNING/Beat] django.db.utils.OperationalError: server does not support SSL, but SSL was required

Celery does not seem to pick up the DISABLE_DATABASE_SSL_CHECK environment variable. @kraynel is looking into this!

Once fixed, we should release a v1.0.1 so that both install procedures work as intended.

Implement a differential serving pattern to save ~30Kb of compressed JS on modern browsers

Differential serving means giving different JS bundles to modern browsers and legacy ones.

Today, we pack 27Kb of compressed JS (see Webpack Bundle Analyzer screenshot below) to include core-js to make sure our app is IE11-compatible. However, users on modern browsers should not have to download and execute this as it’s not needed.

This article by Jeremy Wagner seems like a good point to start.

Note: to run a Webpack Bundle analysis, run the following command: cd frontend && yarn analyze

Auto-document API endpoints with Swagger

Falco offers a fully featured REST API, for which we need to write and update the documentation.

A few DRF-Swagger plugins are available, which would save us a lot of time in both writing and maintaining said documentation:

• https://django-rest-swagger.readthedocs.io/en/latest/
• https://drf-yasg.readthedocs.io/en/stable/index.html

What would be even cooler is to integrate the documentation right inside the Docusaurus build for the docs, however it does not look possible at the moment.

Chore: update backend dependencies

With the release of Django 3.0, now would be a good time to try and upgrade Django and other backend dependencies to give that old Pipfile some love.

Envisionned upgrades

• Django: 2.2.8 => 3.0
• DRF: 3.9.2 => 3.11.0
• Djoser: 1.5.1 => 2.0.3
• django-memoize: 2.2.0 => seems unused, to remove?
• django-storages: 1.7.1 => seems unused, to remove?
• django-celery-beat: 1.4.0 => 1.5.0
• djangorestframework-simplejwt: 4.3.0 => 4.4.0
• django-fernet-fields: 0.5 => 0.6
• whitenoise: * => 5.0.1
• django-heroku: * => 0.3.1
• drf-yasg: * => 1.17.0

Time To Interactive is different from WebPageTest audit

Reproduction

Steps to reproduce:

1. Check TTI given by Falco
2. Open an audit
3. Check TTI given by WPT

Expected Behavior

What behavior were you expecting to see?
The values are equal

Actual Behavior

What behavior did you actually see?

Environment

TTI (Falco): 6,02s
TTI (WPT): 2078ms

Deploying on Heroku team

When trying to deploy the application within a Heroku team it errors, because the teams cannot use free dynos and there is no way to specify otherwise.

SVG icons should have a uniform viewBox

Situation
Some icons have a view box of 24x24 (Add and Edit). Others are 76x76 (Close and Expand)

Why it is a problem
The stroke-width aspect depends on the viewBox size. Then in code putting the same stroke-with to different icons can lead to a different render; Here an example with 76x76 and 24x24 icons. Both have strokeWidth="3"

Proposed solution

• choose between 24 or 76
• adapt paths for modified icons
• look in code if strokeWidth are not affected by the modification

[Feature] Webhooks support to be notified of new audit results

Feature Description

Webhook support on Falco would allow other services to easily fetch audit results and Web Performance metrics from Falco.

Use Case

There are a few use cases this would enable:

• Automatic audit request on deploys: instead of (or in addition to) periodic audits, one could configure a webhook to run a new audit directly after a deploy. This would help spot potential performance regressions even more earlier. Edit: this would not actually require a webhook on Falco’s side, but rather use the CI/CD ones. Not possible currently as there are no way to authenticate requests apart from logging in (e.g. no API Key). This feature might be priorized next!
• Transversal dashboards: some organizations, such as Theodo, have built internal services that offer dashboards to report on the technical health of a given project or product: number of bugs, uptime, code quality… Falco could provide insights on Web Performance to such dashboards.
• Integration to third party aggregators: webhooks on Falco could allow for it to be use as a plugin for aggregators like the ELK stack, Prometheus or Datadog. This would help developers correlate performance metrics with other metrics they already follow, in addition to events like deployments/rollbacks…
• Building complex workflows with Zapier: we can imagine plugin the webhook to third-party “workflow-builders” like Zapier to be able to e.g.:
  • send an email if an audit failed;
  • send an email if the site is down (possibly related to #95);
  • send datapoints to a spreadsheet…

Technical considerations

Available webhooks

For the time being, I see one webhook that would bring the most value: being notified of new results for a project.

Security considerations

• To make sure that the client receives data from Falco, requests should be signed and HTTPS should be enforced;
• To make sure that Falco is not getting attacked, protections against SSRF should be put in place:
  • Only domain names should be resolved, not any IP;
  • Domain names should be resolved to external services, not internal ones (not sure whether this applies to Falco)
  • Do not follow redirections on the webhook URL

(Thanks to @benja-M-1 for his insights!)

HTTP Headers

Drawing inspiration from GitHub, the following HTTP Headers should be used for the webhooks requests:

Header	Description
X-Falco-Event	Name of the event type that triggered the delivery. As there is only one event now, it can only take the audit value.
X-Falco-Delivery	A GUID to identify the delivery.
X-Falco-Signature	The HMAC hex digest of the response body. This header will be sent if the webhook is configured with a secret. The HMAC hex digest is generated using the sha1 hash function and the secret as the HMAC key.

Off-the-shelf Python webhooks libraries?

I had a look at the three most popular Python webhook libraries to see if one of them could fit our requirements:

• https://github.com/robinhood/thorn
• https://github.com/zapier/django-rest-hooks
• https://github.com/pydanny/dj-webhooks

From what I gather, none of them can be used as-is:

• They are all tied to updates to a model, whereas in Falco the webhook would span several instances of several models at the same time;
• None of them offer the security-related features that we deem necessary

Technical roadmap

• Create a new menu entry in the Project Settings page, Webhooks, with the following form:
  • Payload URL
  • Secret
  • Active (checkbox / toggle)
  • Events (multiselect, currently only one choice audit)
• Figure out the payload to be sent on a webhook request
• Figure out a way to find when all audits for a given project have finished running (i.e. if my project has 2 Pages and 3 ProjectAuditParameters, I need to know when the 6 of them have finished running)
• Create the webhook and send the payload without security considerations
• Add security considerations
  • SSL verification
  • Custom headers with HMAC signature
  • SSRF protections

Deployment is a bit long

As of now, the Heroku deployments are a bit long (~10 minutes).

This can be a bit annoying as Heroku Review Apps are used to preview PRs, meaning that one can only preview and test their changes after waiting for ~10 minutes.

@kraynel as you already slimmed down the Docker build, you might want to have a look at what can be optimized even more :)

Add a link to the admin in the menu

Feature Description

Add a link to the admin in the "my account" menu so admin can go to the admin without needing remembering the url of the admin.

[Umbrella issue] Review the testing strategy

We’re short on tests, be it on the backend or the frontend. The risk is to introduce regressions in unrelated PRs, or to be afraid of refactorings because of said regressions. Also, tests are good.

We rethink about our testing strategy and an implementation plan.

Suggested implementation plan

Backend

• Test all celery tasks

  • request_audit
  • poll_audit_results
  • request_all_audits
  • clean_old_audit_statuses
  • get_wpt_audit_configurations

• Test critical endpoints

  • GET /projects
  • GET /projects/:id/
  • GET /audits/results?audit_parameters=auditParametersId&from_date=2019-10-14&page=pageId

Frontend

Write tests. Not too many. Mostly integration

Kent C. Dodds (source)

Our priority should be to get Cypress tests running on our current CI, testing the following user path:

• Login
• Check that the default project has results
• Change the current page
• Change the current environment
• Choose a script and change the step

bug(a11y): dashboards not accessible via keyboard only navigation

Reporting
✅ bug
⬜️ feature
⬜️ something else

Current situation
Navigate to https://falco.theo.do/project and land on the home page. When tabbing through the content it skips the three dashboards (TTI, Speed Index, Load Time).

Above GIF is a clip of Mac VoiceOver so the outlines are clearly visible.

Add / Delete metrics → is even not visibly focussed when tabbing through the content.

GIF of tabbing through content, Add / Delete metrics → is not visibly focussed.

Expected situation
I would expect that using the keyboard or using Mac's built in VoiceOver would go through all the content of the page, so the content is accessible for all users.

Reduce Audit results load by only fetching selected metrics

Feature Description

On a project page, when fetching /api/audits/results?audit_parameters=<some_id>, all of the metrics are returned by the api.

Only the metrics that are currently selected in the local storage for the project should be returned.

How

Pass the metrics as query params and filter the results in the python view

configuring of project, add step to populate data

Documentation Feedback

to populate list of possible audits, I needed to do manual run for task

this may be useful to reflect in documentation, otherwise unable to create project with empty audit section field.

All strings are untranslated

I'm psyched about testing Falco!

However, after when deploying to Heroku, I'm just getting untranslated strings (Welcome.no_project etc.) through the app.

I think I saw an error related to t in the console, but I can't get it to show again.

Any ideas?

I didn't do anything other than use the Deploy to Heroku button.

Accidental deletion of all API Keys in WebPageTest

This isn’t a bug in Falco per se, but it does affect users in a big way: there was an accidental deletion of all WPT API Keys today, and API Users (which Falco users are) are required to create new ones:

Well, crap. I was a little too effective in cleaning up API key abuse for WebPageTest (people registering dozens of keys) and accidentally nuked ALL of the self-registered API keys.

Sorry - if you were using it you'll have to register for a new key: https://webpagetest.org/getkey.php

— Pat Meenan (@patmeenan), WPT maintainer

Opening this issue to raise awareness for Falco users, I’ll close it in a few weeks!.

The perf metrics modal layout is broken by too many metrics

As we kept adding new metrics to add to the dashboard, we noticed that the modal layout was not adaptive to the content. Precisely, see in the following screenshot how the “Lighthouse Performance Score” gets pushed out of the modal:

@alexfauquette is currently working on it!

Heroku - the last audit failed

I deployed to the free tier of Heroku, installation completed and I created a new project according to the docs. Any audit I try fails with 'The last audit failed'.

This is what I get from the Heroku worker logs:

2019-10-27T15:47:35.68956+00:00 heroku[worker.1]: Starting process with command /bin/sh -c ./start_celery.sh
2019-10-27T15:47:36.266342+00:00 heroku[worker.1]: State changed from starting to up
2019-10-27T15:47:37.368018+00:00 app[worker.1]: curl: (3) URL using bad/illegal format or missing URL
2019-10-27T15:47:38.852602+00:00 app[worker.1]: [2019-10-27 15:47:38,852: INFO/Beat] beat: Starting...
2019-10-27T15:47:38.855018+00:00 app[worker.1]: [2019-10-27 15:47:38,854: INFO/Beat] Writing entries...
2019-10-27T15:47:39.082199+00:00 app[worker.1]: [2019-10-27 15:47:39,080: INFO/MainProcess] Connected to redis://h:**@ec2-52-18-237-146.eu-west-1.compute.amazonaws.com:7329//
2019-10-27T15:47:39.095578+00:00 app[worker.1]: [2019-10-27 15:47:39,095: INFO/MainProcess] mingle: searching for neighbors
2019-10-27T15:47:39.882045+00:00 app[worker.1]: [2019-10-27 15:47:39,881: INFO/Beat] Writing entries...
2019-10-27T15:47:39.9033+00:00 app[worker.1]: [2019-10-27 15:47:39,903: INFO/Beat] Scheduler: Sending due task One shot update all configurations (audits.tasks.get_wpt_audit_configurations)
2019-10-27T15:47:40.122999+00:00 app[worker.1]: [2019-10-27 15:47:40,122: INFO/MainProcess] mingle: all alone
2019-10-27T18:24:49.532125+00:00 app[worker.1]: [2019-10-27 18:24:49,531: INFO/MainProcess] mingle: all alone
2019-10-27T18:24:49.561495+00:00 app[worker.1]: [2019-10-27 18:24:49,561: INFO/MainProcess] celery@8272834f-a28a-4468-abab-746b4a485da4 ready.
2019-10-27T18:24:53.29708+00:00 app[worker.1]: [2019-10-27 18:24:53,296: INFO/Beat] Writing entries...
2019-10-27T18:25:17.877172+00:00 app[worker.1]: [2019-10-27 18:25:17,876: INFO/MainProcess] Received task: audits.tasks.request_audit[3d77d34e-a82f-44e7-896a-4d2def0bfc29]
2019-10-27T18:25:17.890522+00:00 app[worker.1]: [2019-10-27 18:25:17,890: INFO/MainProcess] Received task: audits.tasks.request_audit[f2204075-d67e-4ef2-8bf8-73c927ed5ed7]
2019-10-27T18:25:17.897282+00:00 app[worker.1]: [2019-10-27 18:25:17,897: INFO/MainProcess] Received task: audits.tasks.request_audit[5a0e3787-ff36-4df8-92d2-335c1db45e00]
2019-10-27T18:25:18.154933+00:00 app[worker.1]: [2019-10-27 18:25:18,154: INFO/ForkPoolWorker-4] Task audits.tasks.request_audit[5a0e3787-ff36-4df8-92d2-335c1db45e00] succeeded in 0.2557556260144338s: None
2019-10-27T18:25:18.161287+00:00 app[worker.1]: [2019-10-27 18:25:18,160: INFO/ForkPoolWorker-3] Task audits.tasks.request_audit[f2204075-d67e-4ef2-8bf8-73c927ed5ed7] succeeded in 0.2693798690161202s: None
2019-10-27T18:25:18.162534+00:00 app[worker.1]: [2019-10-27 18:25:18,162: INFO/ForkPoolWorker-2] Task audits.tasks.request_audit[3d77d34e-a82f-44e7-896a-4d2def0bfc29] succeeded in 0.2837241839733906s: None

Split “Project settings” page into tabs

The “Project settings” page is quite visually heavy at the moment, splitting it in tabs (like in the audits page) will make it more easy to navigate.

We can split it into 4 tabs:

• General
• Project environments
• Pages & scripts
• Members

This will also help streamlining the project creation flow (4 short steps instead of a single big one).

Falco does not save audit results data when Lighthouse errors on Time To Interactive calculation

Reproduction

Steps to reproduce:

1. Set up a project testing the Moto G4 - Chrome - 3GFast - Dulles environment
2. Run a few audits

This bug seemingly happened in only one project (that I cannot disclose unfortunately).

Expected Behavior

All audit results should be stored in Falco and made accessible to the user

Actual Behavior

All have results in WPT, but some of them will not make it to Falco with the Error while parsing the audit results from WPT error

Wrong translation in English

Fresh installs should have sensible defaults for periodic tasks

Today, fresh installs of Falco have no default periodic tasks, meaning that it’s up to the developper installing to created the 5-odd periodic tasks from Django Admin.

In order to make new installs simpler, it would be nice to provide :

• Sensible default periodic tasks
• A documentation to change/add/remove said tasks

Here is a list of tasks that I think would make sense :

• 3 audits per day
• Fetch the available WPT configurations directly on installs (so that users can immediately create a new project)
• Update of available WPT configurations every night
• Cleanup of old audit statuses every night

Note: the celery.backend_cleanup is managed automatically by Celery Beat and does not need to be managed in this PR.

@alexfauquette is working on it!

`from_date` and `to_date` params not working for scripts

Reproduction

Steps to reproduce:

1. For a project that has a least a script, go to that script audits results

Expected Behavior

Only the last week of the audits should be loaded to display the graph. Put another way, the parameter from_date in the GET /results request should restrict the results in time, as it does for page results.

Actual Behavior

The from_date parameter is not working, meaning that we fetch all results only to display the last week. This can have a huge impact for performance, as the results JSON for a long-running project with scripts can be quite large. Here is an example for a several-month long project:

Environment

• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): N/A

Docker python image should not run as root

Celery throws a warning when. starting inside the docker image:
/usr/local/lib/python3.7/site-packages/celery/platforms.py:801: RuntimeWarning: You're running the worker with superuser privileges: this is absolutely not recommended!

We should create a dedicated user.

Add (and possibly automate) CHANGELOG.md

For the release cycle to be as transparent as possible, we should create a CHANGELOG.md file and document what new feature / fix went into each new release.

We should also look into how this could be automated in the future if need be.

Add contributing guidelines

Motivation

Projects with clear contribution guidelines makes it easier to get started as a contributor.

Prior art

• https://www.gatsbyjs.org/contributing/how-to-contribute/ (probably overkill this early in the project)
• https://github.com/mui-org/material-ui/#contributing
• https://github.com/marmelab/react-admin#contributing

Todo

• Create a CONTRIBUTING.md file
• Make sure that the install docs are clear, easy to follow and (most importantly) just works
• Provide better fixtures for new installs of the project
• Mention the contribution guidelines (and CoC) directly in the README

Error parsing audit results from WPT when the json is too big

Reproduction

• Json report generated by WPT is over 17.6Mb, see WPT report link.
  • The error message in the audit section from the admin is: Error while parsing the audit results from WPT. AuditResults uuid: 21917a63-0970-40f6-b0a4-c3c0805e80c9
• One of the audit succeeded in the last 10 and the json was 'only 17Mb': report link

Environment

• We have a Vue / Nuxt project
• Parameters of the test: London, UK - EC2: Chrome with Network Shape = Cable
• Website tested: https://www.duolab.com/gb

Automate new releases with GitHub Actions

Feature Description

When a new git tag is created, we need to do the following to create a new release:

• Update the CHANGELOG.md
• Update the version the Heroku Button points to
• Rebase the heroku-teams-button branch to the new release
• Create a new GitHub release

Some of those actions could be automated with GitHub Actions, which would make it easier and less error-prone to push new releases

Use Case

This would be useful to the repository maintainers.

Improve contribution workflow with better fixtures

Feature Description

For now, the fixtures provided with the project are verry narrow and suffer a few problems:

• The date of the sole audit generated is fixed (2019-10-19), meaning that running the fixtures now results in an absence of performance graphs because the latest audit is over a week old;
• There is only a single audit, for a single project, for a single environment, for a single user;

This makes some features a bit hard to test whether locally or in Deploy Previews and thus complicates contributions, both for existing and new contributors.

Use Case

A new set of fixtures should provide the following:

• Multiple users, including one of each role (Super Admin, Project Admin, Project Member);
• Multiple projects with at least:
  • One project with more that a week worth of audits;
  • One project with several environments;
  • One project with no audits;
  • One project with several members;

I’m currently looking to use https://github.com/FactoryBoy/factory_boy to achive such a goal.

How would i configure the connection to an external postgres instance

Documentation Feedback

I'd like to run falco via the proposed docker-compose.yml, but i would rather use my existing postgresql instance on a different machine. in other django apps i'm running i would usually adjust the DATABASES block like so:

DATABASES = {
  'default': {
    'HOST': 'postgres.domain.net',
    'PORT': 5432,
    'ENGINE': 'django.db.backends.postgresql',
    'NAME': 'falco',
    'USER': 'falco',
    'PASSWORD': '{{ falco_db_pass }}',
    'TEST': {'CHARSET': 'UTF8'}
  }
}

This does not seem to have an effect. I do not know the app well enough to understand where DATABASE_URL is being used, and how to possibly adjust it.

Can anybody point me in the right direction?

List of user's project lost on page refresh

Reproduction

Steps to reproduce:

1. Create two projects
2. Select "Mes Projets": you see your two projects
3. Select the first one
4. Refresh the page
5. Select "Mes Projets": you can only see your current project

Expected Behavior

You should be able to see the list of all your current projects.

Actual Behavior

You can only see your current project if you refresh the page. The call to the '/projects' route is not done if you refresh the page

Environment

• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOs

Refactor components of project settings page

A lot of styled components are duplicated in the pages :

• GeneralSettings
• EnvironmentSettings
• MembersSettings
• PagesAndScriptsSettings

It would be great to refactor the code and use common components.
In addition we use a custom loader for the ScriptModal component, we could improve the current Loader in components/Loader to use it in the ScriptModal component

Comparing WebPageTest audits does not work with Private Instances

Reproduction

Steps to reproduce:

1. Run at least two audits on a project set up to use Private Instances
2. Try to compare the two audits

Expected Behavior

To be redirected to the Compare view of the WebPageTest Private Instance and be able to see the filmstrips/Waterfall etc…

Actual Behavior

I am redirected to the Compare view of WebPageTest public instance instead, which does not know about the audits. I cannot compare the waterfalls etc…

Environment

• Browser(s): N/A
• Operating System (e.g. Windows, macOS, Ubuntu): N/A

All contributors 🎉

@all-contributors please add @phacks for design, code, content, infra and doc, @gllmcornet for code, infra and design, @kraynel for infra, @CecileSerene for code, @LouisPinsard for code, @vlarrat-theodo for code and security, @antkahn for code, @fargito for code, @EtienneGrall for code. Thanks!

IBM Plex font is not loaded

When we moved from serving the static files from Nginx to Django, we forgot to transfer the font.css file: https://github.com/theodo/falco/blob/6f9ab18cc616dfa5ad725c778d9523df4b71cb88/backend/front/static/font.css

The impact is that the font is not loaded anymore on the site.

We should add this file back to the frontend/public/ folder, and add it to the index.html page in frontend/public.

Docs repository should be migrated to this repo

In order to make Docs edits / PR more easy, and to keep a single repo to keep track of doc issues/PRs, the Docs repo (currently at https://github.com/theodo/getfal.co) should be migrated under a docs/ folder in this very repo.

Validate the API Key input to check for the `A.` prefix

Related to #67

In at least 4 or 5 instances, the API Key entered in Falco was missing the A. prefix—as @mbinkhorst points out, the . causes the copy/pasting to not include the whole key.

It would be nice to have basic input validation on that field, at least to check the following:

• The key begins with A.
• The key contains the right amount of characters (I’ll have to check whether WPT API Keys are fixed length)