Merge pull request #1707 from influxdata/alerts-table-tweaks

Fine Tune Alerts Table Column Sizing

CHANGELOG.md

@@ -5,6 +5,7 @@
 
 ### Features
 ### UI Improvements
+1. [#1707](https://github.com/influxdata/chronograf/pull/1707): Polish alerts table in status page to wrap text less
 
 ## v1.3.4.0 [2017-07-10]
 ### Bug Fixes

ui/src/alerts/components/AlertsTable.js

@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react'
 import _ from 'lodash'
+import classnames from 'classnames'
 import {Link} from 'react-router'
 
 import FancyScrollbar from 'shared/components/FancyScrollbar'
@@ -144,7 +145,13 @@ class AlertsTable extends Component {
                     className={`alert-history-table--td alert-level-${level.toLowerCase()}`}
                     style={{width: colLevel}}
                   >
-                    {level}
+                    <span
+                      className={classnames(
+                        'table-dot',
+                        {'dot-critical': level === 'CRITICAL'},
+                        {'dot-success': level === 'OK'}
+                      )}
+                    />
                   </div>
                   <div
                     className="alert-history-table--td"
@@ -153,10 +160,10 @@ class AlertsTable extends Component {
                     {new Date(Number(time)).toISOString()}
                   </div>
                   <div
-                    className="alert-history-table--td"
+                    className="alert-history-table--td alert-history-table--host"
                     style={{width: colHost}}
                   >
-                    <Link to={`/sources/${id}/hosts/${host}`}>
+                    <Link to={`/sources/${id}/hosts/${host}`} title={host}>
                       {host}
                     </Link>
                   </div>

ui/src/alerts/constants/tableSizing.js

@@ -1,7 +1,7 @@
 export const ALERTS_TABLE = {
-  colName: '15%',
-  colLevel: '10%',
-  colTime: '25%',
-  colHost: '25%',
-  colValue: '25%',
+  colName: 'calc(55% - 216px)',
+  colLevel: '62px',
+  colTime: '190px',
+  colHost: 'calc(45% - 196px)',
+  colValue: '160px',
 }

ui/src/style/components/tables.scss

@@ -253,4 +253,11 @@ $table-tab-scrollbar-height: 6px;
   color: $g13-mist;
   white-space: pre-wrap;
   word-break: break-all;
+
+  &.alert-history-table--host {
+    white-space: nowrap;
+    word-break: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }