Timeline: move grafana/ui elements to the panel folder (#33803)

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

@@ -37,6 +37,6 @@ export {
   ErrorIndicatorProps as PanelChromeErrorIndicatorProps,
 } from './ErrorIndicator';
 
-export { usePanelContext, PanelContextProvider, PanelContext } from './PanelContext';
+export { usePanelContext, PanelContextProvider, PanelContext, PanelContextRoot } from './PanelContext';
 
 export * from './types';

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

@@ -94,6 +94,7 @@ export {
   PanelChromeErrorIndicatorProps,
   PanelContextProvider,
   PanelContext,
+  PanelContextRoot,
   usePanelContext,
 } from './PanelChrome';
 export { VizLayout, VizLayoutComponentType, VizLayoutLegendProps, VizLayoutProps } from './VizLayout/VizLayout';
@@ -231,14 +232,12 @@ export { UPlotChart } from './uPlot/Plot';
 export * from './uPlot/geometries';
 export * from './uPlot/plugins';
 export { usePlotContext } from './uPlot/context';
-export { GraphNG, FIXED_UNIT } from './GraphNG/GraphNG';
+export { GraphNG, GraphNGProps, FIXED_UNIT } from './GraphNG/GraphNG';
 export { TimeSeries } from './TimeSeries/TimeSeries';
 export { useGraphNGContext } from './GraphNG/hooks';
 export { preparePlotFrame } from './GraphNG/utils';
 export { BarChart } from './BarChart/BarChart';
-export { TimelineChart } from './Timeline/TimelineChart';
 export { BarChartOptions, BarValueVisibility, BarChartFieldConfig } from './BarChart/types';
-export { TimelineOptions, TimelineFieldConfig } from './Timeline/types';
 export { GraphNGLegendEvent } from './GraphNG/types';
 export * from './PanelChrome/types';
 export * from './NodeGraph';

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

@@ -1,11 +1,8 @@
 import React from 'react';
-import { withTheme2 } from '../../themes/ThemeContext';
+import { PanelContext, PanelContextRoot, UPlotConfigBuilder, GraphNG, GraphNGProps } from '@grafana/ui';
 import { DataFrame, TimeRange } from '@grafana/data';
-import { GraphNG, GraphNGProps } from '../GraphNG/GraphNG';
-import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 import { preparePlotConfigBuilder } from './utils';
 import { BarValueVisibility, TimelineMode } from './types';
-import { PanelContext, PanelContextRoot } from '../PanelChrome/PanelContext';
 
 /**
  * @alpha
@@ -19,7 +16,7 @@ export interface TimelineProps extends Omit<GraphNGProps, 'prepConfig' | 'propsT
 
 const propsToDiff = ['mode', 'rowHeight', 'colWidth', 'showValue'];
 
-export class UnthemedTimelineChart extends React.Component<TimelineProps> {
+export class TimelineChart extends React.Component<TimelineProps> {
   static contextType = PanelContextRoot;
   panelContext: PanelContext = {} as PanelContext;
 
@@ -50,6 +47,3 @@ export class UnthemedTimelineChart extends React.Component<TimelineProps> {
     );
   }
 }
-
-export const TimelineChart = withTheme2(UnthemedTimelineChart);
-TimelineChart.displayName = 'TimelineChart';

public/app/plugins/panel/timeline/TimelinePanel.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react';
 import { PanelProps } from '@grafana/data';
-import { GraphNGLegendEvent, TimelineChart, TimelineOptions } from '@grafana/ui';
+import { GraphNGLegendEvent, useTheme2 } from '@grafana/ui';
 import { hideSeriesConfigFactory } from '../timeseries/overrides/hideSeriesConfigFactory';
+import { TimelineOptions } from './types';
+import { TimelineChart } from './TimelineChart';
 
 interface TimelinePanelProps extends PanelProps<TimelineOptions> {}
 
@@ -18,6 +20,8 @@ export const TimelinePanel: React.FC<TimelinePanelProps> = ({
   fieldConfig,
   onFieldConfigChange,
 }) => {
+  const theme = useTheme2();
+
   const onLegendClick = useCallback(
     (event: GraphNGLegendEvent) => {
       onFieldConfigChange(hideSeriesConfigFactory(event, fieldConfig, data.series));
@@ -35,6 +39,7 @@ export const TimelinePanel: React.FC<TimelinePanelProps> = ({
 
   return (
     <TimelineChart
+      theme={theme}
       frames={data.series}
       structureRev={data.structureRev}
       timeRange={timeRange}

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

@@ -1,9 +1,9 @@
 import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/data';
 import { TimelinePanel } from './TimelinePanel';
-import { TimelineOptions, TimelineFieldConfig, BarValueVisibility } from '@grafana/ui';
+import { BarValueVisibility } from '@grafana/ui';
 //import { addHideFrom, addLegendOptions } from '../timeseries/config';
 //import { defaultBarChartFieldConfig } from '@grafana/ui/src/components/BarChart/types';
-import { TimelineMode } from '@grafana/ui/src/components/Timeline/types';
+import { TimelineOptions, TimelineFieldConfig, TimelineMode } from './types';
 
 export const plugin = new PanelPlugin<TimelineOptions, TimelineFieldConfig>(TimelinePanel)
   .useFieldConfig({

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

@@ -1,10 +1,10 @@
 import uPlot, { Series, Cursor } from 'uplot';
-import { FIXED_UNIT } from '../GraphNG/GraphNG';
-import { Quadtree, Rect, pointWithin } from '../BarChart/quadtree';
-import { distribute, SPACE_BETWEEN } from '../BarChart/distribute';
+import { FIXED_UNIT } from '@grafana/ui/src/components/GraphNG/GraphNG';
+import { Quadtree, Rect, pointWithin } from '@grafana/ui/src/components/BarChart/quadtree';
+import { distribute, SPACE_BETWEEN } from '@grafana/ui/src/components/BarChart/distribute';
 import { TimelineMode } from './types';
 import { TimeRange } from '@grafana/data';
-import { BarValueVisibility } from '../BarChart/types';
+import { BarValueVisibility } from '@grafana/ui/src/components/BarChart/types';
 
 const { round, min, ceil } = Math;
 

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

@@ -1,5 +1,4 @@
-import { GraphGradientMode, HideableFieldConfig } from '../uPlot/config';
-import { VizLegendOptions } from '../VizLegend/models.gen';
+import { VizLegendOptions, GraphGradientMode, HideableFieldConfig } from '@grafana/ui';
 
 /**
  * @alpha

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { XYFieldMatchers } from '../GraphNG/types';
+import { XYFieldMatchers } from '@grafana/ui/src/components/GraphNG/types';
 import {
   DataFrame,
   FieldColorModeId,
@@ -10,15 +10,18 @@ import {
   classicColors,
   Field,
 } from '@grafana/data';
-import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
+import { UPlotConfigBuilder, FIXED_UNIT, SeriesVisibilityChangeMode } from '@grafana/ui';
 import { TimelineCoreOptions, getConfig } from './timeline';
-import { FIXED_UNIT } from '../GraphNG/GraphNG';
-import { AxisPlacement, GraphGradientMode, ScaleDirection, ScaleOrientation } from '../uPlot/config';
-import { measureText } from '../../utils/measureText';
-import { PrepConfigOpts } from '../GraphNG/utils';
+import {
+  AxisPlacement,
+  GraphGradientMode,
+  ScaleDirection,
+  ScaleOrientation,
+} from '@grafana/ui/src/components/uPlot/config';
+import { measureText } from '@grafana/ui/src/utils/measureText';
+import { PrepConfigOpts } from '@grafana/ui/src/components/GraphNG/utils';
 
-import { SeriesVisibilityChangeMode, TimelineFieldConfig } from '../..';
-import { BarValueVisibility, TimelineMode } from './types';
+import { BarValueVisibility, TimelineFieldConfig, TimelineMode } from './types';
 
 const defaultConfig: TimelineFieldConfig = {
   lineWidth: 0,