SchemaV2: Rows in dashboard schema v2 (#99239)

* Testing out rows in schemav2

* update schema

* loading sort of works

* descibe position in relation to row

* add row repeats by variable

* explain ts-expect-error

* Save repeats as well

* Update tests for repeat behavior of rows

* Don't add the clones of the repeated rows

* Add row support for response transformer for V2

* Add row actions

* fix panel name

* fix merge issue

* fix tests

* Implement ensureV1

* set key of GridRow

* fix lint issue

* When going from V2 to V1 rows should be assigned unique ids following max panel id

* remove old comment

* Add panel repeats in V2 -> V1 transform

packages/grafana-schema/src/schema/dashboard/v2alpha0/dashboard.schema.cue

@@ -483,6 +483,11 @@ RepeatOptions: {
   maxPerRow?: int
 }
 
+RowRepeatOptions: {
+  mode: RepeatMode,
+  value: string
+}
+
 GridLayoutItemSpec: {
   x: int
   y: int
@@ -497,8 +502,21 @@ GridLayoutItemKind: {
   spec: GridLayoutItemSpec
 }
 
+GridLayoutRowKind: {
+  kind: "GridLayoutRow"
+  spec: GridLayoutRowSpec 
+}
+
+GridLayoutRowSpec: {
+  y: int
+  collapsed: bool
+  title: string
+  elements: [...GridLayoutItemKind] // Grid items in the row will have their Y value be relative to the rows Y value. This means a panel positioned at Y: 0 in a row with Y: 10 will be positioned at Y: 11 (row header has a heigh of 1) in the dashboard.
+  repeat?: RowRepeatOptions
+}
+
 GridLayoutSpec: {
-  items: [...GridLayoutItemKind]
+  items: [...GridLayoutItemKind | GridLayoutRowKind]
 }
 
 GridLayoutKind: {

packages/grafana-schema/src/schema/dashboard/v2alpha0/examples.ts

@@ -191,6 +191,60 @@ export const handyTestingSchema: DashboardV2Spec = {
         },
       },
     },
+    'panel-3': {
+      kind: 'Panel',
+      spec: {
+        data: {
+          kind: 'QueryGroup',
+          spec: {
+            queries: [
+              {
+                kind: 'PanelQuery',
+                spec: {
+                  refId: 'A',
+                  datasource: {
+                    type: 'prometheus',
+                    uid: 'datasource1',
+                  },
+                  query: {
+                    kind: 'prometheus',
+                    spec: {
+                      expr: 'test-query',
+                    },
+                  },
+                  hidden: false,
+                },
+              },
+            ],
+            queryOptions: {
+              timeFrom: '1h',
+              maxDataPoints: 100,
+              timeShift: '1h',
+              queryCachingTTL: 60,
+              interval: '1m',
+              cacheTimeout: '1m',
+              hideTimeOverride: false,
+            },
+            transformations: [],
+          },
+        },
+        description: 'Test Description',
+        links: [],
+        title: 'Test Panel 3',
+        id: 3,
+        vizConfig: {
+          kind: 'timeseries',
+          spec: {
+            fieldConfig: {
+              defaults: {},
+              overrides: [],
+            },
+            options: {},
+            pluginVersion: '7.0.0',
+          },
+        },
+      },
+    },
   },
   layout: {
     kind: 'GridLayout',
@@ -203,8 +257,8 @@ export const handyTestingSchema: DashboardV2Spec = {
               kind: 'ElementReference',
               name: 'panel-1',
             },
-            height: 100,
-            width: 200,
+            height: 10,
+            width: 10,
             x: 0,
             y: 0,
             repeat: {
@@ -221,18 +275,42 @@ export const handyTestingSchema: DashboardV2Spec = {
               kind: 'ElementReference',
               name: 'panel-2',
             },
-            height: 100,
+            height: 10,
             width: 200,
             x: 0,
             y: 2,
           },
         },
+        {
+          kind: 'GridLayoutRow',
+          spec: {
+            y: 20,
+            collapsed: false,
+            title: 'Row 1',
+            repeat: { value: 'customVar', mode: 'variable' },
+            elements: [
+              {
+                kind: 'GridLayoutItem',
+                spec: {
+                  element: {
+                    kind: 'ElementReference',
+                    name: 'panel-3',
+                  },
+                  height: 10,
+                  width: 10,
+                  x: 0,
+                  y: 0,
+                },
+              },
+            ],
+          },
+        },
       ],
     },
   },
   links: [
     {
-      asDropdown: false,
+      asDropdown: true,
       icon: '',
       includeVars: false,
       keepTime: false,

packages/grafana-schema/src/schema/dashboard/v2alpha0/types.gen.ts

@@ -700,6 +700,16 @@ export const defaultRepeatOptions = (): RepeatOptions => ({
 	value: "",
 });
 
+export interface RowRepeatOptions {
+	mode: "variable";
+	value: string;
+}
+
+export const defaultRowRepeatOptions = (): RowRepeatOptions => ({
+	mode: RepeatMode,
+	value: "",
+});
+
 export interface GridLayoutItemSpec {
 	x: number;
 	y: number;
@@ -728,8 +738,33 @@ export const defaultGridLayoutItemKind = (): GridLayoutItemKind => ({
 	spec: defaultGridLayoutItemSpec(),
 });
 
+export interface GridLayoutRowKind {
+	kind: "GridLayoutRow";
+	spec: GridLayoutRowSpec;
+}
+
+export const defaultGridLayoutRowKind = (): GridLayoutRowKind => ({
+	kind: "GridLayoutRow",
+	spec: defaultGridLayoutRowSpec(),
+});
+
+export interface GridLayoutRowSpec {
+	y: number;
+	collapsed: boolean;
+	title: string;
+	elements: GridLayoutItemKind[];
+	repeat?: RowRepeatOptions;
+}
+
+export const defaultGridLayoutRowSpec = (): GridLayoutRowSpec => ({
+	y: 0,
+	collapsed: false,
+	title: "",
+	elements: [],
+});
+
 export interface GridLayoutSpec {
-	items: GridLayoutItemKind[];
+	items: (GridLayoutItemKind | GridLayoutRowKind)[];
 }
 
 export const defaultGridLayoutSpec = (): GridLayoutSpec => ({