From ba158e72dfdba35acf6e71051ae28281f32355cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 10 Jan 2021 17:41:20 +0100 Subject: [PATCH] GraphNG: Minor polish & updates to new time series panel and move it from alpha to beta (#30163) * GraphNG: Minor polish & updates to new time series panel * Fixed gradient default * Updated snapshot --- packages/grafana-data/src/types/plugin.ts | 1 + .../grafana-ui/src/components/uPlot/config.ts | 2 +- pkg/api/frontendsettings.go | 22 ++++++++------- .../VizTypePicker/VizTypePickerPlugin.tsx | 28 +++++++++++++------ .../__snapshots__/migrations.test.ts.snap | 2 +- .../plugins/panel/timeseries/migrations.ts | 4 +-- .../app/plugins/panel/timeseries/module.tsx | 22 +++++++-------- .../app/plugins/panel/timeseries/plugin.json | 4 +-- 8 files changed, 49 insertions(+), 36 deletions(-) diff --git a/packages/grafana-data/src/types/plugin.ts b/packages/grafana-data/src/types/plugin.ts index 51a676e1970..b963136c434 100644 --- a/packages/grafana-data/src/types/plugin.ts +++ b/packages/grafana-data/src/types/plugin.ts @@ -6,6 +6,7 @@ import { LiveChannelSupport } from './live'; export enum PluginState { alpha = 'alpha', // Only included if `enable_alpha` config option is true beta = 'beta', // Will show a warning banner + stable = 'stable', // Will show a warning banner deprecated = 'deprecated', // Will continue to work -- but not show up in the options to add } diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index 87362e6a481..bb50c36fd7a 100644 --- a/packages/grafana-ui/src/components/uPlot/config.ts +++ b/packages/grafana-ui/src/components/uPlot/config.ts @@ -162,7 +162,7 @@ export const graphFieldOptions = { ] as Array>, fillGradient: [ - { label: 'None', value: undefined }, + { label: 'None', value: AreaGradientMode.None }, { label: 'Opacity', value: AreaGradientMode.Opacity }, { label: 'Hue', value: AreaGradientMode.Hue }, ] as Array>, diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 38369ef6d54..e57c0a05a87 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -252,26 +252,28 @@ func getPanelSort(id string) int { switch id { case "graph": sort = 1 - case "stat": + case "timeseries": sort = 2 - case "gauge": + case "stat": sort = 3 - case "bargauge": + case "gauge": sort = 4 - case "table": + case "bargauge": sort = 5 - case "singlestat": + case "table": sort = 6 - case "text": + case "singlestat": sort = 7 - case "heatmap": + case "text": sort = 8 - case "alertlist": + case "heatmap": sort = 9 + case "alertlist": + sort = 10 case "dashlist": - sort = 10 + sort = 11 case "news": - sort = 10 + sort = 12 } return sort } diff --git a/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx b/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx index 043cf1ee824..ea4cbeb7b4d 100644 --- a/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx @@ -140,13 +140,14 @@ const PanelPluginBadge: React.FC = ({ plugin }) => { return ; } - if (plugin.state !== PluginState.deprecated && plugin.state !== PluginState.alpha) { + if (!display) { return null; } + return ; }; -function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps { +function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps | null { switch (panel.state) { case PluginState.deprecated: return { @@ -155,14 +156,23 @@ function getPanelStateBadgeDisplayModel(panel: PanelPluginMeta): BadgeProps { color: 'red', tooltip: `${panel.name} panel is deprecated`, }; + case PluginState.alpha: + return { + text: 'Alpha', + icon: 'rocket', + color: 'blue', + tooltip: `${panel.name} panel is experimental`, + }; + case PluginState.beta: + return { + text: 'Beta', + icon: 'rocket', + color: 'blue', + tooltip: `${panel.name} panel is in beta`, + }; + default: + return null; } - - return { - text: 'Alpha', - icon: 'rocket', - color: 'blue', - tooltip: `${panel.name} panel is experimental`, - }; } PanelPluginBadge.displayName = 'PanelPluginBadge'; diff --git a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap index feae66d3613..9f5ac96da84 100644 --- a/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap +++ b/public/app/plugins/panel/timeseries/__snapshots__/migrations.test.ts.snap @@ -6,7 +6,7 @@ Object { "defaults": Object { "custom": Object { "drawStyle": "bars", - "fillOpacity": 1, + "fillOpacity": 100, "showPoints": "never", "spanNulls": false, }, diff --git a/public/app/plugins/panel/timeseries/migrations.ts b/public/app/plugins/panel/timeseries/migrations.ts index 8f3ba4b6bba..df787b2ba32 100644 --- a/public/app/plugins/panel/timeseries/migrations.ts +++ b/public/app/plugins/panel/timeseries/migrations.ts @@ -153,7 +153,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour }); rule.properties.push({ id: 'custom.fillOpacity', - value: 1, // solid bars + value: 100, // solid bars }); } else { rule.properties.push({ @@ -245,7 +245,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour } if (graph.drawStyle === DrawStyle.Bars) { - graph.fillOpacity = 1.0; // bars were always + graph.fillOpacity = 100; // bars were always } y1.custom = omitBy(graph, isNil); diff --git a/public/app/plugins/panel/timeseries/module.tsx b/public/app/plugins/panel/timeseries/module.tsx index 54bef852ce8..00079289d1a 100644 --- a/public/app/plugins/panel/timeseries/module.tsx +++ b/public/app/plugins/panel/timeseries/module.tsx @@ -68,8 +68,8 @@ export const plugin = new PanelPlugin(TimeSeriesPanel }) .addSliderInput({ path: 'fillOpacity', - name: 'Fill area opacity', - defaultValue: 10, + name: 'Fill opacity', + defaultValue: 0, settings: { min: 0, max: 100, @@ -77,6 +77,15 @@ export const plugin = new PanelPlugin(TimeSeriesPanel }, showIf: c => c.drawStyle !== DrawStyle.Points, }) + .addRadio({ + path: 'fillGradient', + name: 'Fill gradient', + defaultValue: graphFieldOptions.fillGradient[0].value, + settings: { + options: graphFieldOptions.fillGradient, + }, + showIf: c => !!(c.drawStyle !== DrawStyle.Points && c.fillOpacity && c.fillOpacity > 0), + }) .addCustomEditor({ id: 'lineStyle', path: 'lineStyle', @@ -87,15 +96,6 @@ export const plugin = new PanelPlugin(TimeSeriesPanel process: identityOverrideProcessor, shouldApply: f => f.type === FieldType.number, }) - .addRadio({ - path: 'fillGradient', - name: 'Fill gradient', - defaultValue: graphFieldOptions.fillGradient[0], - settings: { - options: graphFieldOptions.fillGradient, - }, - showIf: c => !!(c.drawStyle !== DrawStyle.Points && c.fillOpacity && c.fillOpacity > 0), - }) .addRadio({ path: 'spanNulls', name: 'Null values', diff --git a/public/app/plugins/panel/timeseries/plugin.json b/public/app/plugins/panel/timeseries/plugin.json index e7c4e283b10..68482ad8b56 100644 --- a/public/app/plugins/panel/timeseries/plugin.json +++ b/public/app/plugins/panel/timeseries/plugin.json @@ -1,8 +1,8 @@ { "type": "panel", - "name": "Timeseries", + "name": "Time series", "id": "timeseries", - "state": "alpha", + "state": "beta", "info": { "author": {