Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #2756 from influxdata/expandable-kapacitor-logs 

Improve TICKscript Editing
pull/10616/head
Alex Paxton 2018-02-09 15:06:47 -08:00 committed by GitHub
parent ec0229cdf3 8c1739c430
commit 60c7332a9f
12 changed files with 103 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -19,6 +19,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
1. [#2757](https://github.com/influxdata/chronograf/pull/2757): Added "TO" field to kapacitor SMTP config, and improved error messages for config saving and testing
1. [#2761](https://github.com/influxdata/chronograf/pull/2761): Remove cli options from sysvinit service file
1. [#2780](https://github.com/influxdata/chronograf/pull/2780): Fix routing on alert save

2
ui/src/kapacitor/components/LogItemHTTPError.js
View File

@ -10,7 +10,7 @@ const LogItemHTTPError = ({logItem}) =>
</div>
<div className="logs-table--details">
<div className="logs-table--service error">HTTP Server</div>
<div className="logs-table--blah">
<div className="logs-table--columns">
<div className="logs-table--key-values error">
ERROR: {logItem.msg}
</div>

2
ui/src/kapacitor/components/LogItemInfluxDBDebug.js
View File

@ -10,7 +10,7 @@ const LogItemInfluxDBDebug = ({logItem}) =>
</div>
<div className="logs-table--details">
<div className="logs-table--service debug">InfluxDB</div>
<div className="logs-table--blah">
<div className="logs-table--columns">
<div className="logs-table--key-values debug">
DEBUG: {logItem.msg}
<br />

2
ui/src/kapacitor/components/LogItemKapacitorDebug.js
View File

@ -10,7 +10,7 @@ const LogItemKapacitorDebug = ({logItem}) =>
</div>
<div className="logs-table--details">
<div className="logs-table--service debug">Kapacitor</div>
<div className="logs-table--blah">
<div className="logs-table--columns">
<div className="logs-table--key-values debug">
DEBUG: {logItem.msg}
</div>

2
ui/src/kapacitor/components/LogItemKapacitorError.js
View File

@ -10,7 +10,7 @@ const LogItemKapacitorError = ({logItem}) =>
</div>
<div className="logs-table--details">
<div className="logs-table--service error">Kapacitor</div>
<div className="logs-table--blah">
<div className="logs-table--columns">
<div className="logs-table--key-values error">
ERROR: {logItem.msg}
</div>

34
ui/src/kapacitor/components/LogItemKapacitorPoint.js
View File

@ -1,18 +1,26 @@
import React, {PropTypes} from 'react'
const renderKeysAndValues = object => {
const renderKeysAndValues = (object, name) => {
if (!object) {
return <span className="logs-table--empty-cell">--</span>
}
const objKeys = Object.keys(object)
const objValues = Object.values(object)
const objElements = objKeys.map((objKey, i) =>
<div key={i} className="logs-table--key-value">
{objKey}: <span>{objValues[i]}</span>
const sortedObjKeys = Object.keys(object).sort()
return (
<div className="logs-table--column">
<h1>
{`${sortedObjKeys.length} ${name}`}
</h1>
<div className="logs-table--scrollbox">
{sortedObjKeys.map(objKey =>
<div key={objKey} className="logs-table--key-value">
{objKey}: <span>{object[objKey]}</span>
</div>
)}
</div>
</div>
)
return objElements
}
const LogItemKapacitorPoint = ({logItem}) =>
<div className="logs-table--row">
@ -24,15 +32,9 @@ const LogItemKapacitorPoint = ({logItem}) =>
</div>
<div className="logs-table--details">
<div className="logs-table--service">Kapacitor Point</div>
<div className="logs-table--blah">
<div className="logs-table--key-values">
TAGS<br />
{renderKeysAndValues(logItem.tag)}
</div>
<div className="logs-table--key-values">
FIELDS<br />
{renderKeysAndValues(logItem.field)}
</div>
<div className="logs-table--columns">
{renderKeysAndValues(logItem.tag, 'Tags')}
{renderKeysAndValues(logItem.field, 'Fields')}
</div>
</div>
</div>

27
ui/src/kapacitor/components/LogsTable.js
View File

@ -1,24 +1,23 @@
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}) =>
<div className="logs-table--container">
<div className="logs-table">
<div className="logs-table--header">
<h2 className="panel-title">Logs</h2>
</div>
<div className="logs-table--panel fancy-scroll--kapacitor">
{logs.length
? <InfiniteScroll
className="logs-table"
itemHeight={87}
items={logs.map((log, i) =>
<LogsTableRow key={log.key} logItem={log} index={i} />
)}
/>
: <div className="page-spinner" />}
{`${numLogsToRender} Most Recent Logs`}
</div>
<FancyScrollbar
autoHide={false}
className="logs-table--container fancy-scroll--kapacitor"
>
{logs
.slice(0, numLogsToRender)
.map(log => <LogsTableRow key={log.key} logItem={log} />)}
</FancyScrollbar>
</div>
const {arrayOf, shape, string} = PropTypes

23
ui/src/kapacitor/components/LogsTableRow.js
View File

@ -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 <LogItemSession logItem={logItem} key={index} />
return <LogItemSession logItem={logItem} />
}
if (logItem.service === 'http' && logItem.msg === 'http request') {
return <LogItemHTTP logItem={logItem} key={index} />
return <LogItemHTTP logItem={logItem} />
}
if (logItem.service === 'kapacitor' && logItem.msg === 'point') {
return <LogItemKapacitorPoint logItem={logItem} key={index} />
return <LogItemKapacitorPoint logItem={logItem} />
}
if (logItem.service === 'httpd_server_errors' && logItem.lvl === 'error') {
return <LogItemHTTPError logItem={logItem} key={index} />
return <LogItemHTTPError logItem={logItem} />
}
if (logItem.service === 'kapacitor' && logItem.lvl === 'error') {
return <LogItemKapacitorError logItem={logItem} key={index} />
return <LogItemKapacitorError logItem={logItem} />
}
if (logItem.service === 'kapacitor' && logItem.lvl === 'debug') {
return <LogItemKapacitorDebug logItem={logItem} key={index} />
return <LogItemKapacitorDebug logItem={logItem} />
}
if (logItem.service === 'influxdb' && logItem.lvl === 'debug') {
return <LogItemInfluxDBDebug logItem={logItem} key={index} />
return <LogItemInfluxDBDebug logItem={logItem} />
}
return (
<div className="logs-table--row" key={index}>
<div className="logs-table--row">
<div className="logs-table--divider">
<div className={`logs-table--level ${logItem.lvl}`} />
<div className="logs-table--timestamp">
@ -43,7 +43,7 @@ const LogsTableRow = ({logItem, index}) => {
<div className="logs-table--service">
{logItem.service || '--'}
</div>
<div className="logs-table--blah">
<div className="logs-table--columns">
<div className="logs-table--key-values">
{logItem.msg || '--'}
</div>
@ -53,7 +53,7 @@ const LogsTableRow = ({logItem, index}) => {
)
}
const {number, shape, string} = PropTypes
const {shape, string} = PropTypes
LogsTableRow.propTypes = {
logItem: shape({
@ -62,7 +62,6 @@ LogsTableRow.propTypes = {
lvl: string.isRequired,
msg: string.isRequired,
}).isRequired,
index: number,
}
export default LogsTableRow

5
ui/src/kapacitor/components/Tickscript.js
View File

@ -34,7 +34,10 @@ const Tickscript = ({
isNewTickscript={isNewTickscript}
/>
<div className="page-contents--split">
<div className="tickscript">
<div
className="tickscript"
style={areLogsVisible ? {maxWidth: '50%'} : null}
>
<TickscriptEditorControls
isNewTickscript={isNewTickscript}
onSelectDbrps={onSelectDbrps}

9
ui/src/style/components/code-mirror-theme.scss
View File

@ -23,10 +23,17 @@
.CodeMirror-vscrollbar {
@include custom-scrollbar-round($g2-kevlar,$g6-smoke);
}
.CodeMirror-hscrollbar {
@include custom-scrollbar-round($g0-obsidian,$g6-smoke);
}
.cm-s-material .CodeMirror-gutters {
background-color: fade-out($g4-onyx, 0.7);
@include gradient-v($g2-kevlar, $g0-obsidian)
border: none;
}
.cm-s-material .CodeMirror-gutters .CodeMirror-gutter {
background-color: fade-out($g4-onyx, 0.75);
height: calc(100% + 30px);
}
.CodeMirror-gutter.CodeMirror-linenumbers {
width: 60px;
}

57
ui/src/style/components/kapacitor-logs-table.scss
View File

@ -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($g3-castle,$g1-raven);
}
.logs-table--header {
display: flex;
@ -23,28 +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 {
height: 87px; // Fixed height, required for Infinite Scroll, allows for 2 tags / fields per line
position: relative;
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 {
&:last-of-type {
border-bottom: none;
}
}
@ -62,21 +61,22 @@ $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;
}
.logs-table--details {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
font-size: 13px;
color: $g13-mist;
color: $g11-sidewalk;
font-weight: 600;
padding-left: ($logs-level-dot + $logs-row-indent);
@ -85,6 +85,10 @@ $logs-margin: 4px;
}
/* Logs Table Item Types */
.logs-table--service,
.logs-table--column h1 {
margin-top: 2px;
}
.logs-table--session {
text-transform: capitalize;
font-style: italic;
@ -92,16 +96,33 @@ $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--column h1 {
font-size: 13px;
font-weight: 700;
margin: 0;
letter-spacing: normal;
line-height: 1.42857143em;
text-transform: uppercase;
color: $g16-pearl;
}
.logs-table--key-value {
white-space: nowrap;
span {
color: $c-rainforest;
}
}
.logs-table--key-value span {
color: $c-pool;
.logs-table--scrollbox {
width: 100%;
max-height: 300px;
overflow-y: auto;
@include custom-scrollbar-round($g0-obsidian,$c-rainforest);
}

8
ui/src/style/modules/mixins.scss
View File

@ -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;