config updates (#1800)

* cleanup

* update create plugin config and query help fix

* query types file

* Update docker-compose.yml

Co-authored-by: Zoltán Bedi <[email protected]>

* addressed review comments

---------

Co-authored-by: Zoltán Bedi <[email protected]>

.config/.cprc.json

@@ -0,0 +1,3 @@
+{
+  "version": "4.2.1"
+}

.config/.eslintrc

@@ -9,5 +9,17 @@
   "root": true,
   "rules": {
     "react/prop-types": "off"
-  }
+  },
+  "overrides": [
+    {
+      "plugins": ["deprecation"],
+      "files": ["src/**/*.{ts,tsx}"],
+      "rules": {
+        "deprecation/deprecation": "warn"
+      },
+      "parserOptions": {
+        "project": "./tsconfig.json"
+      }
+    }
+  ]
 }

.config/.prettierrc.js

@@ -5,12 +5,12 @@
  */
 
 module.exports = {
-  "endOfLine": "auto",
-  "printWidth": 120,
-  "trailingComma": "es5",
-  "semi": true,
-  "jsxSingleQuote": false,
-  "singleQuote": true,
-  "useTabs": false,
-  "tabWidth": 2
-};
+  endOfLine: 'auto',
+  printWidth: 120,
+  trailingComma: 'es5',
+  semi: true,
+  jsxSingleQuote: false,
+  singleQuote: true,
+  useTabs: false,
+  tabWidth: 2,
+};

.config/Dockerfile

@@ -13,4 +13,4 @@ ENV GF_DEFAULT_APP_MODE "development"
 
 # Inject livereload script into grafana index.html
 USER root
-RUN sed -i 's/<\/body><\/html>/<script src=\"http:\/\/localhost:35729\/livereload.js\"><\/script><\/body><\/html>/g' /usr/share/grafana/public/views/index.html
+RUN sed -i 's|</body>|<script src="http://localhost:35729/livereload.js"></script></body>|g' /usr/share/grafana/public/views/index.html

.config/README.md

@@ -56,7 +56,7 @@ set up the Jest DOM for the testing library and to apply some polyfills. ([link
 
 #### ESM errors with Jest
 
-A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be this can be extended in the following way:
+A common issue with the current jest config involves importing an npm package that only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this, we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be, this can be extended in the following way:
 
 ```javascript
 process.env.TZ = 'UTC';
@@ -142,7 +142,7 @@ We need to update the `scripts` in the `package.json` to use the extended Webpac
 
 ### Configure grafana image to use when running docker
 
-By default `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behaviour simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`.
+By default, `grafana-enterprise` will be used as the docker image for all docker related commands. If you want to override this behavior, simply alter the `docker-compose.yaml` by adding the following build arg `grafana_image`.
 
 **Example:**
 
@@ -159,6 +159,6 @@ services:
         grafana_image: ${GRAFANA_IMAGE:-grafana}
 ```
 
-In this example we are assigning the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will give you the possibility to set the value while running the docker-compose commands which might be convinent in some scenarios.
+In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker-compose commands, which might be convenient in some scenarios.
 
 ---

.config/webpack/webpack.config.ts

@@ -82,7 +82,7 @@ const config = async (env): Promise<Configuration> => {
             loader: 'swc-loader',
             options: {
               jsc: {
-                baseUrl: './src',
+                baseUrl: path.resolve(__dirname, 'src'),
                 target: 'es2015',
                 loose: false,
                 parser: {
@@ -110,7 +110,7 @@ const config = async (env): Promise<Configuration> => {
             // Keep publicPath relative for host.com/grafana/ deployments
             publicPath: `public/plugins/${pluginJson.id}/img/`,
             outputPath: 'img/',
-            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+            filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
         {
@@ -135,7 +135,8 @@ const config = async (env): Promise<Configuration> => {
         type: 'amd',
       },
       path: path.resolve(process.cwd(), DIST_DIR),
-      publicPath: '/',
+      publicPath: `public/plugins/${pluginJson.id}/`,
+      uniqueName: pluginJson.id,
     },
 
     plugins: [
@@ -154,6 +155,7 @@ const config = async (env): Promise<Configuration> => {
           { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
           { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
           { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
+          { from: '**/query_help.md', to: '.', noErrorOnMissing: true }, // Optional
         ],
       }),
       // Replace certain template-variables in the README and plugin.json
@@ -177,18 +179,22 @@ const config = async (env): Promise<Configuration> => {
           ],
         },
       ]),
-      new ForkTsCheckerWebpackPlugin({
-        async: Boolean(env.development),
-        issue: {
-          include: [{ file: '**/*.{ts,tsx}' }],
-        },
-        typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
-      }),
-      new ESLintPlugin({
-        extensions: ['.ts', '.tsx'],
-        lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
-      }),
-      ...(env.development ? [new LiveReloadPlugin()] : []),
+      ...(env.development
+        ? [
+            new LiveReloadPlugin(),
+            new ForkTsCheckerWebpackPlugin({
+              async: Boolean(env.development),
+              issue: {
+                include: [{ file: '**/*.{ts,tsx}' }],
+              },
+              typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
+            }),
+            new ESLintPlugin({
+              extensions: ['.ts', '.tsx'],
+              lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
+            }),
+          ]
+        : []),
     ],
 
     resolve: {

docker-compose.yml

@@ -3,12 +3,15 @@ version: '3.0'
 services:
   grafana:
     container_name: 'grafana-zabbix'
-    build:
-      context: ./.config
-      args:
-        grafana_version: ${GRAFANA_VERSION:-10.1.5}
+    image: grafana/grafana-enterprise:${GF_VERSION:-main}
     ports:
       - 3000:3000/tcp
     volumes:
       - ./dist:/var/lib/grafana/plugins/grafana-zabbix
       - ./provisioning:/etc/grafana/provisioning
+    environment:
+      - TERM=linux
+      - GF_DEFAULT_APP_MODE=development
+      - GF_AUTH_ANONYMOUS_ENABLED=true
+      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin
+      - GF_ENTERPRISE_LICENSE_TEXT=$GF_ENTERPRISE_LICENSE_TEXT

package.json

@@ -11,7 +11,7 @@
     "url": "git+https://github.com/grafana/grafana-zabbix.git"
   },
   "license": "Apache-2.0",
-  "author": "Alexander Zobnin",
+  "author": "Grafana Labs",
   "scripts": {
     "build": "webpack -c ./webpack.config.ts --env production",
     "dev": "webpack -w -c ./webpack.config.ts --env development",
@@ -29,72 +29,78 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
+    "@emotion/css": "11.10.6",
     "@grafana/data": "10.1.2",
     "@grafana/experimental": "^1.7.4",
     "@grafana/runtime": "10.1.2",
+    "@grafana/schema": "10.1.2",
     "@grafana/ui": "10.1.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
+    "react-router-dom": "^5.2.0",
+    "react": "18.2.0",
+    "rxjs": "7.8.1",
     "tslib": "2.5.3"
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@grafana/eslint-config": "^6.0.0",
     "@grafana/tsconfig": "^1.2.0-rc1",
-    "@swc/core": "1.3.75",
+    "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/jest-dom": "6.1.4",
+    "@testing-library/react": "14.0.0",
     "@types/glob": "^8.0.0",
     "@types/grafana": "github:CorpGlory/types-grafana",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^18.15.11",
+    "@types/node": "^20.8.7",
+    "@types/react-router-dom": "^5.2.0",
+    "@types/testing-library__jest-dom": "5.14.8",
     "@typescript-eslint/eslint-plugin": "5.59.5",
     "@typescript-eslint/parser": "5.59.5",
     "autoprefixer": "10.4.7",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^11.0.0",
     "cspell": "6.13.3",
     "css-loader": "^6.7.3",
-    "eslint": "8.42.0",
+    "eslint-plugin-deprecation": "^2.0.0",
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-webpack-plugin": "^4.0.1",
+    "eslint": "8.42.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.2.7",
     "html-loader": "0.5.5",
     "identity-obj-proxy": "3.0.0",
-    "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "jest": "^29.5.0",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.6.1",
     "moment": "2.29.4",
-    "postcss": "8.4.31",
     "postcss-loader": "7.0.1",
     "postcss-reporter": "7.0.5",
     "postcss-scss": "4.0.4",
+    "postcss": "8.4.31",
     "prettier": "^3.0.3",
     "prop-types": "15.7.2",
     "react-table-6": "6.11.0",
     "react-use": "17.4.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass": "1.63.2",
     "sass-loader": "13.3.1",
+    "sass": "1.63.2",
     "semver": "7.5.4",
     "style-loader": "3.3.3",
     "swc-loader": "^0.2.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.2.0",
     "typescript": "4.8.4",
-    "webpack": "^5.86.0",
     "webpack-cli": "^5.1.4",
     "webpack-livereload-plugin": "^3.0.2",
-    "webpack-remove-empty-scripts": "^1.0.1"
+    "webpack-remove-empty-scripts": "^1.0.1",
+    "webpack": "^5.86.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1"

src/datasource/components/AnnotationQueryEditor.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, FormEvent } from 'react';
 import { useAsyncFn } from 'react-use';
 import { AnnotationQuery, SelectableValue } from '@grafana/data';
 import { InlineField, InlineSwitch, Input, Select } from '@grafana/ui';
-import { ZabbixMetricsQuery } from '../types';
+import { ZabbixMetricsQuery } from '../types/query';
 import { ZabbixQueryEditorProps } from './QueryEditor';
 import { QueryEditorRow } from './QueryEditor/QueryEditorRow';
 import { MetricPicker } from '../../components';

src/datasource/components/ConfigEditor.tsx

@@ -13,7 +13,7 @@ import {
   Tooltip,
   useStyles2,
 } from '@grafana/ui';
-import { ZabbixAuthType, ZabbixDSOptions, ZabbixSecureJSONData } from '../types';
+import { ZabbixAuthType, ZabbixDSOptions, ZabbixSecureJSONData } from '../types/config';
 import { gte } from 'semver';
 import {
   Auth,

src/datasource/components/FunctionEditor/AddZabbixFunction.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { useMemo, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, ClickOutsideWrapper, Icon, Input, Menu, useStyles2, useTheme2 } from '@grafana/ui';
-import { FuncDef } from '../../types';
+import { FuncDef } from '../../types/query';
 import { getCategories } from '../../metricFunctions';
 
 // import { mapFuncDefsToSelectables } from './helpers';

src/datasource/components/FunctionEditor/FunctionEditor.tsx

@@ -4,7 +4,7 @@ import { FunctionEditorControlsProps, FunctionEditorControls } from './FunctionE
 
 import { useStyles2, Tooltip } from '@grafana/ui';
 import { GrafanaTheme2 } from '@grafana/data';
-import { MetricFunc } from '../../types';
+import { MetricFunc } from '../../types/query';
 
 interface FunctionEditorProps extends FunctionEditorControlsProps {
   func: MetricFunc;

src/datasource/components/FunctionEditor/FunctionEditorControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@grafana/ui';
-import { MetricFunc } from '../../types';
+import { MetricFunc } from '../../types/query';
 
 const DOCS_FUNC_REF_URL = 'https://grafana.com/docs/plugins/alexanderzobnin-zabbix-app/latest/reference/functions/';
 

src/datasource/components/FunctionEditor/ZabbixFunctionEditor.tsx

@@ -7,7 +7,7 @@ import { HorizontalGroup, InlineLabel, useStyles2 } from '@grafana/ui';
 import { FunctionEditor } from './FunctionEditor';
 import { EditableParam, FunctionParamEditor } from './FunctionParamEditor';
 import { mapFuncInstanceToParams } from './helpers';
-import { MetricFunc } from '../../types';
+import { MetricFunc } from '../../types/query';
 
 export type FunctionEditorProps = {
   func: MetricFunc;

src/datasource/components/FunctionEditor/helpers.ts

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { MetricFunc } from '../../types';
+import { MetricFunc } from '../../types/query';
 
 export type ParamDef = {
   name: string;

src/datasource/components/QueryEditor.tsx

@@ -4,7 +4,8 @@ import { InlineField, Select } from '@grafana/ui';
 import * as c from '../constants';
 import { migrate, DS_QUERY_SCHEMA } from '../migrations';
 import { ZabbixDatasource } from '../datasource';
-import { ShowProblemTypes, ZabbixDSOptions, ZabbixMetricsQuery, ZabbixQueryOptions, ZabbixTagEvalType } from '../types';
+import { ShowProblemTypes, ZabbixMetricsQuery, ZabbixQueryOptions, ZabbixTagEvalType, QueryType } from '../types/query';
+import { ZabbixDSOptions } from '../types/config';
 import { MetricsQueryEditor } from './QueryEditor/MetricsQueryEditor';
 import { QueryFunctionsEditor } from './QueryEditor/QueryFunctionsEditor';
 import { QueryOptionsEditor } from './QueryEditor/QueryOptionsEditor';
@@ -16,7 +17,7 @@ import { TriggersQueryEditor } from './QueryEditor/TriggersQueryEditor';
 import { UserMacrosQueryEditor } from './QueryEditor/UserMacrosQueryEditor';
 import { QueryEditorRow } from './QueryEditor/QueryEditorRow';
 
-const zabbixQueryTypeOptions: Array<SelectableValue<string>> = [
+const zabbixQueryTypeOptions: Array<SelectableValue<QueryType>> = [
   {
     value: c.MODE_METRICS,
     label: 'Metrics',
@@ -200,7 +201,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ
     <>
       <QueryEditorRow>
         <InlineField label="Query type" labelWidth={12}>
-          <Select
+          <Select<QueryType>
             isSearchable={false}
             width={24}
             value={queryType}

src/datasource/components/QueryEditor/ItemIdQueryEditor.tsx

@@ -1,6 +1,6 @@
 import React, { FormEvent } from 'react';
 import { InlineField, Input } from '@grafana/ui';
-import { ZabbixMetricsQuery } from '../../types';
+import { ZabbixMetricsQuery } from '../../types/query';
 import { QueryEditorRow } from './QueryEditorRow';
 
 export interface Props {

src/datasource/components/QueryEditor/MetricsQueryEditor.tsx

@@ -8,7 +8,8 @@ import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
 import { ZabbixDatasource } from '../../datasource';
-import { ZabbixMetricsQuery, ZBXItem, ZBXItemTag } from '../../types';
+import { ZabbixMetricsQuery } from '../../types/query';
+import { ZBXItem, ZBXItemTag } from '../../types';
 import { itemTagToString } from '../../utils';
 
 export interface Props {

src/datasource/components/QueryEditor/ProblemsQueryEditor.tsx

@@ -8,7 +8,7 @@ import { QueryEditorRow } from './QueryEditorRow';
 import { MetricPicker } from '../../../components';
 import { getVariableOptions } from './utils';
 import { ZabbixDatasource } from '../../datasource';
-import { ZabbixMetricsQuery, ZabbixTagEvalType } from '../../types';
+import { ZabbixMetricsQuery, ZabbixTagEvalType } from '../../types/query';
 
 const showProblemsOptions: Array<SelectableValue<string>> = [
   { label: 'Problems', value: 'problems' },

src/datasource/components/QueryEditor/QueryFunctionsEditor.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { swap } from '../../utils';
 import { createFuncInstance } from '../../metricFunctions';
-import { FuncDef, MetricFunc, ZabbixMetricsQuery } from '../../types';
+import { FuncDef, MetricFunc, ZabbixMetricsQuery } from '../../types/query';
 import { QueryEditorRow } from './QueryEditorRow';
 import { InlineFormLabel } from '@grafana/ui';
 import { ZabbixFunctionEditor } from '../FunctionEditor/ZabbixFunctionEditor';