From 8746fbda0290c691705208caad6a7c2590191673 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Tue, 11 Jul 2017 08:07:28 +0200 Subject: [PATCH] SONAR-9410 Add date selectors to the project activity page --- .../components/ProjectActivityApp.js | 7 +- .../components/ProjectActivityDateInput.js | 72 +++++++++++++++++++ .../components/ProjectActivityGraphs.js | 28 ++++++-- .../components/ProjectActivityPageHeader.js | 18 +++-- .../ProjectActivityDateInput-test.js | 34 +++++++++ .../ProjectActivityPageHeader-test.js | 8 ++- .../ProjectActivityDateInput-test.js.snap | 30 ++++++++ .../ProjectActivityPageHeader-test.js.snap | 7 +- .../components/projectActivity.css | 2 +- .../js/components/charts/AdvancedTimeline.js | 6 +- 10 files changed, 194 insertions(+), 18 deletions(-) create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityDateInput-test.js create mode 100644 server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityDateInput-test.js.snap diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js index d982bc837cc..59c9485d937 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityApp.js @@ -100,7 +100,12 @@ export default class ProjectActivityApp extends React.PureComponent {
- +
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js new file mode 100644 index 00000000000..82aa95a96c2 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityDateInput.js @@ -0,0 +1,72 @@ +/* + * SonarQube + * Copyright (C) 2009-2017 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +// @flow +import React from 'react'; +import moment from 'moment'; +import DateInput from '../../../components/controls/DateInput'; +import { parseAsDate } from '../../../helpers/query'; +import { translate } from '../../../helpers/l10n'; +import type { RawQuery } from '../../../helpers/query'; + +type Props = { + from: ?Date, + to: ?Date, + onChange: RawQuery => void +}; + +export default class ProjectActivityDateInput extends React.PureComponent { + props: Props; + + handleFromDateChange = (from: string) => this.props.onChange({ from: parseAsDate(from) }); + + handleToDateChange = (to: string) => this.props.onChange({ to: parseAsDate(to) }); + + handleResetClick = () => this.props.onChange({ from: null, to: null }); + + formatDate = (date: ?Date) => (date ? moment(date).format('YYYY-MM-DD') : null); + + render() { + return ( +
+ + {'—'} + + +
+ ); + } +} 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 d6b96f42f42..8f48ceaf91e 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 @@ -69,26 +69,42 @@ export default class ProjectActivityGraphs extends React.PureComponent { } componentWillReceiveProps(nextProps: Props) { + let newSeries; if ( nextProps.measuresHistory !== this.props.measuresHistory || historyQueryChanged(this.props.query, nextProps.query) ) { - const series = generateSeries( + newSeries = generateSeries( nextProps.measuresHistory, nextProps.query.graph, nextProps.metricsType, getDisplayedHistoryMetrics(nextProps.query.graph, nextProps.query.customMetrics) ); - const newDates = this.getStateZoomDates(this.props, nextProps, series); + } + + const newDates = this.getStateZoomDates( + this.props, + nextProps, + newSeries ? newSeries : this.state.series + ); + + if (newSeries || newDates) { + let newState = {}; + if (newSeries) { + newState.series = newSeries; + } if (newDates) { - this.setState({ series, ...newDates }); - } else { - this.setState({ series }); + newState = { ...newState, ...newDates }; } + this.setState(newState); } } - getStateZoomDates = (props: ?Props, nextProps: Props, series: Array) => { + getStateZoomDates = ( + props: ?Props, + nextProps: Props, + series: Array + ): ?{ graphEndDate: ?Date, graphStartDate: ?Date } => { const newDates = { from: nextProps.query.from || null, to: nextProps.query.to || null }; if (props && datesQueryChanged(props.query, nextProps.query)) { return { graphEndDate: newDates.to, graphStartDate: newDates.from }; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js index e2f8a8569fa..ebbce83df7c 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityPageHeader.js @@ -22,13 +22,16 @@ import React from 'react'; import Select from 'react-select'; import ProjectActivityEventSelectOption from './ProjectActivityEventSelectOption'; import ProjectActivityEventSelectValue from './ProjectActivityEventSelectValue'; +import ProjectActivityDateInput from './ProjectActivityDateInput'; import { EVENT_TYPES } from '../utils'; import { translate } from '../../../helpers/l10n'; import type { RawQuery } from '../../../helpers/query'; type Props = { - updateQuery: RawQuery => void, - category?: string + category?: string, + from: ?Date, + to: ?Date, + updateQuery: RawQuery => void }; export default class ProjectActivityPageHeader extends React.PureComponent { @@ -43,15 +46,14 @@ export default class ProjectActivityPageHeader extends React.PureComponent { })); } - handleCategoryChange = (option: ?{ value: string }) => { + handleCategoryChange = (option: ?{ value: string }) => this.props.updateQuery({ category: option ? option.value : '' }); - }; render() { return (