Cue: Use BarGauge, DashList and Gauge panel cue schemas (#49580)

* user essentials mob! 🔱

* Wip

* user essentials mob! 🔱

lastFile:public/app/plugins/panel/bargauge/module.tsx

* user essentials mob! 🔱

* update betterer results file

Co-authored-by: kay delaney <kay@grafana.com>
Co-authored-by: Levente Balogh <balogh.levente.hu@gmail.com>
Co-authored-by: Joao Silva <joao.silva@grafana.com>

.betterer.results

@@ -242,7 +242,7 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/prometheus/configuration/AzureCredentialsForm.test.tsx:3424320489": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:1597135392": [
+    "public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx:3368730691": [
       [0, 31, 13, "RegExp match", "2409514259"]
     ]
   }`

pkg/cmd/grafana-cli/commands/cuetsify_command.go

@@ -39,10 +39,7 @@ var importMap = map[string]string{
 // to rely on the TypeScript auto-generated by cuetsy for that particular file.
 var skipPaths = []string{
 	"public/app/plugins/panel/barchart/models.cue",
-	"public/app/plugins/panel/bargauge/models.cue",
 	"public/app/plugins/panel/canvas/models.cue",
-	"public/app/plugins/panel/dashlist/models.cue",
-	"public/app/plugins/panel/gauge/models.cue",
 	"public/app/plugins/panel/histogram/models.cue",
 	"public/app/plugins/panel/heatmap-new/models.cue",
 	"public/app/plugins/panel/candlestick/models.cue",

public/app/plugins/panel/bargauge/BarGaugeMigrations.ts

@@ -1,8 +1,8 @@
 import { PanelModel } from '@grafana/data';
 import { sharedSingleStatMigrationHandler } from '@grafana/ui';
 
-import { BarGaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
-export const barGaugePanelMigrationHandler = (panel: PanelModel<BarGaugeOptions>): Partial<BarGaugeOptions> => {
+export const barGaugePanelMigrationHandler = (panel: PanelModel<PanelOptions>): Partial<PanelOptions> => {
   return sharedSingleStatMigrationHandler(panel);
 };

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -16,7 +16,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { BarGaugeDisplayMode } from '@grafana/ui';
 
 import { BarGaugePanel } from './BarGaugePanel';
-import { BarGaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
 const valueSelector = selectors.components.Panels.Visualization.BarGauge.valueV2;
 
@@ -64,10 +64,10 @@ function createTimeRange(): TimeRange {
   };
 }
 
-function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<BarGaugeOptions>> {
+function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<PanelOptions>> {
   const timeRange = createTimeRange();
 
-  const options: BarGaugeOptions = {
+  const options: PanelOptions = {
     displayMode: BarGaugeDisplayMode.Lcd,
     reduceOptions: {
       calcs: ['mean'],

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -16,9 +16,9 @@ import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProp
 import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/DataLinksContextMenu';
 import { config } from 'app/core/config';
 
-import { BarGaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
-export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
+export class BarGaugePanel extends PureComponent<PanelProps<PanelOptions>> {
   renderComponent = (
     valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>,
     menuProps: DataLinksContextMenuApi

public/app/plugins/panel/bargauge/models.cue

@@ -22,8 +22,10 @@ Panel: {
             {
                 PanelOptions: {
                     ui.SingleStatBaseOptions
-                    displayMode: ui.BarGaugeDisplayMode
+                    displayMode: ui.BarGaugeDisplayMode | *"gradient"
-                    showUnfilled: bool
+                    showUnfilled: bool | *true
+                    minVizWidth: uint32 | *0
+                    minVizHeight: uint32 | *10
                 } @cuetsy(kind="interface")
             }
         ]

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

@@ -0,0 +1,22 @@
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// This file was autogenerated by cuetsy. DO NOT EDIT!
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+import * as ui from '@grafana/schema';
+
+export const modelVersion = Object.freeze([0, 0]);
+
+
+export interface PanelOptions extends ui.SingleStatBaseOptions {
+  displayMode: ui.BarGaugeDisplayMode;
+  minVizHeight: number;
+  minVizWidth: number;
+  showUnfilled: boolean;
+}
+
+export const defaultPanelOptions: Partial<PanelOptions> = {
+  displayMode: ui.BarGaugeDisplayMode.Gradient,
+  minVizHeight: 10,
+  minVizWidth: 0,
+  showUnfilled: true,
+};

public/app/plugins/panel/bargauge/module.tsx

@@ -1,14 +1,15 @@
 import { PanelPlugin, VizOrientation } from '@grafana/data';
+import { BarGaugeDisplayMode } from '@grafana/schema';
 import { commonOptionsBuilder, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 
 import { addOrientationOption, addStandardDataReduceOptions } from '../stat/common';
 
 import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
 import { BarGaugePanel } from './BarGaugePanel';
+import { PanelOptions, defaultPanelOptions } from './models.gen';
 import { BarGaugeSuggestionsSupplier } from './suggestions';
-import { BarGaugeOptions, displayModes } from './types';
 
-export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
+export const plugin = new PanelPlugin<PanelOptions>(BarGaugePanel)
   .useFieldConfig()
   .setPanelOptions((builder) => {
     addStandardDataReduceOptions(builder);
@@ -20,30 +21,34 @@ export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
         path: 'displayMode',
         name: 'Display mode',
         settings: {
-          options: displayModes,
+          options: [
+            { value: BarGaugeDisplayMode.Gradient, label: 'Gradient' },
+            { value: BarGaugeDisplayMode.Lcd, label: 'Retro LCD' },
+            { value: BarGaugeDisplayMode.Basic, label: 'Basic' },
+          ],
         },
-        defaultValue: 'gradient',
+        defaultValue: defaultPanelOptions.displayMode,
       })
       .addBooleanSwitch({
         path: 'showUnfilled',
         name: 'Show unfilled area',
         description: 'When enabled renders the unfilled region as gray',
-        defaultValue: true,
+        defaultValue: defaultPanelOptions.showUnfilled,
-        showIf: (options: BarGaugeOptions) => options.displayMode !== 'lcd',
+        showIf: (options) => options.displayMode !== 'lcd',
       })
       .addNumberInput({
         path: 'minVizWidth',
         name: 'Min width',
         description: 'Minimum column width',
-        defaultValue: 0,
+        defaultValue: defaultPanelOptions.minVizWidth,
-        showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Vertical,
+        showIf: (options) => options.orientation === VizOrientation.Vertical,
       })
       .addNumberInput({
         path: 'minVizHeight',
         name: 'Min height',
         description: 'Minimum row height',
-        defaultValue: 10,
+        defaultValue: defaultPanelOptions.minVizHeight,
-        showIf: (options: BarGaugeOptions) => options.orientation === VizOrientation.Horizontal,
+        showIf: (options) => options.orientation === VizOrientation.Horizontal,
       });
   })
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)

public/app/plugins/panel/bargauge/suggestions.ts

@@ -2,7 +2,7 @@ import { VisualizationSuggestionsBuilder, VizOrientation } from '@grafana/data';
 import { BarGaugeDisplayMode } from '@grafana/ui';
 import { SuggestionName } from 'app/types/suggestions';
 
-import { BarGaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
 export class BarGaugeSuggestionsSupplier {
   getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
@@ -12,7 +12,7 @@ export class BarGaugeSuggestionsSupplier {
       return;
     }
 
-    const list = builder.getListAppender<BarGaugeOptions, {}>({
+    const list = builder.getListAppender<PanelOptions, {}>({
       name: '',
       pluginId: 'bargauge',
       options: {},

public/app/plugins/panel/bargauge/types.ts

@@ -1,15 +0,0 @@
-import { SelectableValue } from '@grafana/data';
-import { SingleStatBaseOptions, BarGaugeDisplayMode } from '@grafana/ui';
-
-export interface BarGaugeOptions extends SingleStatBaseOptions {
-  displayMode: BarGaugeDisplayMode;
-  showUnfilled: boolean;
-  minVizWidth: number;
-  minVizHeight: number;
-}
-
-export const displayModes: Array<SelectableValue<string>> = [
-  { value: BarGaugeDisplayMode.Gradient, label: 'Gradient' },
-  { value: BarGaugeDisplayMode.Lcd, label: 'Retro LCD' },
-  { value: BarGaugeDisplayMode.Basic, label: 'Basic' },
-];

public/app/plugins/panel/dashlist/models.cue

@@ -18,8 +18,9 @@ Panel: {
     lineages: [
         [
             {
+                PanelLayout: "list" | "previews" @cuetsy(kind="enum")
                 PanelOptions: {
-                    layout?: *"list" | "previews"
+                    layout?: PanelLayout | *"list"
                     showStarred: bool | *true
                     showRecentlyViewed: bool | *false
                     showSearch: bool | *false

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

@@ -1,17 +1,19 @@
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// This file was almost autogenerated by cuetsy.
+// This file was autogenerated by cuetsy. DO NOT EDIT!
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+
 export const modelVersion = Object.freeze([0, 0]);
 
+
 export enum PanelLayout {
   List = 'list',
   Previews = 'previews',
 }
 
 export interface PanelOptions {
-  layout?: PanelLayout;
   folderId?: number;
+  layout?: PanelLayout;
   maxItems: number;
   query: string;
   showHeadings: boolean;
@@ -21,7 +23,7 @@ export interface PanelOptions {
   tags: string[];
 }
 
-export const defaultPanelOptions: PanelOptions = {
+export const defaultPanelOptions: Partial<PanelOptions> = {
   layout: PanelLayout.List,
   maxItems: 10,
   query: '',

public/app/plugins/panel/gauge/GaugeMigrations.ts

@@ -1,21 +1,21 @@
 import { PanelModel } from '@grafana/data';
 import { sharedSingleStatPanelChangedHandler, sharedSingleStatMigrationHandler } from '@grafana/ui';
 
-import { GaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
 // This is called when the panel first loads
-export const gaugePanelMigrationHandler = (panel: PanelModel<GaugeOptions>): Partial<GaugeOptions> => {
+export const gaugePanelMigrationHandler = (panel: PanelModel<PanelOptions>): Partial<PanelOptions> => {
   return sharedSingleStatMigrationHandler(panel);
 };
 
 // This is called when the panel changes from another panel
 export const gaugePanelChangedHandler = (
-  panel: PanelModel<Partial<GaugeOptions>> | any,
+  panel: PanelModel<Partial<PanelOptions>> | any,
   prevPluginId: string,
   prevOptions: any
 ) => {
   // This handles most config changes
-  const opts = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) as GaugeOptions;
+  const opts = sharedSingleStatPanelChangedHandler(panel, prevPluginId, prevOptions) as PanelOptions;
 
   // Changing from angular singlestat
   if (prevPluginId === 'singlestat' && prevOptions.angular) {

public/app/plugins/panel/gauge/GaugePanel.tsx

@@ -7,9 +7,9 @@ import { config } from 'app/core/config';
 
 import { clearNameForSingleSeries } from '../bargauge/BarGaugePanel';
 
-import { GaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
-export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
+export class GaugePanel extends PureComponent<PanelProps<PanelOptions>> {
   renderComponent = (
     valueProps: VizRepeaterRenderValueProps<FieldDisplay>,
     menuProps: DataLinksContextMenuApi

public/app/plugins/panel/gauge/models.cue

@@ -22,8 +22,8 @@ Panel: {
             {
                 PanelOptions: {
                     ui.SingleStatBaseOptions
-                    showThresholdLabels: bool
+                    showThresholdLabels: bool | *false
-                    showThresholdMarkers: bool
+                    showThresholdMarkers: bool | *true
                 } @cuetsy(kind="interface")
             }
         ]

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

@@ -0,0 +1,18 @@
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// This file was autogenerated by cuetsy. DO NOT EDIT!
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+import * as ui from '@grafana/schema';
+
+export const modelVersion = Object.freeze([0, 0]);
+
+
+export interface PanelOptions extends ui.SingleStatBaseOptions {
+  showThresholdLabels: boolean;
+  showThresholdMarkers: boolean;
+}
+
+export const defaultPanelOptions: Partial<PanelOptions> = {
+  showThresholdLabels: false,
+  showThresholdMarkers: true,
+};

public/app/plugins/panel/gauge/module.tsx

@@ -5,10 +5,10 @@ import { addOrientationOption, addStandardDataReduceOptions } from '../stat/comm
 
 import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
 import { GaugePanel } from './GaugePanel';
+import { PanelOptions, defaultPanelOptions } from './models.gen';
 import { GaugeSuggestionsSupplier } from './suggestions';
-import { GaugeOptions } from './types';
 
-export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
+export const plugin = new PanelPlugin<PanelOptions>(GaugePanel)
   .useFieldConfig()
   .setPanelOptions((builder) => {
     addStandardDataReduceOptions(builder);
@@ -19,13 +19,13 @@ export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
         path: 'showThresholdLabels',
         name: 'Show threshold labels',
         description: 'Render the threshold values around the gauge bar',
-        defaultValue: false,
+        defaultValue: defaultPanelOptions.showThresholdLabels,
       })
       .addBooleanSwitch({
         path: 'showThresholdMarkers',
         name: 'Show threshold markers',
         description: 'Renders the thresholds as an outer bar',
-        defaultValue: true,
+        defaultValue: defaultPanelOptions.showThresholdMarkers,
       });
 
     commonOptionsBuilder.addTextSizeOptions(builder);

public/app/plugins/panel/gauge/suggestions.ts

@@ -1,7 +1,7 @@
 import { ThresholdsMode, VisualizationSuggestionsBuilder } from '@grafana/data';
 import { SuggestionName } from 'app/types/suggestions';
 
-import { GaugeOptions } from './types';
+import { PanelOptions } from './models.gen';
 
 export class GaugeSuggestionsSupplier {
   getSuggestionsForData(builder: VisualizationSuggestionsBuilder) {
@@ -16,7 +16,7 @@ export class GaugeSuggestionsSupplier {
       return;
     }
 
-    const list = builder.getListAppender<GaugeOptions, {}>({
+    const list = builder.getListAppender<PanelOptions, {}>({
       name: SuggestionName.Gauge,
       pluginId: 'gauge',
       options: {},

public/app/plugins/panel/gauge/types.ts

@@ -1,13 +0,0 @@
-import { VizOrientation, SelectableValue } from '@grafana/data';
-import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
-
-export interface GaugeOptions extends SingleStatBaseOptions {
-  showThresholdLabels: boolean;
-  showThresholdMarkers: boolean;
-}
-
-export const orientationOptions: Array<SelectableValue<VizOrientation>> = [
-  { value: VizOrientation.Auto, label: 'Auto' },
-  { value: VizOrientation.Horizontal, label: 'Horizontal' },
-  { value: VizOrientation.Vertical, label: 'Vertical' },
-];