From d07cc710fa8636ac88b18adab98b21cbde813ba1 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Wed, 16 Aug 2017 11:56:17 +0200 Subject: [PATCH] SONAR-9605 Fix infinite spinner on project activity page --- .../components/GraphsHistory.js | 7 +- .../components/ProjectActivityAnalysesList.js | 4 +- .../components/ProjectActivityApp.js | 4 +- .../components/ProjectActivityAppContainer.js | 64 ++++++++++++------- .../__tests__/GraphsHistory-test.js | 2 +- .../ProjectActivityAnalysesList-test.js | 2 +- .../__tests__/ProjectActivityApp-test.js | 2 +- .../ProjectActivityApp-test.js.snap | 2 +- 8 files changed, 52 insertions(+), 35 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js index 25247318719..4e5be7ea5db 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsHistory.js @@ -20,6 +20,7 @@ import React from 'react'; import moment from 'moment'; import { isEqual, sortBy } from 'lodash'; +import DeferredSpinner from '../../../components/common/DeferredSpinner'; import GraphHistory from './GraphHistory'; import { EVENT_TYPES, getSeriesMetricType, hasHistoryData, isCustomGraph } from '../utils'; import { translate } from '../../../helpers/l10n'; @@ -109,14 +110,14 @@ export default class GraphsHistory extends React.PureComponent { updateTooltip = (selectedDate /*: ?Date */) => this.setState({ selectedDate }); render() { - const { graph, series } = this.props; + const { graph, loading, series } = this.props; const isCustom = isCustomGraph(graph); - if (this.props.loading) { + if (loading) { return (
- +
); diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js index e6a4b4f24b2..7f69288c33d 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.js @@ -44,7 +44,7 @@ type Props = { changeEvent: (event: string, name: string) => Promise<*>, deleteAnalysis: (analysis: string) => Promise<*>, deleteEvent: (analysis: string, event: string) => Promise<*>, - loading: boolean, + initializing: boolean, project: { qualifier: string }, query: Query, updateQuery: Object => void @@ -155,7 +155,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent { if (this.props.analyses.length === 0 || !hasFilteredData) { return (
- {this.props.loading + {this.props.initializing ?
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 717678a0561..cdc41b48e99 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 @@ -38,7 +38,7 @@ type Props = { deleteAnalysis: (analysis: string) => Promise<*>, deleteEvent: (analysis: string, event: string) => Promise<*>, graphLoading: boolean, - loading: boolean, + initializing: boolean, project: { configuration?: { showHistory: boolean }, key: string, @@ -80,7 +80,7 @@ export default function ProjectActivityApp(props /*: Props */) { changeEvent={props.changeEvent} deleteAnalysis={props.deleteAnalysis} deleteEvent={props.deleteEvent} - loading={props.loading} + initializing={props.initializing} project={props.project} query={props.query} updateQuery={props.updateQuery} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js index 1e212bc5f13..61e9bd077c2 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAppContainer.js @@ -225,36 +225,52 @@ class ProjectActivityAppContainer extends React.PureComponent { this.fetchActivity(query.project, 1, 100, serializeQuery(query)), this.fetchMetrics(), this.fetchMeasuresHistory(graphMetrics) - ]).then(response => { - if (this.mounted) { - this.setState({ - analyses: response[0].analyses, - analysesLoading: true, - graphLoading: false, - initialized: true, - measuresHistory: response[2], - metrics: response[1], - paging: response[0].paging - }); + ]).then( + response => { + if (this.mounted) { + this.setState({ + analyses: response[0].analyses, + analysesLoading: true, + graphLoading: false, + initialized: true, + measuresHistory: response[2], + metrics: response[1], + paging: response[0].paging + }); - this.loadAllActivities(query.project).then(({ analyses, paging }) => { - if (this.mounted) { - this.setState({ - analyses, - analysesLoading: false, - paging - }); - } - }); + this.loadAllActivities(query.project).then(({ analyses, paging }) => { + if (this.mounted) { + this.setState({ + analyses, + analysesLoading: false, + paging + }); + } + }); + } + }, + () => { + if (this.mounted) { + this.setState({ initialized: true, analysesLoading: false, graphLoading: false }); + } } - }); + ); } updateGraphData = (graph /*: string */, customMetrics /*: Array */) => { const graphMetrics = getHistoryMetrics(graph, customMetrics); this.setState({ graphLoading: true }); - this.fetchMeasuresHistory(graphMetrics).then((measuresHistory /*: Array */) => - this.setState({ graphLoading: false, measuresHistory }) + this.fetchMeasuresHistory(graphMetrics).then( + (measuresHistory /*: Array */) => { + if (this.mounted) { + this.setState({ graphLoading: false, measuresHistory }); + } + }, + () => { + if (this.mounted) { + this.setState({ graphLoading: false, measuresHistory: [] }); + } + } ); }; @@ -300,7 +316,7 @@ class ProjectActivityAppContainer extends React.PureComponent { deleteAnalysis={this.deleteAnalysis} deleteEvent={this.deleteEvent} graphLoading={!this.state.initialized || this.state.graphLoading} - loading={!this.state.initialized} + initializing={!this.state.initialized} metrics={this.state.metrics} measuresHistory={this.state.measuresHistory} project={this.props.project} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js index 099b253622c..5a62d59c1fe 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsHistory-test.js @@ -103,7 +103,7 @@ it('should correctly filter events', () => { it('should show a loading view instead of the graph', () => { expect( - shallow().find('.spinner') + shallow().find('DeferredSpinner') ).toHaveLength(1); }); diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js index c3d7833dd5d..30864a995f9 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityAnalysesList-test.js @@ -77,7 +77,7 @@ const DEFAULT_PROPS = { changeEvent: () => {}, deleteAnalysis: () => {}, deleteEvent: () => {}, - loading: false, + inizializing: false, project: { qualifier: 'TRK' }, query: { category: '', graph: DEFAULT_GRAPH, project: 'org.sonarsource.sonarqube:sonarqube' }, updateQuery: () => {} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js index 6f3655c42ec..1d3d5cec290 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-test.js @@ -66,7 +66,7 @@ const DEFAULT_PROPS = { deleteAnalysis: () => {}, deleteEvent: () => {}, graphLoading: false, - loading: false, + initializing: false, project: { key: 'org.sonarsource.sonarqube:sonarqube', leakPeriodDate: '2017-05-16T13:50:02+0200' diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap index 9a69a6e5a04..64f9f8018ac 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/ProjectActivityApp-test.js.snap @@ -70,7 +70,7 @@ exports[`should render correctly 1`] = ` className="boxed-group-inner" deleteAnalysis={[Function]} deleteEvent={[Function]} - loading={false} + initializing={false} project={ Object { "key": "org.sonarsource.sonarqube:sonarqube", -- 2.39.5