Schema: move existing grafana/ui models into schema (#38469)

packages/grafana-schema/src/index.ts

@@ -6,3 +6,5 @@
 export * from './schema/legend.gen';
 export * from './schema/tooltip.gen';
 export * from './schema/text.gen';
+export * from './schema/table.gen';
+export * from './schema/graph.gen';

packages/grafana-schema/src/schema/graph.cue

@@ -1,88 +1,72 @@
-package grafanaschema
-
-AxisPlacement: "auto" | "top" | "right" | "bottom" | "left" | "hidden" @cuetsy(targetType="enum")
-PointVisibility: "auto" | "never" | "always" @cuetsy(targetType="enum")
-DrawStyle: "line" | "bars" | "points" @cuetsy(targetType="enum")
-LineInterpolation: "linear" | "smooth" | "stepBefore" | "stepAfter" @cuetsy(targetType="enum")
-ScaleDistribution: "linear" | "log" | "ordinal" @cuetsy(targetType="enum")
-GraphGradientMode: "none" | "opacity" | "hue" | "scheme" @cuetsy(targetType="enum")
+AxisPlacement:        "auto" | "top" | "right" | "bottom" | "left" | "hidden" @cuetsy(targetType="enum")
+PointVisibility:      "auto" | "never" | "always"                             @cuetsy(targetType="enum")
+DrawStyle:            "line" | "bars" | "points"                              @cuetsy(targetType="enum")
+LineInterpolation:    "linear" | "smooth" | "stepBefore" | "stepAfter"        @cuetsy(targetType="enum")
+ScaleDistribution:    "linear" | "log"                                        @cuetsy(targetType="enum")
+GraphGradientMode:    "none" | "opacity" | "hue" | "scheme"                   @cuetsy(targetType="enum")
 StackingMode: "none" | "normal" | "percent" @cuetsy(targetType="enum")
 BarValueVisibility: "auto" | "never" | "always" @cuetsy(targetType="enum")
 BarAlignment: -1 | 0 | 1 @cuetsy(targetType="enum",memberNames="Before|Center|After")
 ScaleOrientation: 0 | 1 @cuetsy(targetType="enum",memberNames="Horizontal|Vertical")
 ScaleDirection: 1 | 1 | -1 | -1 @cuetsy(targetType="enum",memberNames="Up|Right|Down|Left")
-
 LineStyle: {
-  fill?: "solid" | "dash" | "dot" | "square"
-  dash?: [...number]
+	fill?: "solid" | "dash" | "dot" | "square"
+	dash?: [...number]
 } @cuetsy(targetType="interface")
-
 LineConfig: {
-  lineColor?: string
-  lineWidth?: number
-  lineInterpolation?: LineInterpolation
-  lineStyle?: LineStyle
-  spanNulls?: bool | number
+	lineColor?:         string
+	lineWidth?:         number
+	lineInterpolation?: LineInterpolation
+	lineStyle?:         LineStyle
+	spanNulls?:         bool | number
 } @cuetsy(targetType="interface")
-
 BarConfig: {
-  barAlignment?: BarAlignment
-  barWidthFactor?: number
-  barMaxWidth?: number
+	barAlignment?: BarAlignment
+	barWidthFactor?: number
+	barMaxWidth?: number
 } @cuetsy(targetType="interface")
-
 FillConfig: {
-  fillColor?: string
-  fillOpacity?: number
-  fillBelowTo?: string
+	fillColor?:   string
+	fillOpacity?: number
+	fillBelowTo?: string
 } @cuetsy(targetType="interface")
-
 PointsConfig: {
-  showPoints?: PointVisibility
-  pointSize?: number
-  pointColor?: string
-  pointSymbol?: string
+	showPoints?:  PointVisibility
+	pointSize?:   number
+	pointColor?:  string
+	pointSymbol?: string
 } @cuetsy(targetType="interface")
-
 ScaleDistributionConfig: {
-  type: ScaleDistribution
-  log?: number
+	type: ScaleDistribution
+	log?: number
 } @cuetsy(targetType="interface")
-
 AxisConfig: {
-  axisPlacement?: AxisPlacement
-  axisLabel?: string
-  axisWidth?: number
-  axisSoftMin?: number
-  axisSoftMax?: number
-  scaleDistribution?: ScaleDistributionConfig
+	axisPlacement?:     AxisPlacement
+	axisLabel?:         string
+	axisWidth?:         number
+	axisSoftMin?:       number
+	axisSoftMax?:       number
+	scaleDistribution?: ScaleDistributionConfig
 } @cuetsy(targetType="interface")
-
 HideSeriesConfig: {
-  tooltip: bool
-  legend: bool
-  viz: bool
+	tooltip: bool
+	legend:  bool
+	viz:   bool
 } @cuetsy(targetType="interface")
-
 StackingConfig: {
   mode?: StackingMode
   group?: string
 } @cuetsy(targetType="interface")
-
 StackableFieldConfig: {
   stacking?: StackingConfig
 } @cuetsy(targetType="interface")
-
 HideableFieldConfig: {
   hideFrom?: HideSeriesConfig
 } @cuetsy(targetType="interface")
-
 GraphTresholdsStyleMode: "off" | "line" | "area" | "line+area" | "series" @cuetsy(targetType="enum",memberNames="Off|Line|Area|LineAndArea|Series")
-
 GraphThresholdsStyleConfig: {
   mode: GraphTresholdsStyleMode
 } @cuetsy(targetType="interface")
-
 GraphFieldConfig: {
   LineConfig
   FillConfig
@@ -94,4 +78,4 @@ GraphFieldConfig: {
   drawStyle?: DrawStyle
   gradientMode?: GraphGradientMode
   thresholdsStyle?: GraphThresholdsStyleConfig
-} @cuetsy(targetType="interface")
+} @cuetsy(targetType="interface")

packages/grafana-schema/src/schema/graph.gen.ts

@@ -0,0 +1,213 @@
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// NOTE: This file will be auto generated from models.cue
+// It is currenty hand written but will serve as the target for cuetsy
+//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+export enum AxisPlacement {
+  Auto = 'auto',
+  Bottom = 'bottom',
+  Hidden = 'hidden',
+  Left = 'left',
+  Right = 'right',
+  Top = 'top',
+}
+export enum PointVisibility {
+  Always = 'always',
+  Auto = 'auto',
+  Never = 'never',
+}
+export enum DrawStyle {
+  Bars = 'bars',
+  Line = 'line',
+  Points = 'points',
+}
+export enum LineInterpolation {
+  Linear = 'linear',
+  Smooth = 'smooth',
+  StepAfter = 'stepAfter',
+  StepBefore = 'stepBefore',
+}
+/**
+ * @alpha
+ */
+export enum ScaleDistribution {
+  Linear = 'linear',
+  Log = 'log',
+  Ordinal = 'ordinal',
+}
+export enum GraphGradientMode {
+  Hue = 'hue',
+  None = 'none',
+  Opacity = 'opacity',
+  Scheme = 'scheme',
+}
+export interface LineStyle {
+  dash?: number[];
+  fill?: 'solid' | 'dash' | 'dot' | 'square';
+}
+
+export interface PointsConfig {
+  pointColor?: string;
+  pointSize?: number;
+  pointSymbol?: string;
+  showPoints?: PointVisibility;
+}
+export interface ScaleDistributionConfig {
+  log?: number;
+  type: ScaleDistribution;
+}
+export interface HideSeriesConfig {
+  viz: boolean;
+  legend: boolean;
+  tooltip: boolean;
+}
+
+/**
+ * @alpha
+ */
+export enum BarAlignment {
+  Before = -1,
+  Center = 0,
+  After = 1,
+}
+
+/**
+ * @alpha
+ */
+export enum BarValueVisibility {
+  Auto = 'auto',
+  Never = 'never',
+  Always = 'always',
+}
+
+/**
+ * @alpha
+ */
+export enum ScaleOrientation {
+  Horizontal = 0,
+  Vertical = 1,
+}
+
+/**
+ * @alpha
+ */
+
+export enum ScaleDirection {
+  Up = 1,
+  Right = 1,
+  Down = -1,
+  Left = -1,
+}
+
+/**
+ * @alpha
+ */
+export interface LineConfig {
+  lineColor?: string;
+  lineWidth?: number;
+  lineInterpolation?: LineInterpolation;
+  lineStyle?: LineStyle;
+
+  /**
+   * Indicate if null values should be treated as gaps or connected.
+   * When the value is a number, it represents the maximum delta in the
+   * X axis that should be considered connected.  For timeseries, this is milliseconds
+   */
+  spanNulls?: boolean | number;
+}
+
+/**
+ * @alpha
+ */
+export interface BarConfig {
+  barAlignment?: BarAlignment;
+  barWidthFactor?: number;
+  barMaxWidth?: number;
+}
+
+/**
+ * @alpha
+ */
+export interface FillConfig {
+  fillColor?: string;
+  fillOpacity?: number;
+  fillBelowTo?: string; // name of the field
+}
+
+/**
+ * @alpha
+ * Axis is actually unique based on the unit... not each field!
+ */
+export interface AxisConfig {
+  axisPlacement?: AxisPlacement;
+  axisLabel?: string;
+  axisWidth?: number; // pixels ideally auto?
+  axisSoftMin?: number;
+  axisSoftMax?: number;
+  scaleDistribution?: ScaleDistributionConfig;
+}
+
+/**
+ * @alpha
+ */
+export interface HideableFieldConfig {
+  hideFrom?: HideSeriesConfig;
+}
+
+/**
+ * @alpha
+ */
+export enum StackingMode {
+  None = 'none',
+  Normal = 'normal',
+  Percent = 'percent',
+}
+
+/**
+ * @alpha
+ */
+export interface StackingConfig {
+  mode?: StackingMode;
+  group?: string;
+}
+
+/**
+ * @alpha
+ */
+export interface StackableFieldConfig {
+  stacking?: StackingConfig;
+}
+
+/**
+ * @alpha
+ */
+export enum GraphTresholdsStyleMode {
+  Off = 'off',
+  Line = 'line',
+  Area = 'area',
+  LineAndArea = 'line+area',
+  Series = 'series',
+}
+
+/**
+ * @alpha
+ */
+export interface GraphThresholdsStyleConfig {
+  mode: GraphTresholdsStyleMode;
+}
+
+/**
+ * @alpha
+ */
+export interface GraphFieldConfig
+  extends LineConfig,
+    FillConfig,
+    PointsConfig,
+    AxisConfig,
+    BarConfig,
+    StackableFieldConfig,
+    HideableFieldConfig {
+  drawStyle?: DrawStyle;
+  gradientMode?: GraphGradientMode;
+  thresholdsStyle?: GraphThresholdsStyleConfig;
+}

packages/grafana-schema/src/schema/table.cue

@@ -1,5 +1,4 @@
-package grafanaschema
-
+// TODO -- should not be table specific!
 FieldTextAlignment: "auto" | "left" | "right" | "center" @cuetsy(targetType="type")
 
 TableCellDisplayMode: {
@@ -20,9 +19,3 @@ TableFieldOptions: {
   displayMode: TableCellDisplayMode | *"auto"
   hidden?: bool  // ?? default is missing or false ??
 } @cuetsy(targetType="interface")
-
-
-TableSortByFieldState: {
-  displayName: string
-  desc?: bool
-} @cuetsy(targetType="interface")

packages/grafana-schema/src/schema/table.gen.ts

@@ -0,0 +1,21 @@
+export interface TableFieldOptions {
+  width: number;
+  minWidth: number;
+  align: FieldTextAlignment;
+  displayMode: TableCellDisplayMode;
+  hidden?: boolean;
+}
+
+export enum TableCellDisplayMode {
+  Auto = 'auto',
+  ColorText = 'color-text',
+  ColorBackground = 'color-background',
+  ColorBackgroundSolid = 'color-background-solid',
+  GradientGauge = 'gradient-gauge',
+  LcdGauge = 'lcd-gauge',
+  JSONView = 'json-view',
+  BasicGauge = 'basic',
+  Image = 'image',
+}
+
+export type FieldTextAlignment = 'auto' | 'left' | 'right' | 'center';

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -9,7 +9,7 @@ import { calculateFontSize } from '../../utils/measureText';
 // Types
 import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from './BigValue';
 import { getTextColorForBackground } from '../../utils';
-import { DrawStyle, GraphFieldConfig } from '../uPlot/config';
+import { DrawStyle, GraphFieldConfig } from '@grafana/schema';
 import { Sparkline } from '../Sparkline/Sparkline';
 
 const LINE_HEIGHT = 1.2;

packages/grafana-ui/src/components/GraphNG/utils.test.ts

@@ -20,7 +20,7 @@ import {
   LineInterpolation,
   PointVisibility,
   StackingMode,
-} from '..';
+} from '@grafana/schema';
 
 function mockDataFrame() {
   const df1 = new MutableDataFrame({

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -16,7 +16,7 @@ import {
   PointVisibility,
   ScaleDirection,
   ScaleOrientation,
-} from '../uPlot/config';
+} from '@grafana/schema';
 import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 import { UPlotChart } from '../uPlot/Plot';
 import { Themeable2 } from '../../types';

packages/grafana-ui/src/components/Sparkline/utils.ts

@@ -1,5 +1,5 @@
 import { DataFrame, FieldConfig, FieldSparkline, IndexVector } from '@grafana/data';
-import { GraphFieldConfig } from '../uPlot/config';
+import { GraphFieldConfig } from '@grafana/schema';
 
 /** @internal
  * Given a sparkline config returns a DataFrame ready to be turned into Plot data set

packages/grafana-ui/src/components/Table/types.ts

@@ -3,27 +3,7 @@ import { Field } from '@grafana/data';
 import { TableStyles } from './styles';
 import { CSSProperties, FC } from 'react';
 
-export interface TableFieldOptions {
-  width: number;
-  minWidth: number;
-  align: FieldTextAlignment;
-  displayMode: TableCellDisplayMode;
-  hidden?: boolean;
-}
-
-export enum TableCellDisplayMode {
-  Auto = 'auto',
-  ColorText = 'color-text',
-  ColorBackground = 'color-background',
-  ColorBackgroundSolid = 'color-background-solid',
-  GradientGauge = 'gradient-gauge',
-  LcdGauge = 'lcd-gauge',
-  JSONView = 'json-view',
-  BasicGauge = 'basic',
-  Image = 'image',
-}
-
-export type FieldTextAlignment = 'auto' | 'left' | 'right' | 'center';
+export { TableFieldOptions, TableCellDisplayMode, FieldTextAlignment } from '@grafana/schema';
 
 export interface TableRow {
   [x: string]: any;

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -23,7 +23,7 @@ import {
   PointVisibility,
   ScaleDirection,
   ScaleOrientation,
-} from '../uPlot/config';
+} from '@grafana/schema';
 import { collectStackingGroups, preparePlotData } from '../uPlot/utils';
 import uPlot from 'uplot';
 

packages/grafana-ui/src/components/index.ts

@@ -237,7 +237,6 @@ export { LegacyForms, LegacyInputStatus };
 
 // WIP, need renames and exports cleanup
 export * from './uPlot/config';
-export { ScaleDistribution } from './uPlot/models.gen';
 export { UPlotConfigBuilder, UPlotConfigPrepFn } from './uPlot/config/UPlotConfigBuilder';
 export { UPlotChart } from './uPlot/Plot';
 export { PlotLegend } from './uPlot/PlotLegend';

packages/grafana-ui/src/components/uPlot/Plot.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UPlotChart } from './Plot';
 import { render } from '@testing-library/react';
 import { ArrayVector, dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
-import { GraphFieldConfig, DrawStyle } from '../uPlot/config';
+import { GraphFieldConfig, DrawStyle } from '@grafana/schema';
 import uPlot from 'uplot';
 import createMockRaf from 'mock-raf';
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -9,8 +9,7 @@ import {
 } from '@grafana/data';
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
 import { VizLegendItem } from '../VizLegend/types';
-import { VizLegendOptions } from '@grafana/schema';
-import { AxisPlacement } from './config';
+import { VizLegendOptions, AxisPlacement } from '@grafana/schema';
 import { VizLayout, VizLayoutLegendProps } from '../VizLayout/VizLayout';
 import { VizLegend } from '../VizLegend/VizLegend';
 import { useTheme2 } from '../../themes';

packages/grafana-ui/src/components/uPlot/config.ts

@@ -1,239 +1,14 @@
 import { SelectableValue } from '@grafana/data';
-import { ScaleDistribution } from './models.gen';
-
-/**
- * @alpha
- */
-export enum AxisPlacement {
-  Auto = 'auto', // First axis on the left, the rest on the right
-  Top = 'top',
-  Right = 'right',
-  Bottom = 'bottom',
-  Left = 'left',
-  Hidden = 'hidden',
-}
-
-/**
- * @alpha
- */
-export enum PointVisibility {
-  Auto = 'auto', // will show points when the density is low or line is hidden
-  Never = 'never',
-  Always = 'always',
-}
-
-/**
- * @alpha
- */
-export enum DrawStyle {
-  Line = 'line', // default
-  Bars = 'bars', // will also have a gap percent
-  Points = 'points', // Only show points
-}
-
-/**
- * @alpha
- */
-export enum LineInterpolation {
-  Linear = 'linear',
-  Smooth = 'smooth',
-  StepBefore = 'stepBefore',
-  StepAfter = 'stepAfter',
-}
-
-/**
- * @alpha
- */
-export enum BarAlignment {
-  Before = -1,
-  Center = 0,
-  After = 1,
-}
-
-/**
- * @alpha
- */
-export enum BarValueVisibility {
-  Auto = 'auto',
-  Never = 'never',
-  Always = 'always',
-}
-
-/**
- * @alpha
- */
-export enum ScaleOrientation {
-  Horizontal = 0,
-  Vertical = 1,
-}
-
-/**
- * @alpha
- */
-
-export enum ScaleDirection {
-  Up = 1,
-  Right = 1,
-  Down = -1,
-  Left = -1,
-}
-
-/**
- * @alpha
- */
-export interface LineStyle {
-  fill?: 'solid' | 'dash' | 'dot' | 'square';
-  dash?: number[];
-}
-
-/**
- * @alpha
- */
-export interface LineConfig {
-  lineColor?: string;
-  lineWidth?: number;
-  lineInterpolation?: LineInterpolation;
-  lineStyle?: LineStyle;
-
-  /**
-   * Indicate if null values should be treated as gaps or connected.
-   * When the value is a number, it represents the maximum delta in the
-   * X axis that should be considered connected.  For timeseries, this is milliseconds
-   */
-  spanNulls?: boolean | number;
-}
-
-/**
- * @alpha
- */
-export interface BarConfig {
-  barAlignment?: BarAlignment;
-  barWidthFactor?: number;
-  barMaxWidth?: number;
-}
-
-/**
- * @alpha
- */
-export interface FillConfig {
-  fillColor?: string;
-  fillOpacity?: number;
-  fillBelowTo?: string; // name of the field
-}
-
-/**
- * @alpha
- */
-export enum GraphGradientMode {
-  None = 'none',
-  Opacity = 'opacity',
-  Hue = 'hue',
-  Scheme = 'scheme',
-}
-
-/**
- * @alpha
- */
-export interface PointsConfig {
-  showPoints?: PointVisibility;
-  pointSize?: number;
-  pointSymbol?: string; // eventually dot,star, etc
-}
-
-/**
- * @alpha
- */
-export interface ScaleDistributionConfig {
-  type: ScaleDistribution;
-  log?: number;
-}
-
-/**
- * @alpha
- * Axis is actually unique based on the unit... not each field!
- */
-export interface AxisConfig {
-  axisPlacement?: AxisPlacement;
-  axisLabel?: string;
-  axisWidth?: number; // pixels ideally auto?
-  axisSoftMin?: number;
-  axisSoftMax?: number;
-  scaleDistribution?: ScaleDistributionConfig;
-}
-
-/**
- * @alpha
- */
-export interface HideSeriesConfig {
-  tooltip: boolean;
-  legend: boolean;
-  viz: boolean;
-}
-
-/**
- * @alpha
- */
-export interface HideableFieldConfig {
-  hideFrom?: HideSeriesConfig;
-}
-
-/**
- * @alpha
- */
-export enum StackingMode {
-  None = 'none',
-  Normal = 'normal',
-  Percent = 'percent',
-}
-
-/**
- * @alpha
- */
-export interface StackingConfig {
-  mode?: StackingMode;
-  group?: string;
-}
-
-/**
- * @alpha
- */
-export interface StackableFieldConfig {
-  stacking?: StackingConfig;
-}
-
-/**
- * @alpha
- */
-export enum GraphTresholdsStyleMode {
-  Off = 'off',
-  Line = 'line',
-  Area = 'area',
-  LineAndArea = 'line+area',
-  Series = 'series',
-}
-
-/**
- * @alpha
- */
-export interface GraphThresholdsStyleConfig {
-  mode: GraphTresholdsStyleMode;
-}
-
-/**
- * @alpha
- */
-export interface GraphFieldConfig
-  extends LineConfig,
-    FillConfig,
-    PointsConfig,
-    AxisConfig,
-    BarConfig,
-    StackableFieldConfig,
-    HideableFieldConfig {
-  drawStyle?: DrawStyle;
-  gradientMode?: GraphGradientMode;
-  thresholdsStyle?: GraphThresholdsStyleConfig;
-}
+import {
+  AxisPlacement,
+  BarAlignment,
+  DrawStyle,
+  GraphGradientMode,
+  GraphTresholdsStyleMode,
+  LineInterpolation,
+  PointVisibility,
+  StackingMode,
+} from '@grafana/schema';
 
 /**
  * @alpha

packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts

@@ -2,7 +2,7 @@ import { dateTimeFormat, GrafanaTheme2, isBooleanUnit, systemDateFormats, TimeZo
 import uPlot, { Axis } from 'uplot';
 import { PlotConfigBuilder } from '../types';
 import { measureText } from '../../../utils/measureText';
-import { AxisPlacement } from '../config';
+import { AxisPlacement } from '@grafana/schema';
 import { optMinMax } from './UPlotScaleBuilder';
 
 export interface AxisProps {

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -9,9 +9,9 @@ import {
   ScaleOrientation,
   ScaleDirection,
   GraphTresholdsStyleMode,
-} from '../config';
+  ScaleDistribution,
+} from '@grafana/schema';
 import { createTheme, ThresholdsMode } from '@grafana/data';
-import { ScaleDistribution } from '../models.gen';
 
 describe('UPlotConfigBuilder', () => {
   const darkTheme = createTheme();

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts

@@ -13,7 +13,7 @@ import { PlotConfig, PlotTooltipInterpolator } from '../types';
 import { ScaleProps, UPlotScaleBuilder } from './UPlotScaleBuilder';
 import { SeriesProps, UPlotSeriesBuilder } from './UPlotSeriesBuilder';
 import { AxisProps, UPlotAxisBuilder } from './UPlotAxisBuilder';
-import { AxisPlacement } from '../config';
+import { AxisPlacement } from '@grafana/schema';
 import { pluginLog } from '../utils';
 import { getThresholdsDrawHook, UPlotThresholdOptions } from './UPlotThresholds';
 

packages/grafana-ui/src/components/uPlot/config/UPlotScaleBuilder.ts

@@ -1,7 +1,6 @@
 import uPlot, { Scale, Range } from 'uplot';
 import { PlotConfigBuilder } from '../types';
-import { ScaleOrientation, ScaleDirection } from '../config';
-import { ScaleDistribution } from '../models.gen';
+import { ScaleOrientation, ScaleDirection, ScaleDistribution } from '@grafana/schema';
 import { isBooleanUnit } from '@grafana/data';
 
 export interface ScaleProps {

packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts

@@ -17,7 +17,7 @@ import {
   LineInterpolation,
   PointsConfig,
   PointVisibility,
-} from '../config';
+} from '@grafana/schema';
 import { PlotConfigBuilder } from '../types';
 import { getHueGradientFn, getOpacityGradientFn, getScaleGradientFn } from './gradientFills';
 

packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts

@@ -1,7 +1,7 @@
 import { GrafanaTheme2, ThresholdsConfig, ThresholdsMode } from '@grafana/data';
-import tinycolor from 'tinycolor2';
-import { GraphThresholdsStyleConfig, GraphTresholdsStyleMode } from '../config';
+import { GraphThresholdsStyleConfig, GraphTresholdsStyleMode } from '@grafana/schema';
 import { getDataRange, GradientDirection, scaleGradient } from './gradientFills';
+import tinycolor from 'tinycolor2';
 
 export interface UPlotThresholdOptions {
   scaleKey: string;

packages/grafana-ui/src/components/uPlot/models.gen.ts

@@ -1,87 +0,0 @@
-//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-// NOTE: This file will be auto generated from models.cue
-// It is currenty hand written but will serve as the target for cuetsy
-//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-export enum AxisPlacement {
-  Auto = 'auto',
-  Bottom = 'bottom',
-  Hidden = 'hidden',
-  Left = 'left',
-  Right = 'right',
-  Top = 'top',
-}
-export enum PointVisibility {
-  Always = 'always',
-  Auto = 'auto',
-  Never = 'never',
-}
-export enum DrawStyle {
-  Bars = 'bars',
-  Line = 'line',
-  Points = 'points',
-}
-export enum LineInterpolation {
-  Linear = 'linear',
-  Smooth = 'smooth',
-  StepAfter = 'stepAfter',
-  StepBefore = 'stepBefore',
-}
-/**
- * @alpha
- */
-export enum ScaleDistribution {
-  Linear = 'linear',
-  Log = 'log',
-  Ordinal = 'ordinal',
-}
-export enum GraphGradientMode {
-  Hue = 'hue',
-  None = 'none',
-  Opacity = 'opacity',
-  Scheme = 'scheme',
-}
-export interface LineStyle {
-  dash?: number[];
-  fill?: 'solid' | 'dash' | 'dot' | 'square';
-}
-export interface LineConfig {
-  lineColor?: string;
-  lineInterpolation?: LineInterpolation;
-  lineStyle?: LineStyle;
-  lineWidth?: number;
-  spanNulls?: boolean;
-}
-export interface FillConfig {
-  fillBelowTo?: string;
-  fillColor?: string;
-  fillOpacity?: number;
-}
-export interface PointsConfig {
-  pointColor?: string;
-  pointSize?: number;
-  pointSymbol?: string;
-  showPoints?: PointVisibility;
-}
-export interface ScaleDistributionConfig {
-  log?: number;
-  type: ScaleDistribution;
-}
-export interface AxisConfig {
-  axisLabel?: string;
-  axisPlacement?: AxisPlacement;
-  axisSoftMax?: number;
-  axisSoftMin?: number;
-  axisWidth?: number;
-  scaleDistribution?: ScaleDistributionConfig;
-}
-export interface HideSeriesConfig {
-  graph: boolean;
-  legend: boolean;
-  tooltip: boolean;
-}
-export interface GraphFieldConfig extends LineConfig, FillConfig, PointsConfig, AxisConfig {
-  drawStyle?: DrawStyle;
-  gradientMode?: GraphGradientMode;
-  hideFrom?: HideSeriesConfig;
-}

packages/grafana-ui/src/components/uPlot/utils.test.ts

@@ -1,6 +1,6 @@
 import { preparePlotData, timeFormatToTemplate } from './utils';
 import { FieldType, MutableDataFrame } from '@grafana/data';
-import { StackingMode } from './config';
+import { StackingMode } from '@grafana/schema';
 
 describe('timeFormatToTemplate', () => {
   it.each`

packages/grafana-ui/src/components/uPlot/utils.ts

@@ -1,5 +1,5 @@
 import { DataFrame, dateTime, Field, FieldType } from '@grafana/data';
-import { StackingMode } from './config';
+import { StackingMode } from '@grafana/schema';
 import { createLogger } from '../../utils/logger';
 import { attachDebugger } from '../../utils';
 import { AlignedData, Options, PaddingSide } from 'uplot';

packages/grafana-ui/src/options/builder/axis.tsx

@@ -6,16 +6,8 @@ import {
   identityOverrideProcessor,
   SelectableValue,
 } from '@grafana/data';
-import {
-  AxisConfig,
-  AxisPlacement,
-  graphFieldOptions,
-  ScaleDistributionConfig,
-  Select,
-  HorizontalGroup,
-  RadioButtonGroup,
-} from '../../index';
-import { ScaleDistribution } from '../../components/uPlot/models.gen';
+import { graphFieldOptions, Select, HorizontalGroup, RadioButtonGroup } from '../../index';
+import { AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
 
 /**
  * @alpha

packages/grafana-ui/src/options/builder/hideSeries.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { startCase } from 'lodash';
 import { FilterPill, HorizontalGroup } from '../../index';
 import { FieldConfigEditorBuilder, FieldConfigEditorProps } from '@grafana/data';
-import { HideableFieldConfig, HideSeriesConfig } from '../../components/uPlot/config';
+import { HideableFieldConfig, HideSeriesConfig } from '@grafana/schema';
 
 const SeriesConfigEditor: React.FC<FieldConfigEditorProps<HideSeriesConfig, {}>> = (props) => {
   const { value, onChange } = props;

packages/grafana-ui/src/options/builder/stacking.tsx

@@ -5,16 +5,8 @@ import {
   identityOverrideProcessor,
 } from '@grafana/data';
 import React from 'react';
-import {
-  graphFieldOptions,
-  HorizontalGroup,
-  IconButton,
-  Input,
-  RadioButtonGroup,
-  StackingConfig,
-  StackingMode,
-  Tooltip,
-} from '../..';
+import { graphFieldOptions, HorizontalGroup, IconButton, Input, RadioButtonGroup, Tooltip } from '../..';
+import { StackingConfig, StackingMode } from '@grafana/schema';
 
 export const StackingEditor: React.FC<FieldOverrideEditorProps<StackingConfig, any>> = ({
   value,

public/app/core/logs_model.ts

@@ -1,5 +1,6 @@
 import { size } from 'lodash';
-import { ansicolor, BarAlignment, colors, DrawStyle, StackingMode } from '@grafana/ui';
+import { BarAlignment, DrawStyle, StackingMode } from '@grafana/schema';
+import { ansicolor, colors } from '@grafana/ui';
 
 import {
   AbsoluteTimeRange,

public/app/features/explore/ExploreGraphNGPanel.tsx

@@ -14,7 +14,6 @@ import {
   TimeZone,
 } from '@grafana/data';
 import {
-  DrawStyle,
   Icon,
   PanelContext,
   PanelContextProvider,
@@ -25,7 +24,7 @@ import {
   useTheme2,
   ZoomPlugin,
 } from '@grafana/ui';
-import { LegendDisplayMode, TooltipDisplayMode } from '@grafana/schema';
+import { LegendDisplayMode, TooltipDisplayMode, DrawStyle } from '@grafana/schema';
 import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/timeseries/config';
 import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin';
 import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';

public/app/features/explore/utils/decorators.test.ts

@@ -1,4 +1,4 @@
-import { DrawStyle, StackingMode } from '@grafana/ui';
+import { DrawStyle, StackingMode } from '@grafana/schema';
 import { lastValueFrom } from 'rxjs';
 import {
   ArrayVector,

public/app/plugins/panel/barchart/BarChartPanel.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
-import { TooltipDisplayMode } from '@grafana/schema';
+import { TooltipDisplayMode, StackingMode } from '@grafana/schema';
 import { PanelProps, TimeRange, VizOrientation } from '@grafana/data';
-import { StackingMode, TooltipPlugin, useTheme2 } from '@grafana/ui';
+import { TooltipPlugin, useTheme2 } from '@grafana/ui';
 import { BarChartOptions } from './types';
 import { BarChart } from './BarChart';
 import { prepareGraphableFrames } from './utils';

public/app/plugins/panel/barchart/bars.ts

@@ -2,15 +2,14 @@ import uPlot, { Axis, AlignedData } from 'uplot';
 import { pointWithin, Quadtree, Rect } from './quadtree';
 import { distribute, SPACE_BETWEEN } from './distribute';
 import { DataFrame, GrafanaTheme2 } from '@grafana/data';
-import { VizTextDisplayOptions } from '@grafana/schema';
+import { calculateFontSize, PlotTooltipInterpolator } from '@grafana/ui';
 import {
-  calculateFontSize,
-  PlotTooltipInterpolator,
   StackingMode,
   BarValueVisibility,
   ScaleDirection,
   ScaleOrientation,
-} from '@grafana/ui';
+  VizTextDisplayOptions,
+} from '@grafana/schema';
 import { preparePlotData } from '../../../../../packages/grafana-ui/src/components/uPlot/utils';
 
 const groupDistr = SPACE_BETWEEN;

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

@@ -7,7 +7,8 @@ import {
   VizOrientation,
 } from '@grafana/data';
 import { BarChartPanel } from './BarChartPanel';
-import { StackingMode, BarValueVisibility, graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
+import { StackingMode, BarValueVisibility } from '@grafana/schema';
+import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
 
 import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from 'app/plugins/panel/barchart/types';
 

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

@@ -1,6 +1,14 @@
-import { OptionsWithLegend, OptionsWithTextFormatting, OptionsWithTooltip } from '@grafana/schema';
+import {
+  OptionsWithLegend,
+  OptionsWithTextFormatting,
+  OptionsWithTooltip,
+  AxisConfig,
+  BarValueVisibility,
+  GraphGradientMode,
+  HideableFieldConfig,
+  StackingMode,
+} from '@grafana/schema';
 import { VizOrientation } from '@grafana/data';
-import { AxisConfig, BarValueVisibility, GraphGradientMode, HideableFieldConfig, StackingMode } from '@grafana/ui';
 
 /**
  * @alpha

public/app/plugins/panel/barchart/utils.test.ts

@@ -1,5 +1,11 @@
 import { prepareGraphableFrames, preparePlotConfigBuilder, preparePlotFrame } from './utils';
-import { LegendDisplayMode, TooltipDisplayMode } from '@grafana/schema';
+import {
+  LegendDisplayMode,
+  TooltipDisplayMode,
+  BarValueVisibility,
+  GraphGradientMode,
+  StackingMode,
+} from '@grafana/schema';
 import {
   createTheme,
   DefaultTimeZone,
@@ -11,7 +17,6 @@ import {
   VizOrientation,
 } from '@grafana/data';
 import { BarChartFieldConfig, BarChartOptions } from './types';
-import { BarValueVisibility, GraphGradientMode, StackingMode } from '@grafana/ui';
 
 function mockDataFrame() {
   const df1 = new MutableDataFrame({

public/app/plugins/panel/barchart/utils.ts

@@ -13,16 +13,8 @@ import {
 } from '@grafana/data';
 import { BarChartFieldConfig, BarChartOptions, defaultBarChartFieldConfig } from './types';
 import { BarsOptions, getConfig } from './bars';
-import {
-  AxisPlacement,
-  FIXED_UNIT,
-  ScaleDirection,
-  ScaleDistribution,
-  ScaleOrientation,
-  StackingMode,
-  UPlotConfigBuilder,
-  UPlotConfigPrepFn,
-} from '@grafana/ui';
+import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation, StackingMode } from '@grafana/schema';
+import { FIXED_UNIT, UPlotConfigBuilder, UPlotConfigPrepFn } from '@grafana/ui';
 import { collectStackingGroups } from '../../../../../packages/grafana-ui/src/components/uPlot/utils';
 
 /** @alpha */

public/app/plugins/panel/histogram/Histogram.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import uPlot, { AlignedData } from 'uplot';
-import { VizLegendOptions, LegendDisplayMode } from '@grafana/schema';
+import {
+  VizLegendOptions,
+  LegendDisplayMode,
+  ScaleDistribution,
+  AxisPlacement,
+  ScaleDirection,
+  ScaleOrientation,
+} from '@grafana/schema';
 import {
   DataFrame,
   formattedValueToString,
@@ -8,23 +15,13 @@ import {
   getFieldSeriesColor,
   GrafanaTheme2,
 } from '@grafana/data';
-import {
-  Themeable2,
-  UPlotConfigBuilder,
-  UPlotChart,
-  VizLayout,
-  AxisPlacement,
-  ScaleDirection,
-  ScaleOrientation,
-  PlotLegend,
-} from '@grafana/ui';
+import { Themeable2, UPlotConfigBuilder, UPlotChart, VizLayout, PlotLegend } from '@grafana/ui';
 
 import {
   histogramBucketSizes,
   histogramFrameBucketMaxFieldName,
 } from '@grafana/data/src/transformations/transformers/histogram';
 import { PanelOptions } from './models.gen';
-import { ScaleDistribution } from '@grafana/ui/src/components/uPlot/models.gen';
 
 function incrRoundDn(num: number, incr: number) {
   return Math.floor(num / incr) * incr;

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

@@ -3,8 +3,14 @@
 // It is currenty hand written but will serve as the target for cuetsy
 //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-import { LegendDisplayMode, OptionsWithLegend, OptionsWithTooltip, TooltipDisplayMode } from '@grafana/schema';
-import { GraphGradientMode, HideableFieldConfig } from '@grafana/ui';
+import {
+  LegendDisplayMode,
+  OptionsWithLegend,
+  OptionsWithTooltip,
+  TooltipDisplayMode,
+  GraphGradientMode,
+  HideableFieldConfig,
+} from '@grafana/schema';
 
 export const modelVersion = Object.freeze([1, 0]);
 

public/app/plugins/panel/state-timeline/TimelineChart.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { LegendDisplayMode } from '@grafana/schema';
+import { LegendDisplayMode, BarValueVisibility } from '@grafana/schema';
 import {
   PanelContext,
   PanelContextRoot,
   GraphNG,
   GraphNGProps,
-  BarValueVisibility,
   UPlotConfigBuilder,
   VizLayout,
   VizLegend,

public/app/plugins/panel/state-timeline/module.tsx

@@ -1,7 +1,8 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
 import { StateTimelinePanel } from './StateTimelinePanel';
 import { TimelineOptions, TimelineFieldConfig, defaultPanelOptions, defaultTimelineFieldConfig } from './types';
-import { BarValueVisibility, commonOptionsBuilder } from '@grafana/ui';
+import { BarValueVisibility } from '@grafana/schema';
+import { commonOptionsBuilder } from '@grafana/ui';
 import { timelinePanelChangedHandler } from './migrations';
 
 export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(StateTimelinePanel)

public/app/plugins/panel/state-timeline/timeline.ts

@@ -4,7 +4,7 @@ import { pointWithin, Quadtree, Rect } from 'app/plugins/panel/barchart/quadtree
 import { distribute, SPACE_BETWEEN } from 'app/plugins/panel/barchart/distribute';
 import { TimelineFieldConfig, TimelineMode, TimelineValueAlignment } from './types';
 import { GrafanaTheme2, TimeRange } from '@grafana/data';
-import { BarValueVisibility } from '@grafana/ui';
+import { BarValueVisibility } from '@grafana/schema';
 import { alpha } from '@grafana/data/src/themes/colorManipulator';
 
 const { round, min, ceil } = Math;

public/app/plugins/panel/state-timeline/types.ts

@@ -1,5 +1,4 @@
-import { OptionsWithTooltip, OptionsWithLegend } from '@grafana/schema';
-import { HideableFieldConfig, BarValueVisibility } from '@grafana/ui';
+import { OptionsWithTooltip, OptionsWithLegend, HideableFieldConfig, BarValueVisibility } from '@grafana/schema';
 
 /**
  * @alpha

public/app/plugins/panel/state-timeline/utils.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { VizLegendOptions } from '@grafana/schema';
 import { XYFieldMatchers } from '@grafana/ui/src/components/GraphNG/types';
 import {
   ArrayVector,
@@ -24,7 +23,7 @@ import {
   VizLegendItem,
 } from '@grafana/ui';
 import { getConfig, TimelineCoreOptions } from './timeline';
-import { AxisPlacement, ScaleDirection, ScaleOrientation } from '@grafana/ui/src/components/uPlot/config';
+import { VizLegendOptions, AxisPlacement, ScaleDirection, ScaleOrientation } from '@grafana/schema';
 import { TimelineFieldConfig, TimelineOptions } from './types';
 import { PlotTooltipInterpolator } from '@grafana/ui/src/components/uPlot/types';
 import { preparePlotData } from '../../../../../packages/grafana-ui/src/components/uPlot/utils';

public/app/plugins/panel/status-history/module.tsx

@@ -1,7 +1,8 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
 import { StatusHistoryPanel } from './StatusHistoryPanel';
 import { StatusPanelOptions, StatusFieldConfig, defaultStatusFieldConfig } from './types';
-import { BarValueVisibility, commonOptionsBuilder } from '@grafana/ui';
+import { BarValueVisibility } from '@grafana/schema';
+import { commonOptionsBuilder } from '@grafana/ui';
 
 export const plugin = new PanelPlugin<StatusPanelOptions, StatusFieldConfig>(StatusHistoryPanel)
   .useFieldConfig({

public/app/plugins/panel/status-history/types.ts

@@ -1,5 +1,4 @@
-import { HideableFieldConfig, BarValueVisibility } from '@grafana/ui';
-import { OptionsWithTooltip, OptionsWithLegend } from '@grafana/schema';
+import { HideableFieldConfig, BarValueVisibility, OptionsWithTooltip, OptionsWithLegend } from '@grafana/schema';
 
 /**
  * @alpha

public/app/plugins/panel/timeseries/LineStyleEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
+import { LineStyle } from '@grafana/schema';
 import { FieldOverrideEditorProps, SelectableValue } from '@grafana/data';
-import { HorizontalGroup, IconButton, LineStyle, RadioButtonGroup, Select } from '@grafana/ui';
+import { HorizontalGroup, IconButton, RadioButtonGroup, Select } from '@grafana/ui';
 
 type LineFill = 'solid' | 'dash' | 'dot';
 

public/app/plugins/panel/timeseries/ThresholdsStyleEditor.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
+import { GraphTresholdsStyleMode } from '@grafana/schema';
 import { FieldOverrideEditorProps, SelectableValue } from '@grafana/data';
-import { GraphTresholdsStyleMode, Select } from '@grafana/ui';
+import { Select } from '@grafana/ui';
 
 export const ThresholdsStyleEditor: React.FC<
   FieldOverrideEditorProps<SelectableValue<{ mode: GraphTresholdsStyleMode }>, any>

public/app/plugins/panel/timeseries/config.ts

@@ -10,15 +10,16 @@ import {
   BarAlignment,
   DrawStyle,
   GraphFieldConfig,
-  graphFieldOptions,
   GraphGradientMode,
   LineInterpolation,
   LineStyle,
   PointVisibility,
   StackingMode,
-  commonOptionsBuilder,
   GraphTresholdsStyleMode,
-} from '@grafana/ui';
+} from '@grafana/schema';
+
+import { graphFieldOptions, commonOptionsBuilder } from '@grafana/ui';
+
 import { LineStyleEditor } from './LineStyleEditor';
 import { FillBellowToEditor } from './FillBelowToEditor';
 import { SpanNullsEditor } from './SpanNullsEditor';

public/app/plugins/panel/timeseries/migrations.ts

@@ -13,6 +13,8 @@ import {
   ThresholdsMode,
 } from '@grafana/data';
 import {
+  LegendDisplayMode,
+  TooltipDisplayMode,
   AxisPlacement,
   DrawStyle,
   GraphFieldConfig,
@@ -23,8 +25,7 @@ import {
   PointVisibility,
   ScaleDistribution,
   StackingMode,
-} from '@grafana/ui';
-import { LegendDisplayMode, TooltipDisplayMode } from '@grafana/schema';
+} from '@grafana/schema';
 import { TimeSeriesOptions } from './types';
 import { omitBy, pickBy, isNil, isNumber, isString } from 'lodash';
 import { defaultGraphConfig } from './config';

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

@@ -1,5 +1,6 @@
+import { GraphFieldConfig } from '@grafana/schema';
 import { PanelPlugin } from '@grafana/data';
-import { GraphFieldConfig, commonOptionsBuilder } from '@grafana/ui';
+import { commonOptionsBuilder } from '@grafana/ui';
 import { TimeSeriesPanel } from './TimeSeriesPanel';
 import { graphPanelChangedHandler } from './migrations';
 import { TimeSeriesOptions } from './types';

public/app/plugins/panel/timeseries/utils.ts

@@ -7,7 +7,7 @@ import {
   GrafanaTheme2,
   isBooleanUnit,
 } from '@grafana/data';
-import { GraphFieldConfig, LineInterpolation, StackingMode } from '@grafana/ui';
+import { GraphFieldConfig, LineInterpolation, StackingMode } from '@grafana/schema';
 
 // This will return a set of frames with only graphable values included
 export function prepareGraphableFields(

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

@@ -1,5 +1,6 @@
+import { GraphFieldConfig, DrawStyle } from '@grafana/schema';
 import { PanelPlugin } from '@grafana/data';
-import { DrawStyle, GraphFieldConfig, commonOptionsBuilder } from '@grafana/ui';
+import { commonOptionsBuilder } from '@grafana/ui';
 import { XYChartPanel } from './XYChartPanel';
 import { Options } from './types';
 import { XYDimsEditor } from './XYDimsEditor';