update create plugin config and query help fix

grafana · Mar 11, 2024 · 6da7ded · 6da7ded
1 parent 603dad9
commit 6da7ded
Show file tree

Hide file tree

Showing 9 changed files with 485 additions and 285 deletions.
diff --git a/.config/.cprc.json b/.config/.cprc.json
@@ -0,0 +1,3 @@
+{
+  "version": "4.2.1"
+}
diff --git 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
@@ -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,
+};
diff --git 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>/<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
diff --git 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
@@ -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: {

diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
   "license": "Apache-2.0",
   "author": "Alexander Zobnin",
   "scripts": {
-    "build": "webpack -c ./webpack.config.ts --env production",
-    "dev": "webpack -w -c ./webpack.config.ts --env development",
+    "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
+    "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "e2e": "yarn exec cypress install && yarn exec grafana-e2e run",
     "e2e:update": "yarn exec cypress install && yarn exec grafana-e2e run --update-screenshots",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
@@ -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"

diff --git a/src/datasource/query_help.md b/src/datasource/query_help.md
@@ -1,35 +1,46 @@
 #### Max data points
+
 Override max data points, automatically set to graph width in pixels. Grafana-Zabbix plugin uses maxDataPoints parameter to consolidate the real number of values down to this number. If there are more real values, then by default they will be consolidated using averages. This could hide real peaks and max values in your series. Point consolidation will affect series legend values (min,max,total,current).
 
 #### Query Mode
+
 ##### Merics
+
 Data from numeric items.
 
 ##### Text
+
 Data from items with `Character`, `Text` or `Log` type.
 
 ##### IT Services
+
 Time series representation of IT Services data
+
 ###### IT service property
+
 Zabbix returns the following availability information about IT service:
+
 - Status - current status of the IT service
 - SLA - SLA for the given time interval
 - OK time - time the service was in OK state, in seconds
 - Problem time - time the service was in problem state, in seconds
 - Down time - time the service was in scheduled downtime, in seconds
 
 ##### Item ID
-Data from items with specified ID's (comma separated). 
-This mode is suitable for rendering charts in grafana by passing itemids as url params. 
+
+Data from items with specified ID's (comma separated).
+This mode is suitable for rendering charts in grafana by passing itemids as url params.
+
 1. Create multivalue template variable with type _Custom_, for example, `itemids`.
-1. Create graph with desired parameters and use `$itemids` in _Item IDs_ filed.
-1. Save dashboard.
-1. Click to graph title and select _Share_ -> _Direct link rendered image_.
-1. Use this URL for graph png image and set `var-itemids` param to desired IDs. Note, for multiple IDs you should pass multiple params, like `&var-itemids=28276&var-itemids=28277`.
+2. Create graph with desired parameters and use `$itemids` in _Item IDs_ filed.
+3. Save dashboard.
+4. Click to graph title and select _Share_ -> _Direct link rendered image_.
+5. Use this URL for graph png image and set `var-itemids` param to desired IDs. Note, for multiple IDs you should pass multiple params, like `&var-itemids=28276&var-itemids=28277`.
 
 ##### Triggers
+
 Active triggers count for selected hosts or table data like Zabbix _System status_ panel on the main dashboard.
 
-#### Documentation links:
+#### Documentation links
 
-[Grafana-Zabbix Documentation](https://grafana.github.io/grafana-zabbix)
+- [Grafana-Zabbix Documentation](https://grafana.com/docs/plugins/alexanderzobnin-zabbix-app/latest/)