From c4065fb0f39d003a8f799d21cbd1741898854447 Mon Sep 17 00:00:00 2001 From: Sriram <153843+yesoreyeram@users.noreply.github.com> Date: Wed, 13 Mar 2024 15:20:53 +0000 Subject: [PATCH] config updates (#1800) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * cleanup * update create plugin config and query help fix * query types file * Update docker-compose.yml Co-authored-by: Zoltán Bedi * addressed review comments --------- Co-authored-by: Zoltán Bedi --- .config/.cprc.json | 3 + .config/.eslintrc | 14 +- .config/.prettierrc.js | 18 +- .config/Dockerfile | 2 +- .config/README.md | 6 +- .config/webpack/webpack.config.ts | 36 +- docker-compose.yml | 11 +- package.json | 36 +- .../components/AnnotationQueryEditor.tsx | 2 +- src/datasource/components/ConfigEditor.tsx | 2 +- .../FunctionEditor/AddZabbixFunction.tsx | 2 +- .../FunctionEditor/FunctionEditor.tsx | 2 +- .../FunctionEditor/FunctionEditorControls.tsx | 2 +- .../FunctionEditor/ZabbixFunctionEditor.tsx | 2 +- .../components/FunctionEditor/helpers.ts | 2 +- src/datasource/components/QueryEditor.tsx | 7 +- .../QueryEditor/ItemIdQueryEditor.tsx | 2 +- .../QueryEditor/MetricsQueryEditor.tsx | 3 +- .../QueryEditor/ProblemsQueryEditor.tsx | 2 +- .../QueryEditor/QueryFunctionsEditor.tsx | 2 +- .../QueryEditor/QueryOptionsEditor.tsx | 2 +- .../QueryEditor/ServicesQueryEditor.tsx | 2 +- .../QueryEditor/TextMetricsQueryEditor.tsx | 2 +- .../QueryEditor/TriggersQueryEditor.tsx | 3 +- .../QueryEditor/UserMacrosQueryEditor.tsx | 2 +- src/datasource/datasource.ts | 4 +- src/datasource/metricFunctions.ts | 2 +- src/datasource/migrations.ts | 2 +- src/datasource/plugin.json | 4 +- src/datasource/problemsHandler.ts | 3 +- src/datasource/query_help.md | 27 +- src/datasource/responseHandler.ts | 3 +- src/datasource/tracking.ts | 2 +- src/datasource/types.ts | 142 +---- src/datasource/types/config.ts | 28 + src/datasource/types/query.ts | 110 ++++ .../zabbix_api/zabbixAPIConnector.ts | 3 +- src/datasource/zabbix/zabbix.ts | 3 +- src/panel-triggers/ProblemsPanel.tsx | 3 +- .../components/ResetColumnsEditor.tsx | 3 +- src/panel-triggers/migrations.ts | 2 +- src/panel-triggers/plugin.json | 5 +- src/panel-triggers/utils.ts | 3 +- yarn.lock | 592 +++++++++++------- 44 files changed, 659 insertions(+), 449 deletions(-) create mode 100644 .config/.cprc.json create mode 100644 src/datasource/types/config.ts create mode 100644 src/datasource/types/query.ts diff --git a/.config/.cprc.json b/.config/.cprc.json new file mode 100644 index 0000000..99f06ad --- /dev/null +++ b/.config/.cprc.json @@ -0,0 +1,3 @@ +{ + "version": "4.2.1" +} diff --git a/.config/.eslintrc b/.config/.eslintrc index adb4846..1486ed2 100644 --- a/.config/.eslintrc +++ b/.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" + } + } + ] } diff --git a/.config/.prettierrc.js b/.config/.prettierrc.js index 66a76ec..bf506f5 100644 --- a/.config/.prettierrc.js +++ b/.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 -}; \ No newline at end of file + endOfLine: 'auto', + printWidth: 120, + trailingComma: 'es5', + semi: true, + jsxSingleQuote: false, + singleQuote: true, + useTabs: false, + tabWidth: 2, +}; diff --git a/.config/Dockerfile b/.config/Dockerfile index 40537a5..e0f1b2d 100644 --- a/.config/Dockerfile +++ b/.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>/|g' /usr/share/grafana/public/views/index.html diff --git a/.config/README.md b/.config/README.md index 0ae2b0c..a23b6d1 100644 --- a/.config/README.md +++ b/.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. --- diff --git a/.config/webpack/webpack.config.ts b/.config/webpack/webpack.config.ts index 6bb8309..59e1963 100644 --- a/.config/webpack/webpack.config.ts +++ b/.config/webpack/webpack.config.ts @@ -82,7 +82,7 @@ const config = async (env): Promise => { 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 => { // 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 => { 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 => { { 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 => { ], }, ]), - 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: { diff --git a/docker-compose.yml b/docker-compose.yml index c133c46..90d49c0 100644 --- a/docker-compose.yml +++ b/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 diff --git a/package.json b/package.json index ca3d45c..07ec496 100644 --- a/package.json +++ b/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,29 +29,34 @@ "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", @@ -59,42 +64,43 @@ "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" diff --git a/src/datasource/components/AnnotationQueryEditor.tsx b/src/datasource/components/AnnotationQueryEditor.tsx index dbc03e7..7f923cb 100644 --- a/src/datasource/components/AnnotationQueryEditor.tsx +++ b/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'; diff --git a/src/datasource/components/ConfigEditor.tsx b/src/datasource/components/ConfigEditor.tsx index afa8e37..a18870b 100644 --- a/src/datasource/components/ConfigEditor.tsx +++ b/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, diff --git a/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx b/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx index d39ef03..135a759 100644 --- a/src/datasource/components/FunctionEditor/AddZabbixFunction.tsx +++ b/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'; diff --git a/src/datasource/components/FunctionEditor/FunctionEditor.tsx b/src/datasource/components/FunctionEditor/FunctionEditor.tsx index fa66b1b..762809e 100644 --- a/src/datasource/components/FunctionEditor/FunctionEditor.tsx +++ b/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; diff --git a/src/datasource/components/FunctionEditor/FunctionEditorControls.tsx b/src/datasource/components/FunctionEditor/FunctionEditorControls.tsx index 1c0e8dd..4f348bc 100644 --- a/src/datasource/components/FunctionEditor/FunctionEditorControls.tsx +++ b/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/'; diff --git a/src/datasource/components/FunctionEditor/ZabbixFunctionEditor.tsx b/src/datasource/components/FunctionEditor/ZabbixFunctionEditor.tsx index d3fcebc..59f07c5 100644 --- a/src/datasource/components/FunctionEditor/ZabbixFunctionEditor.tsx +++ b/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; diff --git a/src/datasource/components/FunctionEditor/helpers.ts b/src/datasource/components/FunctionEditor/helpers.ts index fb4457b..b933af4 100644 --- a/src/datasource/components/FunctionEditor/helpers.ts +++ b/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; diff --git a/src/datasource/components/QueryEditor.tsx b/src/datasource/components/QueryEditor.tsx index f2d69e4..fbc89b0 100644 --- a/src/datasource/components/QueryEditor.tsx +++ b/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> = [ +const zabbixQueryTypeOptions: Array> = [ { value: c.MODE_METRICS, label: 'Metrics', @@ -200,7 +201,7 @@ export const QueryEditor = ({ query, datasource, onChange, onRunQuery }: ZabbixQ <> -