diff options
author | Stas Vilchik <stas.vilchik@sonarsource.com> | 2017-09-28 16:17:18 +0200 |
---|---|---|
committer | Stas Vilchik <stas.vilchik@sonarsource.com> | 2017-10-02 15:12:06 +0200 |
commit | 7004add944e551c499bfcc0d32ba508022105d42 (patch) | |
tree | b5502348a0249a16ca66ddfc61ef0d1abe30303d /server | |
parent | 8f9cf4f2994f90fa69c2dd4f2b49a81ae98a6a25 (diff) | |
download | sonarqube-7004add944e551c499bfcc0d32ba508022105d42.tar.gz sonarqube-7004add944e551c499bfcc0d32ba508022105d42.zip |
SONAR-9599 change issues measures on the projects page
Diffstat (limited to 'server')
13 files changed, 219 insertions, 38 deletions
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx index 47652952ec2..a08b77c9997 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardLeakMeasures.tsx @@ -119,7 +119,7 @@ export default function ProjectCardLeakMeasures({ measures }: Props) { </div> </div> - <div className="project-card-measure smaller-card pull-right" data-key="new_lines"> + <div className="project-card-measure smaller-card project-card-ncloc" data-key="new_lines"> <div className="project-card-measure-inner"> <div className="project-card-measure-number"> <Measure diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx index d0ef2f047ce..cdb325a02dd 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectCardOverallMeasures.tsx @@ -25,6 +25,9 @@ import CoverageRating from '../../../components/ui/CoverageRating'; import DuplicationsRating from '../../../components/ui/DuplicationsRating'; import SizeRating from '../../../components/ui/SizeRating'; import { translate } from '../../../helpers/l10n'; +import BugIcon from '../../../components/icons-components/BugIcon'; +import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon'; +import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon'; interface Props { measures: { [key: string]: string | undefined }; @@ -40,28 +43,56 @@ export default function ProjectCardOverallMeasures({ measures }: Props) { <div className="project-card-measure smaller-card" data-key="reliability_rating"> <div className="project-card-measure-inner"> <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ + metric: { key: 'bugs', type: 'SHORT_INT' }, + value: measures['bugs'] + }} + /> <Rating value={measures['reliability_rating']} /> </div> - <div className="project-card-measure-label">{translate('metric_domain.Reliability')}</div> + <div className="project-card-measure-label-with-icon"> + <BugIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.bugs.name')} + </div> </div> </div> - <div className="project-card-measure smaller-card" data-key="security_rating"> + <div className="project-card-measure" data-key="security_rating"> <div className="project-card-measure-inner"> <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ + metric: { key: 'vulnerabilities', type: 'SHORT_INT' }, + value: measures['vulnerabilities'] + }} + /> <Rating value={measures['security_rating']} /> </div> - <div className="project-card-measure-label">{translate('metric_domain.Security')}</div> + <div className="project-card-measure-label-with-icon"> + <VulnerabilityIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.vulnerabilities.name')} + </div> </div> </div> <div className="project-card-measure" data-key="sqale_rating"> <div className="project-card-measure-inner"> <div className="project-card-measure-number"> + <Measure + className="spacer-right" + measure={{ + metric: { key: 'code_smells', type: 'SHORT_INT' }, + value: measures['code_smells'] + }} + /> <Rating value={measures['sqale_rating']} /> </div> - <div className="project-card-measure-label"> - {translate('metric_domain.Maintainability')} + <div className="project-card-measure-label-with-icon"> + <CodeSmellIcon className="little-spacer-right vertical-bottom" /> + {translate('metric.code_smells.name')} </div> </div> </div> @@ -107,7 +138,7 @@ export default function ProjectCardOverallMeasures({ measures }: Props) { </div> {measures['ncloc'] != null && ( - <div className="project-card-measure pull-right" data-key="ncloc"> + <div className="project-card-measure project-card-ncloc" data-key="ncloc"> <div className="project-card-measure-inner pull-right"> <div className="project-card-measure-number"> <span className="spacer-right"> diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx index ef032d7568f..6ac1cc680cb 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectCardOverallMeasures-test.tsx @@ -24,12 +24,15 @@ import ProjectCardOverallMeasures from '../ProjectCardOverallMeasures'; it('should render correctly with all data', () => { const measures = { alert_status: 'ERROR', + bugs: '17', + code_smells: '132', coverage: '88.3', duplicated_lines_density: '9.8', ncloc: '2053', reliability_rating: '1.0', security_rating: '1.0', - sqale_rating: '1.0' + sqale_rating: '1.0', + vulnerabilities: '0' }; const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />); expect(wrapper).toMatchSnapshot(); @@ -38,11 +41,14 @@ it('should render correctly with all data', () => { it('should not render coverage', () => { const measures = { alert_status: 'ERROR', + bugs: '17', + code_smells: '132', duplicated_lines_density: '9.8', ncloc: '2053', reliability_rating: '1.0', security_rating: '1.0', - sqale_rating: '1.0' + sqale_rating: '1.0', + vulnerabilities: '0' }; const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />); expect(wrapper.find('[data-key="coverage"]')).toMatchSnapshot(); @@ -51,11 +57,14 @@ it('should not render coverage', () => { it('should not render duplications', () => { const measures = { alert_status: 'ERROR', + bugs: '17', + code_smells: '132', coverage: '88.3', ncloc: '2053', reliability_rating: '1.0', security_rating: '1.0', - sqale_rating: '1.0' + sqale_rating: '1.0', + vulnerabilities: '0' }; const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />); expect(wrapper.find('[data-key="duplicated_lines_density"]')).toMatchSnapshot(); @@ -64,11 +73,14 @@ it('should not render duplications', () => { it('should not render ncloc', () => { const measures = { alert_status: 'ERROR', + bugs: '17', + code_smells: '132', coverage: '88.3', duplicated_lines_density: '9.8', reliability_rating: '1.0', security_rating: '1.0', - sqale_rating: '1.0' + sqale_rating: '1.0', + vulnerabilities: '0' }; const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />); expect(wrapper.find('[data-key="ncloc"]').length).toBe(0); @@ -77,12 +89,15 @@ it('should not render ncloc', () => { it('should render ncloc correctly', () => { const measures = { alert_status: 'ERROR', + bugs: '17', + code_smells: '132', coverage: '88.3', ncloc: '16549887', duplicated_lines_density: '9.8', reliability_rating: '1.0', security_rating: '1.0', - sqale_rating: '1.0' + sqale_rating: '1.0', + vulnerabilities: '0' }; const wrapper = shallow(<ProjectCardOverallMeasures measures={measures} />); expect(wrapper.find('[data-key="ncloc"]')).toMatchSnapshot(); diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap index 9d82c53b036..0ccdace41b1 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardLeakMeasures-test.tsx.snap @@ -171,7 +171,7 @@ exports[`should render correctly with all data 1`] = ` </div> </div> <div - className="project-card-measure smaller-card pull-right" + className="project-card-measure smaller-card project-card-ncloc" data-key="new_lines" > <div @@ -373,7 +373,7 @@ exports[`should render no data style new coverage, new duplications and new line </div> </div> <div - className="project-card-measure smaller-card pull-right" + className="project-card-measure smaller-card project-card-ncloc" data-key="new_lines" > <div diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap index 341a634b69a..c9e88821373 100644 --- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/ProjectCardOverallMeasures-test.tsx.snap @@ -78,19 +78,34 @@ exports[`should render correctly with all data 1`] = ` <div className="project-card-measure-number" > + <Measure + className="spacer-right" + measure={ + Object { + "metric": Object { + "key": "bugs", + "type": "SHORT_INT", + }, + "value": "17", + } + } + /> <Rating value="1.0" /> </div> <div - className="project-card-measure-label" + className="project-card-measure-label-with-icon" > - metric_domain.Reliability + <BugIcon + className="little-spacer-right vertical-bottom" + /> + metric.bugs.name </div> </div> </div> <div - className="project-card-measure smaller-card" + className="project-card-measure" data-key="security_rating" > <div @@ -99,14 +114,29 @@ exports[`should render correctly with all data 1`] = ` <div className="project-card-measure-number" > + <Measure + className="spacer-right" + measure={ + Object { + "metric": Object { + "key": "vulnerabilities", + "type": "SHORT_INT", + }, + "value": "0", + } + } + /> <Rating value="1.0" /> </div> <div - className="project-card-measure-label" + className="project-card-measure-label-with-icon" > - metric_domain.Security + <VulnerabilityIcon + className="little-spacer-right vertical-bottom" + /> + metric.vulnerabilities.name </div> </div> </div> @@ -120,14 +150,29 @@ exports[`should render correctly with all data 1`] = ` <div className="project-card-measure-number" > + <Measure + className="spacer-right" + measure={ + Object { + "metric": Object { + "key": "code_smells", + "type": "SHORT_INT", + }, + "value": "132", + } + } + /> <Rating value="1.0" /> </div> <div - className="project-card-measure-label" + className="project-card-measure-label-with-icon" > - metric_domain.Maintainability + <CodeSmellIcon + className="little-spacer-right vertical-bottom" + /> + metric.code_smells.name </div> </div> </div> @@ -204,7 +249,7 @@ exports[`should render correctly with all data 1`] = ` </div> </div> <div - className="project-card-measure pull-right" + className="project-card-measure project-card-ncloc" data-key="ncloc" > <div @@ -244,7 +289,7 @@ exports[`should render correctly with all data 1`] = ` exports[`should render ncloc correctly 1`] = ` <div - className="project-card-measure pull-right" + className="project-card-measure project-card-ncloc" data-key="ncloc" > <div diff --git a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx index d4f71d0f4c6..0e3a09d8d9c 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/MaintainabilityFilter.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import IssuesFilter from './IssuesFilter'; import { Facet } from '../types'; +import CodeSmellIcon from '../../../components/icons-components/CodeSmellIcon'; +import { translate } from '../../../helpers/l10n'; interface Props { className?: string; @@ -33,5 +35,19 @@ interface Props { } export default function MaintainabilityFilter(props: Props) { - return <IssuesFilter {...props} name="Maintainability" property="maintainability" />; + return ( + <IssuesFilter + {...props} + headerDetail={ + <span className="note little-spacer-left"> + {'('} + <CodeSmellIcon className="little-spacer-right" /> + {translate('metric.code_smells.name')} + {' )'} + </span> + } + name="Maintainability" + property="maintainability" + /> + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx index 77ab08dc006..56f71586862 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/ReliabilityFilter.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import IssuesFilter from './IssuesFilter'; import { Facet } from '../types'; +import BugIcon from '../../../components/icons-components/BugIcon'; +import { translate } from '../../../helpers/l10n'; interface Props { className?: string; @@ -33,5 +35,19 @@ interface Props { } export default function ReliabilityFilter(props: Props) { - return <IssuesFilter {...props} name="Reliability" property="reliability" />; + return ( + <IssuesFilter + {...props} + headerDetail={ + <span className="note little-spacer-left"> + {'('} + <BugIcon className="little-spacer-right" /> + {translate('metric.bugs.name')} + {' )'} + </span> + } + name="Reliability" + property="reliability" + /> + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx index 262573864c5..4fbad543cf2 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx +++ b/server/sonar-web/src/main/js/apps/projects/filters/SecurityFilter.tsx @@ -20,6 +20,8 @@ import * as React from 'react'; import IssuesFilter from './IssuesFilter'; import { Facet } from '../types'; +import VulnerabilityIcon from '../../../components/icons-components/VulnerabilityIcon'; +import { translate } from '../../../helpers/l10n'; interface Props { className?: string; @@ -33,5 +35,19 @@ interface Props { } export default function SecurityFilter(props: Props) { - return <IssuesFilter {...props} name="Security" property="security" />; + return ( + <IssuesFilter + {...props} + headerDetail={ + <span className="note little-spacer-left"> + {'('} + <VulnerabilityIcon className="little-spacer-right" /> + {translate('metric.vulnerabilities.name')} + {' )'} + </span> + } + name="Security" + property="security" + /> + ); } diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap index ef3d9057b14..bf53d3df2a0 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/MaintainabilityFilter-test.tsx.snap @@ -2,6 +2,18 @@ exports[`renders 1`] = ` <IssuesFilter + headerDetail={ + <span + className="note little-spacer-left" + > + ( + <CodeSmellIcon + className="little-spacer-right" + /> + metric.code_smells.name + ) + </span> + } name="Maintainability" property="maintainability" query={Object {}} diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap index 4494914b160..00c4db1716b 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/ReliabilityFilter-test.tsx.snap @@ -2,6 +2,18 @@ exports[`renders 1`] = ` <IssuesFilter + headerDetail={ + <span + className="note little-spacer-left" + > + ( + <BugIcon + className="little-spacer-right" + /> + metric.bugs.name + ) + </span> + } name="Reliability" property="reliability" query={Object {}} diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap index 7142354de29..bc4c098e76e 100644 --- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/__snapshots__/SecurityFilter-test.tsx.snap @@ -2,6 +2,18 @@ exports[`renders 1`] = ` <IssuesFilter + headerDetail={ + <span + className="note little-spacer-left" + > + ( + <VulnerabilityIcon + className="little-spacer-right" + /> + metric.vulnerabilities.name + ) + </span> + } name="Security" property="security" query={Object {}} 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 fd464b6618c..615d31ae40a 100644 --- a/server/sonar-web/src/main/js/apps/projects/styles.css +++ b/server/sonar-web/src/main/js/apps/projects/styles.css @@ -84,11 +84,13 @@ } .project-card-measures { + display: flex; padding-top: 8px; margin: 0 -15px; } .project-card-leak-measures { + display: flex; padding: 8px 0; margin: 4px -4px; background-color: #fbf3d5; @@ -132,18 +134,6 @@ content: ''; } -.project-card-measure.pull-right { - text-align: right; -} - -.project-card-measure.pull-right:before { - display: none; -} - -.project-card-measure.pull-right .project-card-measure-inner { - text-align: right; -} - .project-card-measure .level { margin-top: 0; margin-bottom: 0; @@ -170,6 +160,19 @@ font-size: 12px; } +.project-card-ncloc { + margin-left: auto; + text-align: right; +} + +.project-card-ncloc:before { + display: none; +} + +.project-card-ncloc .project-card-measure-inner { + text-align: right; +} + .project-card-languages { display: inline-block; max-width: 120px; diff --git a/server/sonar-web/src/main/js/apps/projects/utils.ts b/server/sonar-web/src/main/js/apps/projects/utils.ts index 8b99d5ee803..30f46344a6f 100644 --- a/server/sonar-web/src/main/js/apps/projects/utils.ts +++ b/server/sonar-web/src/main/js/apps/projects/utils.ts @@ -86,8 +86,11 @@ const PAGE_SIZE_VISUALIZATIONS = 99; const METRICS = [ 'alert_status', + 'bugs', 'reliability_rating', + 'vulnerabilities', 'security_rating', + 'code_smells', 'sqale_rating', 'duplicated_lines_density', 'coverage', |