upgrade Grafana dependencies to version 8.4.1

and remove Monaco editor (plan to use <CodeEditor> from @grafana/ui)

Resolves: #93

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 4.0.0 (unreleased)
 
 - **redis**: use LRU cache for series metadata
+- **chore**: upgrade Grafana dependencies to version 8.4.1
 
 
 ## 3.2.1 (2021-11-24)

jest.config.js

@@ -8,6 +8,13 @@ const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
 const defaultConfig = standard.jestConfig();
 module.exports = {
     ...defaultConfig,
+    moduleNameMapper: {
+        ...defaultConfig.moduleNameMapper,
+        // workaround for:
+        // @grafana/toolkit/src/config/react-inlinesvg.tsx:5
+        // SyntaxError: Cannot use import statement outside a module
+        'react-inlinesvg': undefined,
+    },
     transformIgnorePatterns: [
         ...defaultConfig.transformIgnorePatterns,
         // required for d3-flame-graph (uses ES6 syntax)

package.json

@@ -19,10 +19,10 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
-    "@grafana/data": "^7.5.9",
-    "@grafana/runtime": "^7.5.9",
-    "@grafana/toolkit": "^7.5.9",
-    "@grafana/ui": "^7.5.9",
+    "@grafana/data": "^8.4.1",
+    "@grafana/runtime": "^8.4.1",
+    "@grafana/toolkit": "^8.4.1",
+    "@grafana/ui": "^8.4.1",
     "@testing-library/jest-dom": "5.4.0",
     "@testing-library/react": "^10.0.2",
     "@types/blueimp-md5": "^2.7.0",
@@ -32,7 +32,7 @@
     "@types/expect-puppeteer": "^4.4.3",
     "@types/jest": "^26.0.5",
     "@types/jest-environment-puppeteer": "^4.4.0",
-    "@types/lodash": "latest",
+    "@types/lodash": "^4.14.178",
     "@types/memoize-one": "^5.1.2",
     "@types/react-autosuggest": "^9.3.14",
     "@types/react-redux": "^7.1.9",
@@ -45,7 +45,6 @@
     "eslint-plugin-prettier": "*",
     "jest-date-mock": "^1.0.8",
     "jest-puppeteer": "^5.0.4",
-    "monaco-editor-webpack-plugin": "1.9.0",
     "prettier-plugin-organize-imports": "^2.1.0",
     "puppeteer": "^10.0.0",
     "utility-types": "^3.10.0"
@@ -60,19 +59,13 @@
     "loglevel": "^1.6.8",
     "loglevel-plugin-prefix": "^0.8.4",
     "memoize-one": "^5.1.1",
-    "monaco-editor": "0.20.0",
     "react-autosuggest": "^10.0.2",
-    "react-monaco-editor": "0.36.0",
     "react-redux": "^7.2.0",
     "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0"
   },
-  "resolutions": {
-    "monaco-editor": "0.20.0",
-    "rxjs": "6.6.3"
-  },
   "engines": {
     "node": ">=14"
   }

src/common/services/pmapi/PmApiService.ts

@@ -1,7 +1,8 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults, has } from 'lodash';
-import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../../common/utils';
+import { firstValueFrom } from 'rxjs';
 import { GenericError, NetworkError } from '../../types/errors';
+import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';
 import {
     DuplicateDerivedMetricNameError,
     MetricNotFoundError,
@@ -36,7 +37,7 @@ export class PmApiService {
     async request<T>(options: BackendSrvRequest): Promise<FetchResponse<T>> {
         options = defaults({}, options, this.defaultRequestOptions);
         try {
-            return await timeout(this.backendSrv.fetch<T>(options).toPromise(), this.apiConfig.timeoutMs);
+            return await timeout(firstValueFrom(this.backendSrv.fetch<T>(options)), this.apiConfig.timeoutMs);
         } catch (error) {
             if (error instanceof TimeoutError) {
                 throw new TimeoutError(`Timeout while connecting to '${options.url}'`, error);

src/common/services/pmsearch/PmSearchApiService.ts

@@ -1,8 +1,9 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults, has } from 'lodash';
-import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../../common/utils';
+import { firstValueFrom } from 'rxjs';
 import { SearchEntityUtil } from '../../../components/search/utils/SearchEntityUtil';
 import { NetworkError } from '../../types/errors';
+import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';
 import {
     AutocompleteQueryParams,
     AutocompleteResponse,
@@ -23,7 +24,7 @@ export class PmSearchApiService {
     async request<T>(options: BackendSrvRequest): Promise<FetchResponse<T>> {
         options = defaults({}, options, this.defaultRequestOptions);
         try {
-            return await timeout(this.backendSrv.fetch<T>(options).toPromise(), this.apiConfig.timeoutMs);
+            return await timeout(firstValueFrom(this.backendSrv.fetch<T>(options)), this.apiConfig.timeoutMs);
         } catch (error) {
             if (error instanceof TimeoutError) {
                 throw new TimeoutError(`Timeout while connecting to '${options.url}'`, error);
@@ -45,7 +46,7 @@ export class PmSearchApiService {
         try {
             const response = await this.request<AutocompleteResponse>(request);
             return response.data;
-        } catch (error) {
+        } catch (error: any) {
             if (has(error, 'data.success') && !error.data.success && Object.keys(error.data).length === 1) {
                 throw new SearchNotAvailableError();
             } else {
@@ -77,7 +78,7 @@ export class PmSearchApiService {
                     offset: params.offset ?? 0,
                 };
             }
-        } catch (error) {
+        } catch (error: any) {
             if (has(error, 'data.success') && !error.data.success && Object.keys(error.data).length === 1) {
                 throw new SearchNotAvailableError();
             } else {
@@ -115,7 +116,7 @@ export class PmSearchApiService {
                     offset: params.offset ?? 0,
                 };
             }
-        } catch (error) {
+        } catch (error: any) {
             if (has(error, 'data.success') && !error.data.success && Object.keys(error.data).length === 1) {
                 throw new SearchNotAvailableError();
             } else {

src/common/services/pmseries/PmSeriesApiService.ts

@@ -1,7 +1,8 @@
 import { BackendSrv, BackendSrvRequest, FetchResponse } from '@grafana/runtime';
 import { defaults } from 'lodash';
-import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../../common/utils';
+import { firstValueFrom } from 'rxjs';
 import { NetworkError } from '../../types/errors';
+import { DefaultRequestOptions, getRequestOptions, timeout, TimeoutError } from '../../utils';
 import {
     PmSeriesApiConfig,
     SeriesDescQueryParams,
@@ -29,7 +30,7 @@ export class PmSeriesApiService {
     async request<T>(options: BackendSrvRequest): Promise<FetchResponse<T>> {
         options = defaults({}, options, this.defaultRequestOptions);
         try {
-            return await timeout(this.backendSrv.fetch<T>(options).toPromise(), this.apiConfig.timeoutMs);
+            return await timeout(firstValueFrom(this.backendSrv.fetch<T>(options)), this.apiConfig.timeoutMs);
         } catch (error) {
             if (error instanceof TimeoutError) {
                 throw new TimeoutError(`Timeout while connecting to '${options.url}'`, error);

src/common/types/errors.ts

@@ -10,17 +10,10 @@ export class GenericError extends Error {
     }
 }
 
-interface FetchError {
-    config: any;
-    data: any;
-    status: number;
-    statusText: string;
-}
-
 export class NetworkError extends GenericError {
     data?: { message?: string };
 
-    constructor(error: TypeError | FetchError) {
+    constructor(error: any) {
         let message;
 
         /**

src/components/search/partials/SearchForm/SearchForm.tsx

@@ -284,21 +284,18 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
                                 onChange={() => setEntityFlag(SearchEntity.Metrics)}
                                 label="Metrics"
                                 data-test="metrics-toggle"
-                                css=""
                             />
                             <Checkbox
                                 value={instancesFlag}
                                 onChange={() => setEntityFlag(SearchEntity.Instances)}
                                 label="Instances"
                                 data-test="instances-toggle"
-                                css=""
                             />
                             <Checkbox
                                 value={instanceDomainsFlag}
                                 onChange={() => setEntityFlag(SearchEntity.InstanceDomains)}
                                 label="Instance Domains"
                                 data-test="indoms-toggle"
-                                css=""
                             />
                         </HorizontalGroup>
                     </div>

src/datasources/lib/pmapi/datasource_base.ts

@@ -59,7 +59,7 @@ export abstract class DataSourceBase<Q extends MinimalPmapiQuery, O extends Pmap
         });
     }
 
-    filterQuery(query: PmapiQuery): boolean {
+    filterPmapiQuery(query: PmapiQuery): boolean {
         // remove targets with container hostspec set to empty string
         // happens in the Vector Container Overview dashboard, when selecting "All" and no containers are present
         // $container gets replaced with "", and then PCP returns values for all cgroups
@@ -138,7 +138,7 @@ export abstract class DataSourceBase<Q extends MinimalPmapiQuery, O extends Pmap
 
         const queryResults = request.targets
             .map(query => this.buildPmapiQuery(query, request.scopedVars))
-            .filter(this.filterQuery) // filter after applying template variables (maybe a template variable is empty)
+            .filter(this.filterPmapiQuery) // filter after applying template variables (maybe a template variable is empty)
             .map(query => this.poller?.query(request, query))
             .filter(result => result !== null) as QueryResult[];
         const data = processQueries(request, queryResults, this.poller.state.refreshIntervalMs / 1000);
@@ -167,7 +167,7 @@ export abstract class DataSourceBase<Q extends MinimalPmapiQuery, O extends Pmap
                 status: 'success',
                 message: `Data source is working, using Performance Co-Pilot ${pmcdVersionMetric.values[0].instances[0].value}`,
             };
-        } catch (error) {
+        } catch (error: any) {
             return {
                 status: 'error',
                 message: `${error.message}. To use this data source, please configure the URL in the query editor.`,

src/datasources/lib/pmapi/poller/poller.ts

@@ -270,7 +270,7 @@ export class Poller {
         );
     }
 
-    isContextHasExpiredError(error: Error) {
+    isContextHasExpiredError(error: unknown) {
         return (
             error instanceof NetworkError &&
             (error.data?.message?.includes('unknown context identifier') ||

src/panels/troubleshooting/TroubleshootingPanel.tsx

@@ -1,10 +1,9 @@
 import { PanelProps } from '@grafana/data';
-import * as grafanaUi from '@grafana/ui';
+import { TimeSeries, TooltipPlugin, ZoomPlugin } from '@grafana/ui';
 import React from 'react';
 import { graphWrapper, notUsableContainer } from './styles';
 import { TroubleshootingPane } from './TroubleshootingPane';
 import { Options } from './types';
-const { GraphNG, TooltipPlugin, ZoomPlugin } = grafanaUi;
 
 interface Props extends PanelProps<Options> {}
 
@@ -17,41 +16,34 @@ export const TroubleshootingPanel: React.FC<Props> = (props: Props) => {
             </div>
         );
     }
-    /**
-     * For Grafana v8+, we need to use the <TimeSeries> component instead of the <GraphNG> component.
-     * This component is not available in Grafana v7, and using package aliases to use both
-     * @grafana/ui v7 and @grafana/ui v8 isn't successful because Grafana v8 requires Webpack v5.
-     */
-    if ((grafanaUi as any).TimeSeries) {
-        return (
-            <div className={notUsableContainer(width, height)}>
-                <p>
-                    The PCP Troubleshooting panel of grafana-pcp v3 is not compatible with Grafana v8.
-                    <br />
-                    Please import the regular dashboards (Dashboards tab in the PCP Vector data source settings),
-                    <br />
-                    downgrade to Grafana v7 or wait for the grafana-pcp v4 release.
-                </p>
-            </div>
-        );
-    }
 
     const dataAvailable = data?.series && data.series.length > 0;
     return (
         <div className={graphWrapper}>
             <TroubleshootingPane data={data} troubleshooting={options.troubleshooting}></TroubleshootingPane>
             {dataAvailable ? (
-                <GraphNG
-                    data={data.series}
+                <TimeSeries
+                    frames={data.series}
                     timeRange={timeRange}
                     timeZone={timeZone}
                     width={width}
                     height={height}
                     legend={options.legend}
                 >
-                    <ZoomPlugin onZoom={onChangeTimeRange} />
-                    <TooltipPlugin data={data.series} mode={options.tooltipOptions.mode} timeZone={timeZone} />
-                </GraphNG>
+                    {(config, alignedDataFrame) => {
+                        return (
+                            <>
+                                <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
+                                <TooltipPlugin
+                                    config={config}
+                                    data={alignedDataFrame}
+                                    mode={options.tooltipOptions.mode}
+                                    timeZone={timeZone}
+                                />
+                            </>
+                        );
+                    }}
+                </TimeSeries>
             ) : (
                 <div className="panel-empty">
                     <p>No data to display.</p>

src/panels/troubleshooting/types.ts

@@ -1,4 +1,4 @@
-import { GraphTooltipOptions, VizLegendOptions } from '@grafana/ui';
+import { VizLegendOptions, VizTooltipOptions } from '@grafana/ui';
 
 export enum PredicateOperator {
     LesserThan = '<',
@@ -52,5 +52,5 @@ export interface TroubleshootingInfo {
 export interface Options {
     troubleshooting: TroubleshootingInfo;
     legend: VizLegendOptions;
-    tooltipOptions: GraphTooltipOptions;
+    tooltipOptions: VizTooltipOptions;
 }

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 // monkey patch crypto module to not use deprecated md4 hash algorithm,
 // which is removed in OpenSSL 3.0
@@ -91,52 +90,6 @@ module.exports.getWebpackConfig = (config, options) => {
         },
         plugins: [
             ...updateForkTsCheckerPluginSettings(config.plugins),
-            new MonacoWebpackPlugin({
-                filename: 'monaco-[name].worker.js',
-                languages: [],
-                features: [ // enable same features as https://github.com/grafana/grafana/blob/master/scripts/webpack/webpack.common.js
-                    '!accessibilityHelp',
-                    'bracketMatching',
-                    'caretOperations',
-                    '!clipboard',
-                    '!codeAction',
-                    '!codelens',
-                    '!colorDetector',
-                    '!comment',
-                    '!contextmenu',
-                    '!coreCommands',
-                    '!cursorUndo',
-                    '!dnd',
-                    '!find',
-                    'folding',
-                    '!fontZoom',
-                    '!format',
-                    '!gotoError',
-                    '!gotoLine',
-                    '!gotoSymbol',
-                    '!hover',
-                    '!iPadShowKeyboard',
-                    '!inPlaceReplace',
-                    '!inspectTokens',
-                    '!linesOperations',
-                    '!links',
-                    '!multicursor',
-                    'parameterHints',
-                    '!quickCommand',
-                    '!quickOutline',
-                    '!referenceSearch',
-                    '!rename',
-                    '!smartSelect',
-                    '!snippets',
-                    'suggest',
-                    '!toggleHighContrast',
-                    '!toggleTabFocusMode',
-                    '!transpose',
-                    '!wordHighlighter',
-                    '!wordOperations',
-                    '!wordPartOperations',
-                ],
-            }),
         ],
         optimization: {
             ...config.optimization,