From 6f1a53f106d2c658996f4b7a6a6e1e493b653c86 Mon Sep 17 00:00:00 2001 From: Grégoire Aubert Date: Wed, 12 Jul 2017 14:34:59 +0200 Subject: SONAR-9403 Change style of metrics with no historical data in the custom graph legend --- .../components/GraphsLegendCustom.js | 32 +++++++++++++---- .../projectActivity/components/GraphsLegendItem.js | 27 +++++++++------ .../__tests__/GraphsLegendCustom-test.js | 9 +++-- .../components/__tests__/GraphsLegendItem-test.js | 8 +++++ .../__snapshots__/GraphsLegendCustom-test.js.snap | 26 +++++++++----- .../__snapshots__/GraphsLegendItem-test.js.snap | 11 ++++++ .../projectActivity/components/projectActivity.css | 7 +++- .../src/main/js/apps/projectActivity/utils.js | 2 ++ .../components/icons-components/AlertWarnIcon.js | 40 ++++++++++++++++++++++ 9 files changed, 134 insertions(+), 28 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.js (limited to 'server/sonar-web') diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendCustom.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendCustom.js index e0236cb4e2f..540bb65961a 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendCustom.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendCustom.js @@ -19,6 +19,9 @@ */ import React from 'react'; import GraphsLegendItem from './GraphsLegendItem'; +import Tooltip from '../../../components/controls/Tooltip'; +import { hasDataValues } from '../utils'; +import { translate } from '../../../helpers/l10n'; import type { Metric } from '../types'; type Props = { @@ -32,14 +35,31 @@ export default function GraphsLegendCustom({ metrics, removeMetric, series }: Pr
{series.map(serie => { const metric = metrics.find(metric => metric.key === serie.name); + const hasData = hasDataValues(serie); + const legendItem = ( + + ); + if (!hasData) { + return ( + + + {legendItem} + + + ); + } return ( - + {legendItem} ); })} diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.js b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.js index 79d294505c0..a458455a85c 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/GraphsLegendItem.js @@ -17,15 +17,18 @@ * 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 classNames from 'classnames'; -import CloseIcon from '../../../components/icons-components/CloseIcon'; +import AlertWarnIcon from '../../../components/icons-components/AlertWarnIcon'; import ChartLegendIcon from '../../../components/icons-components/ChartLegendIcon'; +import CloseIcon from '../../../components/icons-components/CloseIcon'; type Props = { className?: string, metric: string, name: string, + showWarning?: boolean, style: string, removeMetric?: string => void }; @@ -35,26 +38,30 @@ export default class GraphsLegendItem extends React.PureComponent { handleClick = (e: Event) => { e.preventDefault(); - this.props.removeMetric(this.props.metric); + if (this.props.removeMetric) { + this.props.removeMetric(this.props.metric); + } }; render() { const isActionable = this.props.removeMetric != null; const legendClass = classNames( { - 'project-activity-graph-legend-actionable': isActionable + 'project-activity-graph-legend-actionable': isActionable, + 'alert-warning': this.props.showWarning }, this.props.className ); - return ( - + {this.props.showWarning + ? + : } {this.props.name} {isActionable && diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendCustom-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendCustom-test.js index 9b785f2213b..c115f0b5f13 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendCustom-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendCustom-test.js @@ -22,8 +22,13 @@ import { shallow } from 'enzyme'; import GraphsLegendCustom from '../GraphsLegendCustom'; const SERIES = [ - { name: 'bugs', translatedName: 'Bugs', style: '2', data: [] }, - { name: 'my_metric', translatedName: 'metric.my_metric.name', style: '1', data: [] }, + { name: 'bugs', translatedName: 'Bugs', style: '2', data: [{ x: 1, y: 1 }] }, + { + name: 'my_metric', + translatedName: 'metric.my_metric.name', + style: '1', + data: [{ x: 1, y: 1 }] + }, { name: 'foo', translatedName: 'Foo', style: '0', data: [] } ]; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendItem-test.js b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendItem-test.js index a000a1dec04..5a0af033764 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendItem-test.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/GraphsLegendItem-test.js @@ -38,3 +38,11 @@ it('should render correctly an actionable legend', () => { ) ).toMatchSnapshot(); }); + +it('should render correctly legends with warning', () => { + expect( + shallow( + + ) + ).toMatchSnapshot(); +}); diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendCustom-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendCustom-test.js.snap index b19b8e8e654..d90f7a6843d 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendCustom-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendCustom-test.js.snap @@ -11,6 +11,7 @@ exports[`should render correctly the list of series 1`] = ` metric="bugs" name="Bugs" removeMetric={[Function]} + showWarning={false} style="2" /> @@ -21,18 +22,25 @@ exports[`should render correctly the list of series 1`] = ` metric="my_metric" name="My Metric" removeMetric={[Function]} + showWarning={false} style="1" /> - - - + + + +
`; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.js.snap b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.js.snap index 84dc737ae03..1c660cd406e 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.js.snap +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/__snapshots__/GraphsLegendItem-test.js.snap @@ -30,3 +30,14 @@ exports[`should render correctly an actionable legend 1`] = ` `; + +exports[`should render correctly legends with warning 1`] = ` + + + Foo + +`; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css index 4bec19f63e2..a42cbc13f2e 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css +++ b/server/sonar-web/src/main/js/apps/projectActivity/components/projectActivity.css @@ -65,10 +65,15 @@ .project-activity-graph-legend-actionable { padding: 4px 12px; - border: 1px solid #e6e6e6; + border-width: 1px; + border-style: solid; border-radius: 12px; } +.project-activity-graph-legend-actionable:not(.alert-warning) { + border-color: #e6e6e6; +} + .project-activity-graph-tooltip { padding: 8px; pointer-events: none; diff --git a/server/sonar-web/src/main/js/apps/projectActivity/utils.js b/server/sonar-web/src/main/js/apps/projectActivity/utils.js index 6ea4c782138..83f5960b6e7 100644 --- a/server/sonar-web/src/main/js/apps/projectActivity/utils.js +++ b/server/sonar-web/src/main/js/apps/projectActivity/utils.js @@ -65,6 +65,8 @@ export const datesQueryChanged = (prevQuery: Query, nextQuery: Query): boolean = return previousFrom !== nextFrom || previousTo !== nextTo; }; +export const hasDataValues = (serie: Serie) => serie.data.some(point => point.y || point.y === 0); + export const hasHistoryData = (series: Array) => series.some(serie => serie.data && serie.data.length > 2); diff --git a/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.js b/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.js new file mode 100644 index 00000000000..3ecabfa4c5a --- /dev/null +++ b/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.js @@ -0,0 +1,40 @@ +/* + * 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'; + +type Props = { className?: string, size?: number }; + +export default function AlertWarnIcon({ className, size = 16 }: Props) { + /* eslint-disable max-len */ + return ( + + + + ); +} -- cgit v1.2.3