diff --git a/src/forge/Server/api.js b/src/forge/Server/api.js index 4a8bf7d80..0047ee2e8 100644 --- a/src/forge/Server/api.js +++ b/src/forge/Server/api.js @@ -1,10 +1,11 @@ import fetch from './fetch'; // 获取列表 -export function getList(facets) { +export function getList(params) { return fetch({ - url: `/api/issues/search?components=kingchanx-fluid-cloudnative_fluid&s=FILE_LINE&issueStatuses=CONFIRMED%2COPEN&ps=100&facets=${ facets }&additionalFields=_all&timeZone=Asia%2FShanghai`, + url: `/api/issues/search?components=kingchanx-fluid-cloudnative_fluid&s=FILE_LINE&issueStatuses=CONFIRMED%2COPEN&ps=100&&additionalFields=_all&timeZone=Asia%2FShanghai`, method: 'get', + params }); } diff --git a/src/forge/Server/quality/detail.scss b/src/forge/Server/quality/detail.scss index 480ee24f0..e01990acc 100644 --- a/src/forge/Server/quality/detail.scss +++ b/src/forge/Server/quality/detail.scss @@ -178,6 +178,7 @@ display: flex; .left-content { width: 218px; + flex-shrink: 0; .filter-title { font-weight: bold; font-size: 17px; @@ -186,15 +187,19 @@ } .filter-item { padding: 0 20px; + margin: 2px 0; display: flex; justify-content: space-between; align-items: center; - height: 54px; + height: 50px; cursor: pointer; &:hover { background: #466bff0c; } } + .selected-item { + background: #466bff17; + } .ant-divider { margin: 20px; width: auto; @@ -239,6 +244,7 @@ font-weight: bold; font-size: 15px; color: #111010; + word-break: break-word; span:nth-of-type(1) { font-weight: 400; font-size: 14px; @@ -255,5 +261,44 @@ } .total-info { padding: 20px; + .info-list { + display: flex; + .total-item { + display: flex; + flex-direction: column; + min-height: 53px; + font-weight: 400; + font-size: 15px; + color: #525151; + > span:nth-child(2) { + font-weight: bold; + font-size: 18px; + color: #111010; + } + .item-more { + font-weight: 400; + font-size: 12px; + color: #525151; + span { + color: #466AFF; + } + } + } + .total-item:not(:last-child) { + margin-right: 40px; + } + .total-item:nth-child(n + 2) { + margin-left: 64px; + position: relative; + &::after { + position: absolute; + left: -40px; + content: ''; + width: 0px; + height: 53px; + border-left: 1px solid rgba(187,189,197,0.61); + } + } + } } } \ No newline at end of file diff --git a/src/forge/Server/quality/index.jsx b/src/forge/Server/quality/index.jsx index 16b561f8b..95d6696b5 100644 --- a/src/forge/Server/quality/index.jsx +++ b/src/forge/Server/quality/index.jsx @@ -4,6 +4,7 @@ import './detail.scss'; import ProblemDetail from "./component/ProblemDetail"; import { issueType, issueTypeKeys, maintainability } from "../constants/quality" import { Divider } from 'antd'; +import { formatNumber } from '../../Utils/utils' function issueList(props){ const [ issues, setIssues ] = useState({}); @@ -12,7 +13,10 @@ function issueList(props){ const [ listFilter, setListFilter ] = useState({}); const [ selectedIssue, setSelectedIssue ] = useState(null); const [ detailVisible, setDetailVisible ] = useState(true); - const [ issueInfo, setIssueInfo ] = useState(null); + const [ issueInfo, setIssueInfo ] = useState({}); + const [ selectedType, setSelectedType ] = useState([]); + const [ selectedSeverity, setSelectedSeverity ] = useState([]); + const [ selectedTag, setSelectedTag ] = useState([]); const { projectDetail } = props; const metricKeys = 'lines,coverage,lines_to_cover,duplicated_lines_density,maintainability_issues,vulnerabilities,bugs,code_smells' const facets = 'impactSeverities,tags,types' @@ -38,7 +42,17 @@ function issueList(props){ }); setBaseData(result) }) - getList(facets).then(res => { + getIssueList() + }, [projectDetail]) + + function getIssueList() { + let params = { + facets: facets, + types: selectedType.join(','), + impactSeverities: selectedSeverity.join(','), + tags: selectedTag.join(','), + } + getList(params).then(res => { let issues = res.issues let issuesHandled = {} issues.forEach(e => { @@ -52,12 +66,15 @@ function issueList(props){ res.facets.forEach(e => { filter[e.property] = e.values }) - console.log(filter); setListFilter(filter) setBaseInfo(res) setIssues(issuesHandled) }) - }, [projectDetail]) + } + + useEffect(() => { + getIssueList() + },[selectedType, selectedSeverity, selectedTag]) function detail(e) { setSelectedIssue(e) @@ -66,13 +83,66 @@ function issueList(props){ setDetailVisible(true) }) } + + function selectType(e) { + let index = selectedType.indexOf(e) + if (index > -1) { + selectedType.splice(index, 1) + setSelectedType([...selectedType]) + } else { + setSelectedType([...selectedType, e]) + } + } + + function selectSeverity(e) { + let index = selectedSeverity.indexOf(e) + if (index > -1) { + selectedSeverity.splice(index, 1) + setSelectedSeverity([...selectedSeverity]) + } else { + setSelectedSeverity([...selectedSeverity, e]) + } + } + + function selectTags(e) { + let index = selectedTag.indexOf(e) + if (index > -1) { + selectedTag.splice(index, 1) + setSelectedTag([...selectedTag]) + } else { + setSelectedTag([...selectedTag, e]) + } + } return
setDetailVisible(false)}>

代码分析结果

-
- +
+
+ Bugs + { baseData.bugs } +
+
+ 漏洞 + { formatNumber(baseData.vulnerabilities) } +
+
+ 异味 + { formatNumber(baseData.code_smells) } +
+
+ 重复率 + { baseData.duplicated_lines_density }% 代码{ formatNumber(baseData.lines) }行 +
+
+ 覆盖率 + { baseData.coverage }% 代码{ formatNumber(baseData.lines_to_cover) }行 +
+
+ 代码行数 + { baseData.lines && baseData.lines.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") } +
{issues &&

发现{ baseInfo.total }个问题

} @@ -80,11 +150,11 @@ function issueList(props){
- 问题类型 + 问题类型 {}
{ listFilter.types && listFilter.types.map(e => ( -
+
selectType(e.val)}> { issueType[e.val] } { e.count }
)) @@ -97,7 +167,7 @@ function issueList(props){
{ listFilter.impactSeverities && listFilter.impactSeverities.map(e => ( -
+
selectSeverity(e.val)}> { maintainability[e.val] } { e.count }
)) @@ -110,7 +180,7 @@ function issueList(props){
{ listFilter.tags && listFilter.tags.map(e => ( -
+
selectTags(e.val)}> { e.val } { e.count }
)) diff --git a/src/forge/Utils/utils.js b/src/forge/Utils/utils.js new file mode 100644 index 000000000..6aa8c57f7 --- /dev/null +++ b/src/forge/Utils/utils.js @@ -0,0 +1,12 @@ +export function formatNumber(num) { + if (num === undefined || num === null) return + if (num >= 1e9) { + return (num / 1e9).toFixed(1) + 'B'; // 十亿 + } else if (num >= 1e6) { + return (num / 1e6).toFixed(1) + 'M'; // 百万 + } else if (num >= 1e3) { + return (num / 1e3).toFixed(1) + 'K'; // 千 + } else { + return num.toString(); // 小于 1000 的数字原样返回 + } +} \ No newline at end of file