Logs: Add Download logs button to log-browser

.betterer.results

@@ -4580,9 +4580,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "2"],
       [0, 0, 0, "Do not use any type assertions.", "3"]
     ],
-    "public/app/features/inspector/InspectDataTab.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
-    ],
     "public/app/features/inspector/InspectErrorTab.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -4595,6 +4592,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
     ],
+    "public/app/features/inspector/utils/download.ts:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
+    ],
     "public/app/features/invites/SignupInvited.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

public/app/features/explore/LogsMetaRow.tsx

@@ -1,11 +1,22 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { LogsDedupStrategy, LogsMetaItem, LogsMetaKind, LogRowModel } from '@grafana/data';
-import { Button, Tooltip, LogLabels } from '@grafana/ui';
+import { LogRowModel, LogsDedupStrategy, LogsMetaItem, LogsMetaKind } from '@grafana/data';
+import { Button, LogLabels, Tooltip, useStyles2 } from '@grafana/ui';
 import { MAX_CHARACTERS } from '@grafana/ui/src/components/Logs/LogRowMessage';
 
+import { downloadLogsModelAsTxt } from '../inspector/utils/download';
+
 import { MetaInfoText, MetaItemProps } from './MetaInfoText';
 
+const getStyles = () => ({
+  metaContainer: css`
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+  `,
+});
+
 export type Props = {
   meta: LogsMetaItem[];
   dedupStrategy: LogsDedupStrategy;
@@ -30,6 +41,12 @@ export const LogsMetaRow = React.memo(
     onEscapeNewlines,
     logRows,
   }: Props) => {
+    const style = useStyles2(getStyles);
+
+    const downloadLogs = () => {
+      downloadLogsModelAsTxt({ meta, rows: logRows }, 'Explore');
+    };
+
     const logsMetaItem: Array<LogsMetaItem | MetaItemProps> = [...meta];
 
     // Add deduplication info
@@ -83,18 +100,22 @@ export const LogsMetaRow = React.memo(
         ),
       });
     }
-
     return (
       <>
         {logsMetaItem && (
-          <MetaInfoText
-            metaItems={logsMetaItem.map((item) => {
-              return {
-                label: item.label,
-                value: 'kind' in item ? renderMetaItem(item.value, item.kind) : item.value,
-              };
-            })}
-          />
+          <div className={style.metaContainer}>
+            <MetaInfoText
+              metaItems={logsMetaItem.map((item) => {
+                return {
+                  label: item.label,
+                  value: 'kind' in item ? renderMetaItem(item.value, item.kind) : item.value,
+                };
+              })}
+            />
+            <Button onClick={downloadLogs} variant="secondary" size="sm" fill="outline" icon="download-alt">
+              Download
+            </Button>
+          </div>
         )}
       </>
     );

public/app/features/inspector/InspectDataTab.tsx

@@ -1,23 +1,19 @@
 import { css } from '@emotion/css';
-import { Trans, t } from '@lingui/macro';
-import { saveAs } from 'file-saver';
+import { t, Trans } from '@lingui/macro';
 import React, { PureComponent } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import {
   applyFieldOverrides,
   applyRawFieldOverrides,
+  CoreApp,
   CSVConfig,
   DataFrame,
   DataTransformerID,
-  dateTimeFormat,
-  dateTimeFormatISO,
   MutableDataFrame,
   SelectableValue,
-  toCSV,
-  transformDataFrame,
   TimeZone,
-  CoreApp,
+  transformDataFrame,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
@@ -32,6 +28,7 @@ import { transformToZipkin } from 'app/plugins/datasource/zipkin/utils/transform
 
 import { InspectDataOptions } from './InspectDataOptions';
 import { getPanelInspectorStyles } from './styles';
+import { downloadAsJson, downloadDataFrameAsCsv, downloadLogsModelAsTxt } from './utils/download';
 
 interface Props {
   isLoading: boolean;
@@ -99,43 +96,19 @@ export class InspectDataTab extends PureComponent<Props, State> {
     const { panel } = this.props;
     const { transformId } = this.state;
 
-    const dataFrameCsv = toCSV([dataFrame], csvConfig);
-
-    const blob = new Blob([String.fromCharCode(0xfeff), dataFrameCsv], {
-      type: 'text/csv;charset=utf-8',
-    });
-    const displayTitle = panel ? panel.getDisplayTitle() : 'Explore';
-    const transformation = transformId !== DataTransformerID.noop ? '-as-' + transformId.toLocaleLowerCase() : '';
-    const fileName = `${displayTitle}-data${transformation}-${dateTimeFormat(new Date())}.csv`;
-    saveAs(blob, fileName);
+    downloadDataFrameAsCsv(dataFrame, csvConfig, panel ? panel.getDisplayTitle() : 'Explore', transformId);
   };
 
   exportLogsAsTxt = () => {
     const { data, panel, app } = this.props;
+
     reportInteraction('grafana_logs_download_logs_clicked', {
       app,
       format: 'logs',
     });
-    const logsModel = dataFrameToLogsModel(data || [], undefined);
-    let textToDownload = '';
-
-    logsModel.meta?.forEach((metaItem) => {
-      const string = `${metaItem.label}: ${JSON.stringify(metaItem.value)}\n`;
-      textToDownload = textToDownload + string;
-    });
-    textToDownload = textToDownload + '\n\n';
-
-    logsModel.rows.forEach((row) => {
-      const newRow = dateTimeFormatISO(row.timeEpochMs) + '\t' + row.entry + '\n';
-      textToDownload = textToDownload + newRow;
-    });
 
-    const blob = new Blob([textToDownload], {
-      type: 'text/plain;charset=utf-8',
-    });
-    const displayTitle = panel ? panel.getDisplayTitle() : 'Explore';
-    const fileName = `${displayTitle}-logs-${dateTimeFormat(new Date())}.txt`;
-    saveAs(blob, fileName);
+    const logsModel = dataFrameToLogsModel(data || [], undefined);
+    downloadLogsModelAsTxt(logsModel, panel ? panel.getDisplayTitle() : 'Explore');
   };
 
   exportTracesAsJson = () => {
@@ -153,45 +126,31 @@ export class InspectDataTab extends PureComponent<Props, State> {
       switch (df.meta?.custom?.traceFormat) {
         case 'jaeger': {
           let res = transformToJaeger(new MutableDataFrame(df));
-          this.saveTraceJson(res, panel);
+          downloadAsJson(res, panel ? panel.getDisplayTitle() : 'Explore');
           break;
         }
         case 'zipkin': {
           let res = transformToZipkin(new MutableDataFrame(df));
-          this.saveTraceJson(res, panel);
+          downloadAsJson(res, panel ? panel.getDisplayTitle() : 'Explore');
           break;
         }
         case 'otlp':
         default: {
           let res = transformToOTLP(new MutableDataFrame(df));
-          this.saveTraceJson(res, panel);
+          downloadAsJson(res, panel ? panel.getDisplayTitle() : 'Explore');
           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);
-  };
-
   exportServiceGraph = () => {
     const { data, panel } = this.props;
     if (!data) {
       return;
     }
 
-    const blob = new Blob([JSON.stringify(data)], {
-      type: 'application/json',
-    });
-    const displayTitle = panel ? panel.getDisplayTitle() : 'Explore';
-    const fileName = `${displayTitle}-service-graph-${dateTimeFormat(new Date())}.json`;
-    saveAs(blob, fileName);
+    downloadAsJson(data, panel ? panel.getDisplayTitle() : 'Explore');
   };
 
   onDataFrameChange = (item: SelectableValue<DataTransformerID | number>) => {

public/app/features/inspector/utils/download.ts

@@ -0,0 +1,82 @@
+import saveAs from 'file-saver';
+
+import {
+  CSVConfig,
+  DataFrame,
+  DataTransformerID,
+  dateTimeFormat,
+  dateTimeFormatISO,
+  LogsModel,
+  toCSV,
+} from '@grafana/data';
+
+/**
+ * Downloads a DataFrame as a TXT file.
+ *
+ * @export
+ * @param {(Pick<LogsModel, 'meta' | 'rows'>)} logsModel
+ * @param {string} title
+ */
+export function downloadLogsModelAsTxt(logsModel: Pick<LogsModel, 'meta' | 'rows'>, title: string) {
+  let textToDownload = '';
+
+  logsModel.meta?.forEach((metaItem) => {
+    const string = `${metaItem.label}: ${JSON.stringify(metaItem.value)}\n`;
+    textToDownload = textToDownload + string;
+  });
+  textToDownload = textToDownload + '\n\n';
+
+  logsModel.rows.forEach((row) => {
+    const newRow = dateTimeFormatISO(row.timeEpochMs) + '\t' + row.entry + '\n';
+    textToDownload = textToDownload + newRow;
+  });
+
+  const blob = new Blob([textToDownload], {
+    type: 'text/plain;charset=utf-8',
+  });
+
+  const fileName = `${title}-logs-${dateTimeFormat(new Date())}.txt`;
+  saveAs(blob, fileName);
+}
+
+/**
+ * Exports a DataFrame as a CSV file.
+ *
+ * @export
+ * @param {DataFrame} dataFrame
+ * @param {CSVConfig} csvConfig
+ * @param {string} title
+ * @param {DataTransformerID} [transformId=DataTransformerID.noop]
+ */
+export function downloadDataFrameAsCsv(
+  dataFrame: DataFrame,
+  csvConfig: CSVConfig,
+  title: string,
+  transformId: DataTransformerID = DataTransformerID.noop
+) {
+  const dataFrameCsv = toCSV([dataFrame], csvConfig);
+
+  const blob = new Blob([String.fromCharCode(0xfeff), dataFrameCsv], {
+    type: 'text/csv;charset=utf-8',
+  });
+
+  const transformation = transformId !== DataTransformerID.noop ? '-as-' + transformId.toLocaleLowerCase() : '';
+  const fileName = `${title}-data${transformation}-${dateTimeFormat(new Date())}.csv`;
+  saveAs(blob, fileName);
+}
+
+/**
+ * Downloads any object as JSON file.
+ *
+ * @export
+ * @param {*} json
+ * @param {string} title
+ */
+export function downloadAsJson(json: any, title: string) {
+  const blob = new Blob([JSON.stringify(json)], {
+    type: 'application/json',
+  });
+
+  const fileName = `${title}-traces-${dateTimeFormat(new Date())}.json`;
+  saveAs(blob, fileName);
+}