* 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 moment from 'moment';
import QualityGate from '../qualityGate/QualityGate';
import Duplications from '../main/Duplications';
import Meta from './../meta/Meta';
import { getMeasuresAndMeta } from '../../../api/measures';
-import { getTimeMachineData } from '../../../api/time-machine';
+import { getAllTimeMachineData } from '../../../api/time-machine';
import { enhanceMeasuresWithMetrics } from '../../../helpers/measures';
import { getLeakPeriod } from '../../../helpers/periods';
-import { ComponentType } from '../propTypes';
import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import { getGraph } from '../../../helpers/storage';
+import { METRICS, HISTORY_METRICS_LIST } from '../utils';
+import { GRAPHS_METRICS } from '../../projectActivity/utils';
+import type { Component, History, MeasuresList, Period } from '../types';
import '../styles.css';
-const METRICS = [
- // quality gate
- 'alert_status',
- 'quality_gate_details',
-
- // bugs
- 'bugs',
- 'new_bugs',
- 'reliability_rating',
- 'new_reliability_rating',
-
- // vulnerabilities
- 'vulnerabilities',
- 'new_vulnerabilities',
- 'security_rating',
- 'new_security_rating',
-
- // code smells
- 'code_smells',
- 'new_code_smells',
- 'sqale_rating',
- 'new_maintainability_rating',
- 'sqale_index',
- 'new_technical_debt',
-
- // coverage
- 'coverage',
- 'new_coverage',
- 'new_lines_to_cover',
- 'tests',
-
- // duplications
- 'duplicated_lines_density',
- 'new_duplicated_lines_density',
- 'duplicated_blocks',
-
- // size
- 'ncloc',
- 'ncloc_language_distribution',
- 'new_lines'
-];
-
-const HISTORY_METRICS_LIST = ['sqale_index', 'duplicated_lines_density', 'ncloc', 'coverage'];
+type Props = {
+ component: Component
+};
-export default class OverviewApp extends React.PureComponent {
- static propTypes = {
- component: ComponentType.isRequired
- };
+type State = {
+ history?: History,
+ historyStartDate?: Date,
+ loading: boolean,
+ measures: MeasuresList,
+ periods?: Array<Period>
+};
- state = {
- loading: true
+export default class OverviewApp extends React.PureComponent {
+ mounted: boolean;
+ props: Props;
+ state: State = {
+ loading: true,
+ measures: []
};
componentDidMount() {
this.mounted = true;
- document.querySelector('html').classList.add('dashboard-page');
+ const domElement = document.querySelector('html');
+ if (domElement) {
+ domElement.classList.add('dashboard-page');
+ }
this.loadMeasures(this.props.component.key).then(() => this.loadHistory(this.props.component));
}
- componentDidUpdate(prevProps) {
+ componentDidUpdate(prevProps: Props) {
if (this.props.component.key !== prevProps.component.key) {
this.loadMeasures(this.props.component.key).then(() =>
this.loadHistory(this.props.component)
componentWillUnmount() {
this.mounted = false;
- document.querySelector('html').classList.remove('dashboard-page');
+ const domElement = document.querySelector('html');
+ if (domElement) {
+ domElement.classList.remove('dashboard-page');
+ }
}
- loadMeasures(componentKey) {
+ loadMeasures(componentKey: string) {
this.setState({ loading: true });
return getMeasuresAndMeta(componentKey, METRICS, {
});
}
- loadHistory(component) {
- return getTimeMachineData(component.key, HISTORY_METRICS_LIST).then(r => {
+ loadHistory(component: Component) {
+ const metrics = HISTORY_METRICS_LIST.concat(GRAPHS_METRICS[getGraph()]);
+ return getAllTimeMachineData(component.key, metrics).then(r => {
if (this.mounted) {
- const history = {};
+ const history: History = {};
r.measures.forEach(measure => {
const measureHistory = measure.history.map(analysis => ({
date: moment(analysis.date).toDate(),
</div>
<div className="page-sidebar-fixed">
- <Meta component={component} measures={measures} />
+ <Meta component={component} history={history} measures={measures} />
</div>
</div>
</div>
import React from 'react';
import { Link } from 'react-router';
import Analysis from './Analysis';
+import PreviewGraph from './PreviewGraph';
import throwGlobalError from '../../../app/utils/throwGlobalError';
+import { getMetrics } from '../../../api/metrics';
import { getProjectActivity } from '../../../api/projectActivity';
import { translate } from '../../../helpers/l10n';
import type { Analysis as AnalysisType } from '../../projectActivity/types';
+import type { History, Metric } from '../types';
type Props = {
+ history: History,
project: string
};
type State = {
analyses: Array<AnalysisType>,
- loading: boolean
+ loading: boolean,
+ metrics: Array<Metric>
};
const PAGE_SIZE = 5;
export default class AnalysesList extends React.PureComponent {
mounted: boolean;
props: Props;
- state: State = { analyses: [], loading: true };
+ state: State = { analyses: [], loading: true, metrics: [] };
componentDidMount() {
this.mounted = true;
fetchData() {
this.setState({ loading: true });
- getProjectActivity({ project: this.props.project, ps: PAGE_SIZE }).then(({ analyses }) => {
+ Promise.all([
+ getProjectActivity({ project: this.props.project, ps: PAGE_SIZE }),
+ getMetrics()
+ ]).then(response => {
if (this.mounted) {
- this.setState({ analyses, loading: false });
+ this.setState({ analyses: response[0].analyses, metrics: response[1], loading: false });
}
}, throwGlobalError);
}
{translate('project_activity.page')}
</h4>
+ <PreviewGraph
+ history={this.props.history}
+ project={this.props.project}
+ metrics={this.state.metrics}
+ />
+
{this.renderList(analyses)}
<div className="spacer-top small">
* 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 Events from '../../projectActivity/components/Events';
+import { sortBy } from 'lodash';
+import Event from './Event';
import FormattedDate from '../../../components/ui/FormattedDate';
import { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
import { translate } from '../../../helpers/l10n';
-import type { Analysis as AnalysisType } from '../../projectActivity/types';
+import type { Analysis as AnalysisType, Event as EventType } from '../../projectActivity/types';
export default function Analysis(props: { analysis: AnalysisType }) {
const { analysis } = props;
+ const sortedEvents: Array<EventType> = sortBy(
+ analysis.events,
+ // versions first
+ (event: EventType) => (event.category === 'VERSION' ? 0 : 1),
+ // then the rest sorted by category
+ 'category'
+ );
return (
<TooltipsContainer>
</strong>
</div>
- {analysis.events.length > 0
- ? <Events events={analysis.events} canAdmin={false} />
+ {sortedEvents.length > 0
+ ? <div className="project-activity-events">
+ {sortedEvents.map(event => <Event event={event} key={event.key} />)}
+ </div>
: <span className="note">{translate('project_activity.project_analyzed')}</span>}
</li>
</TooltipsContainer>
--- /dev/null
+/*
+ * 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 { TooltipsContainer } from '../../../components/mixins/tooltips-mixin';
+import type { Event as EventType } from '../../projectActivity/types';
+import { translate } from '../../../helpers/l10n';
+
+export default function Event(props: { event: EventType }) {
+ const { event } = props;
+
+ if (event.category === 'VERSION') {
+ return <span className="overview-analysis-event badge">{props.event.name}</span>;
+ }
+
+ return (
+ <div className="overview-analysis-event">
+ <TooltipsContainer>
+ <span>
+ <span className="note">{translate('event.category', event.category)}:</span>
+ {' '}
+ <strong title={event.description} data-toggle="tooltip">{event.name}</strong>
+ </span>
+ </TooltipsContainer>
+ </div>
+ );
+}
--- /dev/null
+/*
+ * 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 { map } from 'lodash';
+import { Link } from 'react-router';
+import { AutoSizer } from 'react-virtualized';
+import { generateSeries, GRAPHS_METRICS } from '../../projectActivity/utils';
+import { getGraph } from '../../../helpers/storage';
+import AdvancedTimeline from '../../../components/charts/AdvancedTimeline';
+import type { Serie } from '../../../components/charts/AdvancedTimeline';
+import type { History, Metric } from '../types';
+
+type Props = {
+ history: History,
+ metrics: Array<Metric>,
+ project: string
+};
+
+type State = {
+ graph: string,
+ metricsType: string,
+ series: Array<Serie>
+};
+
+export default class PreviewGraph extends React.PureComponent {
+ props: Props;
+ state: State;
+
+ constructor(props: Props) {
+ super(props);
+ const graph = getGraph();
+ const metricsType = this.getMetricType(props.metrics, graph);
+ this.state = {
+ graph,
+ metricsType,
+ series: this.getSeries(props.history, graph, metricsType)
+ };
+ }
+
+ componentWillReceiveProps(nextProps: Props) {
+ if (nextProps.history !== this.props.history || nextProps.metrics !== this.props.metrics) {
+ const graph = getGraph();
+ const metricsType = this.getMetricType(nextProps.metrics, graph);
+ this.setState({
+ graph,
+ metricsType,
+ series: this.getSeries(nextProps.history, graph, metricsType)
+ });
+ }
+ }
+
+ getSeries = (history: History, graph: string, metricsType: string): Array<Serie> => {
+ const measureHistory = map(history, (item, key) => ({
+ metric: key,
+ history: item.filter(p => p.value != null)
+ })).filter(item => GRAPHS_METRICS[graph].indexOf(item.metric) >= 0);
+ return generateSeries(measureHistory, graph, metricsType);
+ };
+
+ getMetricType = (metrics: Array<Metric>, graph: string) => {
+ const metricKey = GRAPHS_METRICS[graph][0];
+ const metric = metrics.find(metric => metric.key === metricKey);
+ return metric ? metric.type : 'INT';
+ };
+
+ render() {
+ return (
+ <div className="big-spacer-bottom spacer-top">
+ <Link
+ className="overview-analysis-graph"
+ to={{ pathname: '/project/activity', query: { id: this.props.project } }}>
+ <AutoSizer disableHeight={true}>
+ {({ width }) => (
+ <AdvancedTimeline
+ endDate={null}
+ startDate={null}
+ height={80}
+ width={width}
+ hideGrid={true}
+ hideXAxis={true}
+ interpolate="linear"
+ metricType={this.state.metricsType}
+ padding={[4, 0, 4, 0]}
+ series={this.state.series}
+ showAreas={['coverage', 'duplications'].includes(this.state.graph)}
+ />
+ )}
+ </AutoSizer>
+ </Link>
+ </div>
+ );
+ }
+}
--- /dev/null
+/*
+ * 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 { shallow } from 'enzyme';
+import Analysis from '../Analysis';
+
+const ANALYSIS = {
+ key: '1',
+ date: '2017-06-10T16:10:59+0200',
+ events: [
+ { key: '1', category: 'OTHER', name: 'test' },
+ { key: '2', category: 'VERSION', name: '6.5-SNAPSHOT' }
+ ]
+};
+
+it('should sort the events with version first', () => {
+ expect(shallow(<Analysis analysis={ANALYSIS} />)).toMatchSnapshot();
+});
--- /dev/null
+/*
+ * 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 { shallow } from 'enzyme';
+import Event from '../Event';
+
+const EVENT = { key: '1', category: 'OTHER', name: 'test' };
+const VERSION = { key: '2', category: 'VERSION', name: '6.5-SNAPSHOT' };
+
+it('should render an event correctly', () => {
+ expect(shallow(<Event event={EVENT} />)).toMatchSnapshot();
+});
+
+it('should render a version correctly', () => {
+ expect(shallow(<Event event={VERSION} />)).toMatchSnapshot();
+});
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should sort the events with version first 1`] = `
+<TooltipsContainer>
+ <li
+ className="overview-analysis"
+ >
+ <div
+ className="small little-spacer-bottom"
+ >
+ <strong>
+ <FormattedDate
+ date="2017-06-10T16:10:59+0200"
+ format="LL"
+ />
+ </strong>
+ </div>
+ <div
+ className="project-activity-events"
+ >
+ <Event
+ event={
+ Object {
+ "category": "VERSION",
+ "key": "2",
+ "name": "6.5-SNAPSHOT",
+ }
+ }
+ />
+ <Event
+ event={
+ Object {
+ "category": "OTHER",
+ "key": "1",
+ "name": "test",
+ }
+ }
+ />
+ </div>
+ </li>
+</TooltipsContainer>
+`;
--- /dev/null
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render a version correctly 1`] = `
+<span
+ className="overview-analysis-event badge"
+>
+ 6.5-SNAPSHOT
+</span>
+`;
+
+exports[`should render an event correctly 1`] = `
+<div
+ className="overview-analysis-event"
+>
+ <TooltipsContainer>
+ <span>
+ <span
+ className="note"
+ >
+ event.category.OTHER
+ :
+ </span>
+
+ <strong
+ data-toggle="tooltip"
+ >
+ test
+ </strong>
+ </span>
+ </TooltipsContainer>
+</div>
+`;
import MetaTags from './MetaTags';
import { areThereCustomOrganizations } from '../../../store/rootReducer';
-const Meta = ({ component, measures, areThereCustomOrganizations }) => {
+const Meta = ({ component, history, measures, areThereCustomOrganizations }) => {
const { qualifier, description, qualityProfiles, qualityGate } = component;
const isProject = qualifier === 'TRK';
{shouldShowOrganizationKey && <MetaOrganizationKey component={component} />}
- {isProject && <AnalysesList project={component.key} />}
+ {isProject && <AnalysesList project={component.key} history={history} />}
</div>
);
};
border-top: 1px solid #e6e6e6;
}
+.overview-analysis-graph {
+ display: block;
+ outline: none;
+ border: none;
+}
+
+.overview-analysis-event {}
+
+.overview-analysis-event.badge {
+ vertical-align: middle;
+ padding: 4px 14px;
+ border-radius: 2px;
+ font-weight: bold;
+ font-size: 12px;
+ letter-spacing: 0;
+}
+
+.overview-analysis-event + .overview-analysis-event {
+ margin-top: 4px;
+}
+
/*
* Other
*/
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
//@flow
+
export type Component = {
id: string,
key: string,
qualifier: string
};
+export type History = { [string]: Array<{ date: Date, value: string }> };
+
export type Metric = {
key: string,
name: string,
--- /dev/null
+/*
+ * 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
+
+export const METRICS = [
+ // quality gate
+ 'alert_status',
+ 'quality_gate_details',
+
+ // bugs
+ 'bugs',
+ 'new_bugs',
+ 'reliability_rating',
+ 'new_reliability_rating',
+
+ // vulnerabilities
+ 'vulnerabilities',
+ 'new_vulnerabilities',
+ 'security_rating',
+ 'new_security_rating',
+
+ // code smells
+ 'code_smells',
+ 'new_code_smells',
+ 'sqale_rating',
+ 'new_maintainability_rating',
+ 'sqale_index',
+ 'new_technical_debt',
+
+ // coverage
+ 'coverage',
+ 'new_coverage',
+ 'new_lines_to_cover',
+ 'tests',
+
+ // duplications
+ 'duplicated_lines_density',
+ 'new_duplicated_lines_density',
+ 'duplicated_blocks',
+
+ // size
+ 'ncloc',
+ 'ncloc_language_distribution',
+ 'new_lines'
+];
+
+export const HISTORY_METRICS_LIST = [
+ 'sqale_index',
+ 'duplicated_lines_density',
+ 'ncloc',
+ 'coverage'
+];
*/
// @flow
import React from 'react';
-import { sortBy } from 'lodash';
import Event from './Event';
+import './projectActivity.css';
import type { Event as EventType } from '../types';
type Props = {
- analysis: string,
- canAdmin: boolean,
- changeEvent: (event: string, name: string) => Promise<*>,
- deleteEvent: (analysis: string, event: string) => Promise<*>,
+ analysis?: string,
+ canAdmin?: boolean,
+ changeEvent?: (event: string, name: string) => Promise<*>,
+ deleteEvent?: (analysis: string, event: string) => Promise<*>,
events: Array<EventType>,
- isFirst: boolean
+ isFirst?: boolean
};
export default function Events(props: Props) {
- const sortedEvents: Array<EventType> = sortBy(
- props.events,
- // versions last
- (event: EventType) => (event.category === 'VERSION' ? 1 : 0),
- // then the rest sorted by category
- 'category'
- );
-
return (
<div className="project-activity-events">
- {sortedEvents.map(event => (
+ {props.events.map(event => (
<Event
analysis={props.analysis}
canAdmin={props.canAdmin}
deleteEvent={props.deleteEvent}
isFirst={analysis.key === firstAnalysisKey}
key={analysis.key}
+ version={version.version}
/>
))}
</ul>
addCustomEvent: (analysis: string, name: string, category?: string) => Promise<*>,
addVersion: (analysis: string, version: string) => Promise<*>,
analysis: Analysis,
+ canAdmin: boolean,
changeEvent: (event: string, name: string) => Promise<*>,
deleteAnalysis: (analysis: string) => Promise<*>,
deleteEvent: (analysis: string, event: string) => Promise<*>,
isFirst: boolean,
- canAdmin: boolean
+ version: ?string
};
export default function ProjectActivityAnalysis(props: Props) {
const { date, events } = props.analysis;
const { isFirst, canAdmin } = props;
- const version = events.find(event => event.category === 'VERSION');
-
return (
<li className="project-activity-analysis clearfix">
<div className="project-activity-time spacer-right">
<i className="icon-dropdown" />
</button>
<ul className="dropdown-menu dropdown-menu-right">
- {version == null &&
+ {props.version == null &&
<li>
<AddEventForm
addEvent={props.addVersion}
);
// if there is no filter, but there are saved preferences in the localStorage
- return !filtered && getGraph();
+ const graph = getGraph();
+ return !filtered && graph != null && graph !== 'overview';
}
};
import ProjectActivityGraphsHeader from './ProjectActivityGraphsHeader';
import GraphsZoom from './GraphsZoom';
import StaticGraphs from './StaticGraphs';
-import {
- GRAPHS_METRICS,
- datesQueryChanged,
- generateCoveredLinesMetric,
- historyQueryChanged
-} from '../utils';
-import { translate } from '../../../helpers/l10n';
+import { datesQueryChanged, generateSeries, historyQueryChanged } from '../utils';
import type { RawQuery } from '../../../helpers/query';
import type { Analysis, MeasureHistory, Query } from '../types';
import type { Serie } from '../../../components/charts/AdvancedTimeline';
constructor(props: Props) {
super(props);
- const series = this.getSeries(props.measuresHistory);
+ const series = generateSeries(props.measuresHistory, props.query.graph, props.metricsType);
this.state = {
graphStartDate: props.query.from || null,
graphEndDate: props.query.to || null,
nextProps.measuresHistory !== this.props.measuresHistory ||
historyQueryChanged(this.props.query, nextProps.query)
) {
- const series = this.getSeries(nextProps.measuresHistory);
- this.setState({ series });
+ this.setState({
+ series: generateSeries(
+ nextProps.measuresHistory,
+ nextProps.query.graph,
+ nextProps.metricsType
+ )
+ });
}
if (
nextProps.query !== this.props.query &&
}
}
- getSeries = (measuresHistory: Array<MeasureHistory>): Array<Serie> =>
- measuresHistory.map(measure => {
- if (measure.metric === 'uncovered_lines') {
- return generateCoveredLinesMetric(
- measure,
- measuresHistory,
- GRAPHS_METRICS[this.props.query.graph].indexOf(measure.metric)
- );
- }
- return {
- name: measure.metric,
- translatedName: translate('metric', measure.metric, 'name'),
- style: GRAPHS_METRICS[this.props.query.graph].indexOf(measure.metric),
- data: measure.history.map(analysis => ({
- x: analysis.date,
- y: this.props.metricsType === 'LEVEL' ? analysis.value : Number(analysis.value)
- }))
- };
- });
-
updateGraphZoom = (graphStartDate: ?Date, graphEndDate: ?Date) => {
if (graphEndDate != null && graphStartDate != null) {
const msDiff = Math.abs(graphEndDate.valueOf() - graphStartDate.valueOf());
formatYTick = tick => formatMeasure(tick, getShortType(this.props.metricsType));
- formatValue = value => formatMeasure(value, this.props.metricsType);
-
getEvents = () => {
const { analyses, eventFilter } = this.props;
const filteredEvents = analyses.reduce((acc, analysis) => {
return sortBy(filteredEvents, 'date');
};
- hasHistoryData = () => some(this.props.series, serie => serie.data && serie.data.length > 2);
+ hasSeriesData = () => some(this.props.series, serie => serie.data && serie.data.length > 2);
render() {
const { loading } = this.props;
);
}
- if (!this.hasHistoryData()) {
+ if (!this.hasSeriesData()) {
return (
<div className="project-activity-graph-container">
<div className="note text-center">
height={height}
width={width}
interpolate="linear"
- formatValue={this.formatValue}
formatYTick={this.formatYTick}
leakPeriodDate={this.props.leakPeriodDate}
metricType={this.props.metricsType}
*/
// @flow
import moment from 'moment';
+import { sortBy } from 'lodash';
import {
cleanQuery,
parseAsDate,
import { translate } from '../../helpers/l10n';
import type { Analysis, MeasureHistory, Query } from './types';
import type { RawQuery } from '../../helpers/query';
+import type { Serie } from '../../components/charts/AdvancedTimeline';
export const EVENT_TYPES = ['VERSION', 'QUALITY_GATE', 'QUALITY_PROFILE', 'OTHER'];
export const GRAPH_TYPES = ['overview', 'coverage', 'duplications', 'remediation'];
};
};
+export const generateSeries = (
+ measuresHistory: Array<MeasureHistory>,
+ graph: string,
+ dataType: string
+): Array<Serie> =>
+ measuresHistory.map(measure => {
+ if (measure.metric === 'uncovered_lines') {
+ return generateCoveredLinesMetric(
+ measure,
+ measuresHistory,
+ GRAPHS_METRICS[graph].indexOf(measure.metric)
+ );
+ }
+ return {
+ name: measure.metric,
+ translatedName: translate('metric', measure.metric, 'name'),
+ style: GRAPHS_METRICS[graph].indexOf(measure.metric),
+ data: measure.history.map(analysis => ({
+ x: analysis.date,
+ y: dataType === 'LEVEL' ? analysis.value : Number(analysis.value)
+ }))
+ };
+ });
+
export const getAnalysesByVersionByDay = (
analyses: Array<Analysis>
): Array<{
if (!currentVersion.byDay[day]) {
currentVersion.byDay[day] = [];
}
- currentVersion.byDay[day].push(analysis);
- const versionEvent = analysis.events.find(event => event.category === 'VERSION');
- if (versionEvent) {
- currentVersion.version = versionEvent.name;
+ const sortedEvents = sortBy(
+ analysis.events,
+ // versions last
+ event => (event.category === 'VERSION' ? 1 : 0),
+ // then the rest sorted by category
+ 'category'
+ );
+ currentVersion.byDay[day].push({ ...analysis, events: sortedEvents });
+
+ const lastEvent = sortedEvents[sortedEvents.length - 1];
+ if (lastEvent && lastEvent.category === 'VERSION') {
+ currentVersion.version = lastEvent.name;
acc.push({ version: undefined, byDay: {} });
}
return acc;
endDate: ?Date,
events?: Array<Event>,
eventSize?: number,
- formatYTick: number => string,
- formatValue: number => string,
+ disableZoom?: boolean,
+ formatYTick?: number => string,
+ hideGrid?: boolean,
+ hideXAxis?: boolean,
height: number,
width: number,
- leakPeriodDate: Date,
+ leakPeriodDate?: Date,
padding: Array<number>,
series: Array<Serie>,
showAreas?: boolean,
showEventMarkers?: boolean,
startDate: ?Date,
- updateZoom: (start: ?Date, endDate: ?Date) => void,
+ updateZoom?: (start: ?Date, endDate: ?Date) => void,
zoomSpeed: number
};
const rightPos = xRange[1] + Math.round(speed * evt.deltaY * (1 - mouseXPos));
const startDate = leftPos > maxXRange[0] ? xScale.invert(leftPos) : null;
const endDate = rightPos < maxXRange[1] ? xScale.invert(rightPos) : null;
+ // $FlowFixMe updateZoom can't be undefined at this point
this.props.updateZoom(startDate, endDate);
};
renderHorizontalGrid = (xScale: Scale, yScale: Scale) => {
+ const { formatYTick } = this.props;
const hasTicks = typeof yScale.ticks === 'function';
const ticks = hasTicks ? yScale.ticks(4) : yScale.domain();
<g>
{ticks.map(tick => (
<g key={tick}>
- <text
- className="line-chart-tick line-chart-tick-x"
- dx="-1em"
- dy="0.3em"
- textAnchor="end"
- x={xScale.range()[0]}
- y={yScale(tick)}>
- {this.props.formatYTick(tick)}
- </text>
+ {formatYTick != null &&
+ <text
+ className="line-chart-tick line-chart-tick-x"
+ dx="-1em"
+ dy="0.3em"
+ textAnchor="end"
+ x={xScale.range()[0]}
+ y={yScale(tick)}>
+ {formatYTick(tick)}
+ </text>}
<line
className="line-chart-grid"
x1={xScale.range()[0]}
);
};
- renderTicks = (xScale: Scale, yScale: Scale) => {
+ renderXAxisTicks = (xScale: Scale, yScale: Scale) => {
const format = xScale.tickFormat(7);
const ticks = xScale.ticks(7);
const y = yScale.range()[0];
};
renderLeak = (xScale: Scale, yScale: Scale) => {
- if (!this.props.leakPeriodDate) {
- return null;
- }
const yRange = yScale.range();
const xRange = xScale.range();
const leakWidth = xRange[xRange.length - 1] - xScale(this.props.leakPeriodDate);
}
const { maxXRange, xScale, yScale } = this.getScales();
+ const zoomEnabled = !this.props.disableZoom && this.props.updateZoom != null;
const isZoomed = this.props.startDate || this.props.endDate;
return (
<svg
className={classNames('line-chart', { 'chart-zoomed': isZoomed })}
width={this.props.width}
height={this.props.height}>
- {this.renderClipPath(xScale, yScale)}
+ {zoomEnabled && this.renderClipPath(xScale, yScale)}
<g transform={`translate(${this.props.padding[3]}, ${this.props.padding[0]})`}>
- {this.renderLeak(xScale, yScale)}
- {this.renderHorizontalGrid(xScale, yScale)}
- {this.renderTicks(xScale, yScale)}
+ {this.props.leakPeriodDate != null && this.renderLeak(xScale, yScale)}
+ {!this.props.hideGrid && this.renderHorizontalGrid(xScale, yScale)}
+ {!this.props.hideXAxis && this.renderXAxisTicks(xScale, yScale)}
{this.props.showAreas && this.renderAreas(xScale, yScale)}
{this.renderLines(xScale, yScale)}
- {this.renderZoomOverlay(xScale, yScale, maxXRange)}
+ {zoomEnabled && this.renderZoomOverlay(xScale, yScale, maxXRange)}
{this.props.showEventMarkers && this.renderEvents(xScale, yScale)}
</g>
</svg>
export const getSort = () => window.localStorage.getItem(PROJECTS_SORT);
export const saveGraph = (graph: ?string) => save(PROJECT_ACTIVITY_GRAPH, graph);
-export const getGraph = () => window.localStorage.getItem(PROJECT_ACTIVITY_GRAPH);
+export const getGraph = () => window.localStorage.getItem(PROJECT_ACTIVITY_GRAPH) || 'overview';
projects / sonarqube.git / commitdiff