From a115729c555c5cfa6467b204b08fc5c73957f9bc Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Wed, 22 Jan 2020 16:10:19 +0000
Subject: [PATCH] Explore: Fixes some LogDetailsRow markup (#21671)

- Moves filter titles to icons rather than table cell
- Increases colspan of ad-hoc stats cell instead of
rendering empty cells for parsed fields
---
 .../src/components/Logs/LogDetailsRow.tsx     | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
index 50b81e17514..bf53bacd1e7 100644
--- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx
@@ -92,17 +92,28 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
     return (
       <tr className={cx(style.logDetailsValue, { [styles.noHoverBackground]: showFieldsStats })}>
         {/* Action buttons - show stats/filter results */}
-        <td title="Ad-hoc statistics" onClick={this.showStats} className={style.logsDetailsIcon}>
-          <i className={`fa fa-signal ${styles.hoverCursor}`} />
+        <td className={style.logsDetailsIcon} colSpan={isLabel ? undefined : 3}>
+          <i title="Ad-hoc statistics" className={`fa fa-signal ${styles.hoverCursor}`} onClick={this.showStats} />
         </td>
 
-        <td title="Filter for value" onClick={() => isLabel && this.filterLabel()} className={style.logsDetailsIcon}>
-          {isLabel && <i className={`fa fa-search-plus ${styles.hoverCursor}`} />}
-        </td>
-
-        <td title="Filter out value" onClick={() => isLabel && this.filterOutLabel()} className={style.logsDetailsIcon}>
-          {isLabel && <i className={`fa fa-search-minus ${styles.hoverCursor}`} />}
-        </td>
+        {isLabel && (
+          <>
+            <td className={style.logsDetailsIcon}>
+              <i
+                title="Filter for value"
+                className={`fa fa-search-plus ${styles.hoverCursor}`}
+                onClick={this.filterLabel}
+              />
+            </td>
+            <td className={style.logsDetailsIcon}>
+              <i
+                title="Filter out value"
+                className={`fa fa-search-minus ${styles.hoverCursor}`}
+                onClick={this.filterOutLabel}
+              />
+            </td>
+          </>
+        )}
 
         {/* Key - value columns */}
         <td className={style.logDetailsLabel}>{parsedKey}</td>