SONAR-8530 Infinite loading when opening the measures page for an absent measure

server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetails.js

@@ -22,45 +22,63 @@ import { Link, IndexLink } from 'react-router';
 import Spinner from './../components/Spinner';
 import MeasureDetailsHeader from './MeasureDetailsHeader';
 import MeasureDrilldown from './drilldown/MeasureDrilldown';
+import MetricNotFound from './MetricNotFound';
 import { getPeriod, getPeriodDate } from '../../../helpers/periods';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 
 export default class MeasureDetails extends React.Component {
-  componentWillMount () {
-    const { metrics } = this.props;
-    const { metricKey } = this.props.params;
-    const metric = metrics.find(metric => metric.key === metricKey);
+  mounted: boolean;
 
-    if (!metric) {
-      const { component } = this.props;
-      const { router } = this.context;
+  state = {
+    loading: true
+  };
+
+  componentDidMount () {
+    this.mounted = true;
+    this.loadData();
+  }
 
-      router.replace({
-        pathname: '/',
-        query: { id: component.key }
-      });
+  componentDidUpdate (prevProps) {
+    if (prevProps.params.metricKey !== this.props.params.metricKey) {
+      this.loadData();
     }
   }
 
-  componentDidMount () {
-    const periodIndex = this.props.location.query.period || 1;
-    this.props.fetchMeasure(this.props.params.metricKey, Number(periodIndex));
+  componentWillUnmount () {
+    this.mounted = false;
+  }
+
+  metricExists (): boolean {
+    const { metrics } = this.props;
+    const { metricKey } = this.props.params;
+    const metric = metrics.find(metric => metric.key === metricKey);
+    return !!metric;
   }
 
-  componentDidUpdate (nextProps) {
-    if (nextProps.params.metricKey !== this.props.params.metricKey) {
-      const periodIndex = nextProps.location.query.period || 1;
-      this.props.fetchMeasure(nextProps.params.metricKey, Number(periodIndex));
+  loadData () {
+    if (this.metricExists()) {
+      this.setState({ loading: true });
+      const periodIndex = this.props.location.query.period || 1;
+      const onLoaded = () => this.mounted && this.setState({ loading: false });
+      this.props.fetchMeasure(this.props.params.metricKey, Number(periodIndex)).then(onLoaded, onLoaded);
     }
   }
 
   render () {
-    const { component, metric, secondaryMeasure, measure, periods, children } = this.props;
+    if (!this.metricExists()) {
+      return <MetricNotFound/>;
+    }
 
-    if (measure == null) {
+    if (this.state.loading) {
       return <Spinner/>;
     }
 
+    const { component, metric, secondaryMeasure, measure, periods, children } = this.props;
+
+    if (!measure) {
+      return <MetricNotFound/>;
+    }
+
     const { tab } = this.props.params;
     const periodIndex = this.props.location.query.period || 1;
     const period = getPeriod(periods, Number(periodIndex));
@@ -107,7 +125,3 @@ export default class MeasureDetails extends React.Component {
     );
   }
 }
-
-MeasureDetails.contextTypes = {
-  router: React.PropTypes.object
-};

server/sonar-web/src/main/js/apps/component-measures/details/MeasureDetailsContainer.js

@@ -40,11 +40,7 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = dispatch => {
-  return {
-    fetchMeasure: (metricKey, periodIndex) => dispatch(fetchMeasure(metricKey, periodIndex))
-  };
-};
+const mapDispatchToProps = { fetchMeasure };
 
 export default connect(
     mapStateToProps,

server/sonar-web/src/main/js/apps/component-measures/details/MetricNotFound.js

@@ -0,0 +1,34 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2016 SonarSource SA
+ * mailto:contact 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 { translate } from '../../../helpers/l10n';
+
+export default class MetricNotFound extends React.Component {
+  render () {
+    return (
+        <div className="page page-limited">
+          <div className="alert alert-danger">
+            {translate('component_measures.not_found')}
+          </div>
+        </div>
+    );
+  }
+}

server/sonar-web/src/main/js/apps/component-measures/details/actions.js

@@ -64,7 +64,7 @@ export function fetchMeasure (metricKey, periodIndex = 1) {
     const metric = metrics.find(m => m.key === metricKey);
     dispatch(requestMeasure(metric));
 
-    getMeasuresAndMeta(
+    return getMeasuresAndMeta(
         component.key,
         metricsToRequest,
         { additionalFields: 'periods' }

sonar-core/src/main/resources/org/sonar/l10n/core.properties

@@ -2699,6 +2699,7 @@ component_measures.legend.color_x=Color: {0}
 component_measures.legend.size_x=Size: {0}
 component_measures.x_of_y={0} of {1}
 component_measures.no_history=There is no historical data.
+component_measures.not_found=The requested measure was not found.
 
 
 #------------------------------------------------------------------------------