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
2025-02-25 18:55:37 -06:00 · 2021-05-05 13:19:14 +02:00 · 2021-05-05 13:19:14 +02:00 · dbcfebac56
commit dbcfebac56
parent f121e3a281
20 changed files with 53 additions and 37 deletions
--- a/e2e/shared/smokeTestScenario.ts
+++ b/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');
  },
 };
--- a/e2e/suite1/specs/panelEdit_base.spec.ts
+++ b/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();
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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',
  },
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx
+++ b/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}
--- a/pkg/api/frontendsettings.go
+++ b/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
 }
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/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 },
    };
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/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>,
    ];
--- a/public/app/features/dashboard/components/VizTypePicker/VizTypePickerPlugin.tsx
+++ b/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}
--- a/public/app/plugins/panel/barchart/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/bargauge/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/gauge/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/graph/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/heatmap/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/news/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/piechart/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/stat/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/table/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/text/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/timeline/plugin.json
+++ b/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"
--- a/public/app/plugins/panel/timeseries/plugin.json
+++ b/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"