diff options
Diffstat (limited to 'server')
7 files changed, 205 insertions, 84 deletions
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js index 4e79f6b962c..5680eca4306 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityGraphs.js @@ -21,9 +21,11 @@ import React from 'react'; import ProjectActivityGraphsHeader from './ProjectActivityGraphsHeader'; import StaticGraphs from './StaticGraphs'; -import { GRAPHS_METRICS } from '../utils'; +import { GRAPHS_METRICS, generateCoveredLinesMetric, historyQueryChanged } from '../utils'; +import { translate } from '../../../helpers/l10n'; import type { RawQuery } from '../../../helpers/query'; import type { Analysis, MeasureHistory, Query } from '../types'; +import type { Serie } from '../../../components/charts/AdvancedTimeline'; type Props = { analyses: Array<Analysis>, @@ -36,22 +38,88 @@ type Props = { updateQuery: RawQuery => void }; -export default function ProjectActivityGraphs(props: Props) { - const { graph, category } = props.query; - return ( - <div className="project-activity-layout-page-main-inner boxed-group boxed-group-inner"> - <ProjectActivityGraphsHeader graph={graph} updateQuery={props.updateQuery} /> - <StaticGraphs - analyses={props.analyses} - eventFilter={category} - leakPeriodDate={props.leakPeriodDate} - loading={props.loading} - measuresHistory={props.measuresHistory} - metricsType={props.metricsType} - project={props.project} - seriesOrder={GRAPHS_METRICS[graph]} - showAreas={['coverage', 'duplications'].includes(graph)} - /> - </div> - ); +type State = { + filteredSeries: Array<Serie>, + series: Array<Serie> +}; + +export default class ProjectActivityGraphs extends React.PureComponent { + props: Props; + state: State; + + constructor(props: Props) { + super(props); + const series = this.getSeries(props.measuresHistory); + this.state = { + filteredSeries: this.filterSeries(series, props.query), + series + }; + } + + componentWillReceiveProps(nextProps: Props) { + if ( + nextProps.measuresHistory !== this.props.measuresHistory || + historyQueryChanged(this.props.query, nextProps.query) + ) { + const series = this.getSeries(nextProps.measuresHistory); + this.setState({ + filteredSeries: this.filterSeries(series, nextProps.query), + series + }); + } + } + + getSeries = (measuresHistory: Array<MeasureHistory>): Array<Serie> => + measuresHistory.map(measure => { + if (measure.metric === 'uncovered_lines') { + return generateCoveredLinesMetric( + measure, + measuresHistory, + GRAPHS_METRICS[this.props.query.graph].indexOf(measure.metric) + ); + } + return { + name: measure.metric, + translatedName: translate('metric', measure.metric, 'name'), + style: GRAPHS_METRICS[this.props.query.graph].indexOf(measure.metric), + data: measure.history.map(analysis => ({ + x: analysis.date, + y: this.props.metricsType === 'LEVEL' ? analysis.value : Number(analysis.value) + })) + }; + }); + + filterSeries = (series: Array<Serie>, query: Query): Array<Serie> => { + if (!query.from && !query.to) { + return series; + } + return series.map(serie => ({ + ...serie, + data: serie.data.filter(p => { + const isAfterFrom = !query.from || p.x >= query.from; + const isBeforeTo = !query.to || p.x <= query.to; + return isAfterFrom && isBeforeTo; + }) + })); + }; + + render() { + const { graph, category } = this.props.query; + return ( + <div className="project-activity-layout-page-main-inner boxed-group boxed-group-inner"> + <ProjectActivityGraphsHeader graph={graph} updateQuery={this.props.updateQuery} /> + <StaticGraphs + analyses={this.props.analyses} + eventFilter={category} + filteredSeries={this.state.filteredSeries} + leakPeriodDate={this.props.leakPeriodDate} + loading={this.props.loading} + metricsType={this.props.metricsType} + project={this.props.project} + series={this.state.series} + showAreas={['coverage', 'duplications'].includes(graph)} + /> + </div> + ); + } } diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js index 4d93e77504e..086c9a6e1d1 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/StaticGraphs.js @@ -24,18 +24,19 @@ import { AutoSizer } from 'react-virtualized'; import AdvancedTimeline from '../../../components/charts/AdvancedTimeline'; import StaticGraphsLegend from './StaticGraphsLegend'; import { formatMeasure, getShortType } from '../../../helpers/measures'; -import { EVENT_TYPES, generateCoveredLinesMetric } from '../utils'; +import { EVENT_TYPES } from '../utils'; import { translate } from '../../../helpers/l10n'; -import type { Analysis, MeasureHistory } from '../types'; +import type { Analysis } from '../types'; +import type { Serie } from '../../../components/charts/AdvancedTimeline'; type Props = { analyses: Array<Analysis>, eventFilter: string, + filteredSeries: Array<Serie>, leakPeriodDate: Date, loading: boolean, - measuresHistory: Array<MeasureHistory>, metricsType: string, - seriesOrder: Array<string> + series: Array<Serie> }; export default class StaticGraphs extends React.PureComponent { @@ -69,27 +70,7 @@ export default class StaticGraphs extends React.PureComponent { return sortBy(filteredEvents, 'date'); }; - getSeries = () => - sortBy( - this.props.measuresHistory.map(measure => { - if (measure.metric === 'uncovered_lines') { - return generateCoveredLinesMetric(measure, this.props.measuresHistory); - } - return { - name: measure.metric, - translatedName: translate('metric', measure.metric, 'name'), - style: this.props.seriesOrder.indexOf(measure.metric), - data: measure.history.map(analysis => ({ - x: analysis.date, - y: this.props.metricsType === 'LEVEL' ? analysis.value : Number(analysis.value) - })) - }; - }), - 'name' - ); - - hasHistoryData = () => - some(this.props.measuresHistory, measure => measure.history && measure.history.length > 2); + hasHistoryData = () => some(this.props.series, serie => serie.data && serie.data.length > 2); render() { const { loading } = this.props; @@ -114,7 +95,7 @@ export default class StaticGraphs extends React.PureComponent { ); } - const series = this.getSeries(); + const { filteredSeries, series } = this.props; return ( <div className="project-activity-graph-container"> <StaticGraphsLegend series={series} /> @@ -129,7 +110,7 @@ export default class StaticGraphs extends React.PureComponent { formatYTick={this.formatYTick} leakPeriodDate={this.props.leakPeriodDate} metricType={this.props.metricsType} - series={series} + series={filteredSeries} showAreas={this.props.showAreas} width={width} /> diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityGraphs-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityGraphs-test.js index 57f093bd56d..3434f552fae 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityGraphs-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityGraphs-test.js @@ -79,3 +79,13 @@ const DEFAULT_PROPS = { it('should render correctly the graph and legends', () => { expect(shallow(<ProjectActivityGraphs {...DEFAULT_PROPS} />)).toMatchSnapshot(); }); + +it('should render correctly filter history on dates', () => { + const wrapper = shallow( + <ProjectActivityGraphs + {...DEFAULT_PROPS} + query={{ ...DEFAULT_PROPS.query, from: '2016-10-27T12:21:15+0200' }} + /> + ); + expect(wrapper.state()).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/StaticGraphs-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/StaticGraphs-test.js index 47984030882..3b8a4526cf4 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/StaticGraphs-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/StaticGraphs-test.js @@ -56,22 +56,35 @@ const ANALYSES = [ } ]; +const SERIES = [ + { + name: 'bugs', + translatedName: 'metric.bugs.name', + style: 0, + data: [ + { x: new Date('2016-10-27T16:33:50+0200'), y: 5 }, + { x: new Date('2016-10-27T12:21:15+0200'), y: 16 }, + { x: new Date('2016-10-26T12:17:29+0200'), y: 12 } + ] + } +]; + +const EMPTY_SERIES = [ + { + name: 'bugs', + translatedName: 'metric.bugs.name', + style: 0, + data: [] + } +]; + const DEFAULT_PROPS = { analyses: ANALYSES, eventFilter: '', + filteredSeries: SERIES, leakPeriodDate: '2017-05-16T13:50:02+0200', loading: false, - measuresHistory: [ - { - metric: 'bugs', - history: [ - { date: new Date('2016-10-27T16:33:50+0200'), value: '5' }, - { date: new Date('2016-10-27T12:21:15+0200'), value: '16' }, - { date: new Date('2016-10-26T12:17:29+0200'), value: '12' } - ] - } - ], - seriesOrder: ['bugs'], + series: SERIES, metricsType: 'INT' }; @@ -80,9 +93,7 @@ it('should show a loading view', () => { }); it('should show that there is no data', () => { - expect( - shallow(<StaticGraphs {...DEFAULT_PROPS} measuresHistory={[{ metric: 'bugs', history: [] }]} />) - ).toMatchSnapshot(); + expect(shallow(<StaticGraphs {...DEFAULT_PROPS} series={EMPTY_SERIES} />)).toMatchSnapshot(); }); it('should correctly render a graph', () => { diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.js.snap index 27471bc95a8..0fa696ab435 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityGraphs-test.js.snap @@ -1,5 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`should render correctly filter history on dates 1`] = ` +Object { + "filteredSeries": Array [ + Object { + "data": Array [], + "name": "code_smells", + "style": 1, + "translatedName": "metric.code_smells.name", + }, + ], + "series": Array [ + Object { + "data": Array [ + Object { + "x": 2016-10-26T10:17:29.000Z, + "y": 2286, + }, + Object { + "x": 2016-10-27T10:21:15.000Z, + "y": 1749, + }, + Object { + "x": 2016-10-27T14:33:50.000Z, + "y": 500, + }, + ], + "name": "code_smells", + "style": 1, + "translatedName": "metric.code_smells.name", + }, + ], +} +`; + exports[`should render correctly the graph and legends 1`] = ` <div className="project-activity-layout-page-main-inner boxed-group boxed-group-inner" @@ -46,36 +80,54 @@ exports[`should render correctly the graph and legends 1`] = ` ] } eventFilter="" - leakPeriodDate="2017-05-16T13:50:02+0200" - loading={false} - measuresHistory={ + filteredSeries={ Array [ Object { - "history": Array [ + "data": Array [ Object { - "date": 2016-10-26T10:17:29.000Z, - "value": "2286", + "x": 2016-10-26T10:17:29.000Z, + "y": 2286, }, Object { - "date": 2016-10-27T10:21:15.000Z, - "value": "1749", + "x": 2016-10-27T10:21:15.000Z, + "y": 1749, }, Object { - "date": 2016-10-27T14:33:50.000Z, - "value": "500", + "x": 2016-10-27T14:33:50.000Z, + "y": 500, }, ], - "metric": "code_smells", + "name": "code_smells", + "style": 1, + "translatedName": "metric.code_smells.name", }, ] } + leakPeriodDate="2017-05-16T13:50:02+0200" + loading={false} metricsType="INT" project="org.sonarsource.sonarqube:sonarqube" - seriesOrder={ + series={ Array [ - "bugs", - "code_smells", - "vulnerabilities", + Object { + "data": Array [ + Object { + "x": 2016-10-26T10:17:29.000Z, + "y": 2286, + }, + Object { + "x": 2016-10-27T10:21:15.000Z, + "y": 1749, + }, + Object { + "x": 2016-10-27T14:33:50.000Z, + "y": 500, + }, + ], + "name": "code_smells", + "style": 1, + "translatedName": "metric.code_smells.name", + }, ] } showAreas={false} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/utils.js b/server/sonar-web/src/main/js/apps/projectActivity/utils.js index c4d1b9239fa..257300e503d 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/utils.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/utils.js @@ -79,17 +79,19 @@ export const historyQueryChanged = (prevQuery: Query, nextQuery: Query): boolean export const generateCoveredLinesMetric = ( uncoveredLines: MeasureHistory, - measuresHistory: Array<MeasureHistory> + measuresHistory: Array<MeasureHistory>, + style: string ) => { const linesToCover = measuresHistory.find(measure => measure.metric === 'lines_to_cover'); return { - name: 'covered_lines', - translatedName: translate('project_activity.custom_metric.covered_lines'), data: linesToCover ? uncoveredLines.history.map((analysis, idx) => ({ x: analysis.date, y: Number(linesToCover.history[idx].value) - Number(analysis.value) })) - : [] + : [], + name: 'covered_lines', + style, + translatedName: translate('project_activity.custom_metric.covered_lines') }; }; diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js index bae8d1ec00d..bc71efecf69 100644 --- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.js @@ -25,12 +25,9 @@ import { extent, max } from 'd3-array'; import { scaleLinear, scalePoint, scaleTime } from 'd3-scale'; import { line as d3Line, area, curveBasis } from 'd3-shape'; -type Point = { x: Date, y: number | string }; - -type Serie = { name: string, data: Array<Point>, style: string }; - type Event = { className?: string, name: string, date: Date }; - +type Point = { x: Date, y: number | string }; +export type Serie = { name: string, data: Array<Point>, style: string }; type Scale = Function; type Props = { |