build: add linter and formar checker to the frontend (#677)

* Add eslint as linter and prettier as formater for app

* Use @phlare

Signed-off-by: hi-rustin <rustin.liu@gmail.com>

.eslintignore

@@ -0,0 +1,8 @@
+public/build/**
+scripts/**
+pkg/api/static/**
+**/dist
+.eslintrc.js
+jest.config.js
+cypress/**
+cypress.config.ts

.eslintrc.js

@@ -0,0 +1,55 @@
+module.exports = {
+  extends: [
+    '@grafana/eslint-config',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+  ],
+  plugins: ['unused-imports'],
+  rules: {
+    'react-hooks/exhaustive-deps': 'warn',
+    'no-duplicate-imports': 'off',
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'import/no-relative-packages': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['../*', './*'],
+            message:
+              'Usage of relative parent imports is not allowed. Please use absolute(use alias) imports instead.',
+          },
+        ],
+      },
+    ],
+  },
+  env: {
+    browser: true,
+    jquery: true,
+  },
+  settings: {
+    'import/internal-regex': '^@webapp',
+    'import/resolver': {
+      node: {
+        extensions: ['.ts', '.tsx', '.es6', '.js', '.json', '.svg'],
+      },
+      typescript: {
+        project: 'tsconfig.json',
+      },
+    },
+  },
+  parserOptions: {
+    project: ['tsconfig.json'],
+  },
+};

.github/workflows/frontend.yml

@@ -25,6 +25,30 @@ jobs:
       - run: yarn --frozen-lockfile
       - name: Run type-check
         run: yarn type-check
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.15.0
+          cache: yarn
+      - run: yarn --frozen-lockfile
+      - name: Run format
+        run: yarn run format
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18.15.0
+          cache: yarn
+      - run: yarn --frozen-lockfile
+      - name: Run lint
+        run: yarn lint
   build:
     runs-on: ubuntu-latest
     steps:

.gitignore

@@ -1,20 +1,27 @@
 # Binaries for programs and plugins
 bin
-# Test binary, built with `go test -c`
-*.test
 /phlare
 /profilecli
-
+# Test binary, built with `go test -c`
+*.test
 # Output of the go coverage tool, specifically when used with LiteIDE
 *.out
 
 /cmd/phlare/data
 data/
 .DS_Store
+**/dist
 
+# IDE
+.idea
+.vscode
+
+# Frontend
+public/build
+cypress/screenshots
+.eslintcache
 node_modules
 /grafana/flamegraph/coverage/
-
 # Yarn
 **/.yarn/*
 !**/.yarn/patches
@@ -23,17 +30,7 @@ node_modules
 !**/.yarn/sdks
 !**/.yarn/versions
 .pnp.*
-
-
-**/dist
-
-.idea
-
-dist/
-
-public/build
+yarn-error.log
 
 # Contains the docker image id for phlare
 /.docker-image-id-phlare
-
-cypress/screenshots

.prettierignore

@@ -0,0 +1,13 @@
+public/build/**
+pkg/api/static/**
+vendor/**
+tools/**
+operations/**
+api/**
+data/**
+**/dist
+**/testdata
+*.md
+*.yaml
+*.yml
+*.html

.prettierrc

@@ -0,0 +1 @@
+{ "singleQuote": true }

.trunk/config/svgo.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     {
-      name: "preset-default",
+      name: 'preset-default',
       params: {
         overrides: {
           removeViewBox: false, // https://github.com/svg/svgo/issues/1128

cypress/fixtures/profileTypes.json

@@ -1,2 +1,7 @@
-["memory:alloc_objects:count::","memory:alloc_space:bytes::","memory:inuse_objects:count::","memory:inuse_space:bytes::","process_cpu:cpu:nanoseconds:cpu:nanoseconds"]
-
+[
+  "memory:alloc_objects:count::",
+  "memory:alloc_space:bytes::",
+  "memory:inuse_objects:count::",
+  "memory:inuse_space:bytes::",
+  "process_cpu:cpu:nanoseconds:cpu:nanoseconds"
+]

cypress/support/commands.ts

@@ -36,4 +36,3 @@
 //   }
 // }
 import '@testing-library/cypress/add-commands';
-

cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
-// require('./commands')
+// require('./commands')

cypress/tsconfig.json

@@ -6,4 +6,3 @@
   },
   "include": ["**/*.ts"]
 }
-

jest.config.js

@@ -14,4 +14,7 @@ module.exports = {
     // https://stackoverflow.com/a/69150188
     'node_modules/(?!(true-myth|d3|d3-array|internmap|d3-scale|react-notifications-component|graphviz-react))',
   ],
+  moduleNameMapper: {
+    '@webapp/util/baseurl': ['<rootDir>/public/app/overrides/util/baseurl'],
+  },
 };

package.json

@@ -10,11 +10,16 @@
     "type-check": "tsc -p tsconfig.json --noEmit",
     "build": "NODE_ENV=production webpack --progress --config scripts/webpack/webpack.prod.js",
     "dev": "NODE_ENV=development webpack serve --progress --color --config scripts/webpack/webpack.dev.js",
-    "cy": "cypress"
+    "cy": "cypress",
+    "lint": "eslint . --ext .js,.tsx,.ts --cache",
+    "lint:fix": "yarn lint --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write ."
   },
   "devDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@grafana/eslint-config": "^5.1.0",
     "@swc/core": "^1.3.55",
     "@swc/jest": "^0.2.26",
     "@testing-library/cypress": "^9.0.0",
@@ -32,14 +37,24 @@
     "@types/react-helmet": "^6.1.5",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-router-dom": "5.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "copy-webpack-plugin": "^11.0.0",
     "cypress": "^12.11.0",
     "esbuild-loader": "^3.0.1",
+    "eslint": "^8.40.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsdoc": "^44.2.2",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
     "expose-loader": "^4.1.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.5",
+    "prettier": "2.8.8",
     "react-svg-loader": "^3.0.3",
     "sass": "^1.60.0",
     "tsconfig-paths-webpack-plugin": "^4.0.1",

public/app/app.tsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './jquery-import';
+import '@phlare/jquery-import';
 import { Provider } from 'react-redux';
-import store from './redux/store';
+import store from '@webapp/redux/store';
 import '@webapp/../sass/profile.scss';
 import '@szhsin/react-menu/dist/index.css';
 import Notifications from '@webapp/ui/Notifications';
 import { Router, Switch, Route } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 
-import { ROUTES } from './pages/routes';
-import { SingleView } from './pages/SingleView';
-import { ComparisonView } from './pages/ComparisonView';
-import { DiffView } from './pages/DiffView';
-import { LoadAppNames } from './components/LoadAppNames';
-import { Sidebar } from './components/Sidebar';
-import { TenantWall } from './components/TenantWall';
-import { baseurl } from './overrides/util/baseurl';
+import { ROUTES } from '@phlare/pages/routes';
+import { SingleView } from '@phlare/pages/SingleView';
+import { ComparisonView } from '@phlare/pages/ComparisonView';
+import { DiffView } from '@phlare/pages/DiffView';
+import { LoadAppNames } from '@phlare/components/LoadAppNames';
+import { Sidebar } from '@phlare/components/Sidebar';
+import { TenantWall } from '@phlare/components/TenantWall';
+import { baseurl } from '@webapp/util/baseurl';
 
 const container = document.getElementById('reactRoot') as HTMLElement;
 const root = ReactDOM.createRoot(container);

public/app/components/LoadAppNames.tsx

@@ -1,8 +1,9 @@
-import { loadAppNames } from '../hooks/loadAppNames';
+import React from 'react';
+import { useAppNames } from '@phlare/hooks/useAppNames';
 
 // LoadAppNames loads all app names automatically
 export function LoadAppNames(props: { children?: React.ReactNode }) {
-  loadAppNames();
+  useAppNames();
 
   return <>{props.children}</>;
 }

public/app/components/Sidebar.tsx

@@ -3,16 +3,14 @@ import { faWindowMaximize } from '@fortawesome/free-regular-svg-icons';
 import { faChartBar } from '@fortawesome/free-solid-svg-icons/faChartBar';
 import { faColumns } from '@fortawesome/free-solid-svg-icons/faColumns';
 import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
-import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
 
-import {
+import SidebarUI, {
   MenuItem,
   SidebarHeader,
   SidebarFooter,
   SidebarContent,
   Menu,
 } from '@webapp/ui/Sidebar';
-import SidebarUI from '@webapp/ui/Sidebar';
 import { useAppSelector, useAppDispatch } from '@webapp/redux/hooks';
 import {
   selectSidebarCollapsed,
@@ -24,10 +22,10 @@ import { useLocation, NavLink } from 'react-router-dom';
 import Icon from '@webapp/ui/Icon';
 import clsx from 'clsx';
 import { useWindowWidth } from '@react-hook/window-size';
-import { isRouteActive, ROUTES } from '../pages/routes';
-import Logo from '../static/logo.svg';
-import styles from './Sidebar.module.css';
-import { SidebarTenant } from './SidebarTenant';
+import { isRouteActive, ROUTES } from '@phlare/pages/routes';
+import Logo from '@phlare/static/logo.svg';
+import styles from '@webapp/components/Sidebar.module.css';
+import { SidebarTenant } from '@phlare/components/SidebarTenant';
 
 export function Sidebar() {
   const collapsed = useAppSelector(selectSidebarCollapsed);

public/app/components/SidebarTenant.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { faCog } from '@fortawesome/free-solid-svg-icons/faCog';
 import { faUser } from '@fortawesome/free-solid-svg-icons/faUser';
 import { MenuButton, MenuProps, MenuHeader } from '@szhsin/react-menu';
@@ -9,9 +10,9 @@ import {
   selectIsMultiTenant,
   selectTenantID,
   actions,
-} from '@phlare/redux/reducers/tenant';
-import { useAppSelector, useAppDispatch } from '../redux/hooks';
-import styles from './SidebarTenant.module.css';
+} from '@webapp/redux/reducers/tenant';
+import { useAppSelector, useAppDispatch } from '@webapp/redux/hooks';
+import styles from '@phlare/components/SidebarTenant.module.css';
 import cx from 'classnames';
 
 export interface DropdownProps {

public/app/components/TenantWall.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useAppDispatch, useAppSelector } from '../redux/hooks';
+import { useAppDispatch, useAppSelector } from '@webapp/redux/hooks';
 import TextField from '@webapp/ui/Form/TextField';
 import {
   Dialog,
@@ -13,7 +13,7 @@ import {
   selectTenancy,
   actions,
   selectTenantID,
-} from '@phlare/redux/reducers/tenant';
+} from '@webapp/redux/reducers/tenant';
 
 export function TenantWall({ children }: { children: React.ReactNode }) {
   const dispatch = useAppDispatch();
@@ -102,7 +102,7 @@ function SelectTenantIDDialog({
                 </p>
                 <p>
                   Notice that if you migrated from a non-multitenant version,
-                  data can be found under Tenant ID "anonymous".
+                  data can be found under Tenant ID {'"'}anonymous{'"'}.
                 </p>
 
                 <TextField

public/app/hooks/loadAppNames.ts → public/app/hooks/useAppNames.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useAppDispatch } from '@webapp/redux/hooks';
 import { reloadAppNames } from '@webapp/redux/reducers/continuous';
 
-export function loadAppNames() {
+export function useAppNames() {
   const dispatch = useAppDispatch();
 
   useEffect(() => {

public/app/overrides/components/AppSelector/Label.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export function Label() {
   return <>Profile Type:&nbsp;</>;
 }