getGridTemplateColumns: consider displayed fields to set the grid sizes

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

@@ -6,7 +6,7 @@ import { CoreApp, createTheme, LogsDedupStrategy, LogsSortOrder } from '@grafana
 import { LOG_LINE_BODY_FIELD_NAME } from '../LogDetailsBody';
 import { createLogLine } from '../__mocks__/logRow';
 
-import { getStyles, LogLine, Props } from './LogLine';
+import { getGridTemplateColumns, getStyles, LogLine, Props } from './LogLine';
 import { LogListFontSize } from './LogList';
 import { LogListContextProvider } from './LogListContext';
 import { LogListSearchContext } from './LogListSearchContext';
@@ -36,7 +36,7 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
   beforeEach(() => {
     log = createLogLine(
       { labels: { place: 'luna' }, entry: `log message 1` },
-      { escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
+      { escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization, wrapLogMessage: true }
     );
     contextProps.logs = [log];
     contextProps.fontSize = fontSize;
@@ -226,7 +226,7 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
       jest.spyOn(virtualization, 'getTruncationLength').mockReturnValue(5);
       log = createLogLine(
         { labels: { place: 'luna' }, entry: `log message 1` },
-        { escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization }
+        { escape: false, order: LogsSortOrder.Descending, timeZone: 'browser', virtualization, wrapLogMessage: true }
       );
     });
 
@@ -425,3 +425,89 @@ describe.each(fontSizes)('LogLine', (fontSize: LogListFontSize) => {
     });
   });
 });
+
+describe('getGridTemplateColumns', () => {
+  test('Gets the template columns for the default visualization mode', () => {
+    expect(
+      getGridTemplateColumns(
+        [
+          {
+            field: 'timestamp',
+            width: 23,
+          },
+          {
+            field: 'level',
+            width: 4,
+          },
+        ],
+        []
+      )
+    ).toBe('23px 4px 1fr');
+  });
+
+  test('Gets the template columns when displayed fields are used', () => {
+    expect(
+      getGridTemplateColumns(
+        [
+          {
+            field: 'timestamp',
+            width: 23,
+          },
+          {
+            field: 'level',
+            width: 4,
+          },
+        ],
+        ['field']
+      )
+    ).toBe('23px 4px');
+  });
+
+  test('Gets the template columns when displayed fields are used', () => {
+    expect(
+      getGridTemplateColumns(
+        [
+          {
+            field: 'timestamp',
+            width: 23,
+          },
+          {
+            field: 'level',
+            width: 4,
+          },
+          {
+            field: 'field',
+            width: 4,
+          },
+        ],
+        ['field']
+      )
+    ).toBe('23px 4px 4px');
+  });
+
+  test('Gets the template columns when displayed fields are used', () => {
+    expect(
+      getGridTemplateColumns(
+        [
+          {
+            field: 'timestamp',
+            width: 23,
+          },
+          {
+            field: 'level',
+            width: 4,
+          },
+          {
+            field: 'field',
+            width: 4,
+          },
+          {
+            field: LOG_LINE_BODY_FIELD_NAME,
+            width: 20,
+          },
+        ],
+        ['field']
+      )
+    ).toBe('23px 4px 4px 20px');
+  });
+});

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

@@ -350,9 +350,10 @@ const LogLineBody = ({ log, styles }: { log: LogListModel; styles: LogLineStyles
   return <span className="field log-syntax-highlight" dangerouslySetInnerHTML={{ __html: log.highlightedBody }} />;
 };
 
-export function getGridTemplateColumns(dimensions: LogFieldDimension[]) {
+export function getGridTemplateColumns(dimensions: LogFieldDimension[], displayedFields: string[]) {
   const columns = dimensions.map((dimension) => dimension.width).join('px ');
-  return `${columns}px 1fr`;
+  const logLineWidth = displayedFields.length > 0 ? '' : ' 1fr';
+  return `${columns}px${logLineWidth}`;
 }
 
 export type LogLineStyles = ReturnType<typeof getStyles>;
@@ -525,10 +526,6 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
       gridColumnGap: theme.spacing(FIELD_GAP_MULTIPLIER),
       whiteSpace: 'pre',
       paddingBottom: theme.spacing(0.75),
-      '& .field': {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-      },
     }),
     wrappedLogLine: css({
       alignSelf: 'flex-start',

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

@@ -248,7 +248,7 @@ const LogListComponent = ({
     () => (wrapLogMessage ? [] : virtualization.calculateFieldDimensions(processedLogs, displayedFields)),
     [displayedFields, processedLogs, virtualization, wrapLogMessage]
   );
-  const styles = useStyles2(getStyles, dimensions, { showTime });
+  const styles = useStyles2(getStyles, dimensions, displayedFields, { showTime });
   const widthContainer = wrapperRef.current ?? containerElement;
   const {
     closePopoverMenu,
@@ -469,13 +469,18 @@ const LogListComponent = ({
   );
 };
 
-function getStyles(theme: GrafanaTheme2, dimensions: LogFieldDimension[], { showTime }: { showTime: boolean }) {
+function getStyles(
+  theme: GrafanaTheme2,
+  dimensions: LogFieldDimension[],
+  displayedFields: string[],
+  { showTime }: { showTime: boolean }
+) {
   const columns = showTime ? dimensions : dimensions.filter((_, index) => index > 0);
   return {
     logList: css({
       '& .unwrapped-log-line': {
         display: 'grid',
-        gridTemplateColumns: getGridTemplateColumns(columns),
+        gridTemplateColumns: getGridTemplateColumns(columns, displayedFields),
       },
     }),
     logListContainer: css({