Merge branch 'main' into renovate/glob-11.x-lockfile

docusaurus/docs/tutorials/build-a-panel-plugin.md

@@ -55,11 +55,34 @@ Next, you'll learn the basic workflow of making a change to your panel, building
 
 First, you need to add your panel to a dashboard:
 
+### Add your panel to a dashboard
+
 1. Open Grafana in your browser.
-1. Create a new dashboard, and add a new panel.
-1. Select your panel from the list of visualization types.
+   By default, Grafana is accessible at [http://localhost:3000](http://localhost:3000).
+
+1. Create a new dashboard.
+
+   - From the menu, select **Dashboards**.
+   - On the top right, select **New** -> **Dashboard**.
+   - Select **Add Visualization** to start configuring your new panel.
+
+1. Configure the `TestData` data source. In the data source configuration modal, select the **TestData DB** data source for this dashboard.
+
+1. Search and select your panel plugin. In the panel configuration view, go to the **Visualization** list on the right side, search for your panel plugin, and select it.
+
 1. Save the dashboard.
 
+---
+
+### Alternative: Use the provisioned sample panel dashboard
+
+You can also view your panel in action through a pre-configured dashboard:
+
+1. Go to **Dashboards** and select the **Provisioned Sample Panel Dashboard**.
+   - The **TestData DB** data source is already configured with sample data for this dashboard.
+1. To edit, find your panel in this dashboard and click the menu (that is, the three vertical dots) at the top right corner of your panel.
+1. From the dropdown menu, select **Edit** to customize or examine your panel's settings.
+
 Now that you can view your panel, try making a change to the panel plugin:
 
 1. In `SimplePanel.tsx`, change the fill color of the circle. For example, to change it to green:
@@ -69,7 +92,7 @@ Now that you can view your panel, try making a change to the panel plugin:
    ```
 
 1. Save the file.
-1. In the browser, reload Grafana to see the new changes.
+1. In the browser, reload Grafana. The changes should appear.
 
 ## Add panel options
 
@@ -174,13 +197,29 @@ Most panels visualize dynamic data from a Grafana data source. In this step, you
 To use data from queries in your panel, you need to set up a data source. If you don't have one available, you can use the [TestData](https://grafana.com/docs/grafana/latest/features/datasources/testdata) data source while developing.
 :::
 
+When adding your panel to a dashboard, configure it with a data source to populate it with data dynamically. Alternatively, you can use the **Provisioned Sample Panel Dashboard**, which is already configured with a sample data source.
+
+### Using the provisioned sample panel dashboard
+
+The Provisioned Sample Panel Dashboard comes preconfigured with the `TestData` data source. This setup includes sample data for testing and development. The sample data is in the `raw_frame` scenario of the [`TestData`](https://grafana.com/docs/grafana/latest/features/datasources/testdata) data source and consists of two time series with the same timestamps, as shown in the following table. The table displays these two time series joined by a timestamp:
+
+| Timestamp           | Label1 | Value1 | Label2 | Value2 |
+| ------------------- | ------ | ------ | ------ | ------ |
+| 2020-12-31 19:00:00 | A      | 10     | A      | 40     |
+| 2020-12-31 20:00:00 | B      | 20     | B      | 50     |
+| 2020-12-31 21:00:00 | C      | 15     | C      | 45     |
+| 2020-12-31 22:00:00 | D      | 25     | D      | 55     |
+| 2020-12-31 23:00:00 | E      | 30     | E      | 60     |
+
+This setup allows you to test your panel’s dynamic elements using real sample data, structured with multiple series for more complex visualization.
+
 The results from a data source query within your panel are available in the `data` property inside your panel component.
 
 ```ts
 const { data } = props;
 ```
 
-`data.series` contains the series returned from a data source query. Each series is represented as a data structure called _data frame_. A data frame resembles a table, where data is stored by columns, or _fields_, instead of rows. Every value in a field share the same data type, such as string, number, or time.
+The `data.series` contains the series returned from a data source query. Each series is represented as a data structure called _data frame_. A data frame resembles a table, where data is stored by columns, or _fields_, instead of rows. Every value in a field share the same data type, such as string, number, or time.
 
 Here's an example of a data frame with a time field, `Time`, and a number field, `Value`:
 
@@ -190,6 +229,15 @@ Here's an example of a data frame with a time field, `Time`, and a number field,
 | 1589189406480 | 27.2  |
 | 1589189513721 | 15.0  |
 
+Provisioned sample panel dashboard\*\* sample data:
+| Timestamp | Label1 | Value1 | Label2 | Value2 |
+| ------------------- | ------ | ------ | ------ | ------ |
+| 2020-12-31 19:00:00 | A | 10 | A | 40 |
+| 2020-12-31 20:00:00 | B | 20 | B | 50 |
+| 2020-12-31 21:00:00 | C | 15 | C | 45 |
+| 2020-12-31 22:00:00 | D | 25 | D | 55 |
+| 2020-12-31 23:00:00 | E | 30 | E | 60 |
+
 Let's see how you can retrieve data from a data frame and use it in your visualization.
 
 1. Get the last value of each field of type `number`, by adding the following to `SimplePanel.tsx`, before the `return` statement:

docusaurus/website/package.json

@@ -15,9 +15,9 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.0.1",
-    "@docusaurus/plugin-client-redirects": "^3.1.1",
-    "@docusaurus/preset-classic": "^3.0.1",
+    "@docusaurus/core": "^3.6.0",
+    "@docusaurus/plugin-client-redirects": "^3.6.0",
+    "@docusaurus/preset-classic": "^3.6.0",
     "@grafana/faro-web-sdk": "^1.9.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
@@ -29,8 +29,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.0.1",
-    "@docusaurus/tsconfig": "^3.0.1",
+    "@docusaurus/module-type-aliases": "^3.6.0",
+    "@docusaurus/tsconfig": "^3.6.0",
     "raw-loader": "^4.0.2",
     "typescript": "^5.2.2"
   },

packages/create-plugin/package.json

@@ -53,7 +53,7 @@
     "find-up": "^7.0.0",
     "glob": "^11.0.0",
     "handlebars": "^4.7.8",
-    "marked": "^10.0.0",
+    "marked": "^14.0.0",
     "marked-terminal": "^7.0.0",
     "minimist": "^1.2.8",
     "semver": "^7.3.5",
@@ -67,7 +67,7 @@
   },
   "overrides": {
     "@types/marked-terminal": {
-      "marked": "^10.0.0"
+      "marked": "^14.0.0"
     }
   },
   "nodemonConfig": {

packages/create-plugin/src/utils/utils.console.ts

@@ -1,16 +1,17 @@
-import { marked } from 'marked';
+import { marked, MarkedExtension } from 'marked';
 import chalk, { type ForegroundColorName } from 'chalk';
 import boxen from 'boxen';
-import TerminalRenderer from 'marked-terminal';
+import { markedTerminal } from 'marked-terminal';
 import Enquirer from 'enquirer';
 
 const { prompt } = Enquirer;
 
-marked.setOptions({
-  renderer: new TerminalRenderer({
+// They're compatible but this type assertion is required because @types/marked-terminal needs changes.
+marked.use(
+  markedTerminal({
     firstHeading: chalk.hex('#ff9900').underline.bold,
-  }),
-});
+  }) as MarkedExtension
+);
 
 export function displayAsMarkdown(msg: string) {
   return marked(msg);
@@ -25,7 +26,7 @@ export function printMessage(msg: string) {
 }
 
 export function printSuccessMessage(msg: string) {
-  console.log(displayAsMarkdown(`\n✔ ${msg}`).trim());
+  console.log(displayAsMarkdown(`\n✔ ${msg}`));
 }
 
 export function printError(error: string) {
@@ -37,21 +38,23 @@ export function printWarning(error: string) {
 }
 
 export async function confirmPrompt(message: string): Promise<boolean> {
+  const mkdMessage = await displayAsMarkdown(message);
   const question: Record<string, boolean> = await prompt({
     name: 'confirmPrompt',
     type: 'confirm',
-    message: displayAsMarkdown(message),
+    message: mkdMessage,
   });
 
   return question['confirmPrompt'];
 }
 
 export async function selectPrompt(message: string, choices: string[]): Promise<string> {
+  const mkdMessage = await displayAsMarkdown(message);
   const question: Record<string, string> = await prompt({
     name: 'selectPrompt',
     type: 'select',
     choices,
-    message: displayAsMarkdown(message),
+    message: mkdMessage,
   });
 
   return question['selectPrompt'];

packages/create-plugin/templates/common/.config/webpack/BuildModeWebpackPlugin.ts

@@ -14,7 +14,6 @@ export class BuildModeWebpackPlugin {
           const assets = compilation.getAssets();
           for (const asset of assets) {
             if (asset.name.endsWith('plugin.json')) {
-              console.log(asset.name);
               const pluginJsonString = asset.source.source().toString();
               const pluginJsonWithBuildMode = JSON.stringify(
                 {

packages/create-plugin/templates/panel/provisioning/dashboards/dashboard.json

@@ -24,8 +24,8 @@
   "panels": [
     {
       "datasource": {
-        "type": "grafana",
-        "uid": "grafana"
+        "type": "grafana-testdata-datasource",
+        "uid": "trlxrdZVk"
       },
       "gridPos": {
         "h": 8,
@@ -42,14 +42,15 @@
       "targets": [
         {
           "datasource": {
-            "type": "datasource",
-            "uid": "grafana"
+            "type": "grafana-testdata-datasource",
+            "uid": "db84e60d-b92a-4089-82cb-34842fb1754b"
           },
-          "queryType": "randomWalk",
-          "refId": "A"
+          "refId": "A",
+          "scenarioId": "raw_frame",
+          "rawFrameContent": "[\n  {\n    \"columns\": [\n      {\n        \"text\": \"Time\",\n        \"type\": \"time\"\n      },\n      {\n        \"text\": \"Label\",\n        \"type\": \"string\"\n      },\n      {\n        \"text\": \"Value\",\n        \"type\": \"number\"\n      }\n    ],\n    \"rows\": [\n      [1609459200000, \"A\", 10],\n      [1609462800000, \"B\", 20],\n      [1609466400000, \"C\", 15],\n      [1609470000000, \"D\", 25],\n      [1609473600000, \"E\", 30]\n    ]\n  },\n{\n    \"columns\": [\n      {\n        \"text\": \"Time\",\n        \"type\": \"time\"\n      },\n      {\n        \"text\": \"Label\",\n        \"type\": \"string\"\n      },\n      {\n        \"text\": \"Value\",\n        \"type\": \"number\"\n      }\n    ],\n    \"rows\": [\n      [1609459200000, \"A\", 40],\n      [1609462800000, \"B\", 50],\n      [1609466400000, \"C\", 45],\n      [1609470000000, \"D\", 55],\n      [1609473600000, \"E\", 60]\n    ]\n  }\n]"
         }
       ],
-      "title": "Panel Title",
+      "title": "Sample Panel Title",
       "type": "{{ pluginId }}"
     },
     {
@@ -80,7 +81,7 @@
           "scenarioId": "no_data_points"
         }
       ],
-      "title": "Panel Title",
+      "title": "Sample Panel Title",
       "type": "{{ pluginId }}"
     }
   ],

packages/plugin-e2e/package.json

@@ -45,7 +45,7 @@
   "dependencies": {
     "@grafana/e2e-selectors": "^11.4.0-205692",
     "semver": "^7.5.4",
-    "uuid": "^11.0.0",
+    "uuid": "^11.0.2",
     "yaml": "^2.3.4"
   },
   "nodemonConfig": {