From a5fda37d025ced3b6e398d800fa3e6cfd96a89e8 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Mon, 10 May 2021 09:34:42 -0700 Subject: [PATCH] Timeline: move grafana/ui elements to the panel folder (#33803) --- .../src/components/PanelChrome/index.ts | 2 +- packages/grafana-ui/src/components/index.ts | 5 ++--- .../plugins/panel/timeline}/TimelineChart.tsx | 10 ++-------- .../plugins/panel/timeline/TimelinePanel.tsx | 7 ++++++- public/app/plugins/panel/timeline/module.tsx | 4 ++-- .../app/plugins/panel/timeline}/timeline.ts | 8 ++++---- .../app/plugins/panel/timeline}/types.ts | 3 +-- .../app/plugins/panel/timeline}/utils.ts | 19 +++++++++++-------- 8 files changed, 29 insertions(+), 29 deletions(-) rename {packages/grafana-ui/src/components/Timeline => public/app/plugins/panel/timeline}/TimelineChart.tsx (72%) rename {packages/grafana-ui/src/components/Timeline => public/app/plugins/panel/timeline}/timeline.ts (97%) rename {packages/grafana-ui/src/components/Timeline => public/app/plugins/panel/timeline}/types.ts (84%) rename {packages/grafana-ui/src/components/Timeline => public/app/plugins/panel/timeline}/utils.ts (91%) diff --git a/packages/grafana-ui/src/components/PanelChrome/index.ts b/packages/grafana-ui/src/components/PanelChrome/index.ts index 69889b72b37..34b9286b246 100644 --- a/packages/grafana-ui/src/components/PanelChrome/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index fedd63f9b74..46ca959c97a 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/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'; diff --git a/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx b/public/app/plugins/panel/timeline/TimelineChart.tsx similarity index 72% rename from packages/grafana-ui/src/components/Timeline/TimelineChart.tsx rename to public/app/plugins/panel/timeline/TimelineChart.tsx index 2253328f14e..bfd61d59b9e 100755 --- a/packages/grafana-ui/src/components/Timeline/TimelineChart.tsx +++ b/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 { +export class TimelineChart extends React.Component { static contextType = PanelContextRoot; panelContext: PanelContext = {} as PanelContext; @@ -50,6 +47,3 @@ export class UnthemedTimelineChart extends React.Component { ); } } - -export const TimelineChart = withTheme2(UnthemedTimelineChart); -TimelineChart.displayName = 'TimelineChart'; diff --git a/public/app/plugins/panel/timeline/TimelinePanel.tsx b/public/app/plugins/panel/timeline/TimelinePanel.tsx index bfc99e236d3..931495c0718 100755 --- a/public/app/plugins/panel/timeline/TimelinePanel.tsx +++ b/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 {} @@ -18,6 +20,8 @@ export const TimelinePanel: React.FC = ({ 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 = ({ return ( (TimelinePanel) .useFieldConfig({ diff --git a/packages/grafana-ui/src/components/Timeline/timeline.ts b/public/app/plugins/panel/timeline/timeline.ts similarity index 97% rename from packages/grafana-ui/src/components/Timeline/timeline.ts rename to public/app/plugins/panel/timeline/timeline.ts index fff2984ed59..4343b712990 100644 --- a/packages/grafana-ui/src/components/Timeline/timeline.ts +++ b/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; diff --git a/packages/grafana-ui/src/components/Timeline/types.ts b/public/app/plugins/panel/timeline/types.ts similarity index 84% rename from packages/grafana-ui/src/components/Timeline/types.ts rename to public/app/plugins/panel/timeline/types.ts index 3300f698ae5..a5fd35a398f 100644 --- a/packages/grafana-ui/src/components/Timeline/types.ts +++ b/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 diff --git a/packages/grafana-ui/src/components/Timeline/utils.ts b/public/app/plugins/panel/timeline/utils.ts similarity index 91% rename from packages/grafana-ui/src/components/Timeline/utils.ts rename to public/app/plugins/panel/timeline/utils.ts index 31f9289fd5a..8ad8598a2b2 100644 --- a/packages/grafana-ui/src/components/Timeline/utils.ts +++ b/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,