From 3742bff5b8f1fc202642fb4dea44207413216788 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 26 May 2017 09:21:11 +0200 Subject: [PATCH] Display about page faster --- .../main/js/apps/about/components/AboutApp.js | 29 +++++++-------- .../components/AboutAppForSonarQubeDotCom.js | 6 ++-- .../js/apps/about/components/AboutProjects.js | 26 +++++++------- .../apps/about/components/EntryIssueTypes.js | 30 ++++++++-------- .../EntryIssueTypesForSonarQubeDotCom.js | 35 +++++++++++-------- .../apps/about/sonarqube-dot-com-styles.css | 1 + .../src/main/js/apps/about/styles.css | 1 + 7 files changed, 70 insertions(+), 58 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js index ee0a05da356..f22509ca1d5 100644 --- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js +++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js @@ -104,18 +104,17 @@ class AboutApp extends React.PureComponent { } render() { - if (this.state.loading) { - return null; - } - const { customText, sonarqubeDotCom } = this.props; - - // $FlowFixMe - const bugs = this.state.issueTypes['BUG'].count; - // $FlowFixMe - const vulnerabilities = this.state.issueTypes['VULNERABILITY'].count; - // $FlowFixMe - const codeSmells = this.state.issueTypes['CODE_SMELL'].count; + const { loading, issueTypes, projectsCount } = this.state; + + let bugs; + let vulnerabilities; + let codeSmells; + if (!loading && issueTypes) { + bugs = issueTypes['BUG'] && issueTypes['BUG'].count; + vulnerabilities = issueTypes['VULNERABILITY'] && issueTypes['VULNERABILITY'].count; + codeSmells = issueTypes['CODE_SMELL'] && issueTypes['CODE_SMELL'].count; + } if (sonarqubeDotCom && sonarqubeDotCom.value === 'true') { return ( @@ -125,7 +124,8 @@ class AboutApp extends React.PureComponent { codeSmells={codeSmells} currentUser={this.props.currentUser} customText={customText} - projectsCount={this.state.projectsCount} + loading={loading} + projectsCount={projectsCount} vulnerabilities={vulnerabilities} /> ); @@ -152,11 +152,12 @@ class AboutApp extends React.PureComponent {
- +
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js index 6d7030247c3..8b812156976 100644 --- a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js +++ b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js @@ -41,6 +41,7 @@ type Props = { codeSmells: number, currentUser: { isLoggedIn: boolean }, customText?: string, + loading: boolean, projectsCount: number, vulnerabilities: number }; @@ -69,11 +70,12 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
- +
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js index 4d240868177..876eb9c74e1 100644 --- a/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js +++ b/server/sonar-web/src/main/js/apps/about/components/AboutProjects.js @@ -17,30 +17,32 @@ * 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 { Link } from 'react-router'; import { formatMeasure } from '../../../helpers/measures'; import { translate } from '../../../helpers/l10n'; -export default class AboutProjects extends React.PureComponent { - static propTypes = { - count: React.PropTypes.number.isRequired - }; +type Props = { + count: number, + loading: boolean +}; - render() { - return ( -
+export default function AboutProjects({ count, loading }: Props) { + return ( +
+ {loading && } + {!loading &&
- {formatMeasure(this.props.count, 'INT')} + {formatMeasure(count, 'INT')}
{translate('about_page.projects_analyzed')}
-
-
- ); - } +
} + + ); } diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js index 349dbf85bba..58bf0b7987c 100644 --- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js +++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypes.js @@ -17,6 +17,7 @@ * 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 { Link } from 'react-router'; import { formatMeasure } from '../../../helpers/measures'; @@ -26,18 +27,18 @@ import BugIcon from '../../../components/ui/BugIcon'; import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon'; import CodeSmellIcon from '../../../components/ui/CodeSmellIcon'; -export default class EntryIssueTypes extends React.PureComponent { - static propTypes = { - bugs: React.PropTypes.number.isRequired, - vulnerabilities: React.PropTypes.number.isRequired, - codeSmells: React.PropTypes.number.isRequired - }; +type Props = { + bugs: ?number, + codeSmells: ?number, + loading: boolean, + vulnerabilities: ?number +}; - render() { - const { bugs, vulnerabilities, codeSmells } = this.props; - - return ( -
+export default function EntryIssueTypes({ bugs, codeSmells, loading, vulnerabilities }: Props) { + return ( +
+ {loading && } + {!loading && @@ -84,8 +85,7 @@ export default class EntryIssueTypes extends React.PureComponent { -
-
- ); - } + } +
+ ); } diff --git a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js index e7ef546f2ac..0dbe782918a 100644 --- a/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js +++ b/server/sonar-web/src/main/js/apps/about/components/EntryIssueTypesForSonarQubeDotCom.js @@ -17,6 +17,7 @@ * 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 { Link } from 'react-router'; import { formatMeasure } from '../../../helpers/measures'; @@ -26,18 +27,23 @@ import BugIconForSonarQubeDotCom from './BugIconForSonarQubeDotCom'; import VulnerabilityIconForSonarQubeDotCom from './VulnerabilityIconForSonarQubeDotCom'; import CodeSmellIconForSonarQubeDotCom from './CodeSmellIconForSonarQubeDotCom'; -export default class EntryIssueTypesForSonarQubeDotCom extends React.PureComponent { - static propTypes = { - bugs: React.PropTypes.number.isRequired, - vulnerabilities: React.PropTypes.number.isRequired, - codeSmells: React.PropTypes.number.isRequired - }; +type Props = { + bugs: ?number, + codeSmells: ?number, + loading: boolean, + vulnerabilities: ?number +}; - render() { - const { bugs, vulnerabilities, codeSmells } = this.props; - - return ( -
+export default function EntryIssueTypesForSonarQubeDotCom({ + bugs, + codeSmells, + loading, + vulnerabilities +}: Props) { + return ( +
+ {loading && } + {!loading && @@ -84,8 +90,7 @@ export default class EntryIssueTypesForSonarQubeDotCom extends React.PureCompone -
-
- ); - } + } +
+ ); } diff --git a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css index 4767143aa4e..693e4ee3908 100644 --- a/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css +++ b/server/sonar-web/src/main/js/apps/about/sonarqube-dot-com-styles.css @@ -72,6 +72,7 @@ justify-content: center; align-items: center; min-width: 190px; + min-height: 105px; margin-left: 15px; padding: 25px; background-color: #fff; diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css index 98e4186c6a6..46a0e9added 100644 --- a/server/sonar-web/src/main/js/apps/about/styles.css +++ b/server/sonar-web/src/main/js/apps/about/styles.css @@ -72,6 +72,7 @@ line-height: 1.4; font-size: 16px; text-align: center; + min-width: 128px; } .about-page-projects-link { -- 2.39.5