Permalink
Browse files

highlight entries from the same request when clicking on an entry

  • Loading branch information...
icewind1991 committed Feb 13, 2017
1 parent 5386677 commit 2d1ccd0e4cca32220fcbe0b4d79d1cd23f0e73a5
Showing with 16 additions and 2 deletions.
  1. +12 −2 js/Components/LogTable.js
  2. +4 −0 js/Components/LogTable.less
View
@@ -11,7 +11,8 @@ import style from './LogTable.less';
export class LogTable extends Component { export class LogTable extends Component {
state = { state = {
showLevelSettings: false showLevelSettings: false,
highlightedRequest: null
}; };
toggleLevelSettings = () => { toggleLevelSettings = () => {
@@ -22,6 +23,10 @@ export class LogTable extends Component {
this.props.setRelative(!this.props.relative); this.props.setRelative(!this.props.relative);
}; };
highlightRequest (highlightedRequest) {
this.setState({highlightedRequest});
}
render () { render () {
const timeClass = style.time + ((this.props.relative) ? (' ' + style.relative) : ''); const timeClass = style.time + ((this.props.relative) ? (' ' + style.relative) : '');
@@ -44,8 +49,13 @@ export class LogTable extends Component {
} }
}; };
let rows = this.props.entries.map((entry, i) => { let rows = this.props.entries.map((entry, i) => {
let className = style['level_' + entry.level];
if (entry.reqId === this.state.highlightedRequest) {
className += ' ' + style.highlight;
}
return ( return (
<tr className={style['level_' + entry.level]} key={i}> <tr className={className} key={i}
onClick={this.highlightRequest.bind(this, entry.reqId)}>
<td className={style.level}><LogLevel level={entry.level}/> <td className={style.level}><LogLevel level={entry.level}/>
</td> </td>
<td className={style.app}>{entry.app}</td> <td className={style.app}>{entry.app}</td>
@@ -107,6 +107,10 @@
tr.empty td:hover { tr.empty td:hover {
background-color: white; background-color: white;
} }
tr.highlight {
background-color: #f8f8f8;
}
} }
.smallHeader, .smallHeader,

0 comments on commit 2d1ccd0

Please sign in to comment.