diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index e2dbf2de..f61d3a85 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -23,16 +23,26 @@ repos:
- flake8-tidy-imports
- repo: https://github.com/pre-commit/mirrors-eslint
- rev: v7.21.0
+ rev: v8.25.0
hooks:
- id: eslint
- entry: bash -c 'cd grafana-plugin && eslint --fix ${@/grafana-plugin\//}' --
+ entry: bash -c 'cd grafana-plugin && eslint --max-warnings=0 --fix ${@/grafana-plugin\//}' --
types: [file]
files: ^grafana-plugin/src/.*\.(js|jsx|ts|tsx)$
additional_dependencies:
- - eslint@7.21.0
+ - eslint@^8.25.0
- eslint-plugin-import@^2.25.4
- eslint-plugin-rulesdir@^0.2.1
+ - "@grafana/eslint-config@^5.0.0"
+
+ - repo: https://github.com/pre-commit/mirrors-prettier
+ rev: "v2.7.1"
+ hooks:
+ - id: prettier
+ types_or: [css, javascript, jsx, ts, tsx, json]
+ files: ^grafana-plugin/src
+ additional_dependencies:
+ - prettier@^2.7.1
- repo: https://github.com/thibaudcolas/pre-commit-stylelint
rev: v13.13.1
@@ -43,4 +53,6 @@ repos:
files: ^grafana-plugin/src/.*\.css$
additional_dependencies:
- stylelint@^13.13.1
+ - stylelint-prettier@^2.0.0
- stylelint-config-standard@^22.0.0
+ - stylelint-config-prettier@^9.0.3
diff --git a/grafana-plugin/.eslintrc.js b/grafana-plugin/.eslintrc.js
index 87f1dd00..9bfe88c0 100644
--- a/grafana-plugin/.eslintrc.js
+++ b/grafana-plugin/.eslintrc.js
@@ -9,18 +9,7 @@ module.exports = {
'^assets|^components|^containers|^declare|^icons|^img|^interceptors|^models|^network|^pages|^services|^state|^utils',
},
rules: {
- 'no-unused-vars': ['warn', { vars: 'all', args: 'after-used', ignoreRestSiblings: false }],
- 'react/prop-types': 'warn',
- 'react/display-name': 'warn',
- 'react/jsx-key': 'warn',
- 'react-hooks/exhaustive-deps': 'off',
- 'react/no-unescaped-entities': 'warn',
- 'react/jsx-no-target-blank': 'warn',
- 'react-hooks/exhaustive-deps': 'warn',
- 'no-restricted-imports': 'warn',
eqeqeq: 'warn',
- 'no-duplicate-imports': 'error',
- 'rulesdir/no-relative-import-paths': ['error', { allowSameFolder: true }],
'import/order': [
'error',
{
@@ -47,5 +36,33 @@ module.exports = {
'newlines-between': 'always',
},
],
+ 'no-unused-vars': [
+ 'warn',
+ {
+ vars: 'all',
+ args: 'after-used',
+ argsIgnorePattern: '^_',
+ destructuredArrayIgnorePattern: '^_',
+ ignoreRestSiblings: true,
+ },
+ ],
+ 'no-duplicate-imports': 'error',
+ 'no-restricted-imports': 'warn',
+ 'react/display-name': 'warn',
+ /**
+ * It appears as though the react/prop-types rule has a bug in it
+ * when your props extend an interface
+ * https://github.com/jsx-eslint/eslint-plugin-react/issues/3325
+ */
+ 'react/prop-types': 'off',
+ 'react/jsx-key': 'warn',
+ 'react/jsx-no-target-blank': 'warn',
+ 'react/no-unescaped-entities': 'off',
+ /**
+ * TODO: react-hooks/exhaustive-deps is temporarily disabled
+ * this will be turned back on, and the warnings fixed, in a forthcoming PR
+ */
+ 'react-hooks/exhaustive-deps': 'off',
+ 'rulesdir/no-relative-import-paths': ['error', { allowSameFolder: true }],
},
};
diff --git a/grafana-plugin/.stylelintrc b/grafana-plugin/.stylelintrc
index 7cda5c91..c37d4c08 100644
--- a/grafana-plugin/.stylelintrc
+++ b/grafana-plugin/.stylelintrc
@@ -1,12 +1,14 @@
{
- "extends": "stylelint-config-standard",
- "rules": {
- "block-no-empty": [true,{ "severity": "warning"}],
+ "extends": ["stylelint-config-standard", "stylelint-prettier/recommended"],
+ "plugins": ["stylelint-prettier"],
+ "rules": {
+ "block-no-empty": [true, { "severity": "warning" }],
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": ["global"]
}
- ]
+ ],
+ "prettier/prettier": true
}
}
diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json
index 021f0224..9398e5c9 100644
--- a/grafana-plugin/package.json
+++ b/grafana-plugin/package.json
@@ -3,8 +3,8 @@
"version": "1.0.0",
"description": "Grafana OnCall Plugin",
"scripts": {
- "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
- "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --quiet ./src",
+ "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx --max-warnings=0 ./src",
+ "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --max-warnings=0 --quiet ./src",
"stylelint": "stylelint ./src/**/*.css",
"stylelint:fix": "stylelint --fix ./src/**/*.css",
"build": "grafana-toolkit plugin:build",
@@ -52,6 +52,7 @@
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@grafana/data": "^9.1.1",
+ "@grafana/eslint-config": "^5.0.0",
"@grafana/runtime": "^9.1.1",
"@grafana/toolkit": "^9.1.1",
"@grafana/ui": "^9.1.1",
@@ -67,8 +68,13 @@
"@types/react-router-dom": "^5.3.3",
"@types/react-test-renderer": "^17.0.2",
"@types/throttle-debounce": "^5.0.0",
+ "@typescript-eslint/eslint-plugin": "^5.40.1",
"copy-webpack-plugin": "^11.0.0",
"dompurify": "^2.3.12",
+ "eslint": "^8.25.0",
+ "eslint-plugin-jsdoc": "^39.3.14",
+ "eslint-plugin-react": "^7.31.10",
+ "eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-rulesdir": "^0.2.1",
"jest": "^27.5.1",
"jest-environment-jsdom": "^27.5.1",
@@ -78,8 +84,11 @@
"plop": "^2.7.4",
"postcss-loader": "^7.0.1",
"react-test-renderer": "^17.0.2",
+ "stylelint-config-prettier": "^9.0.3",
+ "stylelint-prettier": "^2.0.0",
"ts-jest": "^27.1.3",
"ts-loader": "^9.3.1",
+ "typescript": "4.6.4",
"webpack-bundle-analyzer": "^4.6.1"
},
"engines": {
diff --git a/grafana-plugin/src/GrafanaPluginRootPage.tsx b/grafana-plugin/src/GrafanaPluginRootPage.tsx
index 4e3f6467..ed69df65 100644
--- a/grafana-plugin/src/GrafanaPluginRootPage.tsx
+++ b/grafana-plugin/src/GrafanaPluginRootPage.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo } from 'react';
import { AppRootProps } from '@grafana/data';
-import { Button, HorizontalGroup, LinkButton, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, LinkButton } from '@grafana/ui';
import dayjs from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
@@ -30,8 +30,6 @@ dayjs.extend(isSameOrBefore);
dayjs.extend(isSameOrAfter);
dayjs.extend(isoWeek);
-// dayjs().weekday(0);
-
import './style/vars.css';
import './style/index.css';
diff --git a/grafana-plugin/src/README.md b/grafana-plugin/src/README.md
index 66e4b915..b3c76bb1 100644
--- a/grafana-plugin/src/README.md
+++ b/grafana-plugin/src/README.md
@@ -3,6 +3,7 @@
Developer-Friendly
Alert Management
with Brilliant Slack Integration
+
- Connect monitoring systems
- Collect and analyze data
- On-call rotation
@@ -10,5 +11,6 @@ with Brilliant Slack Integration
- Never miss alerts with calls and SMS
## Documentation
+
- [On Github](http://github.com/grafana/oncall)
- [Grafana OnCall](https://grafana.com/docs/grafana-cloud/oncall/)
diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx
index e2e01b17..d7bad53f 100644
--- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx
+++ b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.helper.tsx
@@ -10,7 +10,3 @@ export function getLabelFromTemplateName(templateName: string, group: any) {
}
return arrayWithNeededValues.join(' ');
}
-
-export function includeTemplateGroup(groupName: string) {
- return true;
-}
diff --git a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
index eaecbbfd..782ea07a 100644
--- a/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
+++ b/grafana-plugin/src/components/AlertTemplates/AlertTemplatesForm.tsx
@@ -8,8 +8,7 @@ import cn from 'classnames/bind';
import { omit } from 'lodash-es';
import { templatesToRender, Template } from 'components/AlertTemplates/AlertTemplatesForm.config';
-import { getLabelFromTemplateName, includeTemplateGroup } from 'components/AlertTemplates/AlertTemplatesForm.helper';
-import Collapse from 'components/Collapse/Collapse';
+import { getLabelFromTemplateName } from 'components/AlertTemplates/AlertTemplatesForm.helper';
import Block from 'components/GBlock/Block';
import MonacoJinja2Editor from 'components/MonacoJinja2Editor/MonacoJinja2Editor';
import SourceCode from 'components/SourceCode/SourceCode';
@@ -41,7 +40,6 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
const {
onUpdateTemplates,
templates,
- errors,
alertReceiveChannelId,
alertGroupId,
demoAlertEnabled,
@@ -53,6 +51,8 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
const [tempValues, setTempValues] = useState<{
[key: string]: string | null;
}>({});
+ const [activeGroup, setActiveGroup] = useState();
+ const [activeTemplate, setActiveTemplate] = useState();
useEffect(() => {
makeRequest('/preview_template_options/', {});
@@ -80,14 +80,11 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
const handleReset = () => {
const temValuesCopy = omit(
tempValues,
- groups[activeGroup].map((group: any) => group.name)
+ groups[activeGroup].map((group) => group.name)
);
setTempValues(temValuesCopy);
};
- const [activeGroup, setActiveGroup] = useState();
- const [activeTemplate, setActiveTemplate] = useState();
-
const filteredTemplatesToRender = useMemo(() => {
return templates
? templatesToRender.filter((template) => {
@@ -97,13 +94,10 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
}, [templates]);
const groups = useMemo(() => {
- const groups: { [key: string]: any } = {};
+ const groups: { [key: string]: Template[] } = {};
filteredTemplatesToRender.forEach((templateToRender) => {
if (!groups[templateToRender.group]) {
- if (!includeTemplateGroup(templateToRender.group)) {
- return;
- }
groups[templateToRender.group] = [];
}
groups[templateToRender.group].push(templateToRender);
@@ -113,11 +107,7 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
const getGroupByTemplateName = (templateName: string) => {
Object.values(groups).find((group) => {
- const foundTemplate = group.find((obj: any) => {
- if (obj.name == templateName) {
- return obj;
- }
- });
+ const foundTemplate = group.find((obj) => obj.name === templateName);
setActiveGroup(foundTemplate?.group);
});
};
@@ -210,18 +200,18 @@ const AlertTemplatesForm = (props: AlertTemplatesFormProps) => {
suggestions
- {groups[activeGroup].map((activeTemplate: any) => (
+ {groups[activeGroup].map((activeTemplate) => (
-