PanelInspector: Adds a Raw display mode but defaults to Formatted display mode (#27306)

* PanelInspector: Fields with overrides are formatted correct in CSV

* Refactor: adds raw format

* Refactor: changes switch to Formatted values

* Tests: adds tests for applyRawFieldOverrides and getRawDisplayProcessor

* Test: change to utc timeZone

* Refactor: changes after PR comments

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

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import {
   applyFieldOverrides,
+  applyRawFieldOverrides,
   DataFrame,
   DataTransformerID,
   dateTimeFormat,
@@ -8,13 +9,8 @@ import {
   SelectableValue,
   toCSV,
   transformDataFrame,
-  getTimeField,
-  FieldType,
-  FormattedVector,
-  DisplayProcessor,
-  getDisplayProcessor,
 } from '@grafana/data';
-import { Button, Field, Icon, Switch, Select, Table, VerticalGroup, Container, HorizontalGroup } from '@grafana/ui';
+import { Button, Container, Field, HorizontalGroup, Icon, Select, Switch, Table, VerticalGroup } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -60,33 +56,6 @@ export class InspectDataTab extends PureComponent<Props, State> {
     const { panel } = this.props;
     const { transformId } = this.state;
 
-    // Replace the time field with a formatted time
-    const { timeIndex, timeField } = getTimeField(dataFrame);
-
-    if (timeField) {
-      // Use the configured date or standard time display
-      let processor: DisplayProcessor | undefined = timeField.display;
-      if (!processor) {
-        processor = getDisplayProcessor({
-          field: timeField,
-        });
-      }
-
-      const formattedDateField = {
-        ...timeField,
-        type: FieldType.string,
-        values: new FormattedVector(timeField.values, processor),
-      };
-
-      const fields = [...dataFrame.fields];
-      fields[timeIndex!] = formattedDateField;
-
-      dataFrame = {
-        ...dataFrame,
-        fields,
-      };
-    }
-
     const dataFrameCsv = toCSV([dataFrame]);
 
     const blob = new Blob([String.fromCharCode(0xfeff), dataFrameCsv], {
@@ -146,12 +115,16 @@ export class InspectDataTab extends PureComponent<Props, State> {
       });
     }
 
+    if (!options.withFieldConfig) {
+      return applyRawFieldOverrides(data);
+    }
+
     // 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({
       data,
       theme: config.theme,
-      fieldConfig: options.withFieldConfig ? this.props.panel.fieldConfig : { defaults: {}, overrides: [] },
+      fieldConfig: this.props.panel.fieldConfig,
       replaceVariables: (value: string) => {
         return value;
       },
@@ -185,7 +158,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
       }
 
       if (options.withFieldConfig) {
-        activeString += 'field configuration';
+        activeString += 'formatted data';
       }
     }
 
@@ -261,8 +234,8 @@ export class InspectDataTab extends PureComponent<Props, State> {
               )}
               {showFieldConfigsOption && (
                 <Field
-                  label="Apply field configuration"
-                  description="Table data is displayed with options defined in the Field and Override tabs."
+                  label="Formatted data"
+                  description="Table data is formatted with options defined in the Field and Override tabs."
                 >
                   <Switch
                     value={!!options.withFieldConfig}

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

@@ -32,7 +32,7 @@ const PanelInspectorUnconnected: React.FC<Props> = ({ panel, dashboard, defaultT
   const dispatch = useDispatch();
   const [dataOptions, setDataOptions] = useState<GetDataOptions>({
     withTransforms: false,
-    withFieldConfig: false,
+    withFieldConfig: true,
   });
   const { data, isLoading, error } = usePanelLatestData(panel, dataOptions);
   const metaDs = useDatasourceMetadata(data);