From 6f1a53f106d2c658996f4b7a6a6e1e493b653c86 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Wed, 12 Jul 2017 14:34:59 +0200 Subject: [PATCH] SONAR-9403 Change style of metrics with no historical data in the custom graph legend --- .../components/GraphsLegendCustom.js | 32 ++++++++++++--- .../components/GraphsLegendItem.js | 27 ++++++++----- .../__tests__/GraphsLegendCustom-test.js | 9 ++++- .../__tests__/GraphsLegendItem-test.js | 8 ++++ .../GraphsLegendCustom-test.js.snap | 26 +++++++----- .../GraphsLegendItem-test.js.snap | 11 +++++ .../components/projectActivity.css | 7 +++- .../src/main/js/apps/projectActivity/utils.js | 2 + .../icons-components/AlertWarnIcon.js | 40 +++++++++++++++++++ .../resources/org/sonar/l10n/core.properties | 3 +- 10 files changed, 136 insertions(+), 29 deletions(-) create mode 100644 server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.js 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 ( + + + + ); +} diff --git a/sonar-core/src/main/resources/org/sonar/l10n/core.properties b/sonar-core/src/main/resources/org/sonar/l10n/core.properties index 62dedb13419..6b132ffad97 100644 --- a/sonar-core/src/main/resources/org/sonar/l10n/core.properties +++ b/sonar-core/src/main/resources/org/sonar/l10n/core.properties @@ -1292,7 +1292,8 @@ project_activity.graphs.custom=Custom project_activity.graphs.custom.add=Add metric project_activity.graphs.custom.add_metric=Add a metric project_activity.graphs.custom.add_metric_info=Only 3 metrics of the same type can be displayed on the graph. -project_activity.graphs.custom.no_history=There is no historical data to show, please add more metrics to your graph. +project_activity.graphs.custom.no_history=There is no historical data to display, please add more metrics to your graph. +project_activity.graphs.custom.metric_no_history=This metric has no historical data to display. project_activity.graphs.custom.search=Search for a metric by name project_activity.graphs.custom.type_x_message=Only "{0}" metrics are available with your current selection. -- 2.39.5