From 3404d7375be3ffc948a14eb7ef88e8b5ead50e27 Mon Sep 17 00:00:00 2001 From: Brandon Farmer Date: Fri, 1 Jun 2018 15:05:38 -0700 Subject: [PATCH 1/4] Adds autorefresh with play/pause --- ui/src/logs/components/LogViewerHeader.tsx | 30 +++++++- ui/src/logs/components/LogsTable.tsx | 82 +++++++++++++++++----- ui/src/logs/containers/LogsPage.tsx | 74 ++++++++++++++++--- 3 files changed, 160 insertions(+), 26 deletions(-) diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index 4ab7f5ebe9..26f79d08c4 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/ui/src/logs/components/LogViewerHeader.tsx @@ -17,9 +17,11 @@ interface Props { currentSource: Source | null currentNamespaces: Namespace[] timeRange: TimeRange + liveUpdating: boolean onChooseSource: (sourceID: string) => void onChooseNamespace: (namespace: Namespace) => void onChooseTimerange: (timeRange: TimeRange) => void + onChangeLiveUpdatingStatus: () => void } class LogViewerHeader extends PureComponent { @@ -29,7 +31,10 @@ class LogViewerHeader extends PureComponent {
-

Log Viewer

+ {this.status} +

+ Log Viewer +

{ ) } + private get status(): JSX.Element { + const {liveUpdating, onChangeLiveUpdatingStatus} = this.props + if (liveUpdating) { + return ( + + ) + } else { + return ( + + ) + } + } + private handleChooseTimeRange = (timerange: TimeRange) => { this.props.onChooseTimerange(timerange) } diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 555983ba35..50de4d0c1c 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -1,39 +1,64 @@ import _ from 'lodash' import moment from 'moment' -import React, {PureComponent, MouseEvent} from 'react' +import React, {Component, MouseEvent} from 'react' import {Grid, AutoSizer} from 'react-virtualized' import {getDeep} from 'src/utils/wrappers' import FancyScrollbar from 'src/shared/components/FancyScrollbar' -const ROW_HEIGHT = 40 +const ROW_HEIGHT = 30 +const HIGHLIGHT_COLOR = '#555' interface Props { data: { columns: string[] values: string[] } + scrolledToTop: boolean + onScrollVertical: () => void + onScrolledToTop: () => void } interface State { scrollLeft: number scrollTop: number + currentRow: number } -class LogsTable extends PureComponent { +class LogsTable extends Component { + public static getDerivedStateFromProps(props, state) { + const {scrolledToTop} = props + + let scrollTop = _.get(state, 'scrollTop', 0) + if (scrolledToTop) { + scrollTop = 0 + } + + return { + scrollTop, + scrollLeft: 0, + currentRow: -1, + } + } + constructor(props: Props) { super(props) this.state = { - scrollLeft: 0, scrollTop: 0, + scrollLeft: 0, + currentRow: -1, } } + public render() { const rowCount = getDeep(this.props, 'data.values.length', 0) const columnCount = getDeep(this.props, 'data.columns.length', 1) - 1 return ( -
+
{({width}) => ( { cellRenderer={this.cellRenderer} columnCount={columnCount} columnWidth={this.getColumnWidth} - style={{height: 40 * rowCount}} + style={{height: ROW_HEIGHT * rowCount}} /> )} @@ -91,6 +116,12 @@ class LogsTable extends PureComponent { private handleScroll = scrollInfo => { const {scrollLeft, scrollTop} = scrollInfo + if (scrollTop === 0) { + this.props.onScrolledToTop() + } else if (scrollTop !== this.state.scrollTop) { + this.props.onScrollVertical() + } + this.setState({scrollLeft, scrollTop}) } @@ -116,7 +147,7 @@ class LogsTable extends PureComponent { switch (column) { case 'message': - return 900 + return 1200 case 'timestamp': return 200 case 'procid': @@ -168,7 +199,9 @@ class LogsTable extends PureComponent { '' ) - let value = this.props.data.values[rowIndex][columnIndex + 1] + let value: string | JSX.Element = this.props.data.values[rowIndex][ + columnIndex + 1 + ] switch (column) { case 'timestamp': @@ -181,22 +214,39 @@ class LogsTable extends PureComponent { value = _.replace(value, '\\n', '') break case 'severity': - return ( -
-
-
+ value = ( +
) } + let backgroundColor = '' + if (rowIndex === this.state.currentRow && columnIndex > 0) { + backgroundColor = HIGHLIGHT_COLOR + } + return ( -
+
{value}
) } + + private handleMouseOver = (e: MouseEvent) => { + const target = e.target as HTMLElement + this.setState({currentRow: +target.dataset.index}) + } + + private handleMouseOut = () => { + this.setState({currentRow: -1}) + } } export default LogsTable diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index 2770264971..d41ceeaec2 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/ui/src/logs/containers/LogsPage.tsx @@ -51,25 +51,29 @@ interface Props { interface State { searchString: string filters: Filter[] + liveUpdating: boolean } const DUMMY_FILTERS = [ - { - id: '0', - key: 'host', - value: 'prod1-rsavage.local', - operator: '==', - enabled: true, - }, + // { + // id: '0', + // key: 'host', + // value: 'prod1-rsavage.local', + // operator: '==', + // enabled: true, + // }, ] class LogsPage extends PureComponent { + private interval: NodeJS.Timer + constructor(props: Props) { super(props) this.state = { searchString: '', filters: DUMMY_FILTERS, + liveUpdating: false, } } @@ -85,10 +89,16 @@ class LogsPage extends PureComponent { if (this.props.currentNamespace) { this.props.executeQueriesAsync() } + + this.startUpdating() + } + + public componentWillUnmount() { + clearInterval(this.interval) } public render() { - const {filters} = this.state + const {filters, liveUpdating} = this.state const {searchTerm} = this.props const count = getDeep(this.props, 'tableData.values.length', 0) @@ -107,12 +117,43 @@ class LogsPage extends PureComponent { filters={filters} onUpdateFilters={this.handleUpdateFilters} /> - +
) } + private startUpdating = () => { + if (this.interval) { + clearInterval(this.interval) + } + + this.interval = setInterval(this.handleInterval, 10000) + this.setState({liveUpdating: true}) + } + + private handleScrollToTop = () => { + if (!this.state.liveUpdating) { + this.startUpdating() + } + } + + private handleVerticalScroll = () => { + if (this.state.liveUpdating) { + clearInterval(this.interval) + this.setState({liveUpdating: false}) + } + } + + private handleInterval = () => { + this.props.executeQueriesAsync() + } + private get chart(): JSX.Element { const {histogramData, timeRange} = this.props return ( @@ -133,8 +174,11 @@ class LogsPage extends PureComponent { timeRange, } = this.props + const {liveUpdating} = this.state + return ( { currentSource={currentSource} currentNamespaces={currentNamespaces} currentNamespace={currentNamespace} + onChangeLiveUpdatingStatus={this.handleChangeLiveUpdatingStatus} /> ) } + private handleChangeLiveUpdatingStatus = (): void => { + const {liveUpdating} = this.state + + if (liveUpdating) { + clearInterval(this.interval) + this.setState({liveUpdating: false}) + } else { + this.startUpdating() + } + } + private handleSubmitSearch = (value: string): void => { this.props.setSearchTermAsync(value) } From 9b94576a512257f0bc41ce4160f560a5be477a15 Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 1 Jun 2018 16:47:18 -0700 Subject: [PATCH 2/4] Add "Play" icon to icon font --- ui/src/style/fonts/icomoon.eot | Bin 13528 -> 13428 bytes ui/src/style/fonts/icomoon.svg | 2 +- ui/src/style/fonts/icomoon.ttf | Bin 13364 -> 13264 bytes ui/src/style/fonts/icomoon.woff | Bin 13440 -> 13340 bytes ui/src/style/fonts/icomoon.woff2 | Bin 6596 -> 6512 bytes ui/src/style/fonts/icon-font.scss | 2 +- 6 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/style/fonts/icomoon.eot b/ui/src/style/fonts/icomoon.eot index d6b6879bbd10676a7ab4f0554608a5696c4fb075..e3b8460f95f6cb4a6b93a575d69d22bd27e34aa4 100755 GIT binary patch delta 431 zcmcbS`6Yv`#Dsz2g7HK)GZw=D+4jkb#v&6#3hL#wLN_xoFv>76F#JhREG_`j0t^gH z5!zr=oueHVK_IgcrH^HHV`eCCXdQvZXP`I*)*@GvlNGODqO3W|uCGn$#G zGxPs5b@Q&bFnV%^;XEcrsmUxx#*?j$`rIe5|Ko7r$l=uBoWc2kON;9jcLet$?q|Gy zyiL5f_!9U&@$V6sAZQ_&Avi}!L1>=PH{m5Bd?H;Ue?-GXpNTPvnTbV+-4N&7EMRys1EUNOv!o{$7cej|2rw`(DFA7X z^qk5xTi3U2K)wb8gI+~OYGR6DiAFO6gTVrzyjccNfL(z(7RbK=N->y-Opak}R(t_unlUIaurP=*Ffu5pEqp2bQu?LrOZAtUFLhsMHuv}|m&76BRDDU1zrq9S5)a$=%# z|9t;G11SRmCaKK{vK_)Q%g(IZ8qaU@m4TZDmmvDIq_hGr}su fmqcttc8F?;wup&{8HlBbwTZKd+iYHAbb=88(ejDZ diff --git a/ui/src/style/fonts/icomoon.svg b/ui/src/style/fonts/icomoon.svg index 33b8b9d4cc..df4916ae35 100755 --- a/ui/src/style/fonts/icomoon.svg +++ b/ui/src/style/fonts/icomoon.svg @@ -28,6 +28,7 @@ + @@ -40,7 +41,6 @@ - diff --git a/ui/src/style/fonts/icomoon.ttf b/ui/src/style/fonts/icomoon.ttf index 74200cab61425b51c675ab6a8af300e596cca07b..54e7da30eeedf3b172787afd11bee074e057ad2e 100755 GIT binary patch delta 411 zcmdmzaUp$zLcN?;=w=26Mi~YMhCk_v#RWiGfPsNY0!VYD=TxRizt9o`@)Z~u^kgzp z6H^5H_S-Tr7}x;i%`$)j>Yco-Ns8P(WC1x3Wn8O==8nfd>j@yf~ZGM?h$VU%H>!N|zKV3Y&oE952SN~X^AbaYwV_3n0sk zL4kpVL5zWsK|yWdOW~K&FJ)hV+vb4JU_6BsplnZ=pJev17N`zH2I z?9JpOjG>#wnLhDtb`-4Pu4iUA`=5c?7-+I2gBpV&&?-|CHEl*EHCsj#HDx6>Sw;~y zAQwn0G8&1Aim)jwshOIX88Zr+i$kCwv#|hAtDv-vmX?jQU@MORQ`*0?qH=PgApGyF zua7Sf`1msVrf>^N2`9)e>zH6A?2IOA%`m NXA`&C%wcqb5dd3DfwBMq diff --git a/ui/src/style/fonts/icomoon.woff b/ui/src/style/fonts/icomoon.woff index 1086e46ab4c71e62d145d639cc3920d05df25f91..ef8173eb74120844829abd7d78c1c001b08c82e4 100755 GIT binary patch delta 467 zcmZq3oRc9@?(gQtz{mguCNd1%Almo>kk2yNkx68tj$A#%AE3}5Ijzvm>50V!3=B*u zKt2Z)3#8{%rUAur7#Q?qKv?>PmRLq=B2bM%2T+X}2n+V@x6J?w0>ush`6?jHuD~3d zky}y$6ng^Xe*xj=1$;d@`N=?ahBtux8W6TH=65Q}O{@S~Y!m_%Pyk~OM#j9v+*F`g z2?GOT8wk(z{iWth-Ir#Q zS1_7Se#of7%_7b$_Dk%i*mtq_lf{@qH|H{a;4^1rl=>gU%+Iujfro*ClTnRLR8U0B zoYBlgotgii8LyliFXJg59!43)3EX`Af6fTMJD z^Ob>{1?Uh4hU?~CZ(;Og0mFGrj8c==7#dH0Y}n^Mf&Cwc14j<02ImaU2V7cQuec+) z7jZx1_2X^gy~UTn_lbXxzyv`H!3@DULJC6jguV$c5#bZ*68R$+4tGfa delta 565 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 Cz2tlV diff --git a/ui/src/style/fonts/icon-font.scss b/ui/src/style/fonts/icon-font.scss index 2fb4e6288e..7780a293a4 100644 --- a/ui/src/style/fonts/icon-font.scss +++ b/ui/src/style/fonts/icon-font.scss @@ -32,7 +32,6 @@ &.authzero:before {content: "\e951";} &.bar-chart:before {content: "\e913";} - &.brush:before {content: "\e939";} &.caret-down:before {content: "\e902";} &.caret-left:before {content: "\e900";} &.caret-right:before {content: "\e903";} @@ -65,6 +64,7 @@ &.octagon:before {content: "\e92d";} &.okta:before {content: "\e912";} &.pause:before {content: "\e94a";} + &.play:before {content: "\e914";} &.plus:before {content: "\e90a";} &.pulse-c:before {content: "\e936";} &.refresh:before {content: "\e949";} From 10d8ccb0f42111a086ee3f5cfd5b6c5394667e9c Mon Sep 17 00:00:00 2001 From: Alex P Date: Fri, 1 Jun 2018 16:59:51 -0700 Subject: [PATCH 3/4] Replace button with compact tab toggle --- ui/src/logs/components/LogViewerHeader.tsx | 29 +++++++++++----------- ui/src/style/pages/logs-viewer.scss | 9 +++++++ 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index 26f79d08c4..cc4b1a7517 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/ui/src/logs/components/LogViewerHeader.tsx @@ -1,6 +1,7 @@ import _ from 'lodash' import React, {PureComponent} from 'react' import {Source, Namespace} from 'src/types' +import classnames from 'classnames' import Dropdown from 'src/shared/components/Dropdown' import TimeRangeDropdown from 'src/logs/components/TimeRangeDropdown' @@ -62,25 +63,23 @@ class LogViewerHeader extends PureComponent { private get status(): JSX.Element { const {liveUpdating, onChangeLiveUpdatingStatus} = this.props - if (liveUpdating) { - return ( - - ) - } else { - return ( - - ) - } + + + + ) } private handleChooseTimeRange = (timerange: TimeRange) => { diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index db62bbb2dd..e6294f8fa2 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/ui/src/style/pages/logs-viewer.scss @@ -234,4 +234,13 @@ $logs-viewer-gutter: 60px; &.debug-severity { @include gradient-diag-up($g5-pepper, $g6-smoke); } +} + +// Play & Pause Toggle in Header +.nav.nav-tablist.nav-tablist-sm.logs-viewer--mode-toggle { + > li { + padding: 0; + width: 26px; + justify-content: center; + } } \ No newline at end of file From d40c15ff40a74eb84d9e39a461affd2d9a23df28 Mon Sep 17 00:00:00 2001 From: Brandon Farmer Date: Mon, 4 Jun 2018 11:49:58 -0700 Subject: [PATCH 4/4] Add dummy filters back in for display purposes --- ui/src/logs/components/LogViewerHeader.tsx | 2 +- ui/src/logs/components/LogsTable.tsx | 2 +- ui/src/logs/containers/LogsPage.tsx | 16 ++++++++-------- ui/src/style/pages/logs-viewer.scss | 4 ++++ 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/ui/src/logs/components/LogViewerHeader.tsx b/ui/src/logs/components/LogViewerHeader.tsx index cc4b1a7517..c61068cba2 100644 --- a/ui/src/logs/components/LogViewerHeader.tsx +++ b/ui/src/logs/components/LogViewerHeader.tsx @@ -33,7 +33,7 @@ class LogViewerHeader extends PureComponent {
{this.status} -

+

Log Viewer

diff --git a/ui/src/logs/components/LogsTable.tsx b/ui/src/logs/components/LogsTable.tsx index 50de4d0c1c..09a4d09282 100644 --- a/ui/src/logs/components/LogsTable.tsx +++ b/ui/src/logs/components/LogsTable.tsx @@ -13,7 +13,7 @@ interface Props { columns: string[] values: string[] } - scrolledToTop: boolean + isScrolledToTop: boolean onScrollVertical: () => void onScrolledToTop: () => void } diff --git a/ui/src/logs/containers/LogsPage.tsx b/ui/src/logs/containers/LogsPage.tsx index d41ceeaec2..6901c6dd97 100644 --- a/ui/src/logs/containers/LogsPage.tsx +++ b/ui/src/logs/containers/LogsPage.tsx @@ -55,13 +55,13 @@ interface State { } const DUMMY_FILTERS = [ - // { - // id: '0', - // key: 'host', - // value: 'prod1-rsavage.local', - // operator: '==', - // enabled: true, - // }, + { + id: '0', + key: 'host', + value: 'prod1-rsavage.local', + operator: '==', + enabled: true, + }, ] class LogsPage extends PureComponent { @@ -121,7 +121,7 @@ class LogsPage extends PureComponent { data={this.props.tableData} onScrollVertical={this.handleVerticalScroll} onScrolledToTop={this.handleScrollToTop} - scrolledToTop={liveUpdating} + isScrolledToTop={liveUpdating} />
diff --git a/ui/src/style/pages/logs-viewer.scss b/ui/src/style/pages/logs-viewer.scss index e6294f8fa2..6f31f99884 100644 --- a/ui/src/style/pages/logs-viewer.scss +++ b/ui/src/style/pages/logs-viewer.scss @@ -15,6 +15,10 @@ $logs-viewer-gutter: 60px; flex-wrap: nowrap; } +.logs-viewer-header-title { + margin-left: 10px; +} + .logs-viewer--graph-container { padding: 22px ($logs-viewer-gutter - 16px) 10px ($logs-viewer-gutter - 16px); height: $logs-viewer-graph-height;