@@ -57,6 +57,14 @@ Grafana generates a TXT file in your default browser download location. You can
 1. Inspect the log query results as described above.
 1. Click **Download logs**.
 
+### Download trace results
+
+Based on the data source type, Grafana generates a JSON file for the trace results in one of the supported formats: Jaeger, Zipkin, or OTLP formats.
+
+1. Open the inspector.
+1. Inspect the trace query results [as described above](#inspect-raw-query-results).
+1. Click **Download traces**.
+
 ### Inspect query performance
 
 The Stats tab displays statistics that tell you how long your query takes, how many queries you send, and the number of rows returned. This information can help you troubleshoot your queries, especially if any of the numbers are unexpectedly high or low.
 
@@ -83,5 +83,63 @@ describe('InspectDataTab', () => {
       render(<InspectDataTab {...createProps()} />);
       expect(screen.queryByText(/Download logs/i)).not.toBeInTheDocument();
     });
+    it('should show download traces button if traces data', () => {
+      const dataWithtraces = ([
+        {
+          name: 'Data frame with traces',
+          fields: [
+            { name: 'traceID', values: ['3fa414edcef6ad90', '3fa414edcef6ad90'] },
+            { name: 'spanID', values: ['3fa414edcef6ad90', '0f5c1808567e4403'] },
+            { name: 'parentSpanID', values: [undefined, '3fa414edcef6ad90'] },
+            { name: 'operationName', values: ['HTTP GET - api_traces_traceid', '/tempopb.Querier/FindTraceByID'] },
+            { name: 'serviceName', values: ['tempo-querier', 'tempo-querier'] },
+            {
+              name: 'serviceTags',
+              values: [
+                [
+                  { key: 'cluster', type: 'string', value: 'ops-tools1' },
+                  { key: 'container', type: 'string', value: 'tempo-query' },
+                ],
+                [
+                  { key: 'cluster', type: 'string', value: 'ops-tools1' },
+                  { key: 'container', type: 'string', value: 'tempo-query' },
+                ],
+              ],
+            },
+            { name: 'startTime', values: [1605873894680.409, 1605873894680.587] },
+            { name: 'duration', values: [1049.141, 1.847] },
+            { name: 'logs', values: [[], []] },
+            {
+              name: 'tags',
+              values: [
+                [
+                  { key: 'sampler.type', type: 'string', value: 'probabilistic' },
+                  { key: 'sampler.param', type: 'float64', value: 1 },
+                ],
+                [
+                  { key: 'component', type: 'string', value: 'gRPC' },
+                  { key: 'span.kind', type: 'string', value: 'client' },
+                ],
+              ],
+            },
+            { name: 'warnings', values: [undefined, undefined] },
+            { name: 'stackTraces', values: [undefined, undefined] },
+          ],
+          length: 2,
+          meta: {
+            preferredVisualisationType: 'trace',
+            custom: {
+              traceFormat: 'jaeger',
+            },
+          },
+        },
+      ] as unknown) as DataFrame[];
+      render(<InspectDataTab {...createProps({ data: dataWithtraces })} />);
+      expect(screen.getByText(/Download traces/i)).toBeInTheDocument();
+    });
+    it('should not show download traces button if no traces data', () => {
+      render(<InspectDataTab {...createProps()} />);
+      expect(screen.queryByText(/Download traces/i)).not.toBeInTheDocument();
+    });
   });
 });
@@ -8,6 +8,7 @@ import {
   DataTransformerID,
   dateTimeFormat,
   dateTimeFormatISO,
+  MutableDataFrame,
   SelectableValue,
   toCSV,
   transformDataFrame,
@@ -22,6 +23,9 @@ import { css } from '@emotion/css';
 import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner';
 import { PanelModel } from 'app/features/dashboard/state';
 import { dataFrameToLogsModel } from 'app/core/logs_model';
+import { transformToJaeger } from 'app/plugins/datasource/jaeger/responseTransform';
+import { transformToZipkin } from 'app/plugins/datasource/zipkin/utils/transforms';
+import { transformToOTLP } from 'app/plugins/datasource/tempo/resultTransformer';
 
 interface Props {
   isLoading: boolean;
@@ -122,6 +126,48 @@ export class InspectDataTab extends PureComponent<Props, State> {
     saveAs(blob, fileName);
   };
 
+  exportTracesAsJson = () => {
+    const { data, panel } = this.props;
+    if (!data) {
+      return;
+    }
+
+    for (const df of data) {
+      // Only export traces
+      if (df.meta?.preferredVisualisationType !== 'trace') {
+        continue;
+      }
+
+      switch (df.meta?.custom?.traceFormat) {
+        case 'jaeger': {
+          let res = transformToJaeger(new MutableDataFrame(df));
+          this.saveTraceJson(res, panel);
+          break;
+        }
+        case 'zipkin': {
+          let res = transformToZipkin(new MutableDataFrame(df));
+          this.saveTraceJson(res, panel);
+          break;
+        }
+        case 'otlp':
+        default: {
+          let res = transformToOTLP(new MutableDataFrame(df));
+          this.saveTraceJson(res, panel);
+          break;
+        }
+      }
+    }
+  };
+
+  saveTraceJson = (json: any, panel?: PanelModel) => {
+    const blob = new Blob([JSON.stringify(json)], {
+      type: 'application/json',
+    });
+    const displayTitle = panel ? panel.getDisplayTitle() : 'Explore';
+    const fileName = `${displayTitle}-traces-${dateTimeFormat(new Date())}.json`;
+    saveAs(blob, fileName);
+  };
+
   onDataFrameChange = (item: SelectableValue<DataTransformerID | number>) => {
     this.setState({
       transformId:
@@ -180,6 +226,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
     const index = !dataFrames[dataFrameIndex] ? 0 : dataFrameIndex;
     const dataFrame = dataFrames[index];
     const hasLogs = dataFrames.some((df) => df?.meta?.preferredVisualisationType === 'logs');
+    const hasTraces = dataFrames.some((df) => df?.meta?.preferredVisualisationType === 'trace');
 
     return (
       <div className={styles.dataTabContent} aria-label={selectors.components.PanelInspector.Data.content}>
@@ -218,6 +265,18 @@ export class InspectDataTab extends PureComponent<Props, State> {
               Download logs
             </Button>
           )}
+          {hasTraces && (
+            <Button
+              variant="primary"
+              onClick={this.exportTracesAsJson}
+              className={css`
+                margin-bottom: 10px;
+                margin-left: 10px;
+              `}
+            >
+              Download traces
+            </Button>
+          )}
         </div>
         <Container grow={1}>
           <AutoSizer>
 
@@ -171,5 +171,8 @@ const emptyTraceDataFrame = new MutableDataFrame({
   ],
   meta: {
     preferredVisualisationType: 'trace',
+    custom: {
+      traceFormat: 'jaeger',
+    },
   },
 });
@@ -1,9 +1,16 @@
-import { createTraceFrame } from './responseTransform';
+import { createTraceFrame, transformToJaeger } from './responseTransform';
 import { testResponse, testResponseDataFrameFields } from './testResponse';
+import { MutableDataFrame } from '@grafana/data';
 
 describe('createTraceFrame', () => {
   it('creates data frame from jaeger response', () => {
     const dataFrame = createTraceFrame(testResponse);
     expect(dataFrame.fields).toMatchObject(testResponseDataFrameFields);
   });
+
+  it('transforms to jaeger format from data frame', () => {
+    const dataFrame = createTraceFrame(testResponse);
+    const response = transformToJaeger(new MutableDataFrame(dataFrame));
+    expect(response).toMatchObject({ data: [testResponse] });
+  });
 });
@@ -1,6 +1,13 @@
-import { DataFrame, DataSourceInstanceSettings, FieldType, MutableDataFrame, TraceSpanRow } from '@grafana/data';
+import {
+  DataFrame,
+  DataSourceInstanceSettings,
+  FieldType,
+  MutableDataFrame,
+  TraceLog,
+  TraceSpanRow,
+} from '@grafana/data';
 import { transformTraceData } from '@jaegertracing/jaeger-ui-components';
-import { Span, TraceProcess, TraceResponse } from './types';
+import { JaegerResponse, Span, TraceProcess, TraceResponse } from './types';
 
 export function createTraceFrame(data: TraceResponse): DataFrame {
   const spans = data.spans.map((s) => toSpanRow(s, data.processes));
@@ -22,6 +29,9 @@ export function createTraceFrame(data: TraceResponse): DataFrame {
     ],
     meta: {
       preferredVisualisationType: 'trace',
+      custom: {
+        traceFormat: 'jaeger',
+      },
     },
   });
 
@@ -107,3 +117,62 @@ function transformToTraceData(data: TraceResponse) {
     traceName: traceData.traceName,
   };
 }
+
+export function transformToJaeger(data: MutableDataFrame): JaegerResponse {
+  let traceResponse: TraceResponse = {
+    traceID: '',
+    spans: [],
+    processes: {},
+    warnings: null,
+  };
+  let processes: string[] = [];
+
+  for (let i = 0; i < data.length; i++) {
+    const span = data.get(i);
+
+    // Set traceID
+    if (!traceResponse.traceID) {
+      traceResponse.traceID = span.traceID;
+    }
+
+    // Create process if doesn't exist
+    if (!processes.find((p) => p === span.serviceName)) {
+      processes.push(span.serviceName);
+      traceResponse.processes[`p${processes.length}`] = {
+        serviceName: span.serviceName,
+        tags: span.serviceTags,
+      };
+    }
+
+    // Create span
+    traceResponse.spans.push({
+      traceID: span.traceID,
+      spanID: span.spanID,
+      duration: span.duration * 1000,
+      references: span.parentSpanID
+        ? [
+            {
+              refType: 'CHILD_OF',
+              spanID: span.parentSpanID,
+              traceID: span.traceID,
+            },
+          ]
+        : [],
+      flags: 0,
+      logs: span.logs.map((l: TraceLog) => ({
+        ...l,
+        timestamp: l.timestamp * 1000,
+      })),
+      operationName: span.operationName,
+      processID:
+        Object.keys(traceResponse.processes).find(
+          (key) => traceResponse.processes[key].serviceName === span.serviceName
+        ) || '',
+      startTime: span.startTime * 1000,
+      tags: span.tags,
+      warnings: span.warnings ? span.warnings : null,
+    });
+  }
+
+  return { data: [traceResponse], total: 0, limit: 0, offset: 0, errors: null };
+}
@@ -64,3 +64,11 @@ export type JaegerQuery = {
 } & DataQuery;
 
 export type JaegerQueryType = 'search' | 'upload';
+
+export type JaegerResponse = {
+  data: TraceResponse[];
+  total: number;
+  limit: number;
+  offset: number;
+  errors?: string[] | null;
+};
@@ -84,7 +84,10 @@ export class TempoDatasource extends DataSourceWithBackend<TempoQuery, TempoJson
                 .map((field) => field.matcherRegex) || [];
             if (!traceLinkMatcher || traceLinkMatcher.length === 0) {
               return throwError(
-                'No Loki datasource configured for search. Set up Derived Fields for traces in a Loki datasource settings and link it to this Tempo datasource.'
+                () =>
+                  new Error(
+                    'No Loki datasource configured for search. Set up Derived Fields for traces in a Loki datasource settings and link it to this Tempo datasource.'
+                  )
               );
             } else {
               return (linkedDatasource.query(linkedRequest) as Observable<DataQueryResponse>).pipe(
 
@@ -1,5 +1,6 @@
 import { FieldType, MutableDataFrame } from '@grafana/data';
-import { createTableFrame } from './resultTransformer';
+import { createTableFrame, transformToOTLP } from './resultTransformer';
+import { otlpDataFrame, otlpResponse } from './testResponse';
 
 describe('transformTraceList()', () => {
   const lokiDataFrame = new MutableDataFrame({
@@ -35,3 +36,10 @@ describe('transformTraceList()', () => {
     expect(frame.fields[1].values.get(1)).toBe('as');
   });
 });
+
+describe('transformToOTLP()', () => {
+  test('transforms dataframe to OTLP format', () => {
+    const otlp = transformToOTLP(otlpDataFrame);
+    expect(otlp).toMatchObject(otlpResponse);
+  });
+});