Merge pull request #14296 from grafana/davkal/explore-grid

Explore: return to grid layout for logs table

public/app/features/explore/Logs.tsx

@@ -91,7 +91,7 @@ interface RowProps {
 function Row({ onClickLabel, row, showLabels, showLocalTime, showUtc }: RowProps) {
   const needsHighlighter = row.searchWords && row.searchWords.length > 0;
   return (
-    <div className="logs-row">
+    <>
       <div className={row.logLevel ? `logs-row-level logs-row-level-${row.logLevel}` : ''}>
         {row.duplicates > 0 && (
           <div className="logs-row-level__duplicates" title={`${row.duplicates} duplicates`}>
@@ -128,7 +128,7 @@ function Row({ onClickLabel, row, showLabels, showLocalTime, showUtc }: RowProps
           row.entry
         )}
       </div>
-    </div>
+    </>
   );
 }
 
@@ -270,6 +270,22 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
       }
     }
 
+    // Grid options
+    const cssColumnSizes = ['3px']; // Log-level indicator line
+    if (showUtc) {
+      cssColumnSizes.push('minmax(100px, max-content)');
+    }
+    if (showLocalTime) {
+      cssColumnSizes.push('minmax(100px, max-content)');
+    }
+    if (showLabels) {
+      cssColumnSizes.push('fit-content(20%)');
+    }
+    cssColumnSizes.push('1fr');
+    const logEntriesStyle = {
+      gridTemplateColumns: cssColumnSizes.join(' '),
+    };
+
     const scanText = scanRange ? `Scanning ${rangeUtil.describeTimeRange(scanRange)}` : 'Scanning...';
 
     return (
@@ -329,7 +345,7 @@ export default class Logs extends PureComponent<LogsProps, LogsState> {
           </div>
         </div>
 
-        <div className="logs-entries">
+        <div className="logs-entries" style={logEntriesStyle}>
           {hasData &&
             !deferLogs &&
             firstRows.map(row => (

public/sass/pages/_explore.scss

@@ -294,31 +294,13 @@
     }
 
     .logs-entries {
+      display: grid;
+      grid-column-gap: 1rem;
+      grid-row-gap: 0.1rem;
       font-family: $font-family-monospace;
       font-size: 12px;
     }
 
-    .logs-row {
-      display: flex;
-      flex-direction: row;
-
-      > div + div {
-        margin-left: 0.5rem;
-      }
-    }
-
-    .logs-row-level {
-      width: 3px;
-    }
-
-    .logs-row-labels {
-      flex: 0 0 25%;
-    }
-
-    .logs-row-message {
-      flex: 1;
-    }
-
     .logs-row-match-highlight {
       // Undoing mark styling
       background: inherit;