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

@@ -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
 }
 

packages/grafana-ui/src/components/uPlot/config.ts

@@ -162,7 +162,7 @@ export const graphFieldOptions = {
   ] as Array<SelectableValue<AxisPlacement>>,
 
   fillGradient: [
-    { label: 'None', value: undefined },
+    { label: 'None', value: AreaGradientMode.None },
     { label: 'Opacity', value: AreaGradientMode.Opacity },
     { label: 'Hue', value: AreaGradientMode.Hue },
   ] as Array<SelectableValue<AreaGradientMode>>,

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
 }

public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx

@@ -140,13 +140,14 @@ const PanelPluginBadge: React.FC<PanelPluginBadgeProps> = ({ plugin }) => {
     return <PluginSignatureBadge status={plugin.signature} />;
   }
 
-  if (plugin.state !== PluginState.deprecated && plugin.state !== PluginState.alpha) {
+  if (!display) {
     return null;
   }
+
   return <Badge color={display.color} text={display.text} icon={display.icon} tooltip={display.tooltip} />;
 };
 
-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';

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,
       },

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);

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

@@ -68,8 +68,8 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(TimeSeriesPanel
         })
         .addSliderInput({
           path: 'fillOpacity',
-          name: 'Fill area opacity',
+          name: 'Fill opacity',
-          defaultValue: 10,
+          defaultValue: 0,
           settings: {
             min: 0,
             max: 100,
@@ -77,6 +77,15 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(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<void, LineStyle>({
           id: 'lineStyle',
           path: 'lineStyle',
@@ -87,15 +96,6 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(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',

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": {