1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/*
* 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 classNames from 'classnames';
import React from 'react';
import ReactDOM from 'react-dom';
import ComponentName from './ComponentName';
import ComponentMeasure from './ComponentMeasure';
import ComponentDetach from './ComponentDetach';
import ComponentPin from './ComponentPin';
const TOP_OFFSET = 200;
const BOTTOM_OFFSET = 10;
export default class Component extends React.PureComponent {
componentDidMount() {
this.handleUpdate();
}
componentDidUpdate() {
this.handleUpdate();
}
handleUpdate() {
const { selected } = this.props;
// scroll viewport so the current selected component is visible
if (selected) {
setTimeout(() => {
this.handleScroll();
}, 0);
}
}
handleScroll() {
const node = ReactDOM.findDOMNode(this);
const position = node.getBoundingClientRect();
const { top, bottom } = position;
if (bottom > window.innerHeight - BOTTOM_OFFSET) {
window.scrollTo(0, bottom - window.innerHeight + window.scrollY + BOTTOM_OFFSET);
} else if (top < TOP_OFFSET) {
window.scrollTo(0, top + window.scrollY - TOP_OFFSET);
}
}
render() {
const { component, rootComponent, selected, previous, canBrowse } = this.props;
const isView = ['VW', 'SVW'].includes(rootComponent.qualifier);
let componentAction = null;
if (!component.refKey || component.qualifier === 'SVW') {
switch (component.qualifier) {
case 'FIL':
case 'UTS':
componentAction = <ComponentPin component={component} />;
break;
default:
componentAction = <ComponentDetach component={component} />;
}
}
const columns = isView
? [
{ metric: 'releasability_rating', type: 'RATING' },
{ metric: 'reliability_rating', type: 'RATING' },
{ metric: 'security_rating', type: 'RATING' },
{ metric: 'sqale_rating', type: 'RATING' },
{ metric: 'ncloc', type: 'SHORT_INT' }
]
: [
{ metric: 'ncloc', type: 'SHORT_INT' },
{ metric: 'bugs', type: 'SHORT_INT' },
{ metric: 'vulnerabilities', type: 'SHORT_INT' },
{ metric: 'code_smells', type: 'SHORT_INT' },
{ metric: 'coverage', type: 'PERCENT' },
{ metric: 'duplicated_lines_density', type: 'PERCENT' }
];
return (
<tr className={classNames({ selected })}>
<td className="thin nowrap">
<span className="spacer-right">
{componentAction}
</span>
</td>
<td className="code-name-cell">
<ComponentName
component={component}
rootComponent={rootComponent}
previous={previous}
canBrowse={canBrowse}
/>
</td>
{columns.map(column => (
<td key={column.metric} className="thin nowrap text-right">
<div className="code-components-cell">
<ComponentMeasure
component={component}
metricKey={column.metric}
metricType={column.type}
/>
</div>
</td>
))}
</tr>
);
}
}
|
