From 07df165b86c33e546bb15d90d891a9f8dd334594 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Wed, 1 Jul 2020 08:53:29 +0200
Subject: [PATCH] Panel Inspect: Fix crash when transform removes selected data
 frame (#25924)

---
 .../components/Inspector/InspectDataTab.tsx   | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
index e05a9c533af..8f2b182bab6 100644
--- a/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectDataTab.tsx
@@ -131,6 +131,14 @@ export class InspectDataTab extends PureComponent<Props, State> {
       data = this.getTransformedData();
     }
 
+    // In case the transform removes the currently selected data frame
+    if (!data[this.state.dataFrameIndex]) {
+      this.setState({
+        dataFrameIndex: 0,
+        selectedDataFrame: 0,
+      });
+    }
+
     // We need to apply field config even though it was already applied in the PanelQueryRunner.
     // That's because transformers create new fields and data frames, so i.e. display processor is no longer there
     return applyFieldOverrides({
@@ -147,6 +155,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
   getActiveString = () => {
     const { selectedDataFrame } = this.state;
     const { options, data } = this.props;
+
     let activeString = '';
     if (selectedDataFrame === DataTransformerID.seriesToColumns) {
       activeString = 'series joined by time';
@@ -173,6 +182,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
   renderDataOptions = (dataFrames: DataFrame[]) => {
     const { options, onOptionsChange, panel, data } = this.props;
     const { transformId, transformationOptions, selectedDataFrame } = this.state;
+
     const styles = getPanelInspectorStyles();
 
     const panelTransformations = panel.getTransformations();
@@ -207,21 +217,21 @@ export class InspectDataTab extends PureComponent<Props, State> {
       >
         <div className={styles.options}>
           <VerticalGroup spacing="lg">
-            {data.length > 1 && (
-              <Field
-                label="Show data frame"
-                className={css`
-                  margin-bottom: 0;
-                `}
-              >
-                <Select
-                  options={selectableOptions}
-                  value={selectedDataFrame}
-                  onChange={this.onDataFrameChange}
-                  width={30}
-                />
-              </Field>
-            )}
+            <Field
+              label="Show data frame"
+              className={css`
+                margin-bottom: 0;
+              `}
+              disabled={!(data.length > 1)}
+            >
+              <Select
+                options={selectableOptions}
+                value={selectedDataFrame}
+                onChange={this.onDataFrameChange}
+                width={30}
+              />
+            </Field>
+
             <HorizontalGroup>
               {showPanelTransformationsOption && (
                 <Field
@@ -271,6 +281,10 @@ export class InspectDataTab extends PureComponent<Props, State> {
       return <div>No Data</div>;
     }
 
+    if (!dataFrames[dataFrameIndex]) {
+      return <div>Could not find the Data Frame</div>;
+    }
+
     return (
       <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
         <div className={styles.actionsWrapper}>