From 7cb456ea231b645e286006b2a96547ee382cd6b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 7 Dec 2018 11:28:22 +0100
Subject: [PATCH] Aligned styling of stats popover/box with rest of grafana &
 minor css refactoring

---
 public/app/features/explore/LogLabels.tsx | 22 +++++++----
 public/sass/components/_panel_logs.scss   | 45 ++++++++++++++++-------
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/public/app/features/explore/LogLabels.tsx b/public/app/features/explore/LogLabels.tsx
index c10ad408a42..eb9c39050f6 100644
--- a/public/app/features/explore/LogLabels.tsx
+++ b/public/app/features/explore/LogLabels.tsx
@@ -48,15 +48,21 @@ export class Stats extends PureComponent<{
     const otherProportion = otherCount / total;
 
     return (
-      <>
-        <div className="logs-stats__info">
-          {label}: {total} of {rowCount} rows have that label
-          <span className="logs-stats__icon fa fa-window-close" onClick={onClickClose} />
+      <div className="logs-stats">
+        <div className="logs-stats__header">
+          <span className="logs-stats__title">
+            {label}: {total} of {rowCount} rows have that label
+          </span>
+          <span className="logs-stats__close fa fa-remove" onClick={onClickClose} />
         </div>
-        {topRows.map(stat => <StatsRow key={stat.value} {...stat} active={stat.value === value} />)}
-        {insertActiveRow && activeRow && <StatsRow key={activeRow.value} {...activeRow} active />}
-        {otherCount > 0 && <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />}
-      </>
+        <div className="logs-stats__body">
+          {topRows.map(stat => <StatsRow key={stat.value} {...stat} active={stat.value === value} />)}
+          {insertActiveRow && activeRow && <StatsRow key={activeRow.value} {...activeRow} active />}
+          {otherCount > 0 && (
+            <StatsRow key="__OTHERS__" count={otherCount} value="Other" proportion={otherProportion} />
+          )}
+        </div>
+      </div>
     );
   }
 }
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 7a8314abcda..8220cfed878 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -173,10 +173,6 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__stats {
   margin: 5px 0;
-  background-color: $popover-bg;
-  color: $popover-color;
-  border: 1px solid $popover-border-color;
-  padding: 10px;
 }
 
 .logs-row__field-highlight:hover {
@@ -211,21 +207,42 @@ $column-horizontal-spacing: 10px;
   top: 1.25em;
   left: -10px;
   z-index: 100;
-  background-color: $popover-bg;
-  color: $popover-color;
-  border: 1px solid $popover-border-color;
-  padding: 10px;
-  border-radius: $border-radius;
   justify-content: space-between;
   box-shadow: $popover-shadow;
 }
 
-.logs-stats__info {
-  margin-bottom: $spacer / 2;
+/*
+* Stats popover & message stats box
+*/
+.logs-stats {
+  background-color: $popover-bg;
+  color: $popover-color;
+  border: 1px solid $popover-border-color;
+  border-radius: $border-radius;
+  max-width: 500px;
 }
 
-.logs-stats__icon {
-  margin-left: 0.5em;
+.logs-stats__header {
+  background-color: $popover-border-color;
+  padding: 6px 10px;
+  display: flex;
+}
+
+.logs-stats__title {
+  font-weight: $font-weight-semi-bold;
+  padding-right: $spacer;
+  overflow: hidden;
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.logs-stats__body {
+  padding: 20px 10px 10px 10px;
+}
+
+.logs-stats__close {
   cursor: pointer;
 }
 
@@ -272,6 +289,6 @@ $column-horizontal-spacing: 10px;
   }
 
   &__innerbar {
-    background-color: $blue;
+    background: $blue;
   }
 }