Panels: Add troubleshooting snapshot (#54417)

public/app/features/inspector/InspectJSONTab.tsx

@@ -3,22 +3,18 @@ import React, { PureComponent } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { firstValueFrom } from 'rxjs';
 
-import {
-  AppEvents,
-  DataFrameJSON,
-  dataFrameToJSON,
-  DataTopic,
-  PanelData,
-  SelectableValue,
-  LoadingState,
-} from '@grafana/data';
+import { AppEvents, PanelData, SelectableValue, LoadingState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
+import { locationService } from '@grafana/runtime';
 import { Button, CodeEditor, Field, Select } from '@grafana/ui';
 import { appEvents } from 'app/core/core';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 
+import { getPanelDataFrames } from '../dashboard/components/DebugWizard/utils';
 import { getPanelInspectorStyles } from '../inspector/styles';
 
+import { InspectTab } from './types';
+
 enum ShowContent {
   PanelJSON = 'panel',
   PanelData = 'data',
@@ -138,6 +134,12 @@ export class InspectJSONTab extends PureComponent<Props, State> {
     }
   };
 
+  onShowSupportWizard = () => {
+    const queryParms = locationService.getSearch();
+    queryParms.set('inspectTab', InspectTab.Debug.toString());
+    locationService.push('?' + queryParms.toString());
+  };
+
   render() {
     const { dashboard } = this.props;
     const { show, text } = this.state;
@@ -166,6 +168,11 @@ export class InspectJSONTab extends PureComponent<Props, State> {
               Apply
             </Button>
           )}
+          {show === ShowContent.DataFrames && (
+            <Button className={styles.toolbarItem} onClick={this.onShowSupportWizard}>
+              Debug
+            </Button>
+          )}
         </div>
         <div className={styles.content}>
           <AutoSizer disableWidth>
@@ -188,26 +195,6 @@ export class InspectJSONTab extends PureComponent<Props, State> {
   }
 }
 
-function getPanelDataFrames(data?: PanelData): DataFrameJSON[] {
-  const frames: DataFrameJSON[] = [];
-  if (data?.series) {
-    for (const f of data.series) {
-      frames.push(dataFrameToJSON(f));
-    }
-  }
-  if (data?.annotations) {
-    for (const f of data.annotations) {
-      const json = dataFrameToJSON(f);
-      if (!json.schema?.meta) {
-        json.schema!.meta = {};
-      }
-      json.schema!.meta.dataTopic = DataTopic.Annotations;
-      frames.push(json);
-    }
-  }
-  return frames;
-}
-
 function getPrettyJSON(obj: any): string {
   return JSON.stringify(obj, null, 2);
 }

public/app/features/inspector/types.ts

@@ -6,4 +6,5 @@ export enum InspectTab {
   JSON = 'json',
   Query = 'query',
   Actions = 'actions', // ALPHA!
+  Debug = 'debug', // get info required for support+debugging
 }