New Log Details: Create initial component for Log Details (#107466)

* Log Details: fork and refactor as functional

* LogDetailsBody: refactor styles

* LogDetails: decouple from old panel

* LogDetails: extract and centralize styles

* LogDetailsRow: refactor as functional

* Fix unused

* Fix wrong label

* LogDetails: create new component

* LogLineDetails: process links and add sample sections

* LogLineDetails: create and use LogLineDetailsFields

* LogLineDetails: group labels by type

* LogLineDetails: render all fields

* Removed unused components

* Fix imports

* LogLineDetails: fix label

* LogLineDetailsFields: fix stats

* LogLinedetailsFields: add base styles

* LogLineDetails: store open state

* getLabelTypeFromRow: internationalize and add plural support

* LogLineDetails: get plural field types

* LogLineDetails: sticky header

* LogLineDetails: introduce log details header

* LogLineDetails: extract into submodules

* LogDetails: add more header options and store collapsed state

* LogDetails: add scroll for log line

* LogLineDetailsHeader: add log line toggle button

* LogLineDetailsFieldS: improve sizes

* LogLineDetails: add search handler

* LogLineDetailsFields: implement search

* LogLineDetailsFields: switch to fixed key width

* LogLineDetailsFields: refactor fields display

* Link: remove tooltip

* Fix translations

* Revert "Link: remove tooltip"

This reverts commit cd927302a7889b9430008ae3b81ace0aed343f5f.

* LogLineDetailsFields: switch to css grid

* Remap new translations

* LogLineDetails: implement disable actions

* LogLineDetailsFields: migrate links to css grid

* LogLineDetailsFields: migrate stats to css grid

* LogLabelStats: make functional

* LogLineDetailsHeader: refactor listener

* LogLineDetailsFields: decrease column minwidth

* Reuse current panel unit tests

* Translations

* Test search

* Update public/app/features/logs/components/panel/LogLineDetails.test.tsx

* LogLineDetailsHeader: fix zIndex

* Create LogLineDetailsDisplayedFields

* Revert "Create LogLineDetailsDisplayedFields"

This reverts commit 57d460d966483c3126738994e2705b6578aac120.

* LogList: recover unwrapped horizontal scroll

* LogLineDetails: apply styles suggestion

* LogLineDetailsComponent: fix group option name

* LogLineDetailsHeader: tweak styles

* LogLineDetailsComponent: remove margin of last collapsable

Author: matyax

public/app/features/logs/components/LogDetails.tsx

@@ -43,15 +43,14 @@ export interface Props extends Themeable2 {
 
   onPinLine?: (row: LogRowModel) => void;
   pinLineButtonTooltipTitle?: PopoverContent;
-  mode?: 'inline' | 'sidebar';
   links?: Record<string, LinkModel[]>;
 }
 
 interface LinkModelWithIcon extends LinkModel {
   icon?: IconName;
 }
 
-const useAttributesExtensionLinks = (row: LogRowModel) => {
+export const useAttributesExtensionLinks = (row: LogRowModel) => {
   // Stable context for useMemo inside usePluginLinks
   const context: PluginExtensionResourceAttributesContext = useMemo(() => {
     return {
@@ -121,7 +120,6 @@ class UnThemedLogDetails extends PureComponent<Props> {
       onPinLine,
       styles,
       pinLineButtonTooltipTitle,
-      mode = 'inline',
       links,
     } = this.props;
     const levelStyles = getLogLevelStyles(theme, row.logLevel);
@@ -152,14 +150,9 @@ class UnThemedLogDetails extends PureComponent<Props> {
     return (
       <tr className={cx(className, styles.logDetails)}>
         {showDuplicates && <td />}
-        {mode === 'inline' && (
-          <td
-            className={levelClassName}
-            aria-label={t('logs.un-themed-log-details.aria-label-log-level', 'Log level')}
-          />
-        )}
+        <td className={levelClassName} aria-label={t('logs.un-themed-log-details.aria-label-log-level', 'Log level')} />
         <td colSpan={4}>
-          <div className={mode === 'inline' ? styles.logDetailsContainer : styles.logDetailsSidebarContainer}>
+          <div className={styles.logDetailsContainer}>
             <table className={styles.logDetailsTable}>
               <tbody>
                 {displayedFields && displayedFields.length > 0 && (
@@ -168,7 +161,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                       <td
                         colSpan={100}
                         className={styles.logDetailsHeading}
-                        aria-label={t('logs.un-themed-log-details.aria-label-fields', 'Fields')}
+                        aria-label={t('logs.un-themed-log-details.aria-label-line', 'Log line')}
                       >
                         <Trans i18nKey="logs.log-details.log-line">Log line</Trans>
                       </td>

public/app/features/logs/components/LogLabelStats.tsx

@@ -1,15 +1,15 @@
 import { css } from '@emotion/css';
-import { PureComponent } from 'react';
+import { useMemo } from 'react';
 
 import { LogLabelStatsModel, GrafanaTheme2 } from '@grafana/data';
 import { t } from '@grafana/i18n';
-import { stylesFactory, withTheme2, Themeable2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 
 import { LogLabelStatsRow } from './LogLabelStatsRow';
 
 const STATS_ROW_LIMIT = 5;
 
-const getStyles = stylesFactory((theme: GrafanaTheme2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     logsStats: css({
       label: 'logs-stats',
@@ -42,20 +42,20 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       padding: '5px 0px',
     }),
   };
-});
+};
 
-interface Props extends Themeable2 {
+interface Props {
+  className?: string;
   stats: LogLabelStatsModel[];
   label: string;
   value: string;
   rowCount: number;
   isLabel?: boolean;
 }
 
-class UnThemedLogLabelStats extends PureComponent<Props> {
-  render() {
-    const { label, rowCount, stats, value, theme, isLabel } = this.props;
-    const style = getStyles(theme);
+export const LogLabelStats = ({ className, label, rowCount, stats, value, isLabel }: Props) => {
+  const style = useStyles2(getStyles);
+  const rows = useMemo(() => {
     const topRows = stats.slice(0, STATS_ROW_LIMIT);
     let activeRow = topRows.find((row) => row.value === value);
     let otherRows = stats.slice(STATS_ROW_LIMIT);
@@ -66,45 +66,45 @@ class UnThemedLogLabelStats extends PureComponent<Props> {
       activeRow = otherRows.find((row) => row.value === value);
       otherRows = otherRows.filter((row) => row.value !== value);
     }
+    return { topRows, otherRows, insertActiveRow, activeRow };
+  }, [stats, value]);
 
-    const otherCount = otherRows.reduce((sum, row) => sum + row.count, 0);
-    const topCount = topRows.reduce((sum, row) => sum + row.count, 0);
-    const total = topCount + otherCount;
-    const otherProportion = otherCount / total;
+  const otherCount = useMemo(() => rows.otherRows.reduce((sum, row) => sum + row.count, 0), [rows.otherRows]);
+  const topCount = useMemo(() => rows.topRows.reduce((sum, row) => sum + row.count, 0), [rows.topRows]);
+  const total = topCount + otherCount;
+  const otherProportion = otherCount / total;
 
-    return (
-      <div className={style.logsStats} data-testid="logLabelStats">
-        <div className={style.logsStatsHeader}>
-          <div className={style.logsStatsTitle}>
-            {isLabel
-              ? t(
-                  'logs.un-themed-log-label-stats.label-log-stats',
-                  '{{label}}: {{total}} of {{rowCount}} rows have that label',
-                  {
-                    label,
-                    total,
-                    rowCount,
-                  }
-                )
-              : t(
-                  'logs.un-themed-log-label-stats.field-log-stats',
-                  '{{label}}: {{total}} of {{rowCount}} rows have that field'
-                )}
-          </div>
-        </div>
-        <div className={style.logsStatsBody}>
-          {topRows.map((stat) => (
-            <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
-          ))}
-          {insertActiveRow && activeRow && <LogLabelStatsRow key={activeRow.value} {...activeRow} active />}
-          {otherCount > 0 && (
-            <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
-          )}
+  return (
+    <div className={className ?? style.logsStats} data-testid="logLabelStats">
+      <div className={style.logsStatsHeader}>
+        <div className={style.logsStatsTitle}>
+          {isLabel
+            ? t(
+                'logs.un-themed-log-label-stats.label-log-stats',
+                '{{label}}: {{total}} of {{rowCount}} rows have that label',
+                {
+                  label,
+                  total,
+                  rowCount,
+                }
+              )
+            : t(
+                'logs.un-themed-log-label-stats.field-log-stats',
+                '{{label}}: {{total}} of {{rowCount}} rows have that field'
+              )}
         </div>
       </div>
-    );
-  }
-}
-
-export const LogLabelStats = withTheme2(UnThemedLogLabelStats);
-LogLabelStats.displayName = 'LogLabelStats';
+      <div className={style.logsStatsBody}>
+        {rows.topRows.map((stat) => (
+          <LogLabelStatsRow key={stat.value} {...stat} active={stat.value === value} />
+        ))}
+        {rows.insertActiveRow && rows.activeRow && (
+          <LogLabelStatsRow key={rows.activeRow.value} {...rows.activeRow} active />
+        )}
+        {otherCount > 0 && (
+          <LogLabelStatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
+        )}
+      </div>
+    </div>
+  );
+};

public/app/features/logs/components/getLogRowStyles.ts

@@ -187,14 +187,6 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       margin: theme.spacing(2.5, 1, 2.5, 2),
       cursor: 'default',
     }),
-    logDetailsSidebarContainer: css({
-      label: 'logs-row-details-table',
-      border: `1px solid ${theme.colors.border.medium}`,
-      padding: theme.spacing(0, 1, 1),
-      borderRadius: theme.shape.radius.default,
-      margin: theme.spacing(0, 1, 0, 1),
-      cursor: 'default',
-    }),
     logDetailsTable: css({
       label: 'logs-row-details-table',
       lineHeight: '18px',

public/app/features/logs/components/panel/LogLine.tsx

@@ -528,9 +528,6 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
       gridColumnGap: theme.spacing(FIELD_GAP_MULTIPLIER),
       whiteSpace: 'pre',
       paddingBottom: theme.spacing(0.75),
-      '& .field': {
-        overflow: 'hidden',
-      },
     }),
     wrappedLogLine: css({
       alignSelf: 'flex-start',