TimeSeries: Explicitly add transformer when timeseries-long exists (#64092)

public/app/features/panel/components/PanelDataErrorView.test.tsx

@@ -9,6 +9,14 @@ import { configureStore } from 'app/store/configureStore';
 
 import { PanelDataErrorView } from './PanelDataErrorView';
 
+jest.mock('app/features/dashboard/services/DashboardSrv', () => ({
+  getDashboardSrv: () => {
+    return {
+      getCurrent: () => undefined,
+    };
+  },
+}));
+
 describe('PanelDataErrorView', () => {
   it('show No data when there is no data', () => {
     renderWithProps();

public/app/features/panel/components/PanelDataErrorView.tsx

@@ -1,8 +1,14 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { CoreApp, GrafanaTheme2, PanelDataSummary, VisualizationSuggestionsBuilder } from '@grafana/data';
-import { PanelDataErrorViewProps } from '@grafana/runtime';
+import {
+  CoreApp,
+  GrafanaTheme2,
+  PanelDataSummary,
+  VisualizationSuggestionsBuilder,
+  VisualizationSuggestion,
+} from '@grafana/data';
+import { PanelDataErrorViewProps, locationService } from '@grafana/runtime';
 import { usePanelContext, useStyles2 } from '@grafana/ui';
 import { CardButton } from 'app/core/components/CardButton';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
@@ -21,6 +27,7 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
   const { dataSummary } = builder;
   const message = getMessageFor(props, dataSummary);
   const dispatch = useDispatch();
+  const panel = getDashboardSrv().getCurrent()?.getPanelById(props.panelId);
 
   const openVizPicker = () => {
     store.setObject(LS_VISUALIZATION_SELECT_TAB_KEY, VisualizationSelectPaneTab.Suggestions);
@@ -28,7 +35,6 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
   };
 
   const switchToTable = () => {
-    const panel = getDashboardSrv().getCurrent()?.getPanelById(props.panelId);
     if (!panel) {
       return;
     }
@@ -41,11 +47,37 @@ export function PanelDataErrorView(props: PanelDataErrorViewProps) {
     );
   };
 
+  const loadSuggestion = (s: VisualizationSuggestion) => {
+    if (!panel) {
+      return;
+    }
+    dispatch(
+      changePanelPlugin({
+        ...s, // includes panelId, config, etc
+        panel,
+      })
+    );
+    if (s.transformations) {
+      setTimeout(() => {
+        locationService.partial({ tab: 'transform' });
+      }, 100);
+    }
+  };
+
   return (
     <div className={styles.wrapper}>
       <div className={styles.message}>{message}</div>
-      {context.app === CoreApp.PanelEditor && dataSummary.hasData && (
+      {context.app === CoreApp.PanelEditor && dataSummary.hasData && panel && (
         <div className={styles.actions}>
+          {props.suggestions && (
+            <>
+              {props.suggestions.map((v) => (
+                <CardButton key={v.name} icon="process" onClick={() => loadSuggestion(v)}>
+                  {v.name}
+                </CardButton>
+              ))}
+            </>
+          )}
           <CardButton icon="table" onClick={switchToTable}>
             Switch to table
           </CardButton>

public/app/features/panel/state/actions.test.ts

@@ -21,6 +21,14 @@ jest.mock('app/features/plugins/importPanelPlugin', () => {
   };
 });
 
+jest.mock('app/features/dashboard/services/DashboardSrv', () => ({
+  getDashboardSrv: () => {
+    return {
+      getCurrent: () => undefined,
+    };
+  },
+}));
+
 standardFieldConfigEditorRegistry.setInit(() => mockStandardFieldConfigOptions());
 standardEditorsRegistry.setInit(() => mockStandardFieldConfigOptions());
 

public/app/features/panel/state/actions.ts

@@ -56,10 +56,11 @@ export function changePanelPlugin({
   pluginId,
   options,
   fieldConfig,
+  transformations,
 }: ChangePanelPluginAndOptionsArgs): ThunkResult<void> {
   return async (dispatch, getStore) => {
     // ignore action is no change
-    if (panel.type === pluginId && !options && !fieldConfig) {
+    if (panel.type === pluginId && !options && !fieldConfig && !transformations) {
       return;
     }
 
@@ -74,7 +75,7 @@ export function changePanelPlugin({
       panel.changePlugin(plugin);
     }
 
-    if (options || fieldConfig) {
+    if (options || fieldConfig || transformations) {
       const newOptions = getPanelOptionsWithDefaults({
         plugin,
         currentOptions: options || panel.options,
@@ -84,6 +85,7 @@ export function changePanelPlugin({
 
       panel.options = newOptions.options;
       panel.fieldConfig = newOptions.fieldConfig;
+      panel.transformations = transformations || panel.transformations;
       panel.configRev++;
     }