From 86bb36fe9718731f3ff9e84d30bb7a1885d178eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 13:30:48 +0100
Subject: [PATCH 1/6] wip: explore logs styling

---
 public/sass/components/_panel_logs.scss | 56 ++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 2d708f99d8e..4e748029e85 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -1,3 +1,5 @@
+$column-horizontal-spacing: 10px;
+
 .logs-panel-controls {
   display: flex;
   background-color: $page-bg;
@@ -52,6 +54,7 @@
   font-size: 12px;
   display: table;
   table-layout: fixed;
+  margin: 0 -(nth($panel-padding, 2));
 }
 
 .logs-row {
@@ -59,8 +62,20 @@
 
   > div {
     display: table-cell;
-    padding-left: 10px;
-    border: 1px solid transparent;
+    padding-right: $column-horizontal-spacing;
+    vertical-align: middle;
+
+    &:first-child {
+      padding-left: $column-horizontal-spacing;
+    }
+
+    &:last-child {
+      padding-left: $column-horizontal-spacing;
+    }
+  }
+
+  &:nth-child(odd) {
+    background: $page-bg;
   }
 }
 
@@ -93,36 +108,55 @@
 }
 
 .logs-row__level {
-  background-color: transparent;
   position: relative;
-  width: 3px;
-  padding: 0 !important;
+  width: 12px;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: $gray-2;
+    border-radius: 50%;
+  }
 
   &--critical,
   &--crit {
-    background-color: #705da0;
+    &::after {
+      background-color: #705da0;
+    }
   }
 
   &--error,
   &--err {
-    background-color: #e24d42;
+    &::after {
+      background-color: #e24d42;
+    }
   }
 
   &--warning,
   &--warn {
-    background-color: #eab839;
+    &::after {
+      background-color: #eab839;
+    }
   }
 
   &--info {
-    background-color: #7eb26d;
+    &::after {
+      background-color: #7eb26d;
+    }
   }
 
   &--debug {
-    background-color: #1f78c1;
+    &::after {
+      background-color: #1f78c1;
+    }
   }
 
   &--trace {
-    background-color: #6ed0e0;
+    &::after {
+      background-color: #6ed0e0;
+    }
   }
 }
 

From b9517d110452bfb1bfed89832ac21cfabe29df92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 14:03:57 +0100
Subject: [PATCH 2/6] wip: explore logs styling

---
 public/sass/components/_panel_logs.scss | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 4e748029e85..f6da51b18e5 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -66,7 +66,8 @@ $column-horizontal-spacing: 10px;
     vertical-align: middle;
 
     &:first-child {
-      padding-left: $column-horizontal-spacing;
+      padding-left: $column-horizontal-spacing - 2px;
+      border-left: 2px solid transparent;
     }
 
     &:last-child {
@@ -74,6 +75,12 @@ $column-horizontal-spacing: 10px;
     }
   }
 
+  &:hover {
+    > div:first-child {
+      border-left: 2px solid $blue;
+    }
+  }
+
   &:nth-child(odd) {
     background: $page-bg;
   }
@@ -137,7 +144,7 @@ $column-horizontal-spacing: 10px;
   &--warning,
   &--warn {
     &::after {
-      background-color: #eab839;
+      background-color: $warn;
     }
   }
 

From 03b5f32e071033e321a905db8f27aece68302650 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 15:13:00 +0100
Subject: [PATCH 3/6] wip: alternative level styling & hover effect

---
 public/sass/components/_panel_logs.scss | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index f6da51b18e5..2a3c3c96609 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -67,7 +67,7 @@ $column-horizontal-spacing: 10px;
 
     &:first-child {
       padding-left: $column-horizontal-spacing - 2px;
-      border-left: 2px solid transparent;
+      // border-left: 2px solid transparent;
     }
 
     &:last-child {
@@ -76,13 +76,14 @@ $column-horizontal-spacing: 10px;
   }
 
   &:hover {
-    > div:first-child {
-      border-left: 2px solid $blue;
+    > div {
+      // border-left: 2px solid $blue;
+      background: $page-bg;
     }
   }
 
   &:nth-child(odd) {
-    background: $page-bg;
+    // background: $page-bg;
   }
 }
 
@@ -116,15 +117,16 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__level {
   position: relative;
-  width: 12px;
+  // width: 12px;
 
   &::after {
     content: '';
     display: block;
-    width: 12px;
-    height: 12px;
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    width: 3px;
     background-color: $gray-2;
-    border-radius: 50%;
   }
 
   &--critical,

From 5ac3b5a561361a1160730deb51f522a70e3f3ad8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 15:51:42 +0100
Subject: [PATCH 4/6] explore logs styling

---
 public/sass/components/_panel_logs.scss | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 2a3c3c96609..46a6fbe81a2 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -64,10 +64,11 @@ $column-horizontal-spacing: 10px;
     display: table-cell;
     padding-right: $column-horizontal-spacing;
     vertical-align: middle;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
 
     &:first-child {
       padding-left: $column-horizontal-spacing - 2px;
-      // border-left: 2px solid transparent;
     }
 
     &:last-child {
@@ -76,14 +77,7 @@ $column-horizontal-spacing: 10px;
   }
 
   &:hover {
-    > div {
-      // border-left: 2px solid $blue;
-      background: $page-bg;
-    }
-  }
-
-  &:nth-child(odd) {
-    // background: $page-bg;
+    background: $page-bg;
   }
 }
 

From 9ac3821454644a38c79f0cd7e89e61ef25f4c8ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 11:55:01 -0800
Subject: [PATCH 5/6] made unknown color theme aware and sync with graph color,
 some minor cleanup

---
 public/app/core/logs_model.ts           |  4 ++--
 public/app/core/utils/colors.ts         |  5 +++++
 public/sass/_variables.dark.scss        |  3 +++
 public/sass/_variables.light.scss       |  3 +++
 public/sass/components/_panel_logs.scss | 12 +-----------
 5 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts
index 1527f18e4b6..08d53a835d2 100644
--- a/public/app/core/logs_model.ts
+++ b/public/app/core/logs_model.ts
@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { TimeSeries } from 'app/core/core';
-import colors from 'app/core/utils/colors';
+import colors, { getThemeColor } from 'app/core/utils/colors';
 
 export enum LogLevel {
   crit = 'critical',
@@ -22,7 +22,7 @@ export const LogLevelColor = {
   [LogLevel.info]: colors[0],
   [LogLevel.debug]: colors[5],
   [LogLevel.trace]: colors[2],
-  [LogLevel.unkown]: '#ddd',
+  [LogLevel.unkown]: getThemeColor('#8e8e8e', '#dde4ed'),
 };
 
 export interface LogSearchMatch {
diff --git a/public/app/core/utils/colors.ts b/public/app/core/utils/colors.ts
index 13e02b76e30..34508e94a9f 100644
--- a/public/app/core/utils/colors.ts
+++ b/public/app/core/utils/colors.ts
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import tinycolor from 'tinycolor2';
+import config from 'app/core/config';
 
 export const PALETTE_ROWS = 4;
 export const PALETTE_COLUMNS = 14;
@@ -90,5 +91,9 @@ export function hslToHex(color) {
   return tinycolor(color).toHexString();
 }
 
+export function getThemeColor(dark: string, light: string): string {
+  return config.bootData.user.lightTheme ? light : dark;
+}
+
 export let sortedColors = sortColorsByHue(colors);
 export default colors;
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 3fc3770176d..f38349f48f4 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -350,3 +350,6 @@ $diff-json-icon: $gray-7;
 
 //Submenu
 $variable-option-bg: $blue-dark;
+
+// logs
+$logs-color-unkown: $gray-2;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index c70f75c9946..d76cfce85af 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -359,3 +359,6 @@ $diff-json-icon: $gray-4;
 
 //Submenu
 $variable-option-bg: $blue-light;
+
+// logs
+$logs-color-unkown: $gray-5;
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index 46a6fbe81a2..f1a2a32af2c 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -54,7 +54,6 @@ $column-horizontal-spacing: 10px;
   font-size: 12px;
   display: table;
   table-layout: fixed;
-  margin: 0 -(nth($panel-padding, 2));
 }
 
 .logs-row {
@@ -66,14 +65,6 @@ $column-horizontal-spacing: 10px;
     vertical-align: middle;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
-
-    &:first-child {
-      padding-left: $column-horizontal-spacing - 2px;
-    }
-
-    &:last-child {
-      padding-left: $column-horizontal-spacing;
-    }
   }
 
   &:hover {
@@ -111,7 +102,6 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__level {
   position: relative;
-  // width: 12px;
 
   &::after {
     content: '';
@@ -120,7 +110,7 @@ $column-horizontal-spacing: 10px;
     top: 1px;
     bottom: 1px;
     width: 3px;
-    background-color: $gray-2;
+    background-color: $logs-color-unkown;
   }
 
   &--critical,

From e7fe0bd668e653bbf590004c209fa34f724efc4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 6 Dec 2018 12:29:55 -0800
Subject: [PATCH 6/6] fixed unit tests

---
 public/app/core/config.ts               | 6 +++++-
 public/sass/components/_panel_logs.scss | 5 +----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/app/core/config.ts b/public/app/core/config.ts
index 1473f8a91f8..13d84772ecf 100644
--- a/public/app/core/config.ts
+++ b/public/app/core/config.ts
@@ -54,7 +54,11 @@ export class Settings {
   }
 }
 
-const bootData = (window as any).grafanaBootData || { settings: {} };
+const bootData = (window as any).grafanaBootData || {
+  settings: {},
+  user: {},
+};
+
 const options = bootData.settings;
 options.bootData = bootData;
 
diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss
index f1a2a32af2c..6f1c43cfe1d 100644
--- a/public/sass/components/_panel_logs.scss
+++ b/public/sass/components/_panel_logs.scss
@@ -78,6 +78,7 @@ $column-horizontal-spacing: 10px;
 
 .logs-row__labels {
   max-width: 20%;
+  line-height: 1.2;
 }
 
 .logs-row__message {
@@ -189,10 +190,6 @@ $column-horizontal-spacing: 10px;
   box-shadow: $popover-shadow;
 }
 
-.logs-row__labels {
-  line-height: 1.2;
-}
-
 .logs-stats__info {
   margin-bottom: $spacer / 2;
 }