Add more styling to severity

ui/src/logs/components/LogsTable.tsx

@@ -38,6 +38,7 @@ class LogsTable extends PureComponent<Props, State> {
               rowCount={1}
               width={width}
               scrollLeft={this.state.scrollLeft}
+              onScroll={this.handleScroll}
               cellRenderer={this.headerRenderer}
               columnCount={columnCount}
               columnWidth={this.getColumnWidth}
@@ -55,6 +56,7 @@ class LogsTable extends PureComponent<Props, State> {
                 rowHeight={40}
                 rowCount={rowCount}
                 width={width}
+                scrollLeft={this.state.scrollLeft}
                 onScroll={this.handleScroll}
                 cellRenderer={this.cellRenderer}
                 columnCount={columnCount}
@@ -95,9 +97,17 @@ class LogsTable extends PureComponent<Props, State> {
 
     switch (column) {
       case 'message':
-        return 700
+        return 900
       case 'timestamp':
-        return 400
+        return 200
+      case 'procid':
+        return 100
+      case 'facility':
+        return 150
+      case 'severity_1':
+        return 150
+      case 'severity':
+        return 24
       default:
         return 200
     }
@@ -110,6 +120,8 @@ class LogsTable extends PureComponent<Props, State> {
         procid: 'Proc ID',
         message: 'Message',
         appname: 'Application',
+        severity: '',
+        severity_1: 'Severity',
       },
       key,
       _.capitalize(key)
@@ -143,9 +155,18 @@ class LogsTable extends PureComponent<Props, State> {
       case 'timestamp':
         value = moment(+value / 1000000).format('YYYY/MM/DD HH:mm:ss')
         break
-      case 'severity':
+      case 'severity_1':
         value = this.severityLevel(value)
         break
+      case 'severity':
+        return (
+          <div style={style} key={key}>
+            <div
+              className={`logs-viewer--dot ${value}-severity`}
+              title={this.severityLevel(value)}
+            />
+          </div>
+        )
     }
 
     return (

ui/src/logs/utils/index.ts

@@ -29,11 +29,21 @@ const histogramFields = [
 ]
 
 const tableFields = [
+  {
+    alias: 'severity',
+    type: 'field',
+    value: 'severity',
+  },
   {
     alias: 'timestamp',
     type: 'field',
     value: 'timestamp',
   },
+  {
+    alias: 'severity_text',
+    type: 'field',
+    value: 'severity',
+  },
   {
     alias: 'facility',
     type: 'field',
@@ -49,11 +59,6 @@ const tableFields = [
     type: 'field',
     value: 'appname',
   },
-  {
-    alias: 'severity',
-    type: 'field',
-    value: 'severity',
-  },
   {
     alias: 'host',
     type: 'field',

ui/src/style/pages/logs-viewer.scss

@@ -201,4 +201,37 @@ $logs-viewer-gutter: 60px;
   width: 100%;
   height: 100%;
   padding: 8px 16px;
+}
+
+.logs-viewer--dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  display: inline-block;
+  background-color: $g0-obsidian;
+
+  &.emerg-severity {
+    @include gradient-diag-up($c-ruby, $c-fire);
+  }
+  &.alert-severity {
+    @include gradient-diag-up($c-fire, $c-curacao);
+  }
+  &.crit-severity {
+    @include gradient-diag-up($c-curacao, $c-tiger);
+  }
+  &.err-severity {
+    @include gradient-diag-up($c-tiger, $c-pineapple);
+  }
+  &.warning-severity {
+    @include gradient-diag-up($c-pineapple, $c-thunder);
+  }
+  &.notice-severity {
+    @include gradient-diag-up($c-rainforest, $c-honeydew);
+  }
+  &.info-severity {
+    @include gradient-diag-up($c-star, $c-comet);
+  }
+  &.debug-severity {
+    @include gradient-diag-up($g5-pepper, $g6-smoke);
+  }
 }