diff options
Diffstat (limited to 'server/sonar-web')
14 files changed, 430 insertions, 228 deletions
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js index 520852b4367..3b3672ed4f1 100644 --- a/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js +++ b/server/sonar-web/src/main/js/apps/component-measures/components/Measure.js @@ -26,6 +26,7 @@ import { formatLeak, isDiffMetric, getRatingTooltip } from '../utils'; export default class Measure extends React.PureComponent { static propTypes = { + className: React.PropTypes.string, measure: React.PropTypes.object, metric: React.PropTypes.object, decimals: React.PropTypes.number @@ -52,7 +53,7 @@ export default class Measure extends React.PureComponent { } render() { - const { measure, metric, decimals } = this.props; + const { measure, metric, decimals, className } = this.props; const finalMetric = metric || measure.metric; if (finalMetric.type === 'RATING') { @@ -66,9 +67,8 @@ export default class Measure extends React.PureComponent { const formattedValue = isDiffMetric(finalMetric) ? formatLeak(measure.leak, finalMetric, { decimals }) : formatMeasure(measure.value, finalMetric.type, { decimals }); - return ( - <span> + <span className={className}> {formattedValue != null ? formattedValue : '–'} </span> ); diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js index 55e16b34019..2dcc5720562 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js +++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.js @@ -131,13 +131,14 @@ export default class AllProjects extends React.PureComponent { <div className="layout-page-main"> <div className="layout-page-main-inner"> <PageHeaderContainer onOpenOptionBar={this.openOptionBar} /> - {view === 'overall' && + {view !== 'visualizations' && <ProjectsListContainer isFavorite={this.props.isFavorite} isFiltered={isFiltered} organization={this.props.organization} + cardType={view} />} - {view === 'overall' && + {view !== 'visualizations' && <ProjectsListFooterContainer query={query} isFavorite={this.props.isFavorite} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js index 40a74de7747..f08708da24d 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCard.js @@ -23,90 +23,94 @@ import classNames from 'classnames'; import moment from 'moment'; import { Link } from 'react-router'; import ProjectCardQualityGate from './ProjectCardQualityGate'; -import ProjectCardMeasures from './ProjectCardMeasures'; +import ProjectCardLeakMeasures from './ProjectCardLeakMeasures'; +import ProjectCardOverallMeasures from './ProjectCardOverallMeasures'; import FavoriteContainer from '../../../components/controls/FavoriteContainer'; import Organization from '../../../components/shared/Organization'; import TagsList from '../../../components/tags/TagsList'; import PrivateBadge from '../../../components/common/PrivateBadge'; import { translate, translateWithParameters } from '../../../helpers/l10n'; -export default class ProjectCard extends React.PureComponent { - props: { - measures: { [string]: string }, - organization?: {}, - project?: { - analysisDate?: string, - key: string, - name: string, - tags: Array<string>, - isFavorite?: boolean, - organization?: string - } - }; +type Props = { + measures: { [string]: string }, + organization?: { key: string }, + project?: { + analysisDate?: string, + key: string, + name: string, + tags: Array<string>, + isFavorite?: boolean, + organization?: string + }, + type?: string +}; - render() { - const { project } = this.props; +export default function ProjectCard({ measures, organization, project, type }: Props) { + if (project == null) { + return null; + } - if (project == null) { - return null; - } + const isProjectAnalyzed = project.analysisDate != null; + const isLeakView = type === 'leak'; - const isProjectAnalyzed = project.analysisDate != null; - // check reliability_rating because only some measures can be loaded - // if coming from visualizations tab - const areProjectMeasuresLoaded = - !isProjectAnalyzed || - (this.props.measures != null && - this.props.measures['reliability_rating'] != null && - this.props.measures['sqale_rating'] != null); - const displayQualityGate = areProjectMeasuresLoaded && isProjectAnalyzed; + let areProjectMeasuresLoaded; + // check for particular measures because only some measures can be loaded + // if coming from visualizations tab + if (isLeakView) { + areProjectMeasuresLoaded = measures != null && measures['new_bugs']; + } else { + areProjectMeasuresLoaded = + measures != null && + measures['reliability_rating'] != null && + measures['sqale_rating'] != null; + } - const className = classNames('boxed-group', 'project-card', { - 'boxed-group-loading': !areProjectMeasuresLoaded - }); + const displayQualityGate = areProjectMeasuresLoaded && isProjectAnalyzed; + const className = classNames('boxed-group', 'project-card', { + 'boxed-group-loading': isProjectAnalyzed && !areProjectMeasuresLoaded + }); - return ( - <div data-key={project.key} className={className}> - {displayQualityGate && - <div className="boxed-group-actions"> - <ProjectCardQualityGate status={this.props.measures['alert_status']} /> - </div>} + return ( + <div data-key={project.key} className={className}> + {displayQualityGate && + <div className="boxed-group-actions"> + <ProjectCardQualityGate status={measures['alert_status']} /> + </div>} - <div className="boxed-group-header"> - {project.isFavorite != null && - <FavoriteContainer className="spacer-right" componentKey={project.key} />} - <h2 className="project-card-name"> - {this.props.organization == null && - project.organization != null && - <span className="text-normal"> - <Organization organizationKey={project.organization} /> - </span>} - <Link to={{ pathname: '/dashboard', query: { id: project.key } }}> - {project.name} - </Link> - </h2> - {project.visibility === 'private' && <PrivateBadge className="spacer-left" />} - {project.tags.length > 0 && <TagsList tags={project.tags} customClass="spacer-left" />} - </div> + <div className="boxed-group-header"> + {project.isFavorite != null && + <FavoriteContainer className="spacer-right" componentKey={project.key} />} + <h2 className="project-card-name"> + {organization == null && + project.organization != null && + <span className="text-normal"> + <Organization organizationKey={project.organization} /> + </span>} + <Link to={{ pathname: '/dashboard', query: { id: project.key } }}>{project.name}</Link> + </h2> + {project.visibility === 'private' && <PrivateBadge className="spacer-left" />} + {project.tags.length > 0 && <TagsList tags={project.tags} customClass="spacer-left" />} + </div> - {isProjectAnalyzed - ? <div className="boxed-group-inner"> - {areProjectMeasuresLoaded && <ProjectCardMeasures measures={this.props.measures} />} + {isProjectAnalyzed + ? <div className="boxed-group-inner"> + {areProjectMeasuresLoaded && isLeakView + ? <ProjectCardLeakMeasures measures={measures} /> + : <ProjectCardOverallMeasures measures={measures} />} + </div> + : <div className="boxed-group-inner"> + <div className="note project-card-not-analyzed"> + {translate('projects.not_analyzed')} </div> - : <div className="boxed-group-inner"> - <div className="note project-card-not-analyzed"> - {translate('projects.not_analyzed')} - </div> - </div>} - - {isProjectAnalyzed && - <div className="project-card-analysis-date note"> - {translateWithParameters( - 'overview.last_analysis_on_x', - moment(project.analysisDate).format('LLL') - )} </div>} - </div> - ); - } + + {isProjectAnalyzed && + <div className="project-card-analysis-date note"> + {translateWithParameters( + 'overview.last_analysis_on_x', + moment(project.analysisDate).format('LLL') + )} + </div>} + </div> + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js new file mode 100644 index 00000000000..b1490444391 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.js @@ -0,0 +1,135 @@ +/* + * 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 Measure from '../../component-measures/components/Measure'; +import BugIcon from '../../../components/ui/BugIcon'; +import CodeSmellIcon from '../../../components/ui/CodeSmellIcon'; +import Rating from '../../../components/ui/Rating'; +import VulnerabilityIcon from '../../../components/ui/VulnerabilityIcon'; +import { translate } from '../../../helpers/l10n'; + +type Props = { + measures?: { [string]: string } +}; + +export default function ProjectCardLeakMeasures({ measures }: Props) { + if (measures == null) { + return null; + } + + return ( + <div className="project-card-leak-measures"> + <div className="project-card-measure smaller-card" data-key="new_reliability_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ leak: measures['new_bugs'] }} + metric={{ key: 'new_bugs', type: 'SHORT_INT' }} + /> + <Rating value={measures['new_reliability_rating']} /> + </div> + <div className="project-card-measure-label"> + <BugIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.new_bugs.name')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="new_security_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ leak: measures['new_vulnerabilities'] }} + metric={{ key: 'new_vulnerabilities', type: 'SHORT_INT' }} + /> + <Rating value={measures['new_security_rating']} /> + </div> + <div className="project-card-measure-label"> + <VulnerabilityIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.new_vulnerabilities.name')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="new_maintainability_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ leak: measures['new_code_smells'] }} + metric={{ key: 'new_code_smells', type: 'SHORT_INT' }} + /> + <Rating value={measures['new_maintainability_rating']} /> + </div> + <div className="project-card-measure-label"> + <CodeSmellIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.new_code_smells.name')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="new_coverage"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + measure={{ leak: measures['new_coverage'] }} + metric={{ key: 'new_coverage', type: 'PERCENT' }} + /> + </div> + <div className="project-card-measure-label"> + {translate('metric.new_coverage.name')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="new_duplicated_lines_density"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + measure={{ leak: measures['new_duplicated_lines_density'] }} + metric={{ key: 'new_duplicated_lines_density', type: 'PERCENT' }} + /> + </div> + <div className="project-card-measure-label"> + {translate('metric.new_duplicated_lines_density.short_name')} + </div> + </div> + </div> + + {measures['new_lines'] != null && + <div className="project-card-measure smaller-card" data-key="new_lines"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Measure + measure={{ leak: measures['new_lines'] }} + metric={{ key: 'new_lines', type: 'SHORT_INT' }} + /> + </div> + <div className="project-card-measure-label"> + {translate('metric.new_lines.short_name')} + </div> + </div> + </div>} + </div> + ); +} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js deleted file mode 100644 index 6d08f16980e..00000000000 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardMeasures.js +++ /dev/null @@ -1,132 +0,0 @@ -/* - * 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. - */ -import React from 'react'; -import ProjectCardLanguages from './ProjectCardLanguages'; -import Measure from '../../component-measures/components/Measure'; -import Rating from '../../../components/ui/Rating'; -import CoverageRating from '../../../components/ui/CoverageRating'; -import DuplicationsRating from '../../../components/ui/DuplicationsRating'; -import SizeRating from '../../../components/ui/SizeRating'; -import { translate } from '../../../helpers/l10n'; - -export default class ProjectCardMeasures extends React.PureComponent { - static propTypes = { - measures: React.PropTypes.object - }; - - render() { - const { measures } = this.props; - - if (measures == null) { - return null; - } - - return ( - <div className="project-card-measures"> - <div className="project-card-measure" data-key="reliability_rating"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - <Rating value={measures['reliability_rating']} /> - </div> - <div className="project-card-measure-label"> - {translate('metric_domain.Reliability')} - </div> - </div> - </div> - - <div className="project-card-measure" data-key="security_rating"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - <Rating value={measures['security_rating']} /> - </div> - <div className="project-card-measure-label"> - {translate('metric_domain.Security')} - </div> - </div> - </div> - - <div className="project-card-measure" data-key="sqale_rating"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - <Rating value={measures['sqale_rating']} /> - </div> - <div className="project-card-measure-label"> - {translate('metric_domain.Maintainability')} - </div> - </div> - </div> - - <div className="project-card-measure" data-key="coverage"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - {measures['coverage'] != null && - <span className="spacer-right"> - <CoverageRating value={measures['coverage']} /> - </span>} - <Measure - measure={{ value: measures['coverage'] }} - metric={{ key: 'coverage', type: 'PERCENT' }} - /> - </div> - <div className="project-card-measure-label"> - {translate('metric.coverage.name')} - </div> - </div> - </div> - - <div className="project-card-measure" data-key="duplicated_lines_density"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - {measures['duplicated_lines_density'] != null && - <span className="spacer-right"> - <DuplicationsRating value={measures['duplicated_lines_density']} /> - </span>} - <Measure - measure={{ value: measures['duplicated_lines_density'] }} - metric={{ key: 'duplicated_lines_density', type: 'PERCENT' }} - /> - </div> - <div className="project-card-measure-label"> - {translate('metric.duplicated_lines_density.short_name')} - </div> - </div> - </div> - - {measures['ncloc'] != null && - <div className="project-card-measure" data-key="ncloc"> - <div className="project-card-measure-inner"> - <div className="project-card-measure-number"> - <span className="spacer-right"> - <SizeRating value={measures['ncloc']} /> - </span> - <Measure - measure={{ value: measures['ncloc'] }} - metric={{ key: 'ncloc', type: 'SHORT_INT' }} - /> - </div> - <div className="project-card-measure-label"> - <ProjectCardLanguages distribution={measures['ncloc_language_distribution']} /> - </div> - </div> - </div>} - </div> - ); - } -} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.js new file mode 100644 index 00000000000..883b8039953 --- /dev/null +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.js @@ -0,0 +1,132 @@ +/* + * 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 ProjectCardLanguages from './ProjectCardLanguages'; +import Measure from '../../component-measures/components/Measure'; +import Rating from '../../../components/ui/Rating'; +import CoverageRating from '../../../components/ui/CoverageRating'; +import DuplicationsRating from '../../../components/ui/DuplicationsRating'; +import SizeRating from '../../../components/ui/SizeRating'; +import { translate } from '../../../helpers/l10n'; +import { formatMeasure } from '../../../helpers/measures'; + +type Props = { + measures?: { [string]: string } +}; + +export default function ProjectCardMeasures({ measures }: Props) { + if (measures == null) { + return null; + } + + return ( + <div className="project-card-measures"> + <div className="project-card-measure smaller-card" data-key="reliability_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Rating value={measures['reliability_rating']} /> + </div> + <div className="project-card-measure-label"> + {translate('metric_domain.Reliability')} + </div> + </div> + </div> + + <div className="project-card-measure smaller-card" data-key="security_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Rating value={measures['security_rating']} /> + </div> + <div className="project-card-measure-label"> + {translate('metric_domain.Security')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="sqale_rating"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <Rating value={measures['sqale_rating']} /> + </div> + <div className="project-card-measure-label"> + {translate('metric_domain.Maintainability')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="coverage"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + {measures['coverage'] != null && + <span className="spacer-right"> + <CoverageRating value={measures['coverage']} /> + </span>} + <Measure + measure={{ value: measures['coverage'] }} + metric={{ key: 'coverage', type: 'PERCENT' }} + /> + </div> + <div className="project-card-measure-label"> + {translate('metric.coverage.name')} + </div> + </div> + </div> + + <div className="project-card-measure" data-key="duplicated_lines_density"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + {measures['duplicated_lines_density'] != null && + <span className="spacer-right"> + <DuplicationsRating + value={formatMeasure(measures['duplicated_lines_density'], 'FLOAT')} + /> + </span>} + <Measure + measure={{ value: measures['duplicated_lines_density'] }} + metric={{ key: 'duplicated_lines_density', type: 'PERCENT' }} + /> + </div> + <div className="project-card-measure-label"> + {translate('metric.duplicated_lines_density.short_name')} + </div> + </div> + </div> + + {measures['ncloc'] != null && + <div className="project-card-measure" data-key="ncloc"> + <div className="project-card-measure-inner"> + <div className="project-card-measure-number"> + <span className="spacer-right"> + <SizeRating value={formatMeasure(measures['ncloc'], 'INT')} /> + </span> + <Measure + measure={{ value: measures['ncloc'] }} + metric={{ key: 'ncloc', type: 'SHORT_INT' }} + /> + </div> + <div className="project-card-measure-label"> + <ProjectCardLanguages distribution={measures['ncloc_language_distribution']} /> + </div> + </div> + </div>} + </div> + ); +} diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js index d692e2ca9ce..e9eea0c0a88 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.js @@ -17,19 +17,23 @@ * 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 ProjectCardContainer from './ProjectCardContainer'; import NoFavoriteProjects from './NoFavoriteProjects'; import EmptyInstance from './EmptyInstance'; import EmptySearch from '../../../components/common/EmptySearch'; +type Props = { + projects?: Array<string>, + isFavorite: boolean, + isFiltered: boolean, + organization?: { key: string }, + cardType?: string +}; + export default class ProjectsList extends React.PureComponent { - static propTypes = { - projects: React.PropTypes.arrayOf(React.PropTypes.string), - isFavorite: React.PropTypes.bool.isRequired, - isFiltered: React.PropTypes.bool.isRequired, - organization: React.PropTypes.object - }; + props: Props; renderNoProjects() { if (this.props.isFavorite && !this.props.isFiltered) { @@ -56,6 +60,7 @@ export default class ProjectsList extends React.PureComponent { key={projectKey} projectKey={projectKey} organization={this.props.organization} + type={this.props.cardType} /> )) : this.renderNoProjects()} diff --git a/server/sonar-web/src/main/js/apps/projects/store/actions.js b/server/sonar-web/src/main/js/apps/projects/store/actions.js index 1bd9eacd087..7b5d11e2e47 100644 --- a/server/sonar-web/src/main/js/apps/projects/store/actions.js +++ b/server/sonar-web/src/main/js/apps/projects/store/actions.js @@ -31,6 +31,7 @@ import { convertToQueryData } from './utils'; import { receiveFavorites } from '../../../store/favorites/duck'; import { getOrganizations } from '../../../api/organizations'; import { receiveOrganizations } from '../../../store/organizations/duck'; +import { isDiffMetric, getPeriodValue } from '../../../helpers/measures'; const PAGE_SIZE = 50; const PAGE_SIZE_VISUALIZATIONS = 99; @@ -46,6 +47,19 @@ const METRICS = [ 'ncloc_language_distribution' ]; +const LEAK_METRICS = [ + 'alert_status', + 'new_bugs', + 'new_reliability_rating', + 'new_vulnerabilities', + 'new_security_rating', + 'new_code_smells', + 'new_maintainability_rating', + 'new_coverage', + 'new_duplicated_lines_density', + 'new_lines' +]; + const METRICS_BY_VISUALIZATION = { risk: ['reliability_rating', 'security_rating', 'coverage', 'ncloc', 'sqale_index'], // x, y, size, color @@ -85,7 +99,9 @@ const onReceiveMeasures = (dispatch, expectedProjectKeys) => response => { Object.keys(byComponentKey).forEach(componentKey => { const measures = {}; byComponentKey[componentKey].forEach(measure => { - measures[measure.metric] = measure.value; + measures[measure.metric] = isDiffMetric(measure.metric) + ? getPeriodValue(measure, 1) + : measure.value; }); toStore[componentKey] = measures; }); @@ -98,10 +114,13 @@ const onReceiveOrganizations = dispatch => response => { }; const defineMetrics = query => { - if (query.view === 'visualizations') { - return METRICS_BY_VISUALIZATION[query.visualization || 'risk']; - } else { - return METRICS; + switch (query.view) { + case 'visualizations': + return METRICS_BY_VISUALIZATION[query.visualization || 'risk']; + case 'leak': + return LEAK_METRICS; + default: + return METRICS; } }; diff --git a/server/sonar-web/src/main/js/apps/projects/store/utils.js b/server/sonar-web/src/main/js/apps/projects/store/utils.js index 8cba5d71531..0316f71ab7f 100644 --- a/server/sonar-web/src/main/js/apps/projects/store/utils.js +++ b/server/sonar-web/src/main/js/apps/projects/store/utils.js @@ -48,7 +48,7 @@ const getAsArray = (values, elementGetter) => { return values.split(',').map(elementGetter); }; -const getView = rawValue => (rawValue === 'visualizations' ? rawValue : undefined); +const getView = rawValue => (rawValue === 'overall' ? undefined : rawValue); const getVisualization = value => { return VISUALIZATIONS.includes(value) ? value : null; diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css index d413f3d0cb6..5a94f6006a7 100644 --- a/server/sonar-web/src/main/js/apps/projects/styles.css +++ b/server/sonar-web/src/main/js/apps/projects/styles.css @@ -85,16 +85,39 @@ margin: 0 -15px; } +.project-card-leak-measures { + padding: 4px 0; + margin: 0 -4px 4px; + background-color: #fbf3d5; + border: 1px solid #eae3c7; +} + .project-card-measures .project-card-measure { width: 120px; box-sizing: border-box; padding: 0 15px; } -.project-card-measures .project-card-measure:nth-child(-n+2) { +.project-card-leak-measures .project-card-measure { + width: 140px; + box-sizing: border-box; + padding: 0 5px; +} + +.project-card-measure.smaller-card { width: 90px; } +@media (max-width: 1130px) { + .project-card-leak-measures .project-card-measure { + width: 134px; + padding: 0 2px; + } + .project-card-measure.smaller-card { + width: 81px; + } +} + .project-card-measure { position: relative; display: inline-block; diff --git a/server/sonar-web/src/main/js/apps/projects/utils.js b/server/sonar-web/src/main/js/apps/projects/utils.js index 9fe7815798c..a81d6258c14 100644 --- a/server/sonar-web/src/main/js/apps/projects/utils.js +++ b/server/sonar-web/src/main/js/apps/projects/utils.js @@ -47,7 +47,7 @@ export const saveAll = () => save(LOCALSTORAGE_ALL); export const saveFavorite = () => save(LOCALSTORAGE_FAVORITE); -export const VIEWS = ['overall']; +export const VIEWS = ['overall', 'leak']; export const VISUALIZATIONS = [ 'risk', diff --git a/server/sonar-web/src/main/js/components/ui/BugIcon.js b/server/sonar-web/src/main/js/components/ui/BugIcon.js index ada2170bc5b..5c794e2e080 100644 --- a/server/sonar-web/src/main/js/components/ui/BugIcon.js +++ b/server/sonar-web/src/main/js/components/ui/BugIcon.js @@ -20,10 +20,15 @@ // @flow import React from 'react'; -export default function BugIcon() { +export default function BugIcon({ className }: { className?: string }) { /* eslint-disable max-len */ return ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> + <svg + className={className} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 16 16" + width="16" + height="16"> <path style={{ fill: 'currentColor' }} d="M11 9h1.3l.5.8.8-.5-.8-1.3H11v-.3l2-2.3V3h-1v2l-1 1.2V5c-.1-.8-.7-1.5-1.4-1.9L11 1.8l-.7-.7-1.8 1.6-1.8-1.6-.7.7 1.5 1.3C6.7 3.5 6.1 4.2 6 5v1.1L5 5V3H4v2.3l2 2.3V8H4.2l-.7 1.2.8.5.4-.7H6v.3l-2 1.9V14h1v-2.4l1-1C6 12 7.1 13 8.4 13h.8c.7 0 1.4-.3 1.8-.9.3-.4.3-.9.2-1.4l.9.9V14h1v-2.8l-2-1.9V9zm-2 2H8V6h1v5z" diff --git a/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js index 9673f988b24..5a788b1066c 100644 --- a/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js +++ b/server/sonar-web/src/main/js/components/ui/CodeSmellIcon.js @@ -20,10 +20,15 @@ // @flow import React from 'react'; -export default function CodeSmellIcon() { +export default function CodeSmellIcon({ className }: { className?: string }) { /* eslint-disable max-len */ return ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> + <svg + className={className} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 16 16" + width="16" + height="16"> <path style={{ fill: 'currentColor' }} d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm-.5 5.5h.9v.9h-.9v-.9zm-3.8.2c-.1 0-.2-.1-.2-.2 0-.4.1-1.2.6-2S5.3 4.2 5.6 4c.2 0 .3 0 .3.1l1.3 2.3c0 .1 0 .2-.1.2-.1.2-.2.3-.3.5-.1.2-.2.4-.2.5 0 .1-.1.2-.2.2l-2.7-.1zM9.9 12c-.3.2-1.1.5-2 .5-.9 0-1.7-.3-2-.5-.1 0-.1-.2-.1-.3l1.3-2.3c0-.1.1-.1.2-.1.2.1.3.1.5.1s.4 0 .5-.1c.1 0 .2 0 .2.1l1.3 2.3c.2.2.2.3.1.3zm2.5-4.1L9.7 8c-.1 0-.2-.1-.2-.2 0-.2-.1-.4-.2-.5 0-.1-.2-.3-.3-.4-.1 0-.1-.1-.1-.2l1.3-2.3c.1-.1.2-.1.3-.1.3.2 1 .7 1.5 1.5s.6 1.6.6 2c0 0-.1.1-.2.1z" diff --git a/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js index b3987cb4432..248eae3d844 100644 --- a/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js +++ b/server/sonar-web/src/main/js/components/ui/VulnerabilityIcon.js @@ -20,10 +20,15 @@ // @flow import React from 'react'; -export default function VulnerabilityIcon() { +export default function VulnerabilityIcon({ className }: { className?: string }) { /* eslint-disable max-len */ return ( - <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"> + <svg + className={className} + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 16 16" + width="16" + height="16"> <path style={{ fill: 'currentColor' }} d="M10.8 5H6V3.9a2.28 2.28 0 0 1 2-2.5 2.22 2.22 0 0 1 1.8 1.2.48.48 0 0 0 .7.2.48.48 0 0 0 .2-.7A3 3 0 0 0 8 .4a3.34 3.34 0 0 0-3 3.5v1.2a2.16 2.16 0 0 0-2 2.1v4.4a2.22 2.22 0 0 0 2.2 2.2h5.6a2.22 2.22 0 0 0 2.2-2.2V7.2A2.22 2.22 0 0 0 10.8 5zm-2.2 5.5v1.2H7.4v-1.2a1.66 1.66 0 0 1-1.1-1.6A1.75 1.75 0 0 1 8 7.2a1.71 1.71 0 0 1 .6 3.3z" |