From 40c76c8242d66ec7a4e151aba3de64298bc83861 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:04:56 -0700 Subject: [PATCH 1/7] WIP Make table headers sticky Using CSS instead of HTML tables --- ui/src/alerts/components/AlertsTable.js | 132 +++++++++++++++--------- ui/src/style/components/tables.scss | 57 ++++++++-- 2 files changed, 132 insertions(+), 57 deletions(-) diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index cc9e573df6..6c49731133 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react' import _ from 'lodash' import {Link} from 'react-router' +import FancyScrollbar from 'shared/components/FancyScrollbar' + class AlertsTable extends Component { constructor(props) { super(props) @@ -55,11 +57,11 @@ class AlertsTable extends Component { sortableClasses(key) { if (this.state.sortKey === key) { if (this.state.sortDirection === 'asc') { - return 'sortable-header sorting-ascending' + return 'alert-history-table--th sortable-header sorting-ascending' } - return 'sortable-header sorting-descending' + return 'alert-history-table--th sortable-header sorting-descending' } - return 'sortable-header' + return 'alert-history-table--th sortable-header' } sort(alerts, key, direction) { @@ -81,63 +83,91 @@ class AlertsTable extends Component { this.state.sortDirection ) return this.props.alerts.length - ? - - - - - - - - - - + ?
+
+
this.changeSort('name')} + className={this.sortableClasses('name')} + style={{width: '15%'}} + > + Name +
+
this.changeSort('level')} + className={this.sortableClasses('level')} + style={{width: '10%'}} + > + Level +
+
this.changeSort('time')} + className={this.sortableClasses('time')} + style={{width: '25%'}} + > + Time +
+
this.changeSort('host')} + className={this.sortableClasses('host')} + style={{width: '25%'}} + > + Host +
+
this.changeSort('value')} + className={this.sortableClasses('value')} + style={{width: '25%'}} + > + Value +
+
+ {alerts.map(({name, level, time, host, value}) => { return ( -
- - - - - - + +
+ {value} +
+ ) })} - -
this.changeSort('name')} - className={this.sortableClasses('name')} - > - Name - this.changeSort('level')} - className={this.sortableClasses('level')} - > - Level - this.changeSort('time')} - className={this.sortableClasses('time')} - > - Time - this.changeSort('host')} - className={this.sortableClasses('host')} - > - Host - this.changeSort('value')} - className={this.sortableClasses('value')} - > - Value -
{name} +
+
+ {name} +
+
{level} -
+ +
{new Date(Number(time)).toISOString()} -
+ +
{host} -
{value}
+ + : this.renderTableEmpty() } diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index ca68164158..156d8802f6 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -172,15 +172,60 @@ $table-tab-scrollbar-height: 6px; .table.table-highlight > tbody > tr.highlight { background-color: $g4-onyx; } + /* - Responsive Tables + Alert History "Table" ---------------------------------------------- */ -@media screen and (max-width: 767px) { - .table-responsive { - border-radius: 3px; - border-color: $g5-pepper; - @include custom-scrollbar($g5-pepper, $c-pool); +.alert-history-table { + +} +.alert-history-table--thead { + display: flex; + width: 100%; + border-bottom: 2px solid $g5-pepper; +} +.alert-history-table--th { + @include no-user-select(); + padding: 8px; + font-size: 13px; + font-weight: 500; + color: $g17-whisper; + transition: + color 0.25s ease, + background-color 0.25s ease; + + &:hover { + background-color: $g5-pepper; + color: $g19-ghost; + cursor: pointer; + } + + &.col-name {width: 20%;} + &.col-level {width: 20%;} + &.col-time {width: 20%;} + &.col-host {width: 20%;} + &.col-value {width: 20%;} +} +.alert-history-table--tbody { + width: 100%; + height: 500px !important; +} +.alert-history-table--tr { + display: flex; + width: 100%; + &:hover { + background-color: $g4-onyx; } } +.alert-history-table--td { + font-size: 12px; + font-family: $code-font; + font-weight: 500; + padding: 4px 8px; + line-height: 1.42857143em; + color: $g13-mist; + white-space: pre-wrap; + word-break: break-all; +} From ba05319b57bb0f11255c6bd5f4a0139c3aa2de4c Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:29:55 -0700 Subject: [PATCH 2/7] Update alerts filter text to be more accurate --- ui/src/alerts/components/AlertsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index 6c49731133..fbfbb42ec1 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -269,7 +269,7 @@ class SearchBar extends Component { From 12884e753eab5d9d716b938ea27a16fb600bcf90 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:30:20 -0700 Subject: [PATCH 3/7] Remove FancyScrollbar from container --- ui/src/alerts/containers/AlertsApp.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 56faabadb0..ba980ac22d 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -4,7 +4,6 @@ import SourceIndicator from 'shared/components/SourceIndicator' import AlertsTable from 'src/alerts/components/AlertsTable' import NoKapacitorError from 'shared/components/NoKapacitorError' import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown' -import FancyScrollbar from 'shared/components/FancyScrollbar' import {getAlerts} from 'src/alerts/apis' import AJAX from 'utils/ajax' @@ -160,10 +159,8 @@ class AlertsApp extends Component { } return isWidget - ? - {this.renderSubComponents()} - - :
+ ? this.renderSubComponents() + :
@@ -183,7 +180,7 @@ class AlertsApp extends Component {
- +
@@ -191,7 +188,7 @@ class AlertsApp extends Component {
- +
} } From 183fe9a4f2d0d8948cefe8049a1e9ca1ed258f3e Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:33:42 -0700 Subject: [PATCH 4/7] Make alerts page contents stretch to fill height --- ui/src/style/components/tables.scss | 34 ++++++++++++++++++++++------- ui/src/style/unsorted.scss | 12 ++++++++++ 2 files changed, 38 insertions(+), 8 deletions(-) diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 156d8802f6..3cb06f201a 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -173,13 +173,37 @@ $table-tab-scrollbar-height: 6px; background-color: $g4-onyx; } +/* + Alert History "Page" + ---------------------------------------------- +*/ +.alert-history-page { + .page-contents > .container-fluid, + .page-contents > .container-fluid > .row, + .page-contents > .container-fluid > .row > .col-md-12, + .page-contents > .container-fluid > .row > .col-md-12 > .panel { + height: 100%; + } + + .col-md-12 > .panel { + display: flex; + flex-direction: column; + align-items: stretch; + + > .panel-body {flex: 1 0 0;} + .generic-empty-state {height: 100%;} + } +} /* Alert History "Table" ---------------------------------------------- */ .alert-history-table { - + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; } .alert-history-table--thead { display: flex; @@ -201,16 +225,10 @@ $table-tab-scrollbar-height: 6px; color: $g19-ghost; cursor: pointer; } - - &.col-name {width: 20%;} - &.col-level {width: 20%;} - &.col-time {width: 20%;} - &.col-host {width: 20%;} - &.col-value {width: 20%;} } .alert-history-table--tbody { + flex: 1 0 0; width: 100%; - height: 500px !important; } .alert-history-table--tr { display: flex; diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index d03c5aaa4c..b1d208c559 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -192,3 +192,15 @@ br { p {font-size: 13px;} } +.alerts-widget { + height: 100%; + display: flex; + flex-direction: column; + align-items: stretch; + + > .btn {margin: 20px 0;} + + .alert-history-table { + flex: 1 0 0; + } +} From 2529526c2a5693b7dba884dd08d7467f0c305f34 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:36:19 -0700 Subject: [PATCH 5/7] Fix appearance of sortable table headers in alerts history table --- ui/src/style/components/tables.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 3cb06f201a..ddd4ac3df3 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -50,7 +50,8 @@ Sortable Tables ---------------------------------------------- */ -table.table thead th.sortable-header { +table.table thead th.sortable-header, +.alert-history-table--th.sortable-header { transition: color 0.25s ease, background-color 0.25s ease; @@ -216,15 +217,6 @@ $table-tab-scrollbar-height: 6px; font-size: 13px; font-weight: 500; color: $g17-whisper; - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - background-color: $g5-pepper; - color: $g19-ghost; - cursor: pointer; - } } .alert-history-table--tbody { flex: 1 0 0; From fd47dda8ab3644a9bc56df0fae2d69c08c08cfd5 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 20 Jun 2017 13:52:11 -0700 Subject: [PATCH 6/7] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index a955578ab0..8bcd2337ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ### Bug Fixes ### Features ### UI Improvements +1. [#1644](https://github.com/influxdata/chronograf/pull/1644): Redesign Alerts History table to have sticky headers ## v1.3.3.0 [2017-06-19] From 00e3c7960de31d857ddb4ecc49736867c4f7e6a2 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 22 Jun 2017 12:38:17 -0700 Subject: [PATCH 7/7] Move table column widths into a constants file for consistency Other tables in the UI follow this pattern --- ui/src/alerts/components/AlertsTable.js | 23 +++++++++++++---------- ui/src/alerts/constants/tableSizing.js | 7 +++++++ 2 files changed, 20 insertions(+), 10 deletions(-) create mode 100644 ui/src/alerts/constants/tableSizing.js diff --git a/ui/src/alerts/components/AlertsTable.js b/ui/src/alerts/components/AlertsTable.js index fbfbb42ec1..22625449e0 100644 --- a/ui/src/alerts/components/AlertsTable.js +++ b/ui/src/alerts/components/AlertsTable.js @@ -4,6 +4,8 @@ import {Link} from 'react-router' import FancyScrollbar from 'shared/components/FancyScrollbar' +import {ALERTS_TABLE} from 'src/alerts/constants/tableSizing' + class AlertsTable extends Component { constructor(props) { super(props) @@ -82,41 +84,42 @@ class AlertsTable extends Component { this.state.sortKey, this.state.sortDirection ) + const {colName, colLevel, colTime, colHost, colValue} = ALERTS_TABLE return this.props.alerts.length ?
this.changeSort('name')} className={this.sortableClasses('name')} - style={{width: '15%'}} + style={{width: colName}} > Name
this.changeSort('level')} className={this.sortableClasses('level')} - style={{width: '10%'}} + style={{width: colLevel}} > Level
this.changeSort('time')} className={this.sortableClasses('time')} - style={{width: '25%'}} + style={{width: colTime}} > Time
this.changeSort('host')} className={this.sortableClasses('host')} - style={{width: '25%'}} + style={{width: colHost}} > Host
this.changeSort('value')} className={this.sortableClasses('value')} - style={{width: '25%'}} + style={{width: colValue}} > Value
@@ -133,25 +136,25 @@ class AlertsTable extends Component { >
{name}
{level}
{new Date(Number(time)).toISOString()}
{host} @@ -159,7 +162,7 @@ class AlertsTable extends Component {
{value}
diff --git a/ui/src/alerts/constants/tableSizing.js b/ui/src/alerts/constants/tableSizing.js new file mode 100644 index 0000000000..ab2879ff7b --- /dev/null +++ b/ui/src/alerts/constants/tableSizing.js @@ -0,0 +1,7 @@ +export const ALERTS_TABLE = { + colName: '15%', + colLevel: '10%', + colTime: '25%', + colHost: '25%', + colValue: '25%', +}