Panels: Add panel debug support helper (#54678)

public/app/features/dashboard/components/Inspector/PanelInspector.tsx

@@ -10,8 +10,8 @@ import { getPanelStateForModel } from 'app/features/panel/state/selectors';
 import { StoreState } from 'app/types';
 
 import { GetDataOptions } from '../../../query/state/PanelQueryRunner';
-import { DebugWizard } from '../DebugWizard/DebugWizard';
 import { usePanelLatestData } from '../PanelEditor/usePanelLatestData';
+import { SupportSnapshot } from '../SupportSnapshot/SupportSnapshot';
 
 import { InspectContent } from './InspectContent';
 import { useDatasourceMetadata, useInspectTabs } from './hooks';
@@ -50,8 +50,8 @@ const PanelInspectorUnconnected = ({ panel, dashboard, plugin }: Props) => {
     return null;
   }
 
-  if (defaultTab === InspectTab.Debug) {
-    return <DebugWizard panel={panel} plugin={plugin} onClose={onClose} />;
+  if (defaultTab === InspectTab.Support) {
+    return <SupportSnapshot panel={panel} plugin={plugin} onClose={onClose} />;
   }
 
   return (

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

@@ -58,15 +58,15 @@ const options: Array<SelectableValue<ShowMessge>> = [
     value: ShowMessge.GithubComment,
   },
   {
-    label: 'Panel debug snapshot',
-    description: 'Dashboard to help debug any visualization issues',
+    label: 'Panel support snapshot',
+    description: 'Dashboard JSON used to help troubleshoot visualization issues',
     value: ShowMessge.PanelSnapshot,
   },
 ];
 
-export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
+export function SupportSnapshot({ panel, plugin, onClose }: Props) {
   const styles = useStyles2(getStyles);
-  const [currentTab, setCurrentTab] = useState(InspectTab.Debug);
+  const [currentTab, setCurrentTab] = useState(InspectTab.Support);
   const [showMessage, setShowMessge] = useState(ShowMessge.GithubComment);
   const [snapshotText, setDashboardText] = useState('...');
   const [rand, setRand] = useState<Randomize>({});
@@ -109,13 +109,22 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
   };
 
   const doCopyMarkdown = () => {
+    const maxLen = Math.pow(1024, 2) * 1.5; // 1.5MB
+    if (markdownText.length > maxLen) {
+      appEvents.emit(AppEvents.alertError, [
+        `Snapshot is too large`,
+        'Consider downloading and attaching the file instead',
+      ]);
+      return;
+    }
+
     copyToClipboard(markdownText);
     appEvents.emit(AppEvents.alertSuccess, [`Message copied`]);
   };
 
   const tabs = [
-    { label: 'Snapshot', value: InspectTab.Debug },
-    { label: 'Code', value: InspectTab.JSON },
+    { label: 'Support', value: InspectTab.Support },
+    { label: 'Data', value: InspectTab.JSON },
   ];
   let activeTab = currentTab;
   if (!tabs.find((item) => item.value === currentTab)) {
@@ -129,7 +138,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
 
   return (
     <Drawer
-      title={`Debug: ${panelTitle}`}
+      title={`Panel: ${panelTitle}`}
       width="90%"
       onClose={onClose}
       expandable
@@ -137,7 +146,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
       subtitle={
         <div>
           <p>
-            <FeatureBadge featureState={FeatureState.alpha} />
+            <FeatureBadge featureState={FeatureState.beta} />
           </p>
         </div>
       }
@@ -149,7 +158,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
                 key={`${t.value}-${index}`}
                 label={t.label}
                 active={t.value === activeTab}
-                onChangeTab={() => setCurrentTab(t.value || InspectTab.Debug)}
+                onChangeTab={() => setCurrentTab(t.value || InspectTab.Support)}
               />
             );
           })}
@@ -226,15 +235,15 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
           )}
 
           <Field
-            label="Debug snapshot"
-            description="A panel debug snapshot creates a dashboard that can reproduce visualization issues while disconnected from the original data sources."
+            label="Support snapshot"
+            description="This snapshot contains the query response data and raw panel settings.  Including this snapshot in support requests can help identify issues faster."
           >
             <>
               <HorizontalGroup>
                 <Button icon="download-alt" onClick={doDownloadDashboard}>
-                  Download ({snapshotSize})
+                  Dashboard ({snapshotSize})
                 </Button>
-                <Button icon="github" onClick={doCopyMarkdown}>
+                <Button icon="github" onClick={doCopyMarkdown} title="Paste this into a github issue">
                   Copy for github
                 </Button>
                 <Button onClick={doImportDashboard} variant="secondary">
@@ -258,7 +267,7 @@ export const DebugWizard = ({ panel, plugin, onClose }: Props) => {
       )}
     </Drawer>
   );
-};
+}
 
 const getStyles = (theme: GrafanaTheme2) => ({
   code: css`