diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index 475cea4c3..2fe57bb71 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -63,8 +63,8 @@ const KapacitorRules = ({ ) } -const PageContents = ({children, source, tickscript, onCloseTickscript}) => ( -
+const PageContents = ({children, source, tickscript, onCloseTickscript}) => +
@@ -93,7 +93,6 @@ const PageContents = ({children, source, tickscript, onCloseTickscript}) => ( /> : null}
-) const {arrayOf, bool, func, node, shape, string} = PropTypes diff --git a/ui/src/kapacitor/components/KapacitorRulesTable.js b/ui/src/kapacitor/components/KapacitorRulesTable.js index 24adbe4d2..4c12caaa5 100644 --- a/ui/src/kapacitor/components/KapacitorRulesTable.js +++ b/ui/src/kapacitor/components/KapacitorRulesTable.js @@ -1,23 +1,33 @@ import React, {PropTypes} from 'react' import {Link} from 'react-router' +import {KAPACITOR_RULES_TABLE} from 'src/kapacitor/constants/tableSizing' +const { + colName, + colType, + colMessage, + colAlerts, + colEnabled, + colActions, +} = KAPACITOR_RULES_TABLE + const KapacitorRulesTable = ({ rules, source, onDelete, onReadTickscript, onChangeRuleStatus, -}) => ( +}) =>
- - - - - - + + + + + @@ -36,17 +46,25 @@ const KapacitorRulesTable = ({
NameRule TypeMessageAlertsEnabled + NameRule TypeMessageAlertsEnabled
-) -const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => ( +const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => - + - {rule.trigger} - {rule.message} - {rule.alerts.join(', ')} - + {rule.trigger} + + + {rule.message} + + + + {rule.alerts.join(', ')} + +
(
- + @@ -67,7 +85,6 @@ const RuleRow = ({rule, source, onRead, onDelete, onChangeRuleStatus}) => ( -) const RuleTitle = ({rule: {id, name, query}, source}) => { // no queryConfig means the rule was manually created outside of Chronograf diff --git a/ui/src/kapacitor/constants/tableSizing.js b/ui/src/kapacitor/constants/tableSizing.js new file mode 100644 index 000000000..5d96be762 --- /dev/null +++ b/ui/src/kapacitor/constants/tableSizing.js @@ -0,0 +1,8 @@ +export const KAPACITOR_RULES_TABLE = { + colName: '200px', + colType: '90px', + colMessage: '460px', + colAlerts: '120px', + colEnabled: '64px', + colActions: '176px', +} diff --git a/ui/src/kapacitor/containers/KapacitorRulesPage.js b/ui/src/kapacitor/containers/KapacitorRulesPage.js index 57d31448f..95ccdf553 100644 --- a/ui/src/kapacitor/containers/KapacitorRulesPage.js +++ b/ui/src/kapacitor/containers/KapacitorRulesPage.js @@ -55,19 +55,17 @@ class KapacitorRulesPage extends Component { const {hasKapacitor, loading, tickscript} = this.state return ( -
- -
+ ) } } diff --git a/ui/src/style/components/tables.scss b/ui/src/style/components/tables.scss index 7f385f4a9..632f17e19 100644 --- a/ui/src/style/components/tables.scss +++ b/ui/src/style/components/tables.scss @@ -261,3 +261,14 @@ $table-tab-scrollbar-height: 6px; text-overflow: ellipsis; } } + +/* + No Wrap Cells + ---------------------------------------------- +*/ + +table .table-cell-nowrap { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +}