Deploy to external

.config/.cprc.json

@@ -1,3 +1,4 @@
 {
-  "version": "5.12.4"
+  "version": "6.1.8",
+  "features": {}
 }

.config/README.md

@@ -106,9 +106,9 @@ We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge
 // webpack.config.ts
 import type { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
-import grafanaConfig from './.config/webpack/webpack.config';
+import grafanaConfig, { type Env } from './.config/webpack/webpack.config';
 
-const config = async (env): Promise<Configuration> => {
+const config = async (env: Env): Promise<Configuration> => {
   const baseConfig = await grafanaConfig(env);
 
   return merge(baseConfig, {
@@ -151,9 +151,10 @@ version: '3.7'
 
 services:
   grafana:
-    container_name: 'myorg-basic-app'
+    extends:
+      file: .config/docker-compose-base.yaml
+      service: grafana
     build:
-      context: ./.config
       args:
         grafana_version: ${GRAFANA_VERSION:-9.1.2}
         grafana_image: ${GRAFANA_IMAGE:-grafana}

.config/bundler/externals.ts

@@ -0,0 +1,44 @@
+import type { Configuration, ExternalItemFunctionData } from 'webpack';
+
+type ExternalsType = Configuration['externals'];
+
+export const externals: ExternalsType = [
+  // Required for dynamic publicPath resolution
+  { 'amd-module': 'module' },
+  'lodash',
+  'jquery',
+  'moment',
+  'slate',
+  'emotion',
+  '@emotion/react',
+  '@emotion/css',
+  'prismjs',
+  'slate-plain-serializer',
+  '@grafana/slate-react',
+  'react',
+  'react-dom',
+  'react-redux',
+  'redux',
+  'rxjs',
+  'i18next',
+  'react-router',
+  'react-router-dom',
+  'd3',
+  'angular',
+  /^@grafana\/ui/i,
+  /^@grafana\/runtime/i,
+  /^@grafana\/data/i,
+
+  // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
+  ({ request }: ExternalItemFunctionData, callback: (error?: Error, result?: string) => void) => {
+    const prefix = 'grafana/';
+    const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
+    const stripPrefix = (request: string) => request.slice(prefix.length);
+
+    if (request && hasPrefix(request)) {
+      return callback(undefined, stripPrefix(request));
+    }
+
+    callback();
+  },
+];

.config/docker-compose-base.yaml

@@ -0,0 +1,31 @@
+services:
+  grafana:
+    user: root
+    container_name: 'grafana-test-datasource'
+
+    build:
+      context: .
+      args:
+        grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
+        grafana_version: ${GRAFANA_VERSION:-12.2.0}
+        development: ${DEVELOPMENT:-false}
+        anonymous_auth_enabled: ${ANONYMOUS_AUTH_ENABLED:-true}
+    ports:
+      - 3000:3000/tcp
+      - 2345:2345/tcp # delve
+    security_opt:
+      - 'apparmor:unconfined'
+      - 'seccomp:unconfined'
+    cap_add:
+      - SYS_PTRACE
+    volumes:
+      - ../dist:/var/lib/grafana/plugins/grafana-test-datasource
+      - ../provisioning:/etc/grafana/provisioning
+      - ..:/root/grafana-test-datasource
+
+    environment:
+      NODE_ENV: development
+      GF_LOG_FILTERS: plugin.grafana-test-datasource:debug
+      GF_LOG_LEVEL: debug
+      GF_DATAPROXY_LOGGING: 1
+      GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS: grafana-test-datasource

.config/eslint.config.mjs

@@ -0,0 +1,31 @@
+import { defineConfig } from 'eslint/config';
+import grafanaConfig from '@grafana/eslint-config/flat.js';
+
+export default defineConfig([
+  ...grafanaConfig,
+  {
+    rules: {
+      'react/prop-types': 'off',
+    },
+  },
+  {
+    files: ['src/**/*.{ts,tsx}'],
+
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+
+    rules: {
+      '@typescript-eslint/no-deprecated': 'warn',
+    },
+  },
+  {
+    files: ['./tests/**/*'],
+
+    rules: {
+      'react-hooks/rules-of-hooks': 'off',
+    },
+  },
+]);

.config/jest-setup.js

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
+ * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-jest-config
  */
 
 import '@testing-library/jest-dom';

.config/jest.config.js

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
+ * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-jest-config
  */
 
 const path = require('path');
@@ -40,4 +40,5 @@ module.exports = {
   // Jest will throw `Cannot use import statement outside module` if it tries to load an
   // ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
   transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
+  watchPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'],
 };

.config/jest/utils.js

@@ -14,12 +14,18 @@ const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!.*(${moduleNam
 const grafanaESModules = [
   '.pnpm', // Support using pnpm symlinked packages
   '@grafana/schema',
+  '@wojtekmaj/date-utils',
   'd3',
   'd3-color',
   'd3-force',
   'd3-interpolate',
   'd3-scale-chromatic',
+  'get-user-locale',
+  'marked',
+  'memoize',
+  'mimic-function',
   'ol',
+  'react-calendar',
   'react-colorful',
   'rxjs',
   'uuid',

.config/tsconfig.json

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-typescript-config
+ * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-typescript-config
  */
 {
   "compilerOptions": {

.config/types/bundler-rules.d.ts

@@ -0,0 +1,37 @@
+// Image declarations
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}
+
+// Font declarations
+declare module '*.woff';
+declare module '*.woff2';
+declare module '*.eot';
+declare module '*.ttf';
+declare module '*.otf';

.config/types/webpack-plugins.d.ts

@@ -0,0 +1,83 @@
+declare module 'replace-in-file-webpack-plugin' {
+  import { Compiler, Plugin } from 'webpack';
+
+  interface ReplaceRule {
+    search: string | RegExp;
+    replace: string | ((match: string) => string);
+  }
+
+  interface ReplaceOption {
+    dir?: string;
+    files?: string[];
+    test?: RegExp | RegExp[];
+    rules: ReplaceRule[];
+  }
+
+  class ReplaceInFilePlugin extends Plugin {
+    constructor(options?: ReplaceOption[]);
+    options: ReplaceOption[];
+    apply(compiler: Compiler): void;
+  }
+
+  export = ReplaceInFilePlugin;
+}
+
+declare module 'webpack-livereload-plugin' {
+  import { ServerOptions } from 'https';
+  import { Compiler, Plugin, Stats, Compilation } from 'webpack';
+
+  interface Options extends Pick<ServerOptions, 'cert' | 'key' | 'pfx'> {
+    /**
+     * protocol for livereload `<script>` src attribute value
+     * @default protocol of the page, either `http` or `https`
+     */
+    protocol?: string | undefined;
+    /**
+     * The desired port for the livereload server.
+     * If you define port 0, an available port will be searched for, starting from 35729.
+     * @default 35729
+     */
+    port?: number | undefined;
+    /**
+     * he desired hostname for the appended `<script>` (if present) to point to
+     * @default hostname of the page, like `localhost` or 10.0.2.2
+     */
+    hostname?: string | undefined;
+    /**
+     * livereload `<script>` automatically to `<head>`.
+     * @default false
+     */
+    appendScriptTag?: boolean | undefined;
+    /**
+     * RegExp of files to ignore. Null value means ignore nothing.
+     * It is also possible to define an array and use multiple anymatch patterns
+     */
+    ignore?: RegExp | RegExp[] | null | undefined;
+    /**
+     * amount of milliseconds by which to delay the live reload (in case build takes longer)
+     * @default 0
+     */
+    delay?: number | undefined;
+    /**
+     * create hash for each file source and only notify livereload if hash has changed
+     * @default false
+     */
+    useSourceHash?: boolean | undefined;
+  }
+
+  class LiveReloadPlugin extends Plugin {
+    readonly isRunning: boolean;
+    constructor(options?: Options);
+
+    apply(compiler: Compiler): void;
+
+    start(watching: any, cb: () => void): void;
+    done(stats: Stats): void;
+    failed(): void;
+    autoloadJs(): string;
+    scriptTag(source: string): string;
+    applyCompilation(compilation: Compilation): void;
+  }
+
+  export = LiveReloadPlugin;
+}

.config/webpack/BuildModeWebpackPlugin.ts

@@ -1,4 +1,4 @@
-import * as webpack from 'webpack';
+import webpack, { type Compiler } from 'webpack';
 
 const PLUGIN_NAME = 'BuildModeWebpack';