From 4ce79349a3d983e5f14860207e1b7b4697090f64 Mon Sep 17 00:00:00 2001
From: David Kaltschmidt <david.kaltschmidt@gmail.com>
Date: Tue, 4 Dec 2018 10:44:05 +0100
Subject: [PATCH] Explore: return to grid layout for logs table

- better column control than flexbox
- increased gutter and row spacing
---
 public/app/features/explore/Logs.tsx | 22 +++++++++++++++++++---
 public/sass/pages/_explore.scss      | 24 +++---------------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx
index 6447ec895ed..79207f28074 100644
--- a/public/app/features/explore/Logs.tsx
+++ b/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 => (
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 91af104a98e..dc1a79bff68 100644
--- a/public/sass/pages/_explore.scss
+++ b/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;