diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 18a6d564e..7bb4b20c4 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -38,6 +38,7 @@ class LogsTable extends PureComponent { 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 { 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 { 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 { procid: 'Proc ID', message: 'Message', appname: 'Application', + severity: '', + severity_1: 'Severity', }, key, _.capitalize(key) @@ -143,9 +155,18 @@ class LogsTable extends PureComponent { 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 ( +
+
+
+ ) } return ( diff --git a/ui/src/logs/utils/index.ts b/ui/src/logs/utils/index.ts index c9287d739..c06d08d8f 100644 --- a/ui/src/logs/utils/index.ts +++ b/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', diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index 18febbbed..db62bbb2d 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/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); + } } \ No newline at end of file