TimeSeries: Make timeseries the default panel and remove beta state (#33639)

* TimeSeries: Make timeseries the default panel and remove beta state

* rename old graph

* Updated panel descriptions, fixed e2e tests

* Updated text

* Fixed e2e

* Fixing e2e tests

e2e/shared/smokeTestScenario.ts

@@ -20,14 +20,12 @@ export const smokeTestScenario = {
       });
 
     // Make sure the graph renders via checking legend
-    e2e.components.Panels.Visualization.Graph.Legend.legendItemAlias('A-series').should('be.visible');
+    e2e.components.VizLegend.seriesName('A-series').should('be.visible');
 
     // Expand options section
-    e2e.components.Panels.Visualization.Graph.VisualizationTab.legendSection().click();
+    e2e.components.PanelEditor.applyButton();
 
-    // Disable legend
-    e2e.components.Panels.Visualization.Graph.Legend.showLegendSwitch().click();
-
-    e2e.components.Panels.Visualization.Graph.Legend.legendItemAlias('A-series').should('not.exist');
+    // Make sure panel is & visualization is added to dashboard
+    e2e.components.VizLegend.seriesName('A-series').should('be.visible');
   },
 };

e2e/suite1/specs/panelEdit_base.spec.ts

@@ -1,6 +1,6 @@
 import { e2e } from '@grafana/e2e';
 
-const PANEL_UNDER_TEST = 'Random walk series';
+const PANEL_UNDER_TEST = 'Lines 500 data points';
 
 e2e.scenario({
   describeName: 'Panel edit tests',
@@ -9,7 +9,7 @@ e2e.scenario({
   addScenarioDashBoard: false,
   skipScenario: false,
   scenario: () => {
-    e2e.flows.openDashboard({ uid: '5SdHCadmz' });
+    e2e.flows.openDashboard({ uid: 'TkZXxlNG3' });
 
     e2e.flows.openPanelMenuItem(e2e.flows.PanelMenuItems.Edit, PANEL_UNDER_TEST);
 
@@ -64,12 +64,10 @@ e2e.scenario({
     e2e.components.PanelEditor.toggleVizOptions().should('be.visible').click();
     e2e.components.PanelEditor.OptionsPane.content().should('be.visible');
 
-    // Check that Graph is chosen
+    // Check that Time series is chosen
     e2e.components.PanelEditor.toggleVizPicker().click();
-    e2e.components.PluginVisualization.item('Graph').should('be.visible');
-    e2e.components.PluginVisualization.current().within((div: JQuery<HTMLDivElement>) => {
-      expect(div.text()).equals('Graph');
-    });
+    e2e.components.PluginVisualization.item('Time series').should('be.visible');
+    e2e.components.PluginVisualization.current().should((e) => expect(e).to.contain('Time series'));
 
     // Change to Text panel
     e2e.components.PluginVisualization.item('Text').scrollIntoView().should('be.visible').click();

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -49,6 +49,9 @@ export const Components = {
       },
     },
   },
+  VizLegend: {
+    seriesName: (name: string) => `VizLegend series ${name}`,
+  },
   Drawer: {
     General: {
       title: (title: string) => `Drawer title ${title}`,
@@ -71,6 +74,7 @@ export const Components = {
     DataPane: {
       content: 'Panel editor data pane content',
     },
+    applyButton: 'panel editor apply',
     toggleVizPicker: 'toggle-viz-picker',
     toggleVizOptions: 'toggle-viz-options',
   },

packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx

@@ -5,6 +5,7 @@ import { VizLegendItem } from './types';
 import { VizLegendStatsList } from './VizLegendStatsList';
 import { useStyles } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 
 export interface Props {
   item: VizLegendItem;
@@ -53,7 +54,7 @@ export const VizLegendListItem: React.FunctionComponent<Props> = ({
   );
 
   return (
-    <div className={styles.itemWrapper}>
+    <div className={styles.itemWrapper} aria-label={selectors.components.VizLegend.seriesName(item.label)}>
       <VizLegendSeriesIcon seriesName={item.label} color={item.color} />
       <div
         onMouseEnter={onMouseEnter}

pkg/api/frontendsettings.go

@@ -254,34 +254,36 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *models.ReqContext) (map[string]i
 func getPanelSort(id string) int {
 	sort := 100
 	switch id {
-	case "graph":
-		sort = 1
 	case "timeseries":
-		sort = 2
+		sort = 1
 	case "barchart":
-		sort = 3
+		sort = 2
 	case "stat":
-		sort = 4
+		sort = 3
 	case "gauge":
-		sort = 5
+		sort = 4
 	case "bargauge":
-		sort = 6
+		sort = 5
 	case "table":
-		sort = 7
+		sort = 6
 	case "singlestat":
-		sort = 8
+		sort = 7
 	case "piechart":
+		sort = 8
+	case "timeline":
 		sort = 9
 	case "heatmap":
 		sort = 10
-	case "text":
+	case "graph":
 		sort = 11
-	case "alertlist":
+	case "text":
 		sort = 12
-	case "dashlist":
+	case "alertlist":
 		sort = 13
-	case "news":
+	case "dashlist":
 		sort = 14
+	case "news":
+		sort = 15
 	}
 	return sort
 }

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -72,7 +72,7 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
     const { gridPos } = panel;
 
     const newPanel: Partial<PanelModel> = {
-      type: 'graph',
+      type: 'timeseries',
       title: 'Panel Title',
       gridPos: { x: gridPos.x, y: gridPos.y, w: gridPos.w, h: gridPos.h },
     };

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -330,7 +330,13 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
           Save
         </ToolbarButton>
       ),
-      <ToolbarButton onClick={this.onBack} variant="primary" title="Apply changes and go back to dashboard" key="apply">
+      <ToolbarButton
+        onClick={this.onBack}
+        variant="primary"
+        title="Apply changes and go back to dashboard"
+        key="apply"
+        aria-label={selectors.components.PanelEditor.applyButton}
+      >
         Apply
       </ToolbarButton>,
     ];

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

@@ -14,6 +14,7 @@ export const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClic
     <PanelTypeCard
       title={plugin.name}
       plugin={plugin}
+      description={plugin.info.description}
       onClick={onClick}
       isCurrent={isCurrent}
       disabled={disabled}

public/app/plugins/panel/barchart/plugin.json

@@ -2,10 +2,10 @@
   "type": "panel",
   "name": "Bar chart",
   "id": "barchart",
-
-  "state": "alpha",
+  "state": "beta",
 
   "info": {
+    "description": "Categorical charts with group support",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/bargauge/plugin.json

@@ -4,6 +4,7 @@
   "id": "bargauge",
 
   "info": {
+    "description": "Horizontal and vertical gauges",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/gauge/plugin.json

@@ -4,6 +4,7 @@
   "id": "gauge",
 
   "info": {
+    "description": "Standard gauge visualization",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/graph/plugin.json

@@ -1,10 +1,10 @@
 {
   "type": "panel",
-  "name": "Graph",
+  "name": "Graph (old)",
   "id": "graph",
 
   "info": {
-    "description": "Graph Panel for Grafana",
+    "description": "The old default graph panel",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/heatmap/plugin.json

@@ -4,7 +4,7 @@
   "id": "heatmap",
 
   "info": {
-    "description": "Heatmap Panel for Grafana",
+    "description": "Like a histogram over time",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/news/plugin.json

@@ -8,6 +8,7 @@
   "state": "beta",
 
   "info": {
+    "description": "RSS feed reader",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/piechart/plugin.json

@@ -5,6 +5,7 @@
   "state": "beta",
 
   "info": {
+    "description": "The new core pie chart visualization",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/stat/plugin.json

@@ -4,7 +4,7 @@
   "id": "stat",
 
   "info": {
-    "description": "Singlestat Panel for Grafana",
+    "description": "Big stat values & sparklines",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/table/plugin.json

@@ -9,7 +9,7 @@
   },
 
   "info": {
-    "description": "Table Panel for Grafana",
+    "description": "Supports many column styles",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/text/plugin.json

@@ -6,6 +6,7 @@
   "skipDataQuery": true,
 
   "info": {
+    "description": "Supports markdown and html content",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/timeline/plugin.json

@@ -6,6 +6,7 @@
   "state": "alpha",
 
   "info": {
+    "description": "State over time",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"

public/app/plugins/panel/timeseries/plugin.json

@@ -2,9 +2,9 @@
   "type": "panel",
   "name": "Time series",
   "id": "timeseries",
-  "state": "beta",
 
   "info": {
+    "description": "Time based line, area and bar charts",
     "author": {
       "name": "Grafana Labs",
       "url": "https://grafana.com"