diff --git a/CHANGELOG.md b/CHANGELOG.md index aa27c410f13..ba3d6d6067e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -219,7 +219,7 @@ * **Dashboard**: Adds Logs Panel (alpha) as visualization option for Dashboards. [#18641](https://github.com/grafana/grafana/pull/18641), [@hugohaggmark](https://github.com/hugohaggmark) * **Dashboard**: Reuse query results between panels . [#16660](https://github.com/grafana/grafana/pull/16660), [@ryantxu](https://github.com/ryantxu) * **Dashboard**: Set time to to 23:59:59 when setting To time using calendar. [#18595](https://github.com/grafana/grafana/pull/18595), [@simPod](https://github.com/simPod) -* **DataLinks**: Add DataLinks support to Gauge, BarGauge and SingleStat2 panel. [#18605](https://github.com/grafana/grafana/pull/18605), [@ryantxu](https://github.com/ryantxu) +* **DataLinks**: Add DataLinks support to Gauge, BarGauge and stat panel. [#18605](https://github.com/grafana/grafana/pull/18605), [@ryantxu](https://github.com/ryantxu) * **DataLinks**: Enable access to labels & field names. [#18918](https://github.com/grafana/grafana/pull/18918), [@torkelo](https://github.com/torkelo) * **DataLinks**: Enable multiple data links per panel. [#18434](https://github.com/grafana/grafana/pull/18434), [@dprokop](https://github.com/dprokop) * **Docker**: switch docker image to alpine base with phantomjs support. [#18468](https://github.com/grafana/grafana/pull/18468), [@DanCech](https://github.com/DanCech) diff --git a/devenv/dev-dashboards/panel-stat/panel-stat-tests.json b/devenv/dev-dashboards/panel-stat/panel-stat-tests.json index 50b02a4caa5..1894501bbd1 100644 --- a/devenv/dev-dashboards/panel-stat/panel-stat-tests.json +++ b/devenv/dev-dashboards/panel-stat/panel-stat-tests.json @@ -102,7 +102,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -189,7 +189,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -276,7 +276,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -363,7 +363,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -450,7 +450,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -537,7 +537,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" }, { "datasource": null, @@ -624,7 +624,7 @@ "timeFrom": null, "timeShift": null, "title": "Panel Title", - "type": "singlestat2" + "type": "stat" } ], "schemaVersion": 20, diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx index 25ad8f218b7..5835f583cbb 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx @@ -1,6 +1,6 @@ import { storiesOf } from '@storybook/react'; import { text } from '@storybook/addon-knobs'; -import { BigValue, SingleStatDisplayMode } from './BigValue'; +import { BigValue, BigValueDisplayMode } from './BigValue'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; @@ -16,14 +16,14 @@ const BigValueStories = storiesOf('UI/BigValue', module); BigValueStories.addDecorator(withCenteredStory); interface StoryOptions { - mode: SingleStatDisplayMode; + mode: BigValueDisplayMode; width?: number; height?: number; noSparkline?: boolean; } function addStoryForMode(options: StoryOptions) { - BigValueStories.add(`Mode: ${SingleStatDisplayMode[options.mode]}`, () => { + BigValueStories.add(`Mode: ${BigValueDisplayMode[options.mode]}`, () => { const { value, title } = getKnobs(); return renderComponentWithTheme(BigValue, { @@ -52,7 +52,7 @@ function addStoryForMode(options: StoryOptions) { }); } -addStoryForMode({ mode: SingleStatDisplayMode.Classic }); -addStoryForMode({ mode: SingleStatDisplayMode.Classic2 }); -addStoryForMode({ mode: SingleStatDisplayMode.Vibrant }); -addStoryForMode({ mode: SingleStatDisplayMode.Vibrant2 }); +addStoryForMode({ mode: BigValueDisplayMode.Classic }); +addStoryForMode({ mode: BigValueDisplayMode.Classic2 }); +addStoryForMode({ mode: BigValueDisplayMode.Vibrant }); +addStoryForMode({ mode: BigValueDisplayMode.Vibrant2 }); diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx index 390e3905aaa..6113bc2d964 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { BigValue, Props, SingleStatDisplayMode } from './BigValue'; +import { BigValue, Props, BigValueDisplayMode } from './BigValue'; import { getTheme } from '../../themes/index'; jest.mock('jquery', () => ({ @@ -11,7 +11,7 @@ const setup = (propOverrides?: object) => { const props: Props = { height: 300, width: 300, - displayMode: SingleStatDisplayMode.Classic, + displayMode: BigValueDisplayMode.Classic, value: { text: '25', numeric: 25, diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx index 992ab74e283..14701696c2e 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx @@ -16,7 +16,7 @@ export interface BigValueSparkline { maxX: number; } -export enum SingleStatDisplayMode { +export enum BigValueDisplayMode { Classic, Classic2, Vibrant, @@ -30,7 +30,7 @@ export interface Props extends Themeable { sparkline?: BigValueSparkline; onClick?: React.MouseEventHandler; className?: string; - displayMode: SingleStatDisplayMode; + displayMode: BigValueDisplayMode; } export class BigValue extends PureComponent { @@ -73,7 +73,7 @@ interface LayoutResult { type: LayoutType; width: number; height: number; - displayMode: SingleStatDisplayMode; + displayMode: BigValueDisplayMode; theme: GrafanaTheme; valueColor: string; } @@ -135,9 +135,9 @@ export function calculateLayout(props: Props): LayoutResult { } switch (displayMode) { - case SingleStatDisplayMode.Vibrant2: - case SingleStatDisplayMode.Classic: - case SingleStatDisplayMode.Classic2: + case BigValueDisplayMode.Vibrant2: + case BigValueDisplayMode.Classic: + case BigValueDisplayMode.Classic2: chartWidth = width; chartHeight += PANEL_PADDING; break; @@ -181,8 +181,8 @@ export function getValueStyles(layout: LayoutResult) { }; switch (layout.displayMode) { - case SingleStatDisplayMode.Classic: - case SingleStatDisplayMode.Classic2: + case BigValueDisplayMode.Classic: + case BigValueDisplayMode.Classic2: styles.color = layout.valueColor; } @@ -234,8 +234,8 @@ export function getPanelStyles(layout: LayoutResult) { const themeFactor = layout.theme.isDark ? 1 : -0.7; switch (layout.displayMode) { - case SingleStatDisplayMode.Vibrant: - case SingleStatDisplayMode.Vibrant2: + case BigValueDisplayMode.Vibrant: + case BigValueDisplayMode.Vibrant2: const bgColor2 = tinycolor(layout.valueColor) .darken(15 * themeFactor) .spin(8) @@ -246,8 +246,8 @@ export function getPanelStyles(layout: LayoutResult) { .toRgbString(); panelStyles.background = `linear-gradient(120deg, ${bgColor2}, ${bgColor3})`; break; - case SingleStatDisplayMode.Classic: - case SingleStatDisplayMode.Classic2: + case BigValueDisplayMode.Classic: + case BigValueDisplayMode.Classic2: panelStyles.background = `${layout.theme.colors.dark4}`; break; } @@ -318,13 +318,13 @@ function renderGraph(layout: LayoutResult, sparkline?: BigValueSparkline) { } switch (layout.displayMode) { - case SingleStatDisplayMode.Vibrant2: + case BigValueDisplayMode.Vibrant2: geomRender = renderVibrant2Geom; break; - case SingleStatDisplayMode.Classic: + case BigValueDisplayMode.Classic: geomRender = renderClassicAreaGeom; break; - case SingleStatDisplayMode.Classic2: + case BigValueDisplayMode.Classic2: geomRender = renderAreaGeom; break; } diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index bdbe57303c0..885aaa8581c 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -48,7 +48,7 @@ export { Table } from './Table/Table'; export { TableInputCSV } from './Table/TableInputCSV'; // Visualizations -export { BigValue, SingleStatDisplayMode, BigValueSparkline } from './BigValue/BigValue'; +export { BigValue, BigValueDisplayMode, BigValueSparkline } from './BigValue/BigValue'; export { Gauge } from './Gauge/Gauge'; export { Graph } from './Graph/Graph'; export { GraphLegend } from './Graph/GraphLegend'; diff --git a/public/app/features/plugins/built_in_plugins.ts b/public/app/features/plugins/built_in_plugins.ts index 66648880a5d..a95d67b83d7 100644 --- a/public/app/features/plugins/built_in_plugins.ts +++ b/public/app/features/plugins/built_in_plugins.ts @@ -46,7 +46,7 @@ import * as heatmapPanel from 'app/plugins/panel/heatmap/module'; import * as tablePanel from 'app/plugins/panel/table/module'; import * as table2Panel from 'app/plugins/panel/table2/module'; import * as singlestatPanel from 'app/plugins/panel/singlestat/module'; -import * as singlestatPanel2 from 'app/plugins/panel/singlestat2/module'; +import * as singlestatPanel2 from 'app/plugins/panel/stat/module'; import * as gettingStartedPanel from 'app/plugins/panel/gettingstarted/module'; import * as gaugePanel from 'app/plugins/panel/gauge/module'; import * as pieChartPanel from 'app/plugins/panel/piechart/module'; @@ -86,7 +86,7 @@ const builtInPlugins: any = { 'app/plugins/panel/table/module': tablePanel, 'app/plugins/panel/table2/module': table2Panel, 'app/plugins/panel/singlestat/module': singlestatPanel, - 'app/plugins/panel/singlestat2/module': singlestatPanel2, + 'app/plugins/panel/stat/module': singlestatPanel2, 'app/plugins/panel/gettingstarted/module': gettingStartedPanel, 'app/plugins/panel/gauge/module': gaugePanel, 'app/plugins/panel/piechart/module': pieChartPanel, diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts index bd14ebe1b57..6e698753397 100644 --- a/public/app/plugins/panel/gauge/types.ts +++ b/public/app/plugins/panel/gauge/types.ts @@ -1,6 +1,6 @@ import { VizOrientation, FieldDisplayOptions } from '@grafana/data'; import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions'; -import { standardFieldDisplayOptions } from '../singlestat2/types'; +import { standardFieldDisplayOptions } from '../stat/types'; export interface GaugeOptions extends SingleStatBaseOptions { showThresholdLabels: boolean; diff --git a/public/app/plugins/panel/graph2/types.ts b/public/app/plugins/panel/graph2/types.ts index a6e40d237b6..06b0ba14bab 100644 --- a/public/app/plugins/panel/graph2/types.ts +++ b/public/app/plugins/panel/graph2/types.ts @@ -3,7 +3,7 @@ import { YAxis, FieldDisplayOptions } from '@grafana/data'; import { GraphLegendEditorLegendOptions } from './GraphLegendEditor'; // TODO move out from single stat -import { standardFieldDisplayOptions } from '../singlestat2/types'; +import { standardFieldDisplayOptions } from '../stat/types'; export interface SeriesOptions { color?: string; diff --git a/public/app/plugins/panel/piechart/types.ts b/public/app/plugins/panel/piechart/types.ts index e97af994bc9..4405fc7013a 100644 --- a/public/app/plugins/panel/piechart/types.ts +++ b/public/app/plugins/panel/piechart/types.ts @@ -1,5 +1,5 @@ import { PieChartType, SingleStatBaseOptions } from '@grafana/ui'; -import { standardFieldDisplayOptions } from '../singlestat2/types'; +import { standardFieldDisplayOptions } from '../stat/types'; import { ReducerID, VizOrientation } from '@grafana/data'; export interface PieChartOptions extends SingleStatBaseOptions { diff --git a/public/app/plugins/panel/singlestat2/README.md b/public/app/plugins/panel/stat/README.md similarity index 100% rename from public/app/plugins/panel/singlestat2/README.md rename to public/app/plugins/panel/stat/README.md diff --git a/public/app/plugins/panel/singlestat2/SparklineEditor.tsx b/public/app/plugins/panel/stat/SparklineEditor.tsx similarity index 100% rename from public/app/plugins/panel/singlestat2/SparklineEditor.tsx rename to public/app/plugins/panel/stat/SparklineEditor.tsx diff --git a/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx similarity index 93% rename from public/app/plugins/panel/singlestat2/SingleStatPanel.tsx rename to public/app/plugins/panel/stat/StatPanel.tsx index 9784ad01e48..9bd45d64e37 100644 --- a/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx +++ b/public/app/plugins/panel/stat/StatPanel.tsx @@ -5,12 +5,12 @@ import React, { PureComponent } from 'react'; import { config } from 'app/core/config'; // Types -import { SingleStatOptions } from './types'; +import { StatPanelOptions } from './types'; import { VizRepeater, BigValue, DataLinksContextMenu, BigValueSparkline } from '@grafana/ui'; import { PanelProps, getFieldDisplayValues, FieldDisplay } from '@grafana/data'; import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers'; -export class SingleStatPanel extends PureComponent> { +export class StatPanel extends PureComponent> { renderValue = (value: FieldDisplay, width: number, height: number): JSX.Element => { const { timeRange, options } = this.props; let sparkline: BigValueSparkline | undefined; diff --git a/public/app/plugins/panel/singlestat2/SingleStatEditor.tsx b/public/app/plugins/panel/stat/StatPanelEditor.tsx similarity index 95% rename from public/app/plugins/panel/singlestat2/SingleStatEditor.tsx rename to public/app/plugins/panel/stat/StatPanelEditor.tsx index 4e1845ab8b0..6bdcdd1899c 100644 --- a/public/app/plugins/panel/singlestat2/SingleStatEditor.tsx +++ b/public/app/plugins/panel/stat/StatPanelEditor.tsx @@ -15,14 +15,14 @@ import { import { Threshold, ValueMapping, FieldConfig, DataLink, PanelEditorProps, FieldDisplayOptions } from '@grafana/data'; -import { SingleStatOptions, SparklineOptions, displayModes } from './types'; +import { StatPanelOptions, SparklineOptions, displayModes } from './types'; import { SparklineEditor } from './SparklineEditor'; import { getDataLinksVariableSuggestions, getCalculationValueDataLinksVariableSuggestions, } from 'app/features/panel/panellinks/link_srv'; -export class SingleStatEditor extends PureComponent> { +export class StatPanelEditor extends PureComponent> { onThresholdsChanged = (thresholds: Threshold[]) => { const current = this.props.options.fieldOptions.defaults; this.onDefaultsChange({ diff --git a/public/app/plugins/panel/singlestat2/img/icn-singlestat-panel.svg b/public/app/plugins/panel/stat/img/icn-singlestat-panel.svg similarity index 98% rename from public/app/plugins/panel/singlestat2/img/icn-singlestat-panel.svg rename to public/app/plugins/panel/stat/img/icn-singlestat-panel.svg index 746687d360f..b2233680037 100644 --- a/public/app/plugins/panel/singlestat2/img/icn-singlestat-panel.svg +++ b/public/app/plugins/panel/stat/img/icn-singlestat-panel.svg @@ -1,83 +1,83 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/plugins/panel/singlestat2/module.tsx b/public/app/plugins/panel/stat/module.tsx similarity index 53% rename from public/app/plugins/panel/singlestat2/module.tsx rename to public/app/plugins/panel/stat/module.tsx index fd3ab4110fb..8dadb9ece08 100644 --- a/public/app/plugins/panel/singlestat2/module.tsx +++ b/public/app/plugins/panel/stat/module.tsx @@ -1,12 +1,12 @@ import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui'; import { PanelPlugin } from '@grafana/data'; -import { SingleStatOptions, defaults } from './types'; -import { SingleStatPanel } from './SingleStatPanel'; -import { SingleStatEditor } from './SingleStatEditor'; +import { StatPanelOptions, defaults } from './types'; +import { StatPanel } from './StatPanel'; +import { StatPanelEditor } from './StatPanelEditor'; -export const plugin = new PanelPlugin(SingleStatPanel) +export const plugin = new PanelPlugin(StatPanel) .setDefaults(defaults) - .setEditor(SingleStatEditor) + .setEditor(StatPanelEditor) .setNoPadding() .setPanelChangeHandler(sharedSingleStatPanelChangedHandler) .setMigrationHandler(sharedSingleStatMigrationHandler); diff --git a/public/app/plugins/panel/singlestat2/plugin.json b/public/app/plugins/panel/stat/plugin.json similarity index 85% rename from public/app/plugins/panel/singlestat2/plugin.json rename to public/app/plugins/panel/stat/plugin.json index 670bd67643d..0c28b0489f3 100644 --- a/public/app/plugins/panel/singlestat2/plugin.json +++ b/public/app/plugins/panel/stat/plugin.json @@ -1,7 +1,7 @@ { "type": "panel", - "name": "Singlestat (react)", - "id": "singlestat2", + "name": "Stat", + "id": "stat", "state": "alpha", "info": { diff --git a/public/app/plugins/panel/singlestat2/types.ts b/public/app/plugins/panel/stat/types.ts similarity index 54% rename from public/app/plugins/panel/singlestat2/types.ts rename to public/app/plugins/panel/stat/types.ts index 248f070a2de..1cf123a8d6c 100644 --- a/public/app/plugins/panel/singlestat2/types.ts +++ b/public/app/plugins/panel/stat/types.ts @@ -1,4 +1,4 @@ -import { SingleStatBaseOptions, SingleStatDisplayMode } from '@grafana/ui'; +import { SingleStatBaseOptions, BigValueDisplayMode } from '@grafana/ui'; import { VizOrientation, ReducerID, FieldDisplayOptions, SelectableValue } from '@grafana/data'; export interface SparklineOptions { @@ -6,15 +6,15 @@ export interface SparklineOptions { } // Structure copied from angular -export interface SingleStatOptions extends SingleStatBaseOptions { +export interface StatPanelOptions extends SingleStatBaseOptions { sparkline: SparklineOptions; - displayMode: SingleStatDisplayMode; + displayMode: BigValueDisplayMode; } -export const displayModes: Array> = [ - { value: SingleStatDisplayMode.Classic, label: 'Classic' }, - { value: SingleStatDisplayMode.Vibrant, label: 'Vibrant' }, - { value: SingleStatDisplayMode.Vibrant2, label: 'Vibrant 2' }, +export const displayModes: Array> = [ + { value: BigValueDisplayMode.Classic, label: 'Classic' }, + { value: BigValueDisplayMode.Vibrant, label: 'Vibrant' }, + { value: BigValueDisplayMode.Vibrant2, label: 'Vibrant 2' }, ]; export const standardFieldDisplayOptions: FieldDisplayOptions = { @@ -32,11 +32,11 @@ export const standardFieldDisplayOptions: FieldDisplayOptions = { override: {}, }; -export const defaults: SingleStatOptions = { +export const defaults: StatPanelOptions = { sparkline: { show: true, }, - displayMode: SingleStatDisplayMode.Vibrant, + displayMode: BigValueDisplayMode.Vibrant, fieldOptions: standardFieldDisplayOptions, orientation: VizOrientation.Auto, }; diff --git a/yarn.lock b/yarn.lock index 8a6432e1094..ac9c9a75a9b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5862,6 +5862,11 @@ caniuse-api@^3.0.0: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" +caniuse-db@1.0.30000772: + version "1.0.30000772" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000772.tgz#51aae891768286eade4a3d8319ea76d6a01b512b" + integrity sha1-UarokXaChureSj2DGep21qAbUSs= + caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000947, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000999: version "1.0.30000999" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000999.tgz#427253a69ad7bea4aa8d8345687b8eec51ca0e43"