Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various WebApp report fixes and new features (part 2) #9868

Merged
merged 14 commits into from
Feb 6, 2025
Merged

Various WebApp report fixes and new features (part 2) #9868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
102700f
fix(web-app-template): Reduce unnecessary render recomputations
tsteenbe Jan 26, 2025
8f6caa3
fix(web-app-template): Enhance rule severity icons
tsteenbe Jan 25, 2025
5042d82
fix(web-app-template): Auto-fix minor linter issues
tsteenbe Jan 26, 2025
a1c24bb
fix(web-app-template): Enhance vulnerability severity filtering
tsteenbe Jan 26, 2025
6691d54
chore(web-app-template): Improve CSS comment for clarity
tsteenbe Jan 26, 2025
c853a00
style(web-app-template): Align error color
tsteenbe Jan 26, 2025
79e9466
fix(web-app-template): Display `id` property for vulnerability resolu…
tsteenbe Jan 26, 2025
550289b
fix(web-app-template): Enhance issue severity filtering
tsteenbe Jan 28, 2025
5c8dad4
fix(web-app-template): Fix issue severity filtering
tsteenbe Jan 28, 2025
8282133
feat(web-app-template): Add `score` and `vector` to VulnerabilityRefe…
tsteenbe Jan 29, 2025
f452019
feat(web-app-template): Add helper function to WebAppVulnerability
tsteenbe Jan 29, 2025
cd20cfc
feat(web-app-template): Display vulnerability references
tsteenbe Jan 29, 2025
5e4aa35
fix(web-app-template): Correct pagination in various tables
tsteenbe Jan 29, 2025
618ab4c
fix(web-app-template): Fix webAppRuleViolation.package.id typeError
tsteenbe Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions plugins/reporters/web-app-template/src/App.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

76 changes: 43 additions & 33 deletions plugins/reporters/web-app-template/src/components/IssuesTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@ import {
} from 'react';

import {
ExclamationCircleOutlined,
FileAddOutlined,
FileExcelOutlined,
InfoCircleOutlined,
IssuesCloseOutlined,
WarningOutlined
FileExcelOutlined
tsteenbe marked this conversation as resolved.
Show resolved Hide resolved
} from '@ant-design/icons';
import { Collapse, Table, Tooltip } from 'antd';
import {
Collapse,
Table,
Tag,
Tooltip
} from 'antd';
import Markdown from 'markdown-to-jsx';

import PackageDetails from './PackageDetails';
Expand All @@ -40,6 +41,7 @@ import PackagePaths from './PackagePaths';
import PathExcludesTable from './PathExcludesTable';
import ResolutionTable from './ResolutionTable';
import ScopeExcludesTable from './ScopeExcludesTable';
import SeverityTag from './SeverityTag';
import { getColumnSearchProps } from './Shared';

// Generates the HTML to display issues as a table
Expand Down Expand Up @@ -74,7 +76,7 @@ const IssuesTable = ({ webAppOrtIssues = [], showExcludesColumn = true }) => {
excludes: [],
message: [],
packageId: [],
rule: [],
source: [],
severityIndex: []
});

Expand Down Expand Up @@ -155,59 +157,65 @@ const IssuesTable = ({ webAppOrtIssues = [], showExcludesColumn = true }) => {
key: 'severityIndex',
filters: [
{
text: 'Errors',
text: (<SeverityTag severity={'error'} />),
value: 0
},
{
text: 'Warnings',
text: (<SeverityTag severity={'warning'} />),
value: 1
},
{
text: 'Hint',
text: (<SeverityTag severity={'hint'} />),
value: 2
},
{
text: 'Resolved',
value: 3
text: (<Tag color="#b0c4de">Resolved</Tag>),
value: 10
}
],
filteredValue: filteredInfo.severityIndex || null,
onFilter: (value, record) => record.severityIndex === Number(value),
onFilter: (value, record) => record.severityIndex === Number(value)
|| (record.severityIndex > 10 && Number(value) >= 10),
render: (text, record) => (
record.isResolved
? (
<Tooltip
placement="right"
title={Array.from(record.webAppOrtIssue.resolutionReasons).join(', ')}
>
<IssuesCloseOutlined
className="ort-ok"
/>
</Tooltip>
<SeverityTag
isResolved={true}
severity={record.severity.toLowerCase()}
tooltipText={
`Resolved with ${Array.from(record.webAppOrtIssue.resolutionReasons).join(', ')
} resolution${
record.webAppOrtIssue.resolutionReasons.size > 0 ? 's' : ''
}`
}
/>
)
: (
<span>
{
record.severity === 'ERROR'
&& !record.isResolved
&& (
<ExclamationCircleOutlined
className="ort-error"
<SeverityTag
severity={'error'}
/>
)
}
{
record.severity === 'WARNING'
&& !record.isResolved
&& (
<WarningOutlined
className="ort-warning"
<SeverityTag
severity={'warning'}
/>
)
}
{
record.severity === 'HINT'
&& !record.isResolved
&& (
<InfoCircleOutlined
className="ort-hint"
<SeverityTag
severity={'hint'}
/>
)
}
Expand All @@ -216,7 +224,8 @@ const IssuesTable = ({ webAppOrtIssues = [], showExcludesColumn = true }) => {
),
sorter: (a, b) => a.severityIndex - b.severityIndex,
sortOrder: sortedInfo.field === 'severityIndex' && sortedInfo.order,
width: '5em'
title: 'Severity',
width: '8em'
});

columns.push(
Expand All @@ -238,17 +247,17 @@ const IssuesTable = ({ webAppOrtIssues = [], showExcludesColumn = true }) => {
},
{
dataIndex: 'source',
filteredValue: filteredInfo.rule || null,
filteredValue: filteredInfo.source || null,
key: 'source',
responsive: ['md'],
sorter: (a, b) => a.rule.localeCompare(b.rule),
sortOrder: sortedInfo.field === 'rule' && sortedInfo.order,
sorter: (a, b) => a.source.localeCompare(b.source),
sortOrder: sortedInfo.field === 'source' && sortedInfo.order,
title: 'Source',
width: '25%',
...getColumnSearchProps(
'source',
filteredInfo.rule,
(value) => setFilteredInfo({ ...filteredInfo, rule: value })
filteredInfo.source,
(value) => setFilteredInfo({ ...filteredInfo, source: value })
)
},
{
Expand Down Expand Up @@ -407,6 +416,7 @@ const IssuesTable = ({ webAppOrtIssues = [], showExcludesColumn = true }) => {
current: pagination.current,
hideOnSinglePage: true,
onChange: handlePaginationChange,
pageSize: pagination.pageSize,
pageSizeOptions: ['50', '100', '250', '500', '1000', '5000'],
position: 'bottom',
showQuickJumper: true,
Expand Down
4 changes: 2 additions & 2 deletions plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const LicenseStatsTable = ({ emptyText, licenses, licenseStats }) => {
/* === Table state handling === */

// State variable for displaying table in various pages
const [pagination, setPagination] = useState({ current: 1, pageSize: 100 });
const [pagination, setPagination] = useState({ current: 1, pageSize: 50 });

// State variable for filtering the contents of table columns
const filteredInfoDefault = {
Expand Down Expand Up @@ -94,10 +94,10 @@ const LicenseStatsTable = ({ emptyText, licenses, licenseStats }) => {
pagination={
{
current: pagination.current,
defaultPageSize: 50,
hideOnSinglePage: true,
onChange: handlePaginationChange,
position: 'bottom',
pageSize: pagination.pageSize,
pageSizeOptions: ['50', '100', '250', '500', '1000', '5000'],
showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results`
}
Expand Down
60 changes: 33 additions & 27 deletions plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,13 @@ import {
} from 'react';

import {
ExclamationCircleOutlined,
FileAddOutlined,
FileExcelOutlined,
InfoCircleOutlined,
IssuesCloseOutlined,
WarningOutlined
FileExcelOutlined
} from '@ant-design/icons';
import {
Collapse,
Table,
Tag,
Tooltip
} from 'antd';
import Markdown from 'markdown-to-jsx';
Expand All @@ -44,6 +41,7 @@ import PackagePaths from './PackagePaths';
import PathExcludesTable from './PathExcludesTable';
import ResolutionTable from './ResolutionTable';
import ScopeExcludesTable from './ScopeExcludesTable';
import SeverityTag from './SeverityTag';
import { getColumnSearchProps } from './Shared';

// Generates the HTML to display violations as a table
Expand All @@ -57,7 +55,8 @@ const RuleViolationsTable = ({ webAppRuleViolations = [], showExcludesColumn = t
isResolved: webAppRuleViolation.isResolved,
key: webAppRuleViolation.key,
message: webAppRuleViolation.message,
packageId: webAppRuleViolation.package.id,
packageId: webAppRuleViolation.package
? webAppRuleViolation.package.id : '',
rule: webAppRuleViolation.rule,
severity: webAppRuleViolation.severity,
severityIndex: webAppRuleViolation.severityIndex,
Expand Down Expand Up @@ -159,59 +158,65 @@ const RuleViolationsTable = ({ webAppRuleViolations = [], showExcludesColumn = t
key: 'severityIndex',
filters: [
{
text: 'Errors',
text: (<SeverityTag severity={'error'} />),
value: 0
},
{
text: 'Warnings',
text: (<SeverityTag severity={'warning'} />),
value: 1
},
{
text: 'Hint',
text: (<SeverityTag severity={'hint'} />),
value: 2
},
{
text: 'Resolved',
value: 3
text: (<Tag color="#b0c4de">Resolved</Tag>),
value: 10
}
],
filteredValue: filteredInfo.severityIndex || null,
onFilter: (value, record) => record.severityIndex === Number(value),
onFilter: (value, record) => record.severityIndex === Number(value)
|| (record.severityIndex > 10 && Number(value) >= 10),
render: (text, record) => (
record.isResolved
? (
<Tooltip
placement="right"
title={Array.from(record.webAppRuleViolation.resolutionReasons).join(', ')}
>
<IssuesCloseOutlined
className="ort-ok"
/>
</Tooltip>
<SeverityTag
isResolved={true}
severity={record.severity.toLowerCase()}
tooltipText={
tsteenbe marked this conversation as resolved.
Show resolved Hide resolved
`Resolved with ${Array.from(record.webAppRuleViolation.resolutionReasons).join(', ')
} resolution${
record.webAppRuleViolation.resolutionReasons.size > 0 ? 's' : ''
}`
}
/>
)
: (
<span>
{
record.severity === 'ERROR'
&& !record.isResolved
&& (
<ExclamationCircleOutlined
className="ort-error"
<SeverityTag
severity={'error'}
/>
)
}
{
record.severity === 'WARNING'
&& !record.isResolved
&& (
<WarningOutlined
className="ort-warning"
<SeverityTag
severity={'warning'}
/>
)
}
{
record.severity === 'HINT'
&& !record.isResolved
&& (
<InfoCircleOutlined
className="ort-hint"
<SeverityTag
severity={'hint'}
/>
)
}
Expand All @@ -220,7 +225,8 @@ const RuleViolationsTable = ({ webAppRuleViolations = [], showExcludesColumn = t
),
sorter: (a, b) => a.severityIndex - b.severityIndex,
sortOrder: sortedInfo.field === 'severityIndex' && sortedInfo.order,
width: '5em'
title: 'Severity',
width: '8em'
});

columns.push(
Expand Down
57 changes: 57 additions & 0 deletions plugins/reporters/web-app-template/src/components/SeverityTag.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* Copyright (C) 2025 The ORT Project Authors (see <https://github.com/oss-review-toolkit/ort/blob/main/NOTICE>)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* SPDX-License-Identifier: Apache-2.0
* License-Filename: LICENSE
*/

import {
Tag,
Tooltip
} from 'antd';

const SeverityTag = ({ severity, isResolved = false, tooltipText = '' }) => {
const severityColors = {
error: '#e53e3e',
warning: '#f59e0b',
hint: '#84b6eb'
};

return isResolved
? (
<Tooltip
placement="right"
title={tooltipText}
>
<Tag
color="#b0c4de"
>
<s>
{`${severity.charAt(0).toUpperCase()}${severity.slice(1)}`}
</s>
</Tag>
</Tooltip>
)
: (

<Tag
color={severityColors[severity]}
>
{`${severity.charAt(0).toUpperCase()}${severity.slice(1)}`}
</Tag>
);
};

export default SeverityTag;
Loading
Loading