frontend: apply prettier to cypress/webapp

.devcontainer/devcontainer.json

@@ -1,7 +1,5 @@
 {
   "build": { "dockerfile": "Dockerfile" },
-  "extensions": [
-		"golang.go"
-	],
-	"forwardPorts": [4040]
+  "extensions": ["golang.go"],
+  "forwardPorts": [4040]
 }

.eslintrc

@@ -1,11 +1,10 @@
 {
   "parser": "babel-eslint",
   "plugins": ["prettier"],
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb", "prettier", "plugin:cypress/recommended"],
   "rules": {
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "no-unused-vars": ["warn"],
-    "prettier/prettier": ["error"],
     "no-param-reassign": ["warn"],
     "no-shadow": ["warn"],
     "no-case-declarations": ["warn"],
@@ -20,11 +19,14 @@
     "jsx-a11y/mouse-events-have-key-events": ["warn"],
     "jsx-a11y/click-events-have-key-events": ["warn"],
     "jsx-a11y/no-static-element-interactions": ["warn"],
-    "jsx-a11y/label-has-associated-control": [ "error", {
-      "required": {
-        "some": [ "nesting", "id"  ]
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "required": {
+          "some": ["nesting", "id"]
+        }
       }
-    }]
+    ]
   },
   "env": {
     "browser": true,

.git-blame-ignore-revs

@@ -0,0 +1 @@
+fca0fcf152cb304c10b94bd3b78d56a319485170

.github/workflows/lint-go.yml

@@ -16,4 +16,4 @@ jobs:
         uses: petethepig/revive-action@v5
         with:
           config: revive.toml
-          exclude: "vendor/..."
+          exclude: 'vendor/...'

.github/workflows/lint-markdown.yml

@@ -3,14 +3,13 @@ name: Markdown Linting
 # runs every monday at 9 am
 on:
   schedule:
-    - cron: "0 9 * * 1"
+    - cron: '0 9 * * 1'
 
 jobs:
   markdown-lint:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - uses: gaurav-nelson/github-action-markdown-link-check@v1
-      with:
-        config-file: .github/workflows/markdown-links-config.json
-
+      - uses: actions/checkout@v2
+      - uses: gaurav-nelson/github-action-markdown-link-check@v1
+        with:
+          config-file: .github/workflows/markdown-links-config.json

.github/workflows/update-contributos.yml

@@ -9,17 +9,17 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-      with:
-        ref: ${{ github.head_ref }}
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.head_ref }}
 
-    - name: Install dependencies
-      run: make install-web-dependencies
+      - name: Install dependencies
+        run: make install-web-dependencies
 
-    - name: Update contributors
-      run: make update-contributors
+      - name: Update contributors
+        run: make update-contributors
 
-    - uses: stefanzweifel/git-auto-commit-action@v4
-      with:
-        commit_message: Updates the list of contributors in README
-        file_pattern: README.md
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Updates the list of contributors in README
+          file_pattern: README.md

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npx lint-staged
+npx lint-staged

.linelint.yml

@@ -19,7 +19,6 @@ ignore:
   - examples/dotnet
   - .github/markdown-images
 
-
 rules:
   # checks if file ends in a newline character
   end-of-file:

.prettierignore

@@ -0,0 +1,6 @@
+webapp/public
+third_party
+*.md
+*.json
+monitoring/gen/*
+.prettierignore

.prettierrc

@@ -1 +1 @@
-{ "single-quote": true }
+{ "singleQuote": true }

Dockerfile

@@ -55,7 +55,7 @@ WORKDIR /opt/pyroscope
 
 COPY scripts ./scripts
 COPY webapp ./webapp
-COPY package.json yarn.lock babel.config.js .eslintrc .eslintignore Makefile ./
+COPY package.json yarn.lock babel.config.js .eslintrc .eslintignore .prettierrc Makefile ./
 
 ARG EXTRA_METADATA=""
 RUN EXTRA_METADATA=$EXTRA_METADATA make assets-release

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-  presets: ["@babel/preset-env", "@babel/preset-react"],
-  plugins: ["transform-class-properties"],
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: ['transform-class-properties'],
 };

benchmark/ci/pr/dangerfile.js

@@ -1,13 +1,11 @@
-import {markdown } from "danger"
+import { markdown } from 'danger';
 const fs = require('fs');
 const path = require('path');
 
-
-const metaReport = fs.readFileSync(path.join(__dirname,"./meta-report"));
-const tableReport = fs.readFileSync(path.join(__dirname,"./table-report"));
-const imgReport = fs.readFileSync(path.join(__dirname,"./image-report"));
+const metaReport = fs.readFileSync(path.join(__dirname, './meta-report'));
+const tableReport = fs.readFileSync(path.join(__dirname, './table-report'));
+const imgReport = fs.readFileSync(path.join(__dirname, './image-report'));
 
 // the markdown calls seem to be LIFO
 // so it's easier to just use a single call
 markdown(`${metaReport} \n${tableReport} \n${imgReport}`);
-

benchmark/ci/pr/docker-compose.yml

@@ -2,20 +2,20 @@
 x-PYROSCOPE_CPUS: &PYROSCOPE_CPUS 1
 x-PYROSCOPE_MEMORY: &PYROSCOPE_MEMORY 4096MB
 
-version: "3.9"
+version: '3.9'
 services:
   client:
     build:
       context: ../../../
       dockerfile: benchmark/Dockerfile
     # we will be running docker exec against it
     command:
-    - sh
-    - -c
-    - sleep Infinity
+      - sh
+      - -c
+      - sleep Infinity
     volumes:
-    - ./dashboard-screenshots:/screenshots
-    - ./report.yaml:/report.yaml
+      - ./dashboard-screenshots:/screenshots
+      - ./report.yaml:/report.yaml
   pyroscope:
     environment:
       - PYROSCOPE_LOG_LEVEL=info

benchmark/ci/pr/report.yaml

@@ -2,14 +2,14 @@ baseName: main
 targetName: pr
 
 queries:
-  - name: "throughput"
+  - name: 'throughput'
     base: 'rate(pyroscope_http_request_duration_seconds_count{handler="/ingest", instance="pyroscope:4040"}[5m])'
     target: 'rate(pyroscope_http_request_duration_seconds_count{handler="/ingest", instance="pyroscope_main:4040"}[5m])'
     diffThresholdPercent: 5
     biggerIsBetter: true
 
   - base: 'pyroscope_http_request_duration_seconds_count{handler="/ingest", instance="pyroscope:4040"}'
     target: 'pyroscope_http_request_duration_seconds_count{handler="/ingest", instance="pyroscope_main:4040"}'
-    name: "total items processed"
+    name: 'total items processed'
     diffThresholdPercent: 5
     biggerIsBetter: true

benchmark/docker-compose.yml

@@ -1,18 +1,18 @@
-version: "3.9"
+version: '3.9'
 services:
   pyrobench:
     env_file:
-    - run-parameters.env
+      - run-parameters.env
     build:
       context: ../
       dockerfile: benchmark/Dockerfile
     # we will be running docker exec against it
     command:
-    - sh
-    - -c
-    - sleep Infinity
+      - sh
+      - -c
+      - sleep Infinity
     volumes:
-    - ./dashboard-screenshots:/screenshots
+      - ./dashboard-screenshots:/screenshots
 
   pyroscope:
     environment:
@@ -28,8 +28,8 @@ services:
     deploy:
       resources:
         limits:
-          cpus: "${PYROSCOPE_CPUS}"
-          memory: "${PYROSCOPE_MEMORY}"
+          cpus: '${PYROSCOPE_CPUS}'
+          memory: '${PYROSCOPE_MEMORY}'
 
   prometheus:
     image: prom/prometheus:v2.27.1
@@ -53,4 +53,3 @@ services:
 volumes:
   data-prometheus:
     driver: local
-

benchmark/grafana-provisioning/dashboards/main.json

@@ -487,9 +487,7 @@
       "links": [],
       "options": {
         "reduceOptions": {
-          "calcs": [
-            "lastNotNull"
-          ],
+          "calcs": ["lastNotNull"],
           "fields": "",
           "values": false
         },
@@ -1639,9 +1637,7 @@
         "displayMode": "gradient",
         "orientation": "vertical",
         "reduceOptions": {
-          "calcs": [
-            "lastNotNull"
-          ],
+          "calcs": ["lastNotNull"],
           "fields": "",
           "values": false
         },
@@ -1816,17 +1812,7 @@
       "2h",
       "1d"
     ],
-    "time_options": [
-      "5m",
-      "15m",
-      "1h",
-      "6h",
-      "12h",
-      "24h",
-      "2d",
-      "7d",
-      "30d"
-    ]
+    "time_options": ["5m", "15m", "1h", "6h", "12h", "24h", "2d", "7d", "30d"]
   },
   "timezone": "browser",
   "title": "main",

benchmark/grafana-provisioning/dashboards/main.yml

@@ -1,8 +1,8 @@
 apiVersion: 1
 
 providers:
-- name: dashboards
-  type: file
-  updateIntervalSeconds: 5
-  options:
-    path: /etc/grafana/provisioning/dashboards
+  - name: dashboards
+    type: file
+    updateIntervalSeconds: 5
+    options:
+      path: /etc/grafana/provisioning/dashboards

benchmark/prometheus/prometheus.yml

@@ -1,15 +1,15 @@
 # my global config
 global:
-  scrape_interval:     1s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
+  scrape_interval: 1s # Set the scrape interval to every 15 seconds. Default is every 1 minute.
   evaluation_interval: 15s # Evaluate rules every 15 seconds. The default is every 1 minute.
   # scrape_timeout is set to the global default (10s).
 
 # Alertmanager configuration
 alerting:
   alertmanagers:
-  - static_configs:
-    - targets:
-      # - alertmanager:9093
+    - static_configs:
+        - targets:
+          # - alertmanager:9093
 
 # Load rules once and periodically evaluate them according to the global 'evaluation_interval'.
 rule_files:
@@ -26,8 +26,8 @@ scrape_configs:
     # scheme defaults to 'http'.
 
     static_configs:
-    - targets:
-      - 'localhost:9090'
-      - 'pyroscope:4040'
-      - 'pyroscope_main:4040'
-      - 'pushgateway:9091'
+      - targets:
+          - 'localhost:9090'
+          - 'pyroscope:4040'
+          - 'pyroscope_main:4040'
+          - 'pushgateway:9091'

benchmark/take-screenshot.js

@@ -1,6 +1,6 @@
-console.log("puppeteer start");
+console.log('puppeteer start');
 
-const puppeteer = require("puppeteer");
+const puppeteer = require('puppeteer');
 
 function timeout(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
@@ -9,15 +9,16 @@ function timeout(ms) {
 const args = process.argv.slice(2);
 
 const from = args[1];
-console.log('from', from)
-
-(async () => {
+console.log(
+  'from',
+  from
+)(async () => {
   const browser = await puppeteer.launch({});
   const page = await browser.newPage();
   await page.setViewport({ width: 1600, height: 1280 });
   await page.goto(
     `http://localhost:8080/d/65gjqY3Mk/main?orgId=1&from=${from}`,
-    { waitUntil: "networkidle2" }
+    { waitUntil: 'networkidle2' }
   );
   await timeout(2000);
   await page.screenshot({
@@ -27,4 +28,4 @@ console.log('from', from)
   browser.close();
 })();
 
-console.log("puppeteer stop");
+console.log('puppeteer stop');

codecov.yml

@@ -1,2 +1,2 @@
 ignore:
-  - "**/*.pb.go" # auto-generated code
+  - '**/*.pb.go' # auto-generated code

cypress/README.md

@@ -2,16 +2,16 @@
 
 [Cypress](https://www.cypress.io/) is a end-to-end testing library, used mainly to simulate real user scenario (ie. clicking around and interacting with).
 
-
 # Running locally
+
 While running the dev server, run `yarn cy:open`
 Which will spawn a browser, click on the file that you want to work on. It will be refreshed automatically whenever you update that file.
 
 Or run `yarn cy:ci` to run all tests.
 
 # Writing tests
-* Try to use [testids](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change/) to select DOM elements
-* Since our application is relatively simple, there's no need for Page Objects yet
-* [Don't write small tests with single assertions](https://docs.cypress.io/guides/references/best-practices#Creating-tiny-tests-with-a-single-assertion)
-* [Mock HTTP requests](https://docs.cypress.io/guides/guides/network-requests#Stub-Responses) when appropriate
 
+- Try to use [testids](https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change/) to select DOM elements
+- Since our application is relatively simple, there's no need for Page Objects yet
+- [Don't write small tests with single assertions](https://docs.cypress.io/guides/references/best-practices#Creating-tiny-tests-with-a-single-assertion)
+- [Mock HTTP requests](https://docs.cypress.io/guides/guides/network-requests#Stub-Responses) when appropriate