codegen: Introduce TS codegen veneer (#54816)

* Split all named types out into defs, etc.

* Use latest cuetsy, refactor generators accordingly

* Return AST type from plugin TS generator

* Near-complete checkin of TS veneer code generator

* First full completed pass

* Improve the attribute name

* Defer use of the dashboard veneer type to follow-up

* Remove dummy index, prettier on veneer

* Fix merge errors in gen.go

* Add match field to SpecialValueMap

* Fix backend lint errors

public/app/plugins/gen.go

@@ -89,12 +89,15 @@ func main() {
 
 	var wdm codegen.WriteDiffer
 	for _, ptp := range ptrees {
-		wdm, err = ptp.Tree.GenerateTS(ptp.Path)
+		tfast, err := ptp.Tree.GenerateTypeScriptAST()
 		if err != nil {
 			fmt.Fprintf(os.Stderr, "generating typescript failed for %s: %s\n", ptp.Path, err)
 			os.Exit(1)
 		}
-		wd.Merge(wdm)
+		// nil return if there was nothing to generate (no slot implementations)
+		if tfast != nil {
+			wd[filepath.Join(ptp.Path, "models.gen.ts")] = []byte(tfast.String())
+		}
 
 		relp, _ := filepath.Rel(groot, ptp.Path)
 		wdm, err = ptp.Tree.GenerateGo(ptp.Path, codegen.GoGenConfig{

public/app/plugins/panel/annolist/models.gen.ts

@@ -10,7 +10,6 @@
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions {
   limit: number;
   navigateAfter: string;
@@ -21,7 +20,7 @@ export interface PanelOptions {
   showTags: boolean;
   showTime: boolean;
   showUser: boolean;
-  tags: string[];
+  tags: Array<string>;
 }
 
 export const defaultPanelOptions: Partial<PanelOptions> = {
@@ -36,4 +35,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   showUser: true,
   tags: [],
 };
-

public/app/plugins/panel/barchart/models.gen.ts

@@ -7,22 +7,56 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip, ui.OptionsWithTextFormatting {
+  /**
+   * TODO docs
+   */
   barRadius?: number;
+  /**
+   * Controls the width of bars. 1 = Max width, 0 = Min width.
+   */
   barWidth: number;
+  /**
+   * TODO docs
+   */
   colorByField?: string;
+  /**
+   * Controls the width of groups. 1 = max with, 0 = min width.
+   */
   groupWidth: number;
+  /**
+   * TODO docs
+   */
   orientation: ui.VizOrientation;
+  /**
+   * This controls whether values are shown on top or to the left of bars.
+   */
   showValue: ui.VisibilityMode;
+  /**
+   * TODO docs
+   */
   stacking: ui.StackingMode;
+  /**
+   * TODO docs
+   */
   xField?: string;
+  /**
+   * TODO docs
+   */
   xTickLabelMaxLength: number;
+  /**
+   * TODO docs
+   */
   xTickLabelRotation: number;
+  /**
+   * TODO docs
+   * negative values indicate backwards skipping behavior
+   */
   xTickLabelSpacing?: number;
 }
 
@@ -38,8 +72,18 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
 };
 
 export interface PanelFieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
+  /**
+   * Controls the fill opacity of the bars.
+   */
   fillOpacity?: number;
+  /**
+   * Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option.
+   * Gradient appearance is influenced by the Fill opacity setting.
+   */
   gradientMode?: ui.GraphGradientMode;
+  /**
+   * Controls line width of the bars.
+   */
   lineWidth?: number;
 }
 
@@ -48,4 +92,3 @@ export const defaultPanelFieldConfig: Partial<PanelFieldConfig> = {
   gradientMode: ui.GraphGradientMode.None,
   lineWidth: 1,
 };
-

public/app/plugins/panel/bargauge/models.gen.ts

@@ -7,11 +7,11 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions extends ui.SingleStatBaseOptions {
   displayMode: ui.BarGaugeDisplayMode;
   minVizHeight: number;
@@ -25,4 +25,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   minVizWidth: 0,
   showUnfilled: true,
 };
-

public/app/plugins/panel/dashlist/models.gen.ts

@@ -10,7 +10,6 @@
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export enum PanelLayout {
   List = 'list',
   Previews = 'previews',
@@ -25,7 +24,7 @@ export interface PanelOptions {
   showRecentlyViewed: boolean;
   showSearch: boolean;
   showStarred: boolean;
-  tags: string[];
+  tags: Array<string>;
 }
 
 export const defaultPanelOptions: Partial<PanelOptions> = {
@@ -38,4 +37,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   showStarred: true,
   tags: [],
 };
-

public/app/plugins/panel/gauge/models.gen.ts

@@ -7,11 +7,11 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions extends ui.SingleStatBaseOptions {
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
@@ -21,4 +21,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   showThresholdLabels: false,
   showThresholdMarkers: true,
 };
-

public/app/plugins/panel/histogram/models.gen.ts

@@ -7,14 +7,23 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions extends ui.OptionsWithLegend, ui.OptionsWithTooltip {
+  /**
+   * Offset buckets by this amount
+   */
   bucketOffset?: number;
+  /**
+   * Size of each bucket
+   */
   bucketSize?: number;
+  /**
+   * Combines multiple series into a single histogram
+   */
   combine?: boolean;
 }
 
@@ -23,8 +32,18 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
 };
 
 export interface PanelFieldConfig extends ui.AxisConfig, ui.HideableFieldConfig {
+  /**
+   * Controls the fill opacity of the bars.
+   */
   fillOpacity?: number;
+  /**
+   * Set the mode of the gradient fill. Fill gradient is based on the line color. To change the color, use the standard color scheme field option.
+   * Gradient appearance is influenced by the Fill opacity setting.
+   */
   gradientMode?: ui.GraphGradientMode;
+  /**
+   * Controls line width of the bars.
+   */
   lineWidth?: number;
 }
 
@@ -33,4 +52,3 @@ export const defaultPanelFieldConfig: Partial<PanelFieldConfig> = {
   gradientMode: ui.GraphGradientMode.None,
   lineWidth: 1,
 };
-

public/app/plugins/panel/news/models.gen.ts

@@ -10,8 +10,10 @@
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions {
+  /**
+   * empty/missing will default to grafana blog
+   */
   feedUrl?: string;
   showImage?: boolean;
 }
@@ -19,4 +21,3 @@ export interface PanelOptions {
 export const defaultPanelOptions: Partial<PanelOptions> = {
   showImage: true,
 };
-

public/app/plugins/panel/piechart/models.gen.ts

@@ -7,29 +7,43 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
+/**
+ * Select the pie chart display style.
+ */
 export enum PieChartType {
   Donut = 'donut',
   Pie = 'pie',
 }
 
+/**
+ * Select labels to display on the pie chart.
+ *  - Name - The series or field name.
+ *  - Percent - The percentage of the whole.
+ *  - Value - The raw numerical value.
+ */
 export enum PieChartLabels {
   Name = 'name',
   Percent = 'percent',
   Value = 'value',
 }
 
+/**
+ * Select values to display in the legend.
+ *  - Percent: The percentage of the whole.
+ *  - Value: The raw numerical value.
+ */
 export enum PieChartLegendValues {
   Percent = 'percent',
   Value = 'value',
 }
 
 export interface PieChartLegendOptions extends ui.VizLegendOptions {
-  values: PieChartLegendValues[];
+  values: Array<PieChartLegendValues>;
 }
 
 export const defaultPieChartLegendOptions: Partial<PieChartLegendOptions> = {
@@ -37,7 +51,7 @@ export const defaultPieChartLegendOptions: Partial<PieChartLegendOptions> = {
 };
 
 export interface PanelOptions extends ui.OptionsWithTooltip, ui.SingleStatBaseOptions {
-  displayLabels: PieChartLabels[];
+  displayLabels: Array<PieChartLabels>;
   legend: PieChartLegendOptions;
   pieType: PieChartType;
 }
@@ -47,4 +61,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
 };
 
 export interface PanelFieldConfig extends ui.HideableFieldConfig {}
-

public/app/plugins/panel/stat/models.gen.ts

@@ -7,11 +7,11 @@
 // Run `make gen-cue` from repository root to regenerate.
 
 
+
 import * as ui from '@grafana/schema';
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export interface PanelOptions extends ui.SingleStatBaseOptions {
   colorMode: ui.BigValueColorMode;
   graphMode: ui.BigValueGraphMode;
@@ -25,4 +25,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   justifyMode: ui.BigValueJustifyMode.Auto,
   textMode: ui.BigValueTextMode.Auto,
 };
-

public/app/plugins/panel/text/models.gen.ts

@@ -10,7 +10,6 @@
 
 export const PanelModelVersion = Object.freeze([0, 0]);
 
-
 export enum TextMode {
   Code = 'code',
   HTML = 'html',
@@ -32,6 +31,9 @@ export enum CodeLanguage {
 export const defaultCodeLanguage: CodeLanguage = CodeLanguage.Plaintext;
 
 export interface CodeOptions {
+  /**
+   * The language passed to monaco code editor
+   */
   language: CodeLanguage;
   showLineNumbers: boolean;
   showMiniMap: boolean;
@@ -55,4 +57,3 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
 For markdown syntax help: [commonmark.org/help](https://commonmark.org/help/)`,
   mode: TextMode.Markdown,
 };
-