Merge pull request #14368 from grafana/explore-logs-styling-alt2

Explore logs styling

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;
 

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 {

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;

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;

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;

public/sass/components/_panel_logs.scss

@@ -1,3 +1,5 @@
+$column-horizontal-spacing: 10px;
+
 .logs-panel-controls {
   display: flex;
   background-color: $page-bg;
@@ -59,8 +61,14 @@
 
   > div {
     display: table-cell;
-    padding-left: 10px;
+    padding-right: $column-horizontal-spacing;
-    border: 1px solid transparent;
+    vertical-align: middle;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  &:hover {
+    background: $page-bg;
   }
 }
 
@@ -70,6 +78,7 @@
 
 .logs-row__labels {
   max-width: 20%;
+  line-height: 1.2;
 }
 
 .logs-row__message {
@@ -93,37 +102,56 @@
 }
 
 .logs-row__level {
-  background-color: transparent;
   position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
     width: 3px;
-  padding: 0 !important;
+    background-color: $logs-color-unkown;
+  }
 
   &--critical,
   &--crit {
+    &::after {
       background-color: #705da0;
     }
+  }
 
   &--error,
   &--err {
+    &::after {
       background-color: #e24d42;
     }
+  }
 
   &--warning,
   &--warn {
-    background-color: #eab839;
+    &::after {
+      background-color: $warn;
+    }
   }
 
   &--info {
+    &::after {
       background-color: #7eb26d;
     }
+  }
 
   &--debug {
+    &::after {
       background-color: #1f78c1;
     }
+  }
 
   &--trace {
+    &::after {
       background-color: #6ed0e0;
     }
+  }
 }
 
 .logs-row__duplicates {
@@ -162,10 +190,6 @@
   box-shadow: $popover-shadow;
 }
 
-.logs-row__labels {
-  line-height: 1.2;
-}
-
 .logs-stats__info {
   margin-bottom: $spacer / 2;
 }