Dependency Update

.config/jest-setup.js → .config/jest-setup.ts

@@ -20,5 +20,3 @@ Object.defineProperty(global, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
-
-HTMLCanvasElement.prototype.getContext = () => {};

.config/jest.config.js

@@ -27,5 +27,8 @@ module.exports = {
       },
     ],
   },
-  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  transformIgnorePatterns: [
+    "!node_modules/d3-interpolate"
+  ]
 };

.config/tsconfig.json

@@ -10,6 +10,6 @@
     "typeRoots": ["../node_modules/@types"],
     "resolveJsonModule": true
   },
-  "include": ["../src", "./types"],
+  "include": ["../src", "./types", "./jest-setup.ts"],
   "extends": "@grafana/tsconfig"
 }

.config/webpack/webpack.config.ts

@@ -58,7 +58,7 @@ const config = (env): Configuration => ({
     ({ request }, callback) => {
       const prefix = 'grafana/';
       const hasPrefix = (request) => request.indexOf(prefix) === 0;
-      const stripPrefix = (request) => request.substr(prefix.length);
+      const stripPrefix = (request) => request.substring(prefix.length);
 
       if (hasPrefix(request)) {
         return callback(null, stripPrefix(request));
@@ -79,7 +79,7 @@ const config = (env): Configuration => ({
           loader: 'swc-loader',
           options: {
             jsc: {
-              baseUrl: './src',
+              baseUrl: '/src',
               target: 'es2015',
               loose: false,
               parser: {
@@ -118,7 +118,7 @@ const config = (env): Configuration => ({
   },
 
   output: {
-    clean: true,
+    clean: false,
     filename: '[name].js',
     libraryTarget: 'amd',
     path: path.resolve(process.cwd(), DIST_DIR),

.eslintrc

@@ -12,6 +12,7 @@
     "object-curly-spacing": [2, "always"],
     "lodash/import-scope": [2, "member"],
     "jest/no-focused-tests": "error",
+    "@typescript-eslint/array-type": 0,
     "import/order": [
       "error",
       {

.github/workflows/pr-checks-typescript.yml

@@ -37,10 +37,10 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v1
         with:
-          node-version: 16.14.2
+          node-version: 18.13.0
 
       - name: Install all dependencies
-        run: npm install
+        run: yarn install
 
       - name: Run Jest Tests
         run: npm run test
@@ -56,10 +56,10 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v1
         with:
-          node-version: 16.14.2
+          node-version: 18.13.0
 
       - name: Install all dependencies
-        run: npm install
+        run: yarn install
 
       - name: Build
         shell: 'script -q -e -c "bash {0}"'

deployment/docker/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:16.20.0-alpine
+FROM node:18-alpine3.17
 
 RUN apk update && apk upgrade
 RUN apk add --update python3 make g++ # for Mac M1 processors

docker-compose.yaml

@@ -22,7 +22,7 @@ services:
       "
 
   frontend_builder:
-    image: node:16.18.1
+    image: node:18.13.0
     working_dir: /victoriametrics-datasource
     volumes:
       - ./:/victoriametrics-datasource

package.json

@@ -14,112 +14,114 @@
     "lint:fix": "yarn lint --fix",
     "server": "docker-compose up --build",
     "tar": "tar -czf $npm_package_name-v$npm_package_version.tar.gz $npm_package_name && sha1sum ./$npm_package_name-v$npm_package_version.tar.gz >$npm_package_name-v$npm_package_version.tar.gz.sha1",
-    "zip": "zip $npm_package_name-v$npm_package_version.zip $npm_package_name -r && sha1sum ./$npm_package_name-v$npm_package_version.zip >$npm_package_name-v$npm_package_version.zip.sha1"
+    "zip": "zip $npm_package_name-v$npm_package_version.zip $npm_package_name -r && sha1sum ./$npm_package_name-v$npm_package_version.zip >$npm_package_name-v$npm_package_version.zip.sha1",
+    "preinstall": "cd packages/lezer-metricsql && yarn install"
   },
   "author": "VictoriaMetrics",
   "license": "AGPL-3.0-only",
   "devDependencies": {
-    "@babel/core": "7.19.0",
+    "@babel/core": "7.23.0",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "7.18.9",
-    "@babel/plugin-proposal-optional-chaining": "7.18.9",
+    "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-react-constant-elements": "7.18.9",
-    "@babel/plugin-transform-typescript": "7.19.0",
-    "@babel/preset-env": "7.19.0",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@emotion/eslint-plugin": "11.10.0",
-    "@grafana/e2e-selectors": "9.1.2",
-    "@grafana/eslint-config": "5.0.0",
+    "@babel/plugin-transform-react-constant-elements": "7.22.5",
+    "@babel/plugin-transform-typescript": "7.22.15",
+    "@babel/preset-env": "7.22.20",
+    "@babel/preset-react": "7.22.15",
+    "@babel/preset-typescript": "7.23.0",
+    "@emotion/eslint-plugin": "11.11.0",
+    "@grafana/e2e-selectors": "10.1.4",
+    "@grafana/eslint-config": "6.0.1",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/jquery": "3.5.14",
-    "@types/lodash": "4.14.191",
-    "@types/node": "16.11.45",
-    "@types/pluralize": "^0.0.29",
-    "@types/prismjs": "1.26.0",
-    "@types/react": "17.0.42",
-    "@types/react-beautiful-dnd": "13.1.2",
-    "@types/react-highlight-words": "0.16.4",
-    "@types/react-window": "1.8.5",
+    "@types/jquery": "3.5.20",
+    "@types/lodash": "4.14.199",
+    "@types/node": "20.8.2",
+    "@types/pluralize": "^0.0.31",
+    "@types/prismjs": "1.26.1",
+    "@types/react": "18.2.24",
+    "@types/react-beautiful-dnd": "13.1.5",
+    "@types/react-highlight-words": "0.16.5",
+    "@types/react-window": "1.8.6",
     "@types/slate": "0.47.9",
     "@types/slate-react": "0.22.9",
-    "@typescript-eslint/eslint-plugin": "5.36.2",
+    "@typescript-eslint/eslint-plugin": "6.7.4",
     "babel-plugin-macros": "3.1.0",
-    "copy-webpack-plugin": "9.0.1",
-    "eslint": "8.22.0",
+    "copy-webpack-plugin": "11.0.0",
+    "eslint": "8.50.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "27.1.6",
+    "eslint-plugin-jest": "27.4.2",
     "eslint-plugin-lodash": "7.4.0",
-    "eslint-webpack-plugin": "3.2.0",
-    "fork-ts-checker-webpack-plugin": "7.2.13",
+    "eslint-webpack-plugin": "4.0.1",
+    "fork-ts-checker-webpack-plugin": "8.0.0",
     "jest": "28.1.3",
     "jest-environment-jsdom": "28.1.3",
     "node-notifier": "10.0.1",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "typescript": "4.8.2",
-    "webpack": "5.74.0",
+    "typescript": "^5.0.4",
+    "webpack": "5.88.2",
     "webpack-cli": "^5.0.1",
     "webpack-livereload-plugin": "^3.0.2",
-    "webpack-merge": "5.8.0"
+    "webpack-merge": "5.9.0"
   },
   "resolutions": {
-    "rxjs": "7.3.0"
+    "rxjs": "7.8.0"
   },
   "engines": {
     "node": ">=14"
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
     "@emotion/eslint-plugin": "^11.10.0",
-    "@grafana/aws-sdk": "^0.0.37",
-    "@grafana/data": "9.1.2",
-    "@grafana/runtime": "9.1.5",
-    "@grafana/ui": "9.1.5",
-    "@lezer/common": "1.0.0",
+    "@grafana/aws-sdk": "^0.1.3",
+    "@grafana/data": "10.1.4",
+    "@grafana/runtime": "10.1.4",
+    "@grafana/ui": "10.1.4",
+    "@lezer/common": "1.1.0",
     "@lezer/highlight": "^1.1.3",
     "@lezer/lr": "^1.2.5",
     "@reduxjs/toolkit": "^1.8.5",
-    "@swc/core": "^1.3.22",
+    "@swc/core": "^1.3.91",
     "@swc/jest": "^0.2.24",
     "@testing-library/dom": "^9.0.1",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/react": "14.0.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "@types/copy-webpack-plugin": "^10.1.0",
     "@types/lodash": "^4.14.191",
     "@types/slate-plain-serializer": "^0.7.2",
     "@types/webpack-livereload-plugin": "^2.3.3",
     "babel-plugin-macros": "^3.1.0",
+    "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.2",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.0.4",
-    "eslint-plugin-jsdoc": "^39.6.4",
+    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "history": "^5.3.0",
-    "immutable": "4.1.0",
+    "immutable": "5.0.0-beta.4",
     "jquery": "^3.6.4",
     "lezer-metricsql": "file:packages/lezer-metricsql",
     "lodash": "4.17.21",
-    "lru-cache": "7.14.0",
+    "lru-cache": "10.0.1",
     "monaco-editor": "0.34.0",
     "monaco-promql": "^1.7.4",
     "pluralize": "^8.0.0",
     "prismjs": "1.29.0",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "13.1.0",
-    "react-dom": "17.0.2",
-    "react-highlight-words": "0.18.0",
+    "react": "^18.2.0",
+    "react-beautiful-dnd": "13.1.1",
+    "react-dom": "18.2.0",
+    "react-highlight-words": "0.20.0",
     "react-popper-tooltip": "4.4.2",
-    "react-redux": "7.2.6",
-    "react-select": "5.4.0",
+    "react-redux": "8.1.3",
+    "react-select": "5.7.7",
     "react-use": "^17.3.2",
-    "react-window": "1.8.7",
-    "rxjs": "7.5.6",
+    "react-window": "1.8.9",
+    "rxjs": "7.8.0",
     "slate": "0.47.9",
     "slate-plain-serializer": "^0.7.13",
     "slate-react": "0.22.10",

src/components/PromQueryField.test.tsx

@@ -1,4 +1,4 @@
-import { getByTestId, render, screen } from '@testing-library/react';
+import { getByTestId, render, screen, waitFor } from '@testing-library/react';
 // @ts-ignore
 import userEvent from '@testing-library/user-event';
 import React from 'react';
@@ -48,31 +48,40 @@ describe('PromQueryField', () => {
     window.getSelection = () => {};
   });
 
-  it('renders metrics chooser regularly if lookups are not disabled in the datasource settings', () => {
+  it('renders metrics chooser regularly if lookups are not disabled in the datasource settings', async () => {
     const queryField = render(<PromQueryField {...defaultProps} />);
 
+    // wait for component to render
+    await screen.findByRole('button');
+
     expect(queryField.getAllByRole('button')).toHaveLength(1);
   });
 
-  it('renders a disabled metrics chooser if lookups are disabled in datasource settings', () => {
+  it('renders a disabled metrics chooser if lookups are disabled in datasource settings', async () => {
     const props = defaultProps;
     props.datasource.lookupsDisabled = true;
     const queryField = render(<PromQueryField {...props} />);
 
+    // wait for component to render
+    await screen.findByRole('button');
+
     const bcButton = queryField.getByRole('button');
     expect(bcButton).toBeDisabled();
   });
 
-  it('renders an initial hint if no data and initial hint provided', () => {
+  it('renders an initial hint if no data and initial hint provided', async () => {
     const props = defaultProps;
     props.datasource.lookupsDisabled = true;
     props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }];
     render(<PromQueryField {...props} />);
 
+    // wait for component to render
+    await screen.findByRole('button');
+
     expect(screen.getByText('Initial hint')).toBeInTheDocument();
   });
 
-  it('renders query hint if data, query hint and initial hint provided', () => {
+  it('renders query hint if data, query hint and initial hint provided', async () => {
     const props = defaultProps;
     props.datasource.lookupsDisabled = true;
     props.datasource.getInitHints = () => [{ label: 'Initial hint', type: 'INFO' }];
@@ -89,6 +98,9 @@ describe('PromQueryField', () => {
       />
     );
 
+    // wait for component to render
+    await screen.findByRole('button');
+
     expect(screen.getByText('Query hint')).toBeInTheDocument();
     expect(screen.queryByText('Initial hint')).not.toBeInTheDocument();
   });
@@ -113,6 +125,9 @@ describe('PromQueryField', () => {
       />
     );
 
+    // wait for component to render
+    await screen.findByRole('button');
+
     const changedMetrics = ['baz', 'moo'];
     queryField.rerender(
       <PromQueryField
@@ -126,29 +141,29 @@ describe('PromQueryField', () => {
 
     // If we check the label browser right away it should be in loading state
     let labelBrowser = screen.getByRole('button');
-    expect(labelBrowser.textContent).toContain('Loading');
+    expect(labelBrowser).toHaveTextContent('Loading');
+
+    // wait for component to rerender
+    labelBrowser = await screen.findByRole('button');
+    await waitFor(() => {
+      expect(labelBrowser).toHaveTextContent('Metrics browser');
+    });
   });
 
-  it('should not run query onBlur in explore', async () => {
+  it('should not run query onBlur', async () => {
     const onRunQuery = jest.fn();
     const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Explore} onRunQuery={onRunQuery} />);
 
-    const input = getByTestId(container, 'dummy-code-input');
-    expect(input).toBeInTheDocument();
-    await userEvent.type(input, 'metric');
-    input.blur();
-    expect(onRunQuery).not.toHaveBeenCalled();
-  });
-
-  it('should run query onBlur in dashboard', async () => {
-    const onRunQuery = jest.fn();
-    const { container } = render(<PromQueryField {...defaultProps} app={CoreApp.Dashboard} onRunQuery={onRunQuery} />);
+    // wait for component to rerender
+    await screen.findByRole('button');
 
     const input = getByTestId(container, 'dummy-code-input');
     expect(input).toBeInTheDocument();
     await userEvent.type(input, 'metric');
-    input.blur();
-    expect(onRunQuery).toHaveBeenCalled();
+
+    // blur element
+    await userEvent.click(document.body);
+    expect(onRunQuery).not.toHaveBeenCalled();
   });
 });
 

src/components/PromQueryField.tsx

@@ -255,6 +255,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
                   className="gf-form-label query-keyword pointer"
                   onClick={this.onClickChooserButton}
                   disabled={buttonDisabled}
+                  type="button"
                 >
                   {chooserText}
                   <Icon name={labelBrowserVisible ? 'angle-down' : 'angle-right'} />

src/components/QueryEditor/EditorFieldGroup.tsx

@@ -17,7 +17,9 @@ import React from 'react';
 
 import { Stack } from './Stack';
 
-interface EditorFieldGroupProps {}
+interface EditorFieldGroupProps {
+  children: React.ReactNode;
+}
 
 export const EditorFieldGroup: React.FC<EditorFieldGroupProps> = ({ children }) => {
   return <Stack gap={1}>{children}</Stack>;