From 118ed35aa5d58aed06868b255411919521c9dac6 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 2 Feb 2018 17:25:43 -0800 Subject: [PATCH 01/11] Add expand/collapse interaction to each kapacitor log item --- .../components/LogItemKapacitorPoint.js | 116 ++++++++++++------ ui/src/kapacitor/components/LogsTable.js | 12 +- ui/src/kapacitor/components/LogsTableRow.js | 29 +++-- ui/src/kapacitor/components/Tickscript.js | 6 +- ui/src/kapacitor/containers/TickscriptPage.js | 9 ++ .../components/kapacitor-logs-table.scss | 53 +++++++- 6 files changed, 171 insertions(+), 54 deletions(-) diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index 6a7639330..1e9b54b75 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -1,43 +1,87 @@ -import React, {PropTypes} from 'react' +import React, {Component, PropTypes} from 'react' -const renderKeysAndValues = object => { - if (!object) { - return -- +class LogItemKapacitorPoint extends Component { + renderKeysAndValues = (object, name) => { + if (!object) { + return -- + } + const objKeys = Object.keys(object) + const objValues = Object.values(object) + + if (objKeys.length > 2) { + return ( +
+ {`${objKeys.length} ${name}...`} +
+ ) + } + + const objElements = objKeys.map((objKey, i) => +
+ {objKey}: {objValues[i]} +
+ ) + return objElements } - const objKeys = Object.keys(object) - const objValues = Object.values(object) - const objElements = objKeys.map((objKey, i) => -
- {objKey}: {objValues[i]} -
- ) - return objElements + handleToggleExpand = () => { + const {onToggleExpandLog, logIndex} = this.props + + if (this.isExpandable()) { + onToggleExpandLog(logIndex) + } + } + + isExpandable = () => { + const {logItem} = this.props + + if ( + Object.keys(logItem.tag).length > 2 || + Object.keys(logItem.field).length > 2 + ) { + return true + } + return false + } + + render() { + const {logItem} = this.props + + const rowClass = `logs-table--row${this.isExpandable() + ? ' logs-table--row__expandable' + : ''}${logItem.expanded ? ' expanded' : ''}` + + return ( +
+ {this.isExpandable() && +
+ Click to show all items +
} +
+
+
+ {logItem.ts} +
+
+
+
Kapacitor Point
+
+
+

TAGS

+ {this.renderKeysAndValues(logItem.tag, 'Tags')} +
+
+

FIELDS

+ {this.renderKeysAndValues(logItem.field, 'Fields')} +
+
+
+
+ ) + } } -const LogItemKapacitorPoint = ({logItem}) => -
-
-
-
- {logItem.ts} -
-
-
-
Kapacitor Point
-
-
- TAGS
- {renderKeysAndValues(logItem.tag)} -
-
- FIELDS
- {renderKeysAndValues(logItem.field)} -
-
-
-
-const {shape, string} = PropTypes +const {func, number, shape, string} = PropTypes LogItemKapacitorPoint.propTypes = { logItem: shape({ @@ -46,6 +90,8 @@ LogItemKapacitorPoint.propTypes = { tag: shape.isRequired, field: shape.isRequired, }), + onToggleExpandLog: func.isRequired, + logIndex: number.isRequired, } export default LogItemKapacitorPoint diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js index ad7945c1b..070740cf0 100644 --- a/ui/src/kapacitor/components/LogsTable.js +++ b/ui/src/kapacitor/components/LogsTable.js @@ -3,7 +3,7 @@ import React, {PropTypes} from 'react' import InfiniteScroll from 'shared/components/InfiniteScroll' import LogsTableRow from 'src/kapacitor/components/LogsTableRow' -const LogsTable = ({logs}) => +const LogsTable = ({logs, onToggleExpandLog}) =>

Logs

@@ -14,14 +14,19 @@ const LogsTable = ({logs}) => className="logs-table" itemHeight={87} items={logs.map((log, i) => - + )} /> :
}
-const {arrayOf, shape, string} = PropTypes +const {arrayOf, func, shape, string} = PropTypes LogsTable.propTypes = { logs: arrayOf( @@ -32,6 +37,7 @@ LogsTable.propTypes = { msg: string.isRequired, }) ).isRequired, + onToggleExpandLog: func.isRequired, } export default LogsTable diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js index 32b658c67..c635e63d7 100644 --- a/ui/src/kapacitor/components/LogsTableRow.js +++ b/ui/src/kapacitor/components/LogsTableRow.js @@ -8,31 +8,37 @@ import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorErro import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug' import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug' -const LogsTableRow = ({logItem, index}) => { +const LogsTableRow = ({logItem, index, onToggleExpandLog}) => { if (logItem.service === 'sessions') { - return + return } if (logItem.service === 'http' && logItem.msg === 'http request') { - return + return } if (logItem.service === 'kapacitor' && logItem.msg === 'point') { - return + return ( + + ) } if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') { - return + return } if (logItem.service === 'kapacitor' && logItem.lvl === 'error') { - return + return } if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') { - return + return } if (logItem.service === 'influxdb' && logItem.lvl === 'debug') { - return + return } return ( -
+
@@ -53,7 +59,7 @@ const LogsTableRow = ({logItem, index}) => { ) } -const {number, shape, string} = PropTypes +const {func, number, shape, string} = PropTypes LogsTableRow.propTypes = { logItem: shape({ @@ -62,7 +68,8 @@ LogsTableRow.propTypes = { lvl: string.isRequired, msg: string.isRequired, }).isRequired, - index: number, + index: number.isRequired, + onToggleExpandLog: func.isRequired, } export default LogsTableRow diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js index 8cec26829..8e9fe899b 100644 --- a/ui/src/kapacitor/components/Tickscript.js +++ b/ui/src/kapacitor/components/Tickscript.js @@ -20,6 +20,7 @@ const Tickscript = ({ isNewTickscript, areLogsVisible, areLogsEnabled, + onToggleExpandLog, onToggleLogsVisibility, }) =>
@@ -51,7 +52,9 @@ const Tickscript = ({ unsavedChanges={unsavedChanges} />
- {areLogsVisible ? : null} + {areLogsVisible + ? + : null}
@@ -79,6 +82,7 @@ Tickscript.propTypes = { onChangeID: func.isRequired, isNewTickscript: bool.isRequired, unsavedChanges: bool, + onToggleExpandLog: func.isRequired, } export default Tickscript diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index 0f456cdfc..19639a69c 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -2,6 +2,7 @@ import React, {PropTypes, Component} from 'react' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import uuid from 'node-uuid' +import _ from 'lodash' import Tickscript from 'src/kapacitor/components/Tickscript' import * as kapactiorActionCreators from 'src/kapacitor/actions/view' @@ -156,6 +157,13 @@ class TickscriptPage extends Component { }) } + handleToggleExpandLog = logIndex => { + const {logs} = this.state + logs[logIndex].expanded = !_.get(logs[logIndex], 'expanded', false) + + this.setState({logs}) + } + handleSave = async () => { const {kapacitor, task} = this.state const { @@ -243,6 +251,7 @@ class TickscriptPage extends Component { areLogsVisible={areLogsVisible} areLogsEnabled={areLogsEnabled} onToggleLogsVisibility={this.handleToggleLogsVisibility} + onToggleExpandLog={this.handleToggleExpandLog} /> ) } diff --git a/ui/src/style/components/kapacitor-logs-table.scss b/ui/src/style/components/kapacitor-logs-table.scss index ff1eb7985..0c163c103 100644 --- a/ui/src/style/components/kapacitor-logs-table.scss +++ b/ui/src/style/components/kapacitor-logs-table.scss @@ -36,14 +36,13 @@ $logs-margin: 4px; height: 100%; } .logs-table--row { - height: 87px; // Fixed height, required for Infinite Scroll, allows for 2 tags / fields per line + position: relative; + overflow: hidden; + height: 87px; // Fixed height, required for Infinite Scroll, allows for 2 tags / fields per line padding: 8px ($logs-table-padding - 16px) 8px ($logs-table-padding / 2); border-bottom: 2px solid $g3-castle; transition: background-color 0.25s ease; - &:hover { - background-color: $g4-onyx; - } &:first-child { border-bottom: none; } @@ -100,8 +99,54 @@ $logs-margin: 4px; color: $g11-sidewalk; flex: 1 0 50%; } +.logs-table--key-values h1 { + font-size: 13px; + font-weight: 700; + margin: 0; + letter-spacing: normal; + line-height: 1.42857143em; +} .logs-table--key-value { } .logs-table--key-value span { color: $c-pool; } + +.logs-table--many-keys { + color: $c-pool; + width: 100%; + display: inline-block; + font-style: italic; +} + +.logs-table--row-expander { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: rgba(255,255,255,0.5); + color: $g20-white; + padding: 4px 0; + font-size: 13px; + font-weight: 600; + text-align: center; + transition: transform 0.25s ease; + transform: translateY(100%); +} +.logs-table--row:hover .logs-table--row-expander { + transform: translateY(0); +} + +// Styles for Expandable Log Items +.logs-table--row.logs-table--row__expandable { + &:hover { + background-color: $g4-onyx; + cursor: zoom-in; + } + &.expanded { + height: 240px; + &:hover { + cursor: zoom-out; + } + } +} From d036dec28ab7c25c3729f42637771c170ee1942a Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 2 Feb 2018 18:05:32 -0800 Subject: [PATCH 02/11] Polish expand/collapse interaction and appearance of logs --- .../components/LogItemKapacitorPoint.js | 58 ++++++++++++------- .../components/kapacitor-logs-table.scss | 33 ++++------- 2 files changed, 48 insertions(+), 43 deletions(-) diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index 1e9b54b75..137d36c0b 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -1,7 +1,7 @@ import React, {Component, PropTypes} from 'react' class LogItemKapacitorPoint extends Component { - renderKeysAndValues = (object, name) => { + renderKeysAndValues = (object, name, expanded) => { if (!object) { return -- } @@ -9,19 +9,39 @@ class LogItemKapacitorPoint extends Component { const objValues = Object.values(object) if (objKeys.length > 2) { - return ( -
- {`${objKeys.length} ${name}...`} -
- ) + return expanded + ?
+

+ {`${objKeys.length} ${name}`} +

+
+ {objKeys.map((objKey, i) => +
+ {objKey}: {objValues[i]} +
+ )} +
+
+ :
+

+ {`${objKeys.length} ${name}`} +

+
Click to expand...
+
} - const objElements = objKeys.map((objKey, i) => -
- {objKey}: {objValues[i]} + return ( +
+

+ {`${objKeys.length} ${name}`} +

+ {objKeys.map((objKey, i) => +
+ {objKey}: {objValues[i]} +
+ )}
) - return objElements } handleToggleExpand = () => { @@ -53,10 +73,6 @@ class LogItemKapacitorPoint extends Component { return (
- {this.isExpandable() && -
- Click to show all items -
}
@@ -66,14 +82,12 @@ class LogItemKapacitorPoint extends Component {
Kapacitor Point
-
-

TAGS

- {this.renderKeysAndValues(logItem.tag, 'Tags')} -
-
-

FIELDS

- {this.renderKeysAndValues(logItem.field, 'Fields')} -
+ {this.renderKeysAndValues(logItem.tag, 'Tags', logItem.expanded)} + {this.renderKeysAndValues( + logItem.field, + 'Fields', + logItem.expanded + )}
diff --git a/ui/src/style/components/kapacitor-logs-table.scss b/ui/src/style/components/kapacitor-logs-table.scss index 0c163c103..a70273c42 100644 --- a/ui/src/style/components/kapacitor-logs-table.scss +++ b/ui/src/style/components/kapacitor-logs-table.scss @@ -13,7 +13,7 @@ $logs-margin: 4px; width: 50%; position: relative; height: 100%; - @include gradient-v($g3-castle,$g1-raven); + @include gradient-v(mix($g3-castle, $g2-kevlar),mix($g1-raven, $g0-obsidian)); } .logs-table--header { display: flex; @@ -105,6 +105,7 @@ $logs-margin: 4px; margin: 0; letter-spacing: normal; line-height: 1.42857143em; + text-transform: uppercase; } .logs-table--key-value { } @@ -113,40 +114,30 @@ $logs-margin: 4px; } .logs-table--many-keys { - color: $c-pool; + color: $g9-mountain; width: 100%; display: inline-block; font-style: italic; } -.logs-table--row-expander { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - background-color: rgba(255,255,255,0.5); - color: $g20-white; - padding: 4px 0; - font-size: 13px; - font-weight: 600; - text-align: center; - transition: transform 0.25s ease; - transform: translateY(100%); -} -.logs-table--row:hover .logs-table--row-expander { - transform: translateY(0); -} - // Styles for Expandable Log Items .logs-table--row.logs-table--row__expandable { &:hover { - background-color: $g4-onyx; + background-color: fade-out($g0-obsidian, 0.7); cursor: zoom-in; } &.expanded { + background-color: $g0-obsidian; height: 240px; &:hover { + background-color: $g0-obsidian; cursor: zoom-out; } } } +.logs-table--keys-scrollbox { + width: 100%; + height: 190px; + overflow-y: scroll; + @include custom-scrollbar($g0-obsidian,$g7-graphite); +} From 2926a127d048e1dc5879b1c64351c35600b905bd Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 13:45:50 -0800 Subject: [PATCH 03/11] Remove infinite scroll from logs table and render only 200 most recent logs --- ui/src/kapacitor/components/LogsTable.js | 35 ++++++++++++------------ 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js index 070740cf0..c3f86f00c 100644 --- a/ui/src/kapacitor/components/LogsTable.js +++ b/ui/src/kapacitor/components/LogsTable.js @@ -1,29 +1,30 @@ import React, {PropTypes} from 'react' -import InfiniteScroll from 'shared/components/InfiniteScroll' import LogsTableRow from 'src/kapacitor/components/LogsTableRow' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' + +const numLogsToRender = 200 const LogsTable = ({logs, onToggleExpandLog}) =>
-

Logs

+

{`${numLogsToRender} Most Recent Logs`}

-
- {logs.length - ? - - )} + + {logs + .slice(0, numLogsToRender) + .map((log, i) => + - :
} -
+ )} +
const {arrayOf, func, shape, string} = PropTypes From 1128040be230554dffd66d872d497be6f1d4489e Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 14:15:56 -0800 Subject: [PATCH 04/11] Remove concept of expand/collapse and redesign log table rows Each row sized to fit content, if the keys/values list is too long it scrolls. Should comfortably fit about 17 items before scrolling --- .../components/LogItemKapacitorPoint.js | 122 +++++------------- ui/src/kapacitor/components/LogsTable.js | 18 +-- ui/src/kapacitor/components/LogsTableRow.js | 13 +- ui/src/kapacitor/components/Tickscript.js | 6 +- ui/src/kapacitor/containers/TickscriptPage.js | 9 -- .../components/kapacitor-logs-table.scss | 58 +++------ ui/src/style/modules/mixins.scss | 8 +- 7 files changed, 66 insertions(+), 168 deletions(-) diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index 137d36c0b..a56df87a4 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -1,101 +1,45 @@ -import React, {Component, PropTypes} from 'react' +import React, {PropTypes} from 'react' -class LogItemKapacitorPoint extends Component { - renderKeysAndValues = (object, name, expanded) => { - if (!object) { - return -- - } - const objKeys = Object.keys(object) - const objValues = Object.values(object) +const renderKeysAndValues = (object, name) => { + if (!object) { + return -- + } + const objKeys = Object.keys(object) + const objValues = Object.values(object) - if (objKeys.length > 2) { - return expanded - ?
-

- {`${objKeys.length} ${name}`} -

-
- {objKeys.map((objKey, i) => -
- {objKey}: {objValues[i]} -
- )} -
-
- :
-

- {`${objKeys.length} ${name}`} -

-
Click to expand...
-
- } - - return ( -
-

- {`${objKeys.length} ${name}`} -

+ return ( +
+

+ {`${objKeys.length} ${name}`} +

+
{objKeys.map((objKey, i) =>
{objKey}: {objValues[i]}
)}
- ) - } - - handleToggleExpand = () => { - const {onToggleExpandLog, logIndex} = this.props - - if (this.isExpandable()) { - onToggleExpandLog(logIndex) - } - } - - isExpandable = () => { - const {logItem} = this.props - - if ( - Object.keys(logItem.tag).length > 2 || - Object.keys(logItem.field).length > 2 - ) { - return true - } - return false - } - - render() { - const {logItem} = this.props - - const rowClass = `logs-table--row${this.isExpandable() - ? ' logs-table--row__expandable' - : ''}${logItem.expanded ? ' expanded' : ''}` - - return ( -
-
-
-
- {logItem.ts} -
-
-
-
Kapacitor Point
-
- {this.renderKeysAndValues(logItem.tag, 'Tags', logItem.expanded)} - {this.renderKeysAndValues( - logItem.field, - 'Fields', - logItem.expanded - )} -
-
-
- ) - } +
+ ) } +const LogItemKapacitorPoint = ({logItem}) => +
+
+
+
+ {logItem.ts} +
+
+
+
Kapacitor Point
+
+ {renderKeysAndValues(logItem.tag, 'Tags')} + {renderKeysAndValues(logItem.field, 'Fields')} +
+
+
-const {func, number, shape, string} = PropTypes +const {shape, string} = PropTypes LogItemKapacitorPoint.propTypes = { logItem: shape({ @@ -104,8 +48,6 @@ LogItemKapacitorPoint.propTypes = { tag: shape.isRequired, field: shape.isRequired, }), - onToggleExpandLog: func.isRequired, - logIndex: number.isRequired, } export default LogItemKapacitorPoint diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js index c3f86f00c..b49c0014a 100644 --- a/ui/src/kapacitor/components/LogsTable.js +++ b/ui/src/kapacitor/components/LogsTable.js @@ -5,29 +5,24 @@ import FancyScrollbar from 'src/shared/components/FancyScrollbar' const numLogsToRender = 200 -const LogsTable = ({logs, onToggleExpandLog}) => -
+const LogsTable = ({logs}) => +
-

{`${numLogsToRender} Most Recent Logs`}

+ {`${numLogsToRender} Most Recent Logs`}
{logs .slice(0, numLogsToRender) .map((log, i) => - + )}
-const {arrayOf, func, shape, string} = PropTypes +const {arrayOf, shape, string} = PropTypes LogsTable.propTypes = { logs: arrayOf( @@ -38,7 +33,6 @@ LogsTable.propTypes = { msg: string.isRequired, }) ).isRequired, - onToggleExpandLog: func.isRequired, } export default LogsTable diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js index c635e63d7..53e46230b 100644 --- a/ui/src/kapacitor/components/LogsTableRow.js +++ b/ui/src/kapacitor/components/LogsTableRow.js @@ -8,7 +8,7 @@ import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorErro import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug' import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug' -const LogsTableRow = ({logItem, index, onToggleExpandLog}) => { +const LogsTableRow = ({logItem, index}) => { if (logItem.service === 'sessions') { return } @@ -16,13 +16,7 @@ const LogsTableRow = ({logItem, index, onToggleExpandLog}) => { return } if (logItem.service === 'kapacitor' && logItem.msg === 'point') { - return ( - - ) + return } if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') { return @@ -59,7 +53,7 @@ const LogsTableRow = ({logItem, index, onToggleExpandLog}) => { ) } -const {func, number, shape, string} = PropTypes +const {number, shape, string} = PropTypes LogsTableRow.propTypes = { logItem: shape({ @@ -69,7 +63,6 @@ LogsTableRow.propTypes = { msg: string.isRequired, }).isRequired, index: number.isRequired, - onToggleExpandLog: func.isRequired, } export default LogsTableRow diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js index 8e9fe899b..8cec26829 100644 --- a/ui/src/kapacitor/components/Tickscript.js +++ b/ui/src/kapacitor/components/Tickscript.js @@ -20,7 +20,6 @@ const Tickscript = ({ isNewTickscript, areLogsVisible, areLogsEnabled, - onToggleExpandLog, onToggleLogsVisibility, }) =>
@@ -52,9 +51,7 @@ const Tickscript = ({ unsavedChanges={unsavedChanges} />
- {areLogsVisible - ? - : null} + {areLogsVisible ? : null}
@@ -82,7 +79,6 @@ Tickscript.propTypes = { onChangeID: func.isRequired, isNewTickscript: bool.isRequired, unsavedChanges: bool, - onToggleExpandLog: func.isRequired, } export default Tickscript diff --git a/ui/src/kapacitor/containers/TickscriptPage.js b/ui/src/kapacitor/containers/TickscriptPage.js index 19639a69c..0f456cdfc 100644 --- a/ui/src/kapacitor/containers/TickscriptPage.js +++ b/ui/src/kapacitor/containers/TickscriptPage.js @@ -2,7 +2,6 @@ import React, {PropTypes, Component} from 'react' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import uuid from 'node-uuid' -import _ from 'lodash' import Tickscript from 'src/kapacitor/components/Tickscript' import * as kapactiorActionCreators from 'src/kapacitor/actions/view' @@ -157,13 +156,6 @@ class TickscriptPage extends Component { }) } - handleToggleExpandLog = logIndex => { - const {logs} = this.state - logs[logIndex].expanded = !_.get(logs[logIndex], 'expanded', false) - - this.setState({logs}) - } - handleSave = async () => { const {kapacitor, task} = this.state const { @@ -251,7 +243,6 @@ class TickscriptPage extends Component { areLogsVisible={areLogsVisible} areLogsEnabled={areLogsEnabled} onToggleLogsVisibility={this.handleToggleLogsVisibility} - onToggleExpandLog={this.handleToggleExpandLog} /> ) } diff --git a/ui/src/style/components/kapacitor-logs-table.scss b/ui/src/style/components/kapacitor-logs-table.scss index a70273c42..0c85bfd25 100644 --- a/ui/src/style/components/kapacitor-logs-table.scss +++ b/ui/src/style/components/kapacitor-logs-table.scss @@ -9,11 +9,10 @@ $logs-row-indent: 6px; $logs-level-dot: 8px; $logs-margin: 4px; -.logs-table--container { +.logs-table { width: 50%; position: relative; height: 100%; - @include gradient-v(mix($g3-castle, $g2-kevlar),mix($g1-raven, $g0-obsidian)); } .logs-table--header { display: flex; @@ -23,27 +22,28 @@ $logs-margin: 4px; height: $logs-table-header-height; padding: 0 $logs-table-padding 0 ($logs-table-padding / 2); background-color: $g4-onyx; + white-space: nowrap; + font-size: 17px; + @include no-user-select(); + letter-spacing: 0.015em; + font-weight: 500; } -.logs-table--panel { +.logs-table--container { position: absolute !important; top: $logs-table-header-height; left: 0; width: 100%; height: calc(100% - #{$logs-table-header-height}) !important; + @include gradient-v(mix($g3-castle, $g2-kevlar),mix($g1-raven, $g0-obsidian)); } -.logs-table { - height: 100%; -} .logs-table--row { position: relative; - overflow: hidden; - height: 87px; // Fixed height, required for Infinite Scroll, allows for 2 tags / fields per line padding: 8px ($logs-table-padding - 16px) 8px ($logs-table-padding / 2); border-bottom: 2px solid $g3-castle; transition: background-color 0.25s ease; - &:first-child { + &:last-of-type { border-bottom: none; } } @@ -61,13 +61,13 @@ $logs-margin: 4px; &.debug {background-color: $c-comet;} &.info {background-color: $g6-smoke;} &.warn {background-color: $c-pineapple;} - &.ok {background-color: $c-rainforest;} + &.ok {background-color: $c-pool;} &.error {background-color: $c-dreamsicle;} } .logs-table--timestamp { font-family: $code-font; font-weight: 500; - font-size: 11px; + font-size: 13px; color: $g9-mountain; flex: 1 0 0; } @@ -75,9 +75,10 @@ $logs-margin: 4px; display: flex; align-items: flex-start; font-size: 13px; - color: $g13-mist; + color: $g11-sidewalk; font-weight: 600; padding-left: ($logs-level-dot + $logs-row-indent); + margin-top: 1px; .error {color: $c-dreamsicle;} .debug {color: $c-comet;} @@ -106,38 +107,17 @@ $logs-margin: 4px; letter-spacing: normal; line-height: 1.42857143em; text-transform: uppercase; + color: $g16-pearl; } .logs-table--key-value { + white-space: nowrap; } .logs-table--key-value span { - color: $c-pool; -} - -.logs-table--many-keys { - color: $g9-mountain; - width: 100%; - display: inline-block; - font-style: italic; -} - -// Styles for Expandable Log Items -.logs-table--row.logs-table--row__expandable { - &:hover { - background-color: fade-out($g0-obsidian, 0.7); - cursor: zoom-in; - } - &.expanded { - background-color: $g0-obsidian; - height: 240px; - &:hover { - background-color: $g0-obsidian; - cursor: zoom-out; - } - } + color: $c-rainforest; } .logs-table--keys-scrollbox { width: 100%; - height: 190px; - overflow-y: scroll; - @include custom-scrollbar($g0-obsidian,$g7-graphite); + max-height: 300px; + overflow-y: auto; + @include custom-scrollbar-round($g0-obsidian,$c-rainforest); } diff --git a/ui/src/style/modules/mixins.scss b/ui/src/style/modules/mixins.scss index e2b623dea..ad8bb3775 100644 --- a/ui/src/style/modules/mixins.scss +++ b/ui/src/style/modules/mixins.scss @@ -71,16 +71,18 @@ $scrollbar-offset: 3px; width: $scrollbar-width; border-top-right-radius: $radius; border-top-left-radius: $radius; - border-bottom-right-radius: $radius; border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; &-button { background-color: $trackColor; } &-track { background-color: $trackColor; - border-top-right-radius: $radius; - border-bottom-right-radius: $radius; + border-top-right-radius: ($scrollbar-width / 2); + border-top-left-radius: ($scrollbar-width / 2); + border-bottom-left-radius: ($scrollbar-width / 2); + border-bottom-right-radius: ($scrollbar-width / 2); } &-track-piece { background-color: $trackColor; From 6afa86c61a3bbaa5de4b649cd51ac62011ab9be8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 14:36:15 -0800 Subject: [PATCH 05/11] Improve log message text wrapping Also renamed some css classes to be more generic and understandable --- .../kapacitor/components/LogItemHTTPError.js | 2 +- .../components/LogItemInfluxDBDebug.js | 2 +- .../components/LogItemKapacitorDebug.js | 2 +- .../components/LogItemKapacitorError.js | 2 +- .../components/LogItemKapacitorPoint.js | 6 +++--- ui/src/kapacitor/components/LogsTableRow.js | 2 +- .../components/kapacitor-logs-table.scss | 21 ++++++++++++------- 7 files changed, 21 insertions(+), 16 deletions(-) diff --git a/ui/src/kapacitor/components/LogItemHTTPError.js b/ui/src/kapacitor/components/LogItemHTTPError.js index fa0e79694..c2f1d7407 100644 --- a/ui/src/kapacitor/components/LogItemHTTPError.js +++ b/ui/src/kapacitor/components/LogItemHTTPError.js @@ -10,7 +10,7 @@ const LogItemHTTPError = ({logItem}) =>
HTTP Server
-
+
ERROR: {logItem.msg}
diff --git a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js index b6be11705..bbbd292df 100644 --- a/ui/src/kapacitor/components/LogItemInfluxDBDebug.js +++ b/ui/src/kapacitor/components/LogItemInfluxDBDebug.js @@ -10,7 +10,7 @@ const LogItemInfluxDBDebug = ({logItem}) =>
InfluxDB
-
+
DEBUG: {logItem.msg}
diff --git a/ui/src/kapacitor/components/LogItemKapacitorDebug.js b/ui/src/kapacitor/components/LogItemKapacitorDebug.js index 9b99d5129..3f694dd4e 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorDebug.js +++ b/ui/src/kapacitor/components/LogItemKapacitorDebug.js @@ -10,7 +10,7 @@ const LogItemKapacitorDebug = ({logItem}) =>
Kapacitor
-
+
DEBUG: {logItem.msg}
diff --git a/ui/src/kapacitor/components/LogItemKapacitorError.js b/ui/src/kapacitor/components/LogItemKapacitorError.js index 1d4ca573d..83fa42b81 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorError.js +++ b/ui/src/kapacitor/components/LogItemKapacitorError.js @@ -10,7 +10,7 @@ const LogItemKapacitorError = ({logItem}) =>
Kapacitor
-
+
ERROR: {logItem.msg}
diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index a56df87a4..8e5d12b7d 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -8,11 +8,11 @@ const renderKeysAndValues = (object, name) => { const objValues = Object.values(object) return ( -
+

{`${objKeys.length} ${name}`}

-
+
{objKeys.map((objKey, i) =>
{objKey}: {objValues[i]} @@ -32,7 +32,7 @@ const LogItemKapacitorPoint = ({logItem}) =>
Kapacitor Point
-
+
{renderKeysAndValues(logItem.tag, 'Tags')} {renderKeysAndValues(logItem.field, 'Fields')}
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js index 53e46230b..44584b457 100644 --- a/ui/src/kapacitor/components/LogsTableRow.js +++ b/ui/src/kapacitor/components/LogsTableRow.js @@ -43,7 +43,7 @@ const LogsTableRow = ({logItem, index}) => {
{logItem.service || '--'}
-
+
{logItem.msg || '--'}
diff --git a/ui/src/style/components/kapacitor-logs-table.scss b/ui/src/style/components/kapacitor-logs-table.scss index 0c85bfd25..60ef3f295 100644 --- a/ui/src/style/components/kapacitor-logs-table.scss +++ b/ui/src/style/components/kapacitor-logs-table.scss @@ -74,17 +74,21 @@ $logs-margin: 4px; .logs-table--details { display: flex; align-items: flex-start; + flex-wrap: wrap; font-size: 13px; color: $g11-sidewalk; font-weight: 600; padding-left: ($logs-level-dot + $logs-row-indent); - margin-top: 1px; .error {color: $c-dreamsicle;} .debug {color: $c-comet;} } /* Logs Table Item Types */ +.logs-table--service, +.logs-table--column h1 { + margin-top: 2px; +} .logs-table--session { text-transform: capitalize; font-style: italic; @@ -92,15 +96,16 @@ $logs-margin: 4px; .logs-table--service { width: 140px; } -.logs-table--blah { +.logs-table--columns { display: flex; flex: 1 0 0; + flex-wrap: wrap; } -.logs-table--key-values { +.logs-table--column { color: $g11-sidewalk; flex: 1 0 50%; } -.logs-table--key-values h1 { +.logs-table--column h1 { font-size: 13px; font-weight: 700; margin: 0; @@ -111,11 +116,11 @@ $logs-margin: 4px; } .logs-table--key-value { white-space: nowrap; + span { + color: $c-rainforest; + } } -.logs-table--key-value span { - color: $c-rainforest; -} -.logs-table--keys-scrollbox { +.logs-table--scrollbox { width: 100%; max-height: 300px; overflow-y: auto; From e0f54aaccacf271fc7e0d0ce284de303c6d377f0 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 14:49:21 -0800 Subject: [PATCH 06/11] Render key/value pairs in log messages alphabetically by key --- ui/src/kapacitor/components/LogItemKapacitorPoint.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index 8e5d12b7d..00ee10c21 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -4,7 +4,8 @@ const renderKeysAndValues = (object, name) => { if (!object) { return -- } - const objKeys = Object.keys(object) + + const objKeys = Object.keys(object).sort() const objValues = Object.values(object) return ( From 53e57eb2796557884456ceba54fcc83498ae3cef Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 15:12:50 -0800 Subject: [PATCH 07/11] Enforce horizontal scrolling on code mirror and improve styles --- ui/src/kapacitor/components/Tickscript.js | 5 ++++- ui/src/style/components/code-mirror-theme.scss | 9 ++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/src/kapacitor/components/Tickscript.js b/ui/src/kapacitor/components/Tickscript.js index 8cec26829..65320d056 100644 --- a/ui/src/kapacitor/components/Tickscript.js +++ b/ui/src/kapacitor/components/Tickscript.js @@ -34,7 +34,10 @@ const Tickscript = ({ isNewTickscript={isNewTickscript} />
-
+
Date: Mon, 5 Feb 2018 15:23:13 -0800 Subject: [PATCH 08/11] Updoot log of change --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e8147906..ffc2deace 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ### Bug Fixes 1. [#2684](https://github.com/influxdata/chronograf/pull/2684): Fix TICKscript Sensu alerts when no group by tags selected 1. [#2735](https://github.com/influxdata/chronograf/pull/2735): Remove cli options from systemd service file +1. [#2756](https://github.com/influxdata/chronograf/pull/2756): Display only 200 most recent TICKscript log messages and prevent overlapping ## v1.4.0.1 [2017-1-9] ### Features From d79dfc8d71fbbe5861f0277d9a19bc84ed71e4a1 Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 8 Feb 2018 16:21:22 -0800 Subject: [PATCH 09/11] Use more reliable means of rendering key/value pairs --- ui/src/kapacitor/components/LogItemKapacitorPoint.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/ui/src/kapacitor/components/LogItemKapacitorPoint.js b/ui/src/kapacitor/components/LogItemKapacitorPoint.js index 00ee10c21..898f656bb 100644 --- a/ui/src/kapacitor/components/LogItemKapacitorPoint.js +++ b/ui/src/kapacitor/components/LogItemKapacitorPoint.js @@ -5,18 +5,17 @@ const renderKeysAndValues = (object, name) => { return -- } - const objKeys = Object.keys(object).sort() - const objValues = Object.values(object) + const sortedObjKeys = Object.keys(object).sort() return (

- {`${objKeys.length} ${name}`} + {`${sortedObjKeys.length} ${name}`}

- {objKeys.map((objKey, i) => -
- {objKey}: {objValues[i]} + {sortedObjKeys.map(objKey => +
+ {objKey}: {object[objKey]}
)}
From 4cc12a707272fdf3acd73c058f52ad41c72984ba Mon Sep 17 00:00:00 2001 From: Alex P Date: Thu, 8 Feb 2018 16:53:36 -0800 Subject: [PATCH 10/11] Remove unused indices --- ui/src/kapacitor/components/LogsTable.js | 4 +--- ui/src/kapacitor/components/LogsTableRow.js | 19 +++++++++---------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/ui/src/kapacitor/components/LogsTable.js b/ui/src/kapacitor/components/LogsTable.js index b49c0014a..41fee0de5 100644 --- a/ui/src/kapacitor/components/LogsTable.js +++ b/ui/src/kapacitor/components/LogsTable.js @@ -16,9 +16,7 @@ const LogsTable = ({logs}) => > {logs .slice(0, numLogsToRender) - .map((log, i) => - - )} + .map(log => )}
diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js index 44584b457..a8942af2b 100644 --- a/ui/src/kapacitor/components/LogsTableRow.js +++ b/ui/src/kapacitor/components/LogsTableRow.js @@ -8,31 +8,31 @@ import LogItemKapacitorError from 'src/kapacitor/components/LogItemKapacitorErro import LogItemKapacitorDebug from 'src/kapacitor/components/LogItemKapacitorDebug' import LogItemInfluxDBDebug from 'src/kapacitor/components/LogItemInfluxDBDebug' -const LogsTableRow = ({logItem, index}) => { +const LogsTableRow = ({logItem}) => { if (logItem.service === 'sessions') { - return + return } if (logItem.service === 'http' && logItem.msg === 'http request') { - return + return } if (logItem.service === 'kapacitor' && logItem.msg === 'point') { - return + return } if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') { - return + return } if (logItem.service === 'kapacitor' && logItem.lvl === 'error') { - return + return } if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') { - return + return } if (logItem.service === 'influxdb' && logItem.lvl === 'debug') { - return + return } return ( -
+
@@ -62,7 +62,6 @@ LogsTableRow.propTypes = { lvl: string.isRequired, msg: string.isRequired, }).isRequired, - index: number.isRequired, } export default LogsTableRow From e3e30fb15743fdba8637aee32196e9ef74991c88 Mon Sep 17 00:00:00 2001 From: deniz kusefoglu Date: Fri, 9 Feb 2018 09:39:30 -0800 Subject: [PATCH 11/11] Fix linter error --- ui/src/kapacitor/components/LogsTableRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/kapacitor/components/LogsTableRow.js b/ui/src/kapacitor/components/LogsTableRow.js index a8942af2b..83c12bcec 100644 --- a/ui/src/kapacitor/components/LogsTableRow.js +++ b/ui/src/kapacitor/components/LogsTableRow.js @@ -53,7 +53,7 @@ const LogsTableRow = ({logItem}) => { ) } -const {number, shape, string} = PropTypes +const {shape, string} = PropTypes LogsTableRow.propTypes = { logItem: shape({