Dashboards: Fix text panel content loss during v1 to v2 migration (#115496)

* move content and mode properties to options level

* move to angular section

* Update comments

* handle missing angular text panel

* re-generate test files

* angualr panels tests

* fixing test

* Update output files

* Update output for dev dashboard

* Spread options at the top panel level for migration

* linting issue

---------

Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>
This commit is contained in:
Kristina Demeshchik 2025-12-18 09:59:58 -05:00 committed by GitHub
parent 4bcd31b17a
commit 7e5eb46bea
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
37 changed files with 7835 additions and 123 deletions

View file

@ -300,15 +300,9 @@
"y": 0
},
"id": 6,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
},
"options": {},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown",
"pluginVersion": "11.0.0-pre",
"targets": [
{

View file

@ -115,7 +115,14 @@
"kind": "logs",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "logs",
"originalOptions": {
"height": 100
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -120,7 +120,14 @@
"group": "logs",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "logs",
"originalOptions": {
"height": 100
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -182,7 +182,20 @@
"kind": "table",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "table",
"originalOptions": {
"grid": {
"max": 100,
"min": 0
},
"legend": true,
"y2_format": "bytes",
"y_format": "short"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -189,7 +189,20 @@
"group": "table",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "table",
"originalOptions": {
"grid": {
"max": 100,
"min": 0
},
"legend": true,
"y2_format": "bytes",
"y_format": "short"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -435,7 +435,29 @@
"kind": "table",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "table",
"originalOptions": {
"styles": [
{
"colors": [
"red",
"yellow",
"green"
],
"pattern": "/.*/",
"thresholds": [
"10",
"20"
],
"unit": "short"
}
],
"table": "table2"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -449,7 +449,29 @@
"group": "table",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "table",
"originalOptions": {
"styles": [
{
"colors": [
"red",
"yellow",
"green"
],
"pattern": "/.*/",
"thresholds": [
"10",
"20"
],
"unit": "short"
}
],
"table": "table2"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -110,7 +110,15 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "# Angular Text Panel\n# $constant\n\nFor markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)\n\n## $text\n\n",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -115,7 +115,15 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "# Angular Text Panel\n# $constant\n\nFor markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)\n\n## $text\n\n",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -361,7 +361,15 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data link variables overview\n\nThis dashboard presents variables that one can use when creating *data links*. All links redirect to this dashboard and this panel represents the values that were interpolated in the link that was clicked.\n\n\n#### Series variables\n1. **Name:** \u003cspan style=\"color: orange;\"\u003e$seriesName\u003c/span\u003e\n2. **label.datacenter:** \u003cspan style=\"color: orange;\"\u003e$labelDatacenter\u003c/span\u003e\n3. **label.datacenter.region:** \u003cspan style=\"color: orange;\"\u003e$labelDatacenterRegion\u003c/span\u003e\n\n#### Field variables\n1. **Name:** \u003cspan style=\"color: orange;\"\u003e$fieldName\u003c/span\u003e\n\n#### Value variables\n1. **Time:** \u003cspan style=\"color: orange;\"\u003e$valueTime\u003c/span\u003e\n2. **Numeric:** \u003cspan style=\"color: orange;\"\u003e$valueNumeric\u003c/span\u003e\n3. **Text:** \u003cspan style=\"color: orange;\"\u003e$valueText\u003c/span\u003e\n4. **Calc:** \u003cspan style=\"color: orange;\"\u003e$valueCalc\u003c/span\u003e\n\n",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -372,7 +372,15 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data link variables overview\n\nThis dashboard presents variables that one can use when creating *data links*. All links redirect to this dashboard and this panel represents the values that were interpolated in the link that was clicked.\n\n\n#### Series variables\n1. **Name:** \u003cspan style=\"color: orange;\"\u003e$seriesName\u003c/span\u003e\n2. **label.datacenter:** \u003cspan style=\"color: orange;\"\u003e$labelDatacenter\u003c/span\u003e\n3. **label.datacenter.region:** \u003cspan style=\"color: orange;\"\u003e$labelDatacenterRegion\u003c/span\u003e\n\n#### Field variables\n1. **Name:** \u003cspan style=\"color: orange;\"\u003e$fieldName\u003c/span\u003e\n\n#### Value variables\n1. **Time:** \u003cspan style=\"color: orange;\"\u003e$valueTime\u003c/span\u003e\n2. **Numeric:** \u003cspan style=\"color: orange;\"\u003e$valueNumeric\u003c/span\u003e\n3. **Text:** \u003cspan style=\"color: orange;\"\u003e$valueText\u003c/span\u003e\n4. **Calc:** \u003cspan style=\"color: orange;\"\u003e$valueCalc\u003c/span\u003e\n\n",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -167,7 +167,15 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data center = $datacenter\n\n### server = $server\n\n#### pod = $pod",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -174,7 +174,15 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data center = $datacenter\n\n### server = $server\n\n#### pod = $pod",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -273,7 +273,15 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data center = $datacenter\n\n### server = $server\n\n#### pod = $pod",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -282,7 +282,15 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "## Data center = $datacenter\n\n### server = $server\n\n#### pod = $pod",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -296,6 +296,7 @@
}
},
{
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"datasource": {
"type": "grafana-testdata-datasource"
},
@ -306,15 +307,7 @@
"y": 0
},
"id": 6,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
},
"mode": "markdown",
"pluginVersion": "11.0.0-pre",
"targets": [
{

View file

@ -1256,13 +1256,13 @@
"spec": {
"pluginVersion": "11.0.0-pre",
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},

View file

@ -1301,13 +1301,13 @@
"version": "11.0.0-pre",
"spec": {
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},

View file

@ -62,6 +62,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -151,6 +157,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -241,6 +253,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -320,6 +338,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -401,6 +425,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -480,6 +510,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -559,6 +595,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -639,6 +681,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -730,6 +778,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -927,6 +981,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -1006,6 +1066,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -1085,6 +1151,12 @@
"spec": {
"pluginVersion": "7.4.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [

View file

@ -67,6 +67,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -159,6 +165,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -252,6 +264,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -334,6 +352,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -418,6 +442,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -500,6 +530,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -582,6 +618,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -665,6 +707,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -759,6 +807,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -961,6 +1015,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -1043,6 +1103,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [
@ -1125,6 +1191,12 @@
"version": "7.4.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "gauge",
"originalOptions": {
"nullPointMode": "null"
}
},
"baseColor": "#299c46",
"reduceOptions": {
"calcs": [

View file

@ -412,7 +412,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Should be a long line connecting the null region in the `connected` mode, and in zero it should just be a line with zero value at the null points. ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -456,7 +466,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Stacking values on top of nulls, should treat the null values as zero. ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -500,7 +520,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Stacking when all values are null should leave a gap in the graph",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -1681,7 +1711,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Left is showing null between values for a normal line graph and staircase graph. Orphaned data points should be rendered as points",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -2061,7 +2101,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Just verify that the tooltip time has millisecond resolution ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -2105,7 +2155,17 @@
"kind": "text",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Verify that axis labels look ok",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -429,7 +429,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Should be a long line connecting the null region in the `connected` mode, and in zero it should just be a line with zero value at the null points. ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -475,7 +485,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Stacking values on top of nulls, should treat the null values as zero. ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -521,7 +541,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Stacking when all values are null should leave a gap in the graph",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -1779,7 +1809,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Left is showing null between values for a normal line graph and staircase graph. Orphaned data points should be rendered as points",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -2172,7 +2212,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Just verify that the tooltip time has millisecond resolution ",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -2218,7 +2268,17 @@
"group": "text",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "text",
"originalOptions": {
"content": "Verify that axis labels look ok",
"editable": true,
"error": false,
"mode": "markdown"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -74,7 +74,44 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateViridis",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"tooltipDecimals": 4,
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 2,
"format": "areaM2",
"logBase": 1,
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -116,7 +153,46 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {
"cardRound": 50
},
"color": {
"cardColor": "#1F60C4",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "opacity"
},
"dataFormat": "tsbuckets",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 1,
"format": "kwatt",
"logBase": 1,
"show": true,
"width": "100"
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -158,7 +234,44 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#1F60C4",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "opacity"
},
"dataFormat": "tsbuckets",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": true,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 1,
"format": "kwatt",
"logBase": 1,
"show": true,
"width": "100"
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -204,7 +317,46 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateViridis",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"tooltipDecimals": 4,
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 2,
"format": "areaM2",
"logBase": 1,
"max": "50",
"min": "20",
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -246,7 +398,44 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateBuGn",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": true,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"xAxis": {
"show": true
},
"xBucketNumber": 10,
"yAxis": {
"format": "short",
"logBase": 2,
"show": true,
"splitFactor": 2
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -288,7 +477,44 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateBuGn",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": true,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"xAxis": {
"show": true
},
"xBucketNumber": 10,
"yAxis": {
"format": "short",
"logBase": 10,
"show": true,
"splitFactor": 5
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -78,7 +78,44 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateViridis",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"tooltipDecimals": 4,
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 2,
"format": "areaM2",
"logBase": 1,
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -123,7 +160,46 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {
"cardRound": 50
},
"color": {
"cardColor": "#1F60C4",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "opacity"
},
"dataFormat": "tsbuckets",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 1,
"format": "kwatt",
"logBase": 1,
"show": true,
"width": "100"
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -168,7 +244,44 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#1F60C4",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "opacity"
},
"dataFormat": "tsbuckets",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": true,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 1,
"format": "kwatt",
"logBase": 1,
"show": true,
"width": "100"
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -216,7 +329,46 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateViridis",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"tooltipDecimals": 4,
"xAxis": {
"show": true
},
"yAxis": {
"decimals": 2,
"format": "areaM2",
"logBase": 1,
"max": "50",
"min": "20",
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -261,7 +413,44 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateBuGn",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": true,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"xAxis": {
"show": true
},
"xBucketNumber": 10,
"yAxis": {
"format": "short",
"logBase": 2,
"show": true,
"splitFactor": 2
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []
@ -306,7 +495,44 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateBuGn",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": true,
"highlightCards": true,
"legend": {
"show": true
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": true
},
"xAxis": {
"show": true
},
"xBucketNumber": 10,
"yAxis": {
"format": "short",
"logBase": 10,
"show": true,
"splitFactor": 5
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -665,7 +665,42 @@
"kind": "heatmap",
"spec": {
"pluginVersion": "",
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": false
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"format": "short",
"logBase": 1,
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -691,7 +691,42 @@
"group": "heatmap",
"version": "",
"spec": {
"options": {},
"options": {
"__angularMigration": {
"autoMigrateFrom": "heatmap",
"originalOptions": {
"cards": {},
"color": {
"cardColor": "#b4ff00",
"colorScale": "sqrt",
"colorScheme": "interpolateOranges",
"exponent": 0.5,
"mode": "spectrum"
},
"dataFormat": "timeseries",
"heatmap": {},
"hideZeroBuckets": false,
"highlightCards": true,
"legend": {
"show": false
},
"reverseYBuckets": false,
"tooltip": {
"show": true,
"showHistogram": false
},
"xAxis": {
"show": true
},
"yAxis": {
"format": "short",
"logBase": 1,
"show": true
},
"yBucketBound": "auto"
}
}
},
"fieldConfig": {
"defaults": {},
"overrides": []

View file

@ -56,6 +56,14 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"panel-tests"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -94,6 +102,15 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"demo"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -133,6 +150,15 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"templating",
"gdev"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -172,6 +198,15 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"datasource-test"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -211,6 +246,12 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": []
}
},
"maxItems": 100,
"query": "",
"showHeadings": true,
@ -247,6 +288,15 @@
"spec": {
"pluginVersion": "9.0.0-pre",
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"demo"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,

View file

@ -58,6 +58,14 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"panel-tests"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -97,6 +105,15 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"demo"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -137,6 +154,15 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"templating",
"gdev"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -177,6 +203,15 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"datasource-test"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,
@ -217,6 +252,12 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": []
}
},
"maxItems": 100,
"query": "",
"showHeadings": true,
@ -254,6 +295,15 @@
"version": "9.0.0-pre",
"spec": {
"options": {
"__angularMigration": {
"autoMigrateFrom": "dashlist",
"originalOptions": {
"tags": [
"gdev",
"demo"
]
}
},
"maxItems": 1000,
"query": "",
"showHeadings": false,

View file

@ -2296,20 +2296,24 @@ func buildVizConfig(panelMap map[string]interface{}) dashv2alpha1.DashboardVizCo
// We check two cases:
// 1. Panel already has autoMigrateFrom set (from v0→v1 migration) - panel type already converted
// 2. Panel type is a known Angular panel - need to convert type AND set autoMigrateFrom
// 3. Panel has original options - need to set autoMigrateFrom and originalOptions
autoMigrateFrom, hasAutoMigrateFrom := panelMap["autoMigrateFrom"].(string)
originalOptions := extractAngularOptions(panelMap)
if !hasAutoMigrateFrom || autoMigrateFrom == "" {
// Check if panel type is an Angular type that needs migration
if newType := getAngularPanelMigration(panelType, panelMap); newType != "" {
autoMigrateFrom = panelType // Original Angular type
panelType = newType // New modern type
} else if len(originalOptions) > 0 {
autoMigrateFrom = panelType
}
}
if autoMigrateFrom != "" {
options["__angularMigration"] = map[string]interface{}{
"autoMigrateFrom": autoMigrateFrom,
"originalOptions": extractAngularOptions(panelMap),
"originalOptions": originalOptions,
}
}

View file

@ -290,6 +290,7 @@
}
},
{
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"datasource": {
"type": "grafana-testdata-datasource"
},
@ -300,15 +301,7 @@
"y": 0
},
"id": 6,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel \u003e\u003e Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
},
"mode": "markdown",
"pluginVersion": "11.0.0-pre",
"targets": [
{

View file

@ -299,15 +299,9 @@
"y": 0
},
"id": 6,
"options": {
"code": {
"language": "plaintext",
"showLineNumbers": false,
"showMiniMap": false
},
"content": "# Graph panel >> Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown"
},
"options": {},
"content": "# Graph panel >> Timeseries panel\n\nKnown issues:\n* hiding null/empty series\n* time regions",
"mode": "markdown",
"pluginVersion": "11.0.0-pre",
"targets": [
{

View file

@ -1888,11 +1888,6 @@
"count": 1
}
},
"public/app/features/dashboard-scene/serialization/angularMigration.test.ts": {
"@typescript-eslint/no-explicit-any": {
"count": 1
}
},
"public/app/features/dashboard-scene/serialization/buildNewDashboardSaveModel.ts": {
"@typescript-eslint/consistent-type-assertions": {
"count": 1

View file

@ -1,9 +1,22 @@
import { PanelTypeChangedHandler } from '@grafana/data';
import { FieldConfigSource, PanelTypeChangedHandler } from '@grafana/data';
import { getPanelPlugin } from '@grafana/data/test';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { getV2AngularMigrationHandler, getAngularPanelMigrationHandler } from './angularMigration';
/**
* Test type for mutable panel model used in migration handler tests.
* Allows arbitrary properties to be added during migration.
*/
interface TestPanelModel {
id: number;
type: string;
options: Record<string, unknown>;
fieldConfig: FieldConfigSource;
targets?: Array<{ refId: string; [key: string]: unknown }>;
[key: string]: unknown;
}
describe('getAngularPanelMigrationHandler', () => {
describe('Given an old angular panel', () => {
it('Should call migration handler', () => {
@ -43,9 +56,11 @@ describe('getAngularPanelMigrationHandler', () => {
type: 'dashlist',
});
const mutatedModel: any = {
const mutatedModel: TestPanelModel = {
id: 1,
type: 'dashlist',
options: {},
fieldConfig: { defaults: {}, overrides: [] },
};
getAngularPanelMigrationHandler(oldModel)(mutatedModel, reactPlugin);
@ -80,7 +95,7 @@ describe('getV2AngularMigrationHandler', () => {
},
};
const mutatedModel = {
const mutatedModel: TestPanelModel = {
id: 1,
type: 'stat',
options: {},
@ -89,6 +104,11 @@ describe('getV2AngularMigrationHandler', () => {
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// Verify originalOptions were spread onto the panel (for plugins using setMigrationHandler)
expect(mutatedModel['format']).toBe('short');
expect(mutatedModel['valueName']).toBe('avg');
expect(mutatedModel['orientation']).toBe('horizontal');
// Verify handler received correct arguments
expect(receivedPrevPluginId).toBe('singlestat');
expect(receivedPrevOptions?.angular).toBeDefined();
@ -123,7 +143,7 @@ describe('getV2AngularMigrationHandler', () => {
},
};
const mutatedModel = {
const mutatedModel: TestPanelModel = {
id: 1,
type: 'timeseries',
options: {},
@ -132,6 +152,10 @@ describe('getV2AngularMigrationHandler', () => {
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// Verify originalOptions were spread onto the panel (for plugins using setMigrationHandler)
expect(mutatedModel['bars']).toBe(true);
expect(mutatedModel['lines']).toBe(false);
// Verify handler received correct arguments
expect(receivedPrevPluginId).toBe('graph');
expect(receivedPrevOptions?.angular).toBeDefined();
@ -163,7 +187,7 @@ describe('getV2AngularMigrationHandler', () => {
},
};
const mutatedModel = {
const mutatedModel: TestPanelModel = {
id: 1,
type: 'new-panel',
options: {},
@ -172,6 +196,9 @@ describe('getV2AngularMigrationHandler', () => {
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// Verify originalOptions were spread onto the panel (for plugins using setMigrationHandler)
expect(mutatedModel['oldOption']).toBe('old');
// Verify handler received correct arguments (options wrapper, not angular)
expect(receivedPrevPluginId).toBe('some-react-panel');
expect(receivedPrevOptions?.options).toBeDefined();
@ -222,4 +249,118 @@ describe('getV2AngularMigrationHandler', () => {
warnSpy.mockRestore();
});
});
describe('Given v2 migration data for text panel with Angular-style properties', () => {
it('Should spread originalOptions onto panel for migration handlers using setMigrationHandler', () => {
// Text panel uses setMigrationHandler, not onPanelTypeChanged
// The migration handler expects content/mode to be directly on the panel object
const reactPlugin = getPanelPlugin({ id: 'text' });
// This simulates a text panel with Angular-style properties at root level
// The backend sets autoMigrateFrom="text" when it detects these properties
const migrationData = {
autoMigrateFrom: 'text',
originalOptions: {
content: 'Hello World',
mode: 'markdown',
},
};
const mutatedModel: TestPanelModel = {
id: 1,
type: 'text',
options: {},
fieldConfig: { defaults: {}, overrides: [] },
};
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// Verify originalOptions were spread onto the panel
// This allows textPanelMigrationHandler to see content/mode via panel.hasOwnProperty()
expect(mutatedModel['content']).toBe('Hello World');
expect(mutatedModel['mode']).toBe('markdown');
});
it('Should not overwrite existing panel properties when spreading originalOptions', () => {
const reactPlugin = getPanelPlugin({ id: 'text' });
const migrationData = {
autoMigrateFrom: 'text',
originalOptions: {
content: 'Old content',
mode: 'markdown',
id: 999, // Should not overwrite existing id
},
};
const mutatedModel: TestPanelModel = {
id: 1,
type: 'text',
options: { existingOption: true },
fieldConfig: { defaults: {}, overrides: [] },
};
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// defaults() only sets properties that don't already exist
expect(mutatedModel['content']).toBe('Old content');
expect(mutatedModel['mode']).toBe('markdown');
expect(mutatedModel.id).toBe(1); // Should keep original id
expect(mutatedModel.options).toEqual({ existingOption: true }); // Should keep existing options
});
it('Should work with empty originalOptions', () => {
const reactPlugin = getPanelPlugin({ id: 'text' });
const migrationData = {
autoMigrateFrom: 'text',
originalOptions: {},
};
const mutatedModel: TestPanelModel = {
id: 1,
type: 'text',
options: {},
fieldConfig: { defaults: {}, overrides: [] },
};
// Should not throw
expect(() => {
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
}).not.toThrow();
});
it('Should spread originalOptions AND call onPanelTypeChanged if plugin has both', () => {
let handlerCalled = false;
const onPanelTypeChanged: PanelTypeChangedHandler = (panel, prevPluginId, prevOptions) => {
handlerCalled = true;
// Verify originalOptions were already spread onto panel before handler is called
expect((panel as TestPanelModel)['customProp']).toBe('custom value');
return { migrated: true };
};
const reactPlugin = getPanelPlugin({ id: 'custom-panel' }).setPanelChangeHandler(onPanelTypeChanged);
const migrationData = {
autoMigrateFrom: 'custom-panel',
originalOptions: {
customProp: 'custom value',
},
};
const mutatedModel: TestPanelModel = {
id: 1,
type: 'custom-panel',
options: {},
fieldConfig: { defaults: {}, overrides: [] },
};
getV2AngularMigrationHandler(migrationData)(mutatedModel, reactPlugin);
// Verify both behaviors occurred
expect(mutatedModel['customProp']).toBe('custom value'); // originalOptions spread
expect(handlerCalled).toBe(true); // onPanelTypeChanged called
expect(mutatedModel.options).toEqual({ migrated: true }); // handler result applied
});
});
});

View file

@ -77,6 +77,11 @@ export function getAngularPanelMigrationHandler(oldModel: PanelModel) {
* 4. Handler calls stat plugin's onPanelTypeChanged with { angular: originalOptions }
* 5. Plugin migrates format/valueName/etc to proper stat options
*
* For panels where autoMigrateFrom equals the current type (e.g., "text" -> "text"):
* - These are panels with Angular-style properties at the root level (content, mode, etc.)
* - We spread originalOptions onto the panel so the plugin's migration handler can see them
* - This matches the v1 behavior where PanelModel.restoreModel() spreads all properties
*
* @param migrationData The __angularMigration data extracted from panel options
*/
export function getV2AngularMigrationHandler(migrationData: AngularMigrationData) {
@ -90,19 +95,28 @@ export function getV2AngularMigrationHandler(migrationData: AngularMigrationData
return;
}
if (plugin.onPanelTypeChanged) {
// Some plugins rely on being able to access targets to set up the fieldConfig when migrating from angular.
// Proxy the targets property with a deprecation warning.
const targetClone = cloneDeep(panel.targets);
Object.defineProperty(panel, 'targets', {
get: function () {
console.warn(
'Accessing the targets property when migrating a panel plugin is deprecated. Changes to this property will be ignored.'
);
return targetClone;
},
});
// Spread originalOptions onto the panel object.
// This is critical for plugins that use setMigrationHandler (like text panel) which expect
// Angular properties (content, mode, etc.) to be directly on the panel object.
// This matches the v1 behavior where PanelModel.restoreModel() spreads all JSON properties.
if (originalOptions && Object.keys(originalOptions).length > 0) {
defaults(panel, originalOptions);
}
// Some plugins rely on being able to access targets to set up the fieldConfig when migrating from angular.
// Proxy the targets property with a deprecation warning.
const targetClone = cloneDeep(panel.targets);
Object.defineProperty(panel, 'targets', {
get: function () {
console.warn(
'Accessing the targets property when migrating a panel plugin is deprecated. Changes to this property will be ignored.'
);
return targetClone;
},
});
// For panels with onPanelTypeChanged (e.g., singlestat -> stat), call the handler
if (plugin.onPanelTypeChanged) {
// For Angular panels, wrap in { angular: ... } to match expected format
// For React panels migrating from other React panels, pass options directly
const prevOptions = wasAngular ? { angular: originalOptions } : { options: originalOptions };

View file

@ -609,17 +609,25 @@ export function buildPanelKind(p: Panel): PanelKind {
// Build options with Angular migration data if needed (matches backend behavior)
// autoMigrateFrom is set during v0->v1 migration when Angular panels are converted
const { autoMigrateFrom } = p;
let { autoMigrateFrom } = p;
let options = p.options ?? {};
const originalOptions = extractAngularOptions(p);
// When autoMigrateFrom is present OR when there are Angular-specific properties at root level,
// compose __angularMigration with only Angular-specific options.
// This filters out known Panel schema properties, passing only the Angular options to migration handlers.
// The second condition handles panels like "text" that have Angular-style properties (content, mode)
// but don't have autoMigrateFrom set because they don't need a type conversion.
if (!autoMigrateFrom && Object.keys(originalOptions).length > 0) {
autoMigrateFrom = p.type;
}
// When autoMigrateFrom is present, compose __angularMigration with only Angular-specific options
// This filters out known Panel schema properties, passing only the Angular options to migration handlers
if (autoMigrateFrom) {
options = {
...options,
__angularMigration: {
autoMigrateFrom,
originalOptions: extractAngularOptions(p),
originalOptions,
},
};
}