diff options
Diffstat (limited to 'server/sonar-web')
4 files changed, 112 insertions, 6 deletions
diff --git a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js index 336268b9c35..e0e35b7b243 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js +++ b/server/sonar-web/src/main/js/apps/overview/components/domain-timeline.js @@ -32,6 +32,10 @@ export const DomainTimeline = React.createClass({ }; }, + componentWillMount () { + this.handleScan = _.debounce(this.handleScan, 10, true); + }, + componentDidMount () { Promise.all([ this.requestTimeMachineData(this.state.currentMetric, this.state.comparisonMetric), @@ -88,6 +92,10 @@ export const DomainTimeline = React.createClass({ return groupByDomain(this.props.metrics); }, + handleScan(scanner) { + this.setState({ scanner }); + }, + renderLoading () { return <div className="overview-chart-placeholder" style={{ height: HEIGHT }}> <i className="spinner"/> @@ -140,6 +148,8 @@ export const DomainTimeline = React.createClass({ formatValue={formatValue} formatYTick={formatYTick} leakPeriodDate={this.props.leakPeriodDate} + scanner={this.state.scanner} + onScan={this.handleScan} padding={[25, 25, 25, 60]}/> </div>; }, diff --git a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js index 3453d64918a..c9783bdfc34 100644 --- a/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js +++ b/server/sonar-web/src/main/js/apps/overview/components/timeline-chart.js @@ -1,3 +1,4 @@ +import $ from 'jquery'; import _ from 'underscore'; import d3 from 'd3'; import moment from 'moment'; @@ -25,7 +26,7 @@ export const Timeline = React.createClass({ }, getInitialState() { - return { width: this.props.width, height: this.props.height }; + return { width: this.props.width, height: this.props.height, scanner: 0 }; }, getRatingScale(availableHeight) { @@ -53,6 +54,16 @@ export const Timeline = React.createClass({ } }, + handleMouseMove(xScale, e) { + const x = e.pageX - this.refs.container.getBoundingClientRect().left; + const scanner = this.props.data + .reduce((previousValue, currentValue) => { + return Math.abs(xScale(currentValue.x) - x) < Math.abs(xScale(previousValue.x) - x) ? + currentValue : previousValue; + }, _.first(this.props.data)); + this.props.onScan(scanner.x); + }, + renderHorizontalGrid (xScale, yScale) { let hasTicks = typeof yScale.ticks === 'function'; let ticks = hasTicks ? yScale.ticks(4) : yScale.domain(); @@ -89,6 +100,36 @@ export const Timeline = React.createClass({ return <g>{ticks}</g>; }, + renderBackdrop (xScale, yScale) { + let opts = { + x: _.first(xScale.range()), + y: _.last(yScale.range()), + width: _.last(xScale.range()) - _.first(xScale.range()), + height: _.first(yScale.range()) - _.last(yScale.range()), + style: { + opacity: 0 + } + }; + return <rect {...opts} ref="container" onMouseMove={this.handleMouseMove.bind(this, xScale)}/>; + }, + + renderScanner (xScale, yScale) { + if (this.props.scanner == null) { + return null; + } + let snapshotIndex = this.props.data.findIndex(snapshot => { + return snapshot.x.getTime() === this.props.scanner.getTime(); + }); + $(this.refs[`snapshot${snapshotIndex}`]).tooltip('show'); + return <line + style={{ opacity: 0 }} + className="line-chart-grid" + x1={xScale(this.props.scanner)} + y1={_.first(yScale.range())} + x2={xScale(this.props.scanner)} + y2={_.last(yScale.range())}/>; + }, + renderLeak (xScale, yScale) { if (!this.props.leakPeriodDate) { return null; @@ -111,6 +152,27 @@ export const Timeline = React.createClass({ return <path className="line-chart-path" d={path(this.props.data)}/>; }, + renderTooltips(xScale, yScale) { + let points = this.props.data + .map(snapshot => { + let event = this.props.events.find(e => snapshot.x.getTime() === e.date.getTime()); + return _.extend(snapshot, { event }); + }) + .map((snapshot, index) => { + let tooltipLines = []; + if (snapshot.event) { + tooltipLines.push(`<span class="nowrap">${snapshot.event.version}</span>`); + } + tooltipLines.push(`<span class="nowrap">${moment(snapshot.x).format('LL')}</span>`); + tooltipLines.push(`<span class="nowrap">${snapshot.y ? this.props.formatValue(snapshot.y) : '—'}</span>`); + let tooltip = tooltipLines.join('<br>'); + return <circle key={index} ref={`snapshot${index}`} style={{ opacity: 0 }} + r="4" cx={xScale(snapshot.x)} cy={yScale(snapshot.y)} + data-toggle="tooltip" title={tooltip}/>; + }); + return <g>{points}</g>; + }, + renderEvents(xScale, yScale) { let points = this.props.events .map(event => { @@ -152,7 +214,10 @@ export const Timeline = React.createClass({ {this.renderHorizontalGrid(xScale, yScale)} {this.renderTicks(xScale, yScale)} {this.renderLine(xScale, yScale)} + {this.renderTooltips(xScale, yScale)} {this.renderEvents(xScale, yScale)} + {this.renderScanner(xScale, yScale)} + {this.renderBackdrop(xScale, yScale)} </g> </svg>; } diff --git a/server/sonar-web/src/main/js/components/mixins/tooltips-mixin.js b/server/sonar-web/src/main/js/components/mixins/tooltips-mixin.js index af0c2be023e..03e9168c2da 100644 --- a/server/sonar-web/src/main/js/components/mixins/tooltips-mixin.js +++ b/server/sonar-web/src/main/js/components/mixins/tooltips-mixin.js @@ -8,13 +8,17 @@ export const TooltipsMixin = { }, componentWillUpdate() { - this.destroyTooltips(); + this.hideTooltips(); }, componentDidUpdate () { this.initTooltips(); }, + componentWillUnmount() { + this.destroyTooltips(); + }, + initTooltips () { if ($.fn.tooltip) { $('[data-toggle="tooltip"]', ReactDOM.findDOMNode(this)) @@ -22,6 +26,13 @@ export const TooltipsMixin = { } }, + hideTooltips () { + if ($.fn.tooltip) { + $('[data-toggle="tooltip"]', ReactDOM.findDOMNode(this)) + .tooltip('hide'); + } + }, + destroyTooltips () { if ($.fn.tooltip) { $('[data-toggle="tooltip"]', ReactDOM.findDOMNode(this)) diff --git a/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js b/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js index 3aae4e12c64..842c3405744 100644 --- a/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js +++ b/server/sonar-web/tests/apps/overview/components/timeline-chart-test.js @@ -31,7 +31,12 @@ describe('TimelineChart', function () { { x: new Date(2015, 0, 4), y: 'WARN' } ]; - let timeline = <Timeline width={100} height={100} data={DATA} metricType="LEVEL" events={[]} + let timeline = <Timeline width={100} + height={100} + data={DATA} + metricType="LEVEL" + events={[]} + formatValue={FORMAT} formatYTick={FORMAT}/>; let output = TestUtils.renderIntoDocument(timeline); let ticks = TestUtils.scryRenderedDOMComponentsWithClass(output, 'line-chart-tick-x'); @@ -49,7 +54,12 @@ describe('TimelineChart', function () { { x: new Date(2015, 0, 4), y: 4 } ]; - let timeline = <Timeline width={100} height={100} data={DATA} metricType="RATING" events={[]} + let timeline = <Timeline width={100} + height={100} + data={DATA} + metricType="RATING" + events={[]} + formatValue={FORMAT} formatYTick={FORMAT}/>; let output = TestUtils.renderIntoDocument(timeline); let ticks = TestUtils.scryRenderedDOMComponentsWithClass(output, 'line-chart-tick-x'); @@ -62,14 +72,24 @@ describe('TimelineChart', function () { }); it('should display the zero Y tick if all values are zero', function () { - let timeline = <Timeline width={100} height={100} data={ZERO_DATA} events={[]} formatYTick={FORMAT}/>; + let timeline = <Timeline width={100} + height={100} + data={ZERO_DATA} + events={[]} + formatValue={FORMAT} + formatYTick={FORMAT}/>; let output = TestUtils.renderIntoDocument(timeline); let tick = TestUtils.findRenderedDOMComponentWithClass(output, 'line-chart-tick-x'); expect(tick.textContent).to.equal('0'); }); it('should display the zero Y tick if all values are undefined', function () { - let timeline = <Timeline width={100} height={100} data={NULL_DATA} events={[]} formatYTick={FORMAT}/>; + let timeline = <Timeline width={100} + height={100} + data={NULL_DATA} + events={[]} + formatValue={FORMAT} + formatYTick={FORMAT}/>; let output = TestUtils.renderIntoDocument(timeline); let tick = TestUtils.findRenderedDOMComponentWithClass(output, 'line-chart-tick-x'); expect(tick.textContent).to.equal('0'); |