Na}{

File Content: `LogsMetaRow.tsx`

import { css } from '@emotion/css';
import saveAs from 'file-saver';
import React from 'react';
import { lastValueFrom } from 'rxjs';

import {
  LogsDedupStrategy,
  LogsMetaItem,
  LogsMetaKind,
  LogRowModel,
  CoreApp,
  dateTimeFormat,
  transformDataFrame,
  DataTransformerConfig,
  CustomTransformOperator,
} from '@grafana/data';
import { DataFrame } from '@grafana/data/';
import { reportInteraction } from '@grafana/runtime';
import { Button, Dropdown, Menu, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';

import { downloadDataFrameAsCsv, downloadLogsModelAsTxt } from '../../inspector/utils/download';
import { LogLabels } from '../../logs/components/LogLabels';
import { MAX_CHARACTERS } from '../../logs/components/LogRowMessage';
import { logRowsToReadableJson } from '../../logs/utils';
import { MetaInfoText, MetaItemProps } from '../MetaInfoText';

import { getLogsExtractFields } from './LogsTable';

const getStyles = () => ({
  metaContainer: css`
    flex: 1;
    display: flex;
    flex-wrap: wrap;
  `,
});

export type Props = {
  meta: LogsMetaItem[];
  dedupStrategy: LogsDedupStrategy;
  dedupCount: number;
  displayedFields: string[];
  hasUnescapedContent: boolean;
  forceEscape: boolean;
  logRows: LogRowModel[];
  onEscapeNewlines: () => void;
  clearDetectedFields: () => void;
};

enum DownloadFormat {
  Text = 'text',
  Json = 'json',
  CSV = 'csv',
}

export const LogsMetaRow = React.memo(
  ({
    meta,
    dedupStrategy,
    dedupCount,
    displayedFields,
    clearDetectedFields,
    hasUnescapedContent,
    forceEscape,
    onEscapeNewlines,
    logRows,
  }: Props) => {
    const style = useStyles2(getStyles);

    const downloadLogs = async (format: DownloadFormat) => {
      reportInteraction('grafana_logs_download_logs_clicked', {
        app: CoreApp.Explore,
        format,
        area: 'logs-meta-row',
      });

      switch (format) {
        case DownloadFormat.Text:
          downloadLogsModelAsTxt({ meta, rows: logRows }, 'Explore');
          break;
        case DownloadFormat.Json:
          const jsonLogs = logRowsToReadableJson(logRows);
          const blob = new Blob([JSON.stringify(jsonLogs)], {
            type: 'application/json;charset=utf-8',
          });
          const fileName = `Explore-logs-${dateTimeFormat(new Date())}.json`;
          saveAs(blob, fileName);
          break;
        case DownloadFormat.CSV:
          const dataFrameMap = new Map<string, DataFrame>();
          logRows.forEach((row) => {
            if (row.dataFrame?.refId && !dataFrameMap.has(row.dataFrame?.refId)) {
              dataFrameMap.set(row.dataFrame?.refId, row.dataFrame);
            }
          });
          dataFrameMap.forEach(async (dataFrame) => {
            const transforms: Array<DataTransformerConfig | CustomTransformOperator> = getLogsExtractFields(dataFrame);
            transforms.push({
              id: 'organize',
              options: {
                excludeByName: {
                  ['labels']: true,
                  ['labelTypes']: true,
                },
              },
            });
            const transformedDataFrame = await lastValueFrom(transformDataFrame(transforms, [dataFrame]));
            downloadDataFrameAsCsv(transformedDataFrame[0], `Explore-logs-${dataFrame.refId}`);
          });
      }
    };

    const logsMetaItem: Array<LogsMetaItem | MetaItemProps> = [...meta];

    // Add deduplication info
    if (dedupStrategy !== LogsDedupStrategy.none) {
      logsMetaItem.push({
        label: 'Deduplication count',
        value: dedupCount,
        kind: LogsMetaKind.Number,
      });
    }
    // Add info about limit for highlighting
    if (logRows.some((r) => r.entry.length > MAX_CHARACTERS)) {
      logsMetaItem.push({
        label: 'Info',
        value: 'Logs with more than 100,000 characters could not be parsed and highlighted',
        kind: LogsMetaKind.String,
      });
    }

    // Add detected fields info
    if (displayedFields?.length > 0) {
      logsMetaItem.push(
        {
          label: 'Showing only selected fields',
          value: renderMetaItem(displayedFields, LogsMetaKind.LabelsMap),
        },
        {
          label: '',
          value: (
            <Button variant="secondary" size="sm" onClick={clearDetectedFields}>
              Show original line
            </Button>
          ),
        }
      );
    }

    // Add unescaped content info
    if (hasUnescapedContent) {
      logsMetaItem.push({
        label: 'Your logs might have incorrectly escaped content',
        value: (
          <Tooltip
            content="Fix incorrectly escaped newline and tab sequences in log lines. Manually review the results to confirm that the replacements are correct."
            placement="right"
          >
            <Button variant="secondary" size="sm" onClick={onEscapeNewlines}>
              {forceEscape ? 'Remove escaping' : 'Escape newlines'}
            </Button>
          </Tooltip>
        ),
      });
    }
    const downloadMenu = (
      <Menu>
        <Menu.Item label="txt" onClick={() => downloadLogs(DownloadFormat.Text)} />
        <Menu.Item label="json" onClick={() => downloadLogs(DownloadFormat.Json)} />
        <Menu.Item label="csv" onClick={() => downloadLogs(DownloadFormat.CSV)} />
      </Menu>
    );
    return (
      <>
        {logsMetaItem && (
          <div className={style.metaContainer}>
            <MetaInfoText
              metaItems={logsMetaItem.map((item) => {
                return {
                  label: item.label,
                  value: 'kind' in item ? renderMetaItem(item.value, item.kind) : item.value,
                };
              })}
            />
            <Dropdown overlay={downloadMenu}>
              <ToolbarButton isOpen={false} variant="canvas" icon="download-alt">
                Download
              </ToolbarButton>
            </Dropdown>
          </div>
        )}
      </>
    );
  }
);

LogsMetaRow.displayName = 'LogsMetaRow';

function renderMetaItem(value: any, kind: LogsMetaKind) {
  if (kind === LogsMetaKind.LabelsMap) {
    return <LogLabels labels={value} />;
  } else if (kind === LogsMetaKind.Error) {
    return <span className="logs-meta-item__error">{value}</span>;
  }
  return value;
}

Name	Size	Permission
utils	---	0755
LiveLogs.test.tsx	3336 bytes	0644
LiveLogs.tsx	6480 bytes	0644
Logs.test.tsx	15642 bytes	0644
Logs.tsx	33158 bytes	0644
LogsColumnSearch.tsx	723 bytes	0644
LogsContainer.tsx	12999 bytes	0644
LogsFeedback.tsx	880 bytes	0644
LogsMetaRow.test.tsx	8416 bytes	0644
LogsMetaRow.tsx	6298 bytes	0644
LogsNavigation.test.tsx	6481 bytes	0644
LogsNavigation.tsx	8205 bytes	0644
LogsNavigationPages.test.tsx	1946 bytes	0644
LogsNavigationPages.tsx	3616 bytes	0644
LogsSamplePanel.test.tsx	6694 bytes	0644
LogsSamplePanel.tsx	4578 bytes	0644
LogsTable.test.tsx	9592 bytes	0644
LogsTable.tsx	8078 bytes	0644
LogsTableActiveFields.tsx	3548 bytes	0644
LogsTableAvailableFields.tsx	1986 bytes	0644
LogsTableEmptyFields.tsx	523 bytes	0644
LogsTableMultiSelect.tsx	2624 bytes	0644
LogsTableNavField.tsx	2202 bytes	0644
LogsTableWrap.test.tsx	5832 bytes	0644
LogsTableWrap.tsx	19976 bytes	0644
LogsVolumePanel.test.tsx	1526 bytes	0644
LogsVolumePanel.tsx	3437 bytes	0644
LogsVolumePanelList.test.tsx	2866 bytes	0644
LogsVolumePanelList.tsx	5766 bytes	0644
PopoverMenu.test.tsx	2774 bytes	0644
PopoverMenu.tsx	2640 bytes	0644

File Content: LogsMetaRow.tsx

File Content: `LogsMetaRow.tsx`