Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

problems timeline: highlight related points

Browse Source
This commit is contained in:
Alexander Zobnin
2018-12-18 23:27:31 +03:00
parent 4b2503d701
commit c7b14aaa01
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/panel-triggers/components/ProblemTimeline.tsx
View File

@@ -302,7 +302,11 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
const ts = Number(event.clock); const ts = Number(event.clock);
const posLeft = Math.round((ts - timeFrom) / range * width - pointR); const posLeft = Math.round((ts - timeFrom) / range * width - pointR);
const eventColor = event.value === '1' ? problemColor : okColor; const eventColor = event.value === '1' ? problemColor : okColor;
const highlighted = this.state.highlighted === index; const highlighted = this.state.highlighted === index || (
this.state.highlighted !== null && index === this.state.highlighted + 1 && event.value !== '1'
) || (
this.state.highlighted !== null && index === this.state.highlighted - 1 && event.value === '1'
);
return ( return (
<TimelinePoint <TimelinePoint
@@ -364,10 +368,11 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
} }
render() { render() {
const { x, color, className } = this.props; const { x, color } = this.props;
const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r; const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r;
const cx = x + this.props.r; const cx = x + this.props.r;
const rInner = Math.round(r * INNER_POINT_SIZE); const rInner = Math.round(r * INNER_POINT_SIZE);
const className = `${this.props.className || ''} ${this.state.highlighted ? 'highlighted' : ''}`;
return ( return (
<g className={className} <g className={className}
transform={`translate(${cx}, 0)`} transform={`translate(${cx}, 0)`}

3
src/sass/_panel-problems.scss
View File

@@ -382,7 +382,8 @@
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
} }
&:hover { &:hover,
&.highlighted {
circle.point-border { circle.point-border {
stroke: $zbx-text-highlighted; stroke: $zbx-text-highlighted;
stroke-width: 1; stroke-width: 1;