frontend: apply prettier to cypress/webapp (grafana#417)

* frontend: add husky + lint-staged idea here is to run eslint + prettier against staged files so that nothing broken is pushed frontend: add cypress eslint plugin frontend: reformat more files * set correct git blame rev * don't assume npx is installed * run prettier checks in ci * add prettier/react rules to eslint * also format .eslintrc * reformat python docker-compose Co-authored-by: Dmitry Filimonov <[email protected]>
yzhaoyu · Sep 24, 2021 · fffac60 · fffac60
1 parent ec880c5
commit fffac60
Show file tree

Hide file tree

Showing 123 changed files with 2,431 additions and 1,689 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,7 +1,5 @@
 {
   "build": { "dockerfile": "Dockerfile" },
-  "extensions": [
-		"golang.go"
-	],
-	"forwardPorts": [4040]
+  "extensions": ["golang.go"],
+  "forwardPorts": [4040]
 }
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,15 @@
 {
   "parser": "babel-eslint",
   "plugins": ["prettier"],
-  "extends": ["airbnb", "prettier"],
+  "extends": [
+    "airbnb",
+    "prettier",
+    "prettier/react",
+    "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"],
@@ -16,15 +20,17 @@
     "jsx-a11y/heading-has-content": ["warn"],
     "jsx-a11y/control-has-associated-label": ["warn"],
     "no-undef": ["warn"],
-    "react/jsx-one-expression-per-line": ["warn"],
     "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,

diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs
@@ -0,0 +1 @@
+fca0fcf152cb304c10b94bd3b78d56a319485170
diff --git a/.github/workflows/lint-go.yml b/.github/workflows/lint-go.yml
@@ -16,4 +16,4 @@ jobs:
         uses: petethepig/revive-action@v5
         with:
           config: revive.toml
-          exclude: "vendor/..."
+          exclude: 'vendor/...'
diff --git a/.github/workflows/lint-markdown.yml b/.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
diff --git a/.github/workflows/tests-js.yml b/.github/workflows/tests-js.yml
@@ -18,3 +18,5 @@ jobs:
         run: yarn run test
       - name: Run Webapp lints
         run: yarn lint
+      - name: Run Webapp Format check
+        run: yarn format:check
diff --git a/.github/workflows/update-contributos.yml b/.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
diff --git a/.husky/.gitignore b/.husky/.gitignore
@@ -0,0 +1 @@
+_
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn run lint-staged
diff --git a/.linelint.yml b/.linelint.yml
@@ -19,7 +19,6 @@ ignore:
   - examples/dotnet
   - .github/markdown-images
 
-
 rules:
   # checks if file ends in a newline character
   end-of-file:

diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+webapp/public
+third_party
+*.md
+monitoring/gen/*
+.prettierignore
diff --git a/.prettierrc b/.prettierrc
@@ -1 +1 @@
-{ "single-quote": true }
+{ "singleQuote": true }
diff --git a/Dockerfile b/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

diff --git a/babel.config.js b/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'],
 };
diff --git a/benchmark/ci/pr/dangerfile.js b/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}`);
-
diff --git a/benchmark/ci/pr/docker-compose.yml b/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

diff --git a/benchmark/ci/pr/report.yaml b/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
diff --git a/benchmark/docker-compose.yml b/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
-
diff --git a/benchmark/grafana-provisioning/dashboards/main.json b/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",

diff --git a/benchmark/grafana-provisioning/dashboards/main.yml b/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
diff --git a/benchmark/prometheus/prometheus.yml b/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'
diff --git a/benchmark/take-screenshot.js b/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');
diff --git a/codecov.yml b/codecov.yml
@@ -1,2 +1,2 @@
 ignore:
-  - "**/*.pb.go" # auto-generated code
+  - '**/*.pb.go' # auto-generated code