diff --git a/public/app/features/explore/ExplorePaneContainer.tsx b/public/app/features/explore/ExplorePaneContainer.tsx index a37647a5ee1..47b0bd579c1 100644 --- a/public/app/features/explore/ExplorePaneContainer.tsx +++ b/public/app/features/explore/ExplorePaneContainer.tsx @@ -31,7 +31,7 @@ interface Props extends OwnProps, ConnectedProps {} * This component is responsible for handling initialization of an Explore pane and triggering synchronization * of state based on URL changes and preventing any infinite loops. */ -export class ExplorePaneContainerUnconnected extends React.PureComponent { +class ExplorePaneContainerUnconnected extends React.PureComponent { el: any; exploreEvents: EventBusExtended; diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index a959db53162..bd2ab781dba 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -29,7 +29,7 @@ interface OwnProps { type Props = OwnProps & ConnectedProps; -export class UnConnectedExploreToolbar extends PureComponent { +class UnConnectedExploreToolbar extends PureComponent { onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => { this.props.changeDatasource(this.props.exploreId, dsSettings.uid, { importQueries: true }); }; diff --git a/public/app/features/explore/JSONViewer.tsx b/public/app/features/explore/JSONViewer.tsx deleted file mode 100644 index 58e4b485f4f..00000000000 --- a/public/app/features/explore/JSONViewer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export default function JSONViewer({ value }: any) { - return ( -
- 
{JSON.stringify(value, undefined, 2)}
-
- ); -} diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 8b8d804fb6c..226ef2b2c3c 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -86,7 +86,7 @@ interface State { forceEscape: boolean; } -export class UnthemedLogs extends PureComponent { +class UnthemedLogs extends PureComponent { flipOrderTimer?: number; cancelFlippingTimer?: number; topLogsRef = createRef(); diff --git a/public/app/features/explore/LogsContainer.tsx b/public/app/features/explore/LogsContainer.tsx index 9deb905f8a0..e36ce658258 100644 --- a/public/app/features/explore/LogsContainer.tsx +++ b/public/app/features/explore/LogsContainer.tsx @@ -36,7 +36,7 @@ interface LogsContainerProps extends PropsFromRedux { onStopScanning: () => void; } -export class LogsContainer extends PureComponent { +class LogsContainer extends PureComponent { onChangeTime = (absoluteRange: AbsoluteTimeRange) => { const { exploreId, updateTimeRange } = this.props; updateTimeRange({ exploreId, absoluteRange }); diff --git a/public/app/features/explore/MetaInfoText.tsx b/public/app/features/explore/MetaInfoText.tsx index 0b70201ab87..75b75cfeb7e 100644 --- a/public/app/features/explore/MetaInfoText.tsx +++ b/public/app/features/explore/MetaInfoText.tsx @@ -38,7 +38,7 @@ export interface MetaItemProps { value: string | JSX.Element; } -export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) { +const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) { const style = useStyles2(getStyles); const { label, value } = props; @@ -50,7 +50,7 @@ export const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) { ); }); -export interface MetaInfoTextProps { +interface MetaInfoTextProps { metaItems: MetaItemProps[]; } @@ -66,5 +66,3 @@ export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) ); }); - -export default MetaInfoText; diff --git a/public/app/features/explore/NodeGraphContainer.test.tsx b/public/app/features/explore/NodeGraphContainer.test.tsx index fa58763fc3e..2441fd795a2 100644 --- a/public/app/features/explore/NodeGraphContainer.test.tsx +++ b/public/app/features/explore/NodeGraphContainer.test.tsx @@ -39,7 +39,7 @@ describe('NodeGraphContainer', () => { const emptyFrame = new MutableDataFrame(); -export const nodes = new MutableDataFrame({ +const nodes = new MutableDataFrame({ fields: toFields([ ['id', ['3fa414edcef6ad90']], ['title', ['tempo-querier']], @@ -50,7 +50,7 @@ export const nodes = new MutableDataFrame({ ]), }); -export function toFields(fields: Array<[string, any[]]>) { +function toFields(fields: Array<[string, any[]]>) { return fields.map(([name, values]) => { return { name, values }; }); diff --git a/public/app/features/explore/flotgraph/getGraphSeriesModel.ts b/public/app/features/explore/flotgraph/getGraphSeriesModel.ts deleted file mode 100644 index 1a72abc5754..00000000000 --- a/public/app/features/explore/flotgraph/getGraphSeriesModel.ts +++ /dev/null @@ -1,147 +0,0 @@ -import { colors } from '@grafana/ui'; -import { - getFlotPairs, - getDisplayProcessor, - NullValueMode, - reduceField, - FieldType, - DisplayValue, - GraphSeriesXY, - getTimeField, - DataFrame, - getSeriesTimeStep, - TimeZone, - hasMsResolution, - systemDateFormats, - FieldColor, - FieldColorModeId, - FieldConfigSource, - getFieldDisplayName, -} from '@grafana/data'; - -import { config } from 'app/core/config'; -import { SeriesOptions, GraphOptions, GraphLegendEditorLegendOptions } from './types'; - -export const getGraphSeriesModel = ( - dataFrames: DataFrame[], - timeZone: TimeZone, - seriesOptions: SeriesOptions, - graphOptions: GraphOptions, - legendOptions: GraphLegendEditorLegendOptions, - fieldOptions?: FieldConfigSource -) => { - const graphs: GraphSeriesXY[] = []; - - const displayProcessor = getDisplayProcessor({ - field: { - config: { - unit: fieldOptions?.defaults?.unit, - decimals: legendOptions.decimals, - }, - }, - theme: config.theme2, - timeZone, - }); - - let fieldColumnIndex = -1; - for (const series of dataFrames) { - const { timeField } = getTimeField(series); - - if (!timeField) { - continue; - } - - for (const field of series.fields) { - if (field.type !== FieldType.number) { - continue; - } - // Storing index of series field for future inspection - fieldColumnIndex++; - - // Use external calculator just to make sure it works :) - const points = getFlotPairs({ - xField: timeField, - yField: field, - nullValueMode: NullValueMode.Null, - }); - - if (points.length > 0) { - const seriesStats = reduceField({ field, reducers: legendOptions.stats || [] }); - let statsDisplayValues: DisplayValue[] = []; - - if (legendOptions.stats) { - statsDisplayValues = legendOptions.stats.map((stat) => { - const statDisplayValue = displayProcessor(seriesStats[stat]); - - return { - ...statDisplayValue, - title: stat, - }; - }); - } - - let color: FieldColor; - if (seriesOptions[field.name] && seriesOptions[field.name].color) { - // Case when panel has settings provided via SeriesOptions, i.e. graph panel - color = { - mode: FieldColorModeId.Fixed, - fixedColor: seriesOptions[field.name].color, - }; - } else if (field.config && field.config.color) { - // Case when color settings are set on field, i.e. Explore logs histogram (see makeSeriesForLogs) - color = field.config.color; - } else { - color = { - mode: FieldColorModeId.Fixed, - fixedColor: colors[graphs.length % colors.length], - }; - } - - field.config = fieldOptions - ? { - ...field.config, - unit: fieldOptions.defaults.unit, - decimals: fieldOptions.defaults.decimals, - color, - } - : { ...field.config, color }; - - field.display = getDisplayProcessor({ field, timeZone, theme: config.theme2 }); - - // Time step is used to determine bars width when graph is rendered as bar chart - const timeStep = getSeriesTimeStep(timeField); - const useMsDateFormat = hasMsResolution(timeField); - - timeField.display = getDisplayProcessor({ - timeZone, - field: { - ...timeField, - type: timeField.type, - config: { - unit: systemDateFormats.getTimeFieldUnit(useMsDateFormat), - }, - }, - theme: config.theme2, - }); - - graphs.push({ - label: getFieldDisplayName(field, series, dataFrames), - data: points, - color: field.config.color?.fixedColor, - info: statsDisplayValues, - isVisible: true, - yAxis: { - index: (seriesOptions[field.name] && seriesOptions[field.name].yAxis) || 1, - }, - // This index is used later on to retrieve appropriate series/time for X and Y axes - seriesIndex: fieldColumnIndex, - timeField: { ...timeField }, - valueField: { ...field }, - timeStep, - }); - } - } - } - - return graphs; -}; diff --git a/public/app/features/explore/flotgraph/types.ts b/public/app/features/explore/flotgraph/types.ts deleted file mode 100644 index 59671e72581..00000000000 --- a/public/app/features/explore/flotgraph/types.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { VizTooltipOptions, TooltipDisplayMode, LegendDisplayMode, LegendPlacement } from '@grafana/schema'; -import { YAxis } from '@grafana/data'; - -export interface SeriesOptions { - color?: string; - yAxis?: YAxis; - [key: string]: any; -} -export interface GraphOptions { - showBars: boolean; - showLines: boolean; - showPoints: boolean; -} - -export interface Options { - graph: GraphOptions; - legend: { - displayMode: LegendDisplayMode; - placement: LegendPlacement; - }; - series: { - [alias: string]: SeriesOptions; - }; - tooltipOptions: VizTooltipOptions; -} - -export const defaults: Options = { - graph: { - showBars: false, - showLines: true, - showPoints: false, - }, - legend: { - displayMode: LegendDisplayMode.List, - placement: 'bottom', - }, - series: {}, - tooltipOptions: { mode: TooltipDisplayMode.Single }, -}; - -export interface GraphLegendEditorLegendOptions { - displayMode: LegendDisplayMode; - placement: LegendPlacement; - stats?: string[]; - decimals?: number; - sortBy?: string; - sortDesc?: boolean; -} diff --git a/public/app/features/explore/slate-plugins/prism/index.tsx b/public/app/features/explore/slate-plugins/prism/index.tsx deleted file mode 100644 index 990cda226de..00000000000 --- a/public/app/features/explore/slate-plugins/prism/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import React from 'react'; -import Prism from 'prismjs'; -import { Decoration } from 'slate'; -import { Editor } from '@grafana/slate-react'; - -const TOKEN_MARK = 'prism-token'; - -export function setPrismTokens(language: string, field: string | number, values: any, alias = 'variable') { - Prism.languages[language][field] = { - alias, - pattern: new RegExp(`(?:^|\\s)(${values.join('|')})(?:$|\\s)`), - }; -} - -/** - * Code-highlighting plugin based on Prism and - * https://github.com/ianstormtaylor/slate/blob/master/examples/code-highlighting/index.js - * - * (Adapted to handle nested grammar definitions.) - */ - -export default function PrismPlugin({ definition, language }: { definition: any; language: string }) { - if (definition) { - // Don't override exising modified definitions - Prism.languages[language] = Prism.languages[language] || definition; - } - - return { - /** - * Render a Slate mark with appropriate CSS class names - * - * @param {Object} props - * @returns {Element} - */ - - renderDecoration(props: any, editor: Editor, next: () => any): JSX.Element { - const { children, decoration } = props; - // Only apply spans to marks identified by this plugin - if (decoration.type !== TOKEN_MARK) { - return next(); - } - const className = `token ${decoration.data.get('types')}`; - return {children}; - }, - - /** - * Decorate code blocks with Prism.js highlighting. - * - * @param {Node} node - * @returns {Array} - */ - - decorateNode(node: any, editor: Editor, next: () => any): any[] { - if (node.type !== 'paragraph') { - return []; - } - - const texts = node.getTexts().toArray(); - const tstring = texts.map((t: { text: any }) => t.text).join('\n'); - const grammar = Prism.languages[language]; - const tokens = Prism.tokenize(tstring, grammar); - const decorations: Decoration[] = []; - let startText = texts.shift(); - let endText = startText; - let startOffset = 0; - let endOffset = 0; - let start = 0; - - function processToken(token: any, acc?: string) { - // Accumulate token types down the tree - const types = `${acc || ''} ${token.type || ''} ${token.alias || ''}`; - - // Add mark for token node - if (typeof token === 'string' || typeof token.content === 'string') { - startText = endText; - startOffset = endOffset; - - const content = typeof token === 'string' ? token : token.content; - const newlines = content.split('\n').length - 1; - const length = content.length - newlines; - const end = start + length; - - let available = startText.text.length - startOffset; - let remaining = length; - - endOffset = startOffset + remaining; - - while (available < remaining) { - endText = texts.shift(); - remaining = length - available; - available = endText.text.length; - endOffset = remaining; - } - - // Inject marks from up the tree (acc) as well - if (typeof token !== 'string' || acc) { - const range = node.createDecoration({ - anchor: { - key: startText.key, - offset: startOffset, - }, - focus: { - key: endText.key, - offset: endOffset, - }, - type: TOKEN_MARK, - data: { types }, - }); - - decorations.push(range); - } - - start = end; - } else if (token.content && token.content.length) { - // Tokens can be nested - for (const subToken of token.content) { - processToken(subToken, types); - } - } - } - - // Process top-level tokens - for (const token of tokens) { - processToken(token); - } - - return decorations; - }, - }; -}