From fb86889286018de6710a2fb5a73b15c699491b31 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 5 Feb 2018 14:15:56 -0800 Subject: [PATCH] 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 137d36c0b4..a56df87a4c 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 c3f86f00c7..b49c0014a1 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 c635e63d76..53e46230b4 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 8e9fe899ba..8cec268298 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 19639a69ce..0f456cdfcc 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 a70273c424..0c85bfd25c 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 e2b623dea1..ad8bb37750 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;