From a4b8872061cf49fa8291ad45b7247f70959df84e Mon Sep 17 00:00:00 2001 From: Thomas Steenbergen Date: Sun, 3 Dec 2023 01:23:26 +0530 Subject: [PATCH] fix(web-app-template): Auto-resolve eslint issues Automatically resolve issues flagged by eslint by running `eslint . --fix`. Signed-off-by: Thomas Steenbergen --- .../reporters/web-app-template/src/App.jsx | 85 +-- .../src/components/AboutModal.jsx | 38 +- .../src/components/IssuesTable.jsx | 41 +- .../src/components/LicenseChart.jsx | 1 + .../src/components/LicenseStatsTable.jsx | 33 +- .../src/components/PackageDetails.jsx | 23 +- .../src/components/PackageFindingsTable.jsx | 29 +- .../src/components/PackageLicenses.jsx | 7 +- .../src/components/PackagePaths.jsx | 8 +- .../src/components/PathExcludesTable.jsx | 10 +- .../src/components/ResolutionTable.jsx | 10 +- .../src/components/RuleViolationsTable.jsx | 36 +- .../src/components/ScopeExcludesTable.jsx | 10 +- .../src/components/Shared.jsx | 22 +- .../src/components/SummaryView.jsx | 98 ++- .../src/components/TableView.jsx | 75 ++- .../src/components/TreeView.jsx | 94 +-- .../src/components/VulnerabilitiesTable.jsx | 38 +- .../reporters/web-app-template/src/index.jsx | 5 +- .../src/models/VulnerabilityReference.js | 4 +- .../src/models/WebAppOrtResult.js | 4 +- .../src/models/WebAppPackage.js | 5 +- .../src/models/WebAppVulnerability.js | 3 +- .../web-app-template/src/reducers/index.js | 624 +++++++++--------- .../src/reducers/selectors.jsx | 6 +- .../web-app-template/src/sagas/index.js | 9 +- .../src/sagas/processOrtResultData.js | 5 +- .../web-app-template/src/store/index.js | 2 +- .../web-app-template/src/utils/index.js | 6 +- .../reporters/web-app-template/vite.config.js | 5 +- 30 files changed, 674 insertions(+), 662 deletions(-) diff --git a/plugins/reporters/web-app-template/src/App.jsx b/plugins/reporters/web-app-template/src/App.jsx index 36f39ea4c6543..42f547e5ef6a6 100644 --- a/plugins/reporters/web-app-template/src/App.jsx +++ b/plugins/reporters/web-app-template/src/App.jsx @@ -17,7 +17,14 @@ * License-Filename: LICENSE */ -import React, { Component } from 'react'; +import { Component } from 'react'; + +import { + ControlOutlined, + PartitionOutlined, + PieChartOutlined, + TableOutlined +} from '@ant-design/icons'; import { Alert, Col, @@ -25,24 +32,20 @@ import { Row, Tabs } from 'antd'; -import { - ControlOutlined, - PartitionOutlined, - PieChartOutlined, - TableOutlined -} from '@ant-design/icons'; -import { connect } from 'react-redux'; import PropTypes from 'prop-types'; + +import { connect } from 'react-redux'; + import AboutModal from './components/AboutModal'; import SummaryView from './components/SummaryView'; import TableView from './components/TableView'; import TreeView from './components/TreeView'; import './App.css'; -import store from './store'; import { getAppView, getOrtResult } from './reducers/selectors'; +import store from './store'; class ReporterApp extends Component { constructor(props) { @@ -70,18 +73,18 @@ class ReporterApp extends Component { } = this.props; switch (showKey) { - case 'ort-tabs-summary': - case 'ort-tabs-table': - case 'ort-tabs-tree': - case 'ort-tabs': { - return ( + case 'ort-tabs-summary': + case 'ort-tabs-table': + case 'ort-tabs-tree': + case 'ort-tabs': { + return ( { - showAboutModal && () + !!showAboutModal && } ), - key: "ort-tabs-summary", + key: 'ort-tabs-summary', children: ( ) @@ -106,7 +109,7 @@ class ReporterApp extends Component { Table ), - key: "ort-tabs-table", + key: 'ort-tabs-table', children: ( ) @@ -118,31 +121,31 @@ class ReporterApp extends Component { Tree ), - key: "ort-tabs-tree", + key: 'ort-tabs-tree', children: ( ) } ]} - onChange={this.onChangeTab} tabBarExtraContent={( )} + onChange={this.onChangeTab} /> - ); - } - case 'ort-loading': { - const { - percentage: loadingPercentage, - text: loadingText - } = loading; + ); + } + case 'ort-loading': { + const { + percentage: loadingPercentage, + text: loadingText + } = loading; - return ( + return ( {loadingText} - {loadingPercentage === 100 ? ( + {loadingPercentage === 100 + ? ( - ) : ( + ) + : ( - )} + )} - ); - } - case 'ort-no-report-data': - return ( + ); + } + case 'ort-no-report-data': + return (

@@ -201,13 +207,12 @@ class ReporterApp extends Component {

)} - type="error" /> - ); - default: - return ( + ); + default: + return (

@@ -238,11 +244,10 @@ class ReporterApp extends Component {

)} - type="error" /> - ); + ); } } } diff --git a/plugins/reporters/web-app-template/src/components/AboutModal.jsx b/plugins/reporters/web-app-template/src/components/AboutModal.jsx index 3b0126c4833c7..577eb69d27b06 100644 --- a/plugins/reporters/web-app-template/src/components/AboutModal.jsx +++ b/plugins/reporters/web-app-template/src/components/AboutModal.jsx @@ -17,22 +17,23 @@ * License-Filename: LICENSE */ -import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { - Descriptions, - Modal, - Tabs -} from 'antd'; import { FileTextOutlined, InfoCircleOutlined, TagsOutlined } from '@ant-design/icons'; -import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; -import lioshi from 'react-syntax-highlighter/dist/esm/styles/hljs/lioshi'; +import { + Descriptions, + Modal, + Tabs +} from 'antd'; +import PropTypes from 'prop-types'; import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml'; +import lioshi from 'react-syntax-highlighter/dist/esm/styles/hljs/lioshi'; + +import { connect } from 'react-redux'; +import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; + import { getOrtResult } from '../reducers/selectors'; @@ -42,8 +43,7 @@ const { Item } = Descriptions; SyntaxHighlighter.registerLanguage('yaml', yaml); -const AboutModal = (props) => { - const { webAppOrtResult } = props; +const AboutModal = ({ webAppOrtResult }) => { const { repositoryConfiguration } = webAppOrtResult; const { labels, @@ -76,7 +76,7 @@ const AboutModal = (props) => { { - var tabItems = []; + const tabItems = []; if (webAppOrtResult.hasRepositoryConfiguration()) { tabItems.push({ @@ -86,11 +86,11 @@ const AboutModal = (props) => { Excludes (.ort.yml) ), - key: "ort-tabs-excludes", + key: 'ort-tabs-excludes', children: ( {repositoryConfiguration} @@ -107,10 +107,10 @@ const AboutModal = (props) => { Labels ), - key: "ort-tabs-labels", + key: 'ort-tabs-labels', children: ( @@ -130,7 +130,7 @@ const AboutModal = (props) => { > {value} - ) + ) : value } @@ -148,7 +148,7 @@ const AboutModal = (props) => { About ), - key: "ort-tabs-about", + key: 'ort-tabs-about', children: ( - ) : ( + ) + : ( { webAppOrtIssue.severity === 'ERROR' @@ -119,7 +121,7 @@ class IssuesTable extends React.Component { ) } - ) + ) ), sorter: (a, b) => a.severityIndex - b.severityIndex, sortOrder: sortedInfo.field === 'severityIndex' && sortedInfo.order, @@ -170,7 +172,8 @@ class IssuesTable extends React.Component { render: (webAppOrtIssue) => { const webAppPackage = webAppOrtIssue.package; - return webAppPackage.isExcluded ? ( + return webAppPackage.isExcluded + ? ( - ) : ( + ) + : ( - ); + ); }, width: '2em' }); @@ -213,10 +217,13 @@ class IssuesTable extends React.Component { className="ort-table-issues" columns={columns} dataSource={issues} + rowKey="key" + size="small" expandable={{ expandedRowRender: (webAppOrtIssue) => { const defaultActiveKey = webAppOrtIssue.isResolved - ? 'issue-how-to-fix' : 'issue-package-details'; + ? 'issue-how-to-fix' + : 'issue-package-details'; const webAppPackage = webAppOrtIssue.package; return ( @@ -225,7 +232,7 @@ class IssuesTable extends React.Component { bordered={false} defaultActiveKey={defaultActiveKey} items={(() => { - var collapseItems = []; + const collapseItems = []; if (webAppOrtIssue.hasHowToFix()) { collapseItems.push({ @@ -324,7 +331,6 @@ class IssuesTable extends React.Component { locale={{ emptyText: 'No issues' }} - onChange={onChange} pagination={ { defaultPageSize: 25, @@ -336,12 +342,11 @@ class IssuesTable extends React.Component { showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} issues` } } - rowKey="key" - size="small" + onChange={onChange} /> ); } -}; +} IssuesTable.propTypes = { issues: PropTypes.array.isRequired, diff --git a/plugins/reporters/web-app-template/src/components/LicenseChart.jsx b/plugins/reporters/web-app-template/src/components/LicenseChart.jsx index a1c6291a4b887..f78f6d48a9797 100644 --- a/plugins/reporters/web-app-template/src/components/LicenseChart.jsx +++ b/plugins/reporters/web-app-template/src/components/LicenseChart.jsx @@ -18,6 +18,7 @@ */ import React from 'react'; + import PropTypes from 'prop-types'; import { Cell, PieChart, Pie, Sector diff --git a/plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx b/plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx index ab835aa71f631..108c38d8dbc86 100644 --- a/plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx +++ b/plugins/reporters/web-app-template/src/components/LicenseStatsTable.jsx @@ -17,24 +17,21 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Table } from 'antd'; import { FileTextOutlined } from '@ant-design/icons'; +import { Table } from 'antd'; +import PropTypes from 'prop-types'; // Generates the HTML to display license stats as a Table -const LicenseStatsTable = (props) => { - const { - emptyText, - filter: { - sortedInfo = {}, - filteredInfo = {} - }, - licenses, - licenseStats, - onChange - } = props; - +const LicenseStatsTable = ({ + emptyText, + filter: { + sortedInfo = {}, + filteredInfo = {} + }, + licenses, + licenseStats, + onChange +}) => { const columns = [ { title: 'License', @@ -69,10 +66,11 @@ const LicenseStatsTable = (props) => { { showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results` } } - rowKey="name" - size="small" + onChange={onChange} /> ); }; diff --git a/plugins/reporters/web-app-template/src/components/PackageDetails.jsx b/plugins/reporters/web-app-template/src/components/PackageDetails.jsx index 5cbf8f84dcdaa..11f59bd0fb0cc 100644 --- a/plugins/reporters/web-app-template/src/components/PackageDetails.jsx +++ b/plugins/reporters/web-app-template/src/components/PackageDetails.jsx @@ -17,16 +17,14 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; import { Descriptions } from 'antd'; +import PropTypes from 'prop-types'; const { Item } = Descriptions; // Generates the HTML for packages details like // description, source code location(s), etc. -const PackageDetails = (props) => { - const { webAppPackage } = props; +const PackageDetails = ({ webAppPackage }) => { const { id, isProject, @@ -40,7 +38,7 @@ const PackageDetails = (props) => { vcs: { path: vcsPath, revision: vcsRevision = webAppPackage.vcs.resolvedRevision, - url: vcsUrl, + url: vcsUrl }, vcsProcessed: { path: vcsProcessedPath, @@ -80,15 +78,12 @@ const PackageDetails = (props) => { ) } { - isProject - && ( - {definitionFilePath} - ) } { webAppPackage.hasAuthors() @@ -102,26 +97,20 @@ const PackageDetails = (props) => { ) } { - description - && ( - {description} - ) } { - homepageUrl - && ( - {renderAhref(homepageUrl)} - ) } { !!vcsUrl diff --git a/plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx b/plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx index 6d22fce2f16ef..5c51f96fea7fa 100644 --- a/plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx +++ b/plugins/reporters/web-app-template/src/components/PackageFindingsTable.jsx @@ -17,9 +17,6 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Table, Tooltip } from 'antd'; import { CopyrightOutlined, FileAddOutlined, @@ -28,11 +25,13 @@ import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'; +import { Table, Tooltip } from 'antd'; +import PropTypes from 'prop-types'; + import PathExcludesTable from './PathExcludesTable'; // Generates the HTML to display scanFindings as a Table -const PackageFindingsTable = (props) => { - const { webAppPackage } = props; +const PackageFindingsTable = ({ webAppPackage }) => { const { findings } = webAppPackage; const columns = []; let expandable = null; @@ -75,7 +74,8 @@ const PackageFindingsTable = (props) => { return false; }, render: (webAppFinding) => ( - webAppFinding.isExcluded ? ( + webAppFinding.isExcluded + ? ( { - ) : ( + ) + : ( - ) + ) ), width: '2em' }); @@ -105,11 +106,13 @@ const PackageFindingsTable = (props) => { } return ( - expanded ? ( + expanded + ? ( onExpand(record, e)} /> - ) : ( + ) + : ( onExpand(record, e)} /> - ) + ) ); }, indentSize: 0 @@ -229,6 +232,8 @@ const PackageFindingsTable = (props) => { columns={columns} dataSource={findings} expandable={expandable} + rowKey="key" + size="small" pagination={ { defaultPageSize: 250, @@ -240,8 +245,6 @@ const PackageFindingsTable = (props) => { showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results` } } - rowKey="key" - size="small" /> ); }; diff --git a/plugins/reporters/web-app-template/src/components/PackageLicenses.jsx b/plugins/reporters/web-app-template/src/components/PackageLicenses.jsx index f59b55fa46e53..18631f8ef2c50 100644 --- a/plugins/reporters/web-app-template/src/components/PackageLicenses.jsx +++ b/plugins/reporters/web-app-template/src/components/PackageLicenses.jsx @@ -17,16 +17,13 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; import { Descriptions } from 'antd'; +import PropTypes from 'prop-types'; const { Item } = Descriptions; // Generates the HTML for licenses declared or detected in a package -const PackageLicenses = (props) => { - const { webAppPackage } = props; - +const PackageLicenses = ({ webAppPackage }) => { return ( { - const { paths } = props; +const PackagePaths = ({ paths }) => { let grid; // Change layout grid to use all available width for single path @@ -56,12 +54,12 @@ const PackagePaths = (props) => { grid={grid} itemLayout="vertical" size="small" + dataSource={paths} pagination={{ hideOnSinglePage: true, pageSize: 2, size: 'small' }} - dataSource={paths} renderItem={ (webAppPath) => { const stepItems = [ @@ -106,7 +104,7 @@ const PackagePaths = (props) => { current={stepItems.length - 1} direction="vertical" items={stepItems} - progressDot + progressDot={true} size="small" /> diff --git a/plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx b/plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx index 68f7c6f8ef5d3..59ff1e84d9a61 100644 --- a/plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx +++ b/plugins/reporters/web-app-template/src/components/PathExcludesTable.jsx @@ -17,13 +17,11 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; import { Table } from 'antd'; +import PropTypes from 'prop-types'; // Generates the HTML to display webAppPathExclude(s) as a Table -const PathExcludesTable = (props) => { - const { excludes } = props; +const PathExcludesTable = ({ excludes }) => { const columns = [ { dataIndex: 'reason', @@ -48,6 +46,8 @@ const PathExcludesTable = (props) => {
{ showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results` } } - rowKey="key" - size="small" /> ); }; diff --git a/plugins/reporters/web-app-template/src/components/ResolutionTable.jsx b/plugins/reporters/web-app-template/src/components/ResolutionTable.jsx index c03c96170e568..7e8f3299cd28f 100644 --- a/plugins/reporters/web-app-template/src/components/ResolutionTable.jsx +++ b/plugins/reporters/web-app-template/src/components/ResolutionTable.jsx @@ -17,13 +17,11 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; import { Table } from 'antd'; +import PropTypes from 'prop-types'; // Generates the HTML to display webAppResolution(s) as a Table -const ResolutionTable = (props) => { - const { resolutions } = props; +const ResolutionTable = ({ resolutions }) => { const columns = [ { dataIndex: 'reason', @@ -48,6 +46,8 @@ const ResolutionTable = (props) => {
{ showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results` } } - rowKey="key" - size="small" /> ); }; diff --git a/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx b/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx index adead8196e92b..9f7b6f69039e6 100644 --- a/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx +++ b/plugins/reporters/web-app-template/src/components/RuleViolationsTable.jsx @@ -18,8 +18,7 @@ */ import React from 'react'; -import PropTypes from 'prop-types'; -import { Collapse, Table, Tooltip } from 'antd'; + import { ExclamationCircleOutlined, FileAddOutlined, @@ -28,12 +27,14 @@ import { IssuesCloseOutlined, WarningOutlined } from '@ant-design/icons'; - +import { Collapse, Table, Tooltip } from 'antd'; import Markdown from 'markdown-to-jsx'; +import PropTypes from 'prop-types'; + import PackageDetails from './PackageDetails'; +import PackageFindingsTable from './PackageFindingsTable'; import PackageLicenses from './PackageLicenses'; import PackagePaths from './PackagePaths'; -import PackageFindingsTable from './PackageFindingsTable'; import PathExcludesTable from './PathExcludesTable'; import ResolutionTable from './ResolutionTable'; import ScopeExcludesTable from './ScopeExcludesTable'; @@ -41,7 +42,7 @@ import { getColumnSearchProps } from './Shared'; // Generates the HTML to display violations as a Table class RuleViolationsTable extends React.Component { - render () { + render() { const { onChange, ruleViolations, @@ -64,7 +65,7 @@ class RuleViolationsTable extends React.Component { dataIndex: 'severityIndex', key: 'severityIndex', filters: [ - { + { text: 'Errors', value: 0 }, @@ -94,7 +95,8 @@ class RuleViolationsTable extends React.Component { className="ort-ok" /> - ) : ( + ) + : ( { webAppRuleViolation.severity === 'ERROR' @@ -121,7 +123,7 @@ class RuleViolationsTable extends React.Component { ) } - ) + ) ), sorter: (a, b) => a.severityIndex - b.severityIndex, sortOrder: sortedInfo.field === 'severityIndex' && sortedInfo.order, @@ -167,7 +169,8 @@ class RuleViolationsTable extends React.Component { const webAppPackage = webAppRuleViolation.package; if (webAppPackage) { - return webAppPackage.isExcluded ? ( + return webAppPackage.isExcluded + ? ( - ) : ( + ) + : ( - ); + ); } return null; @@ -224,6 +228,8 @@ class RuleViolationsTable extends React.Component { className="ort-table-rule-violations" columns={columns} dataSource={ruleViolations} + rowKey="key" + size="small" expandable={{ expandedRowRender: (webAppRuleViolation) => { let defaultActiveKey = [0]; @@ -239,7 +245,7 @@ class RuleViolationsTable extends React.Component { bordered={false} defaultActiveKey={defaultActiveKey} items={(() => { - var collapseItems = []; + const collapseItems = []; if (webAppRuleViolation.hasHowToFix()) { collapseItems.push({ @@ -339,7 +345,6 @@ class RuleViolationsTable extends React.Component { locale={{ emptyText: 'No violations' }} - onChange={onChange} pagination={ { defaultPageSize: 25, @@ -351,11 +356,10 @@ class RuleViolationsTable extends React.Component { showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} violations` } } - rowKey="key" - size="small" + onChange={onChange} /> ); - }; + } } RuleViolationsTable.propTypes = { diff --git a/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx b/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx index 8b7c911e6d224..b28dc2312c868 100644 --- a/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx +++ b/plugins/reporters/web-app-template/src/components/ScopeExcludesTable.jsx @@ -17,13 +17,11 @@ * License-Filename: LICENSE */ -import React from 'react'; -import PropTypes from 'prop-types'; import { Table } from 'antd'; +import PropTypes from 'prop-types'; // Generates the HTML to display webAppScopeExclude(s) as a Table -const ScopeExcludesTable = (props) => { - const { excludes } = props; +const ScopeExcludesTable = ({ excludes }) => { const columns = [ { dataIndex: 'reason', @@ -48,6 +46,8 @@ const ScopeExcludesTable = (props) => {
{ showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} results` } } - rowKey="key" - size="small" /> ); }; diff --git a/plugins/reporters/web-app-template/src/components/Shared.jsx b/plugins/reporters/web-app-template/src/components/Shared.jsx index 26070091e1b16..89778bd2e0ec8 100644 --- a/plugins/reporters/web-app-template/src/components/Shared.jsx +++ b/plugins/reporters/web-app-template/src/components/Shared.jsx @@ -17,16 +17,14 @@ * License-Filename: LICENSE */ +import { + SearchOutlined +} from '@ant-design/icons'; import { Button, Input, - Space, + Space } from 'antd'; -import { - SearchOutlined -} from '@ant-design/icons'; - -/* eslint import/prefer-default-export: 0 */ // Implements a customized Ant Design table column search const getColumnSearchProps = (dataIndex, filteredInfo, that) => ({ @@ -35,29 +33,29 @@ const getColumnSearchProps = (dataIndex, filteredInfo, that) => ({ }) => (
{ that.searchInput = node; }} - placeholder="Search..." - value={selectedKeys[0]} onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} onPressEnter={() => confirm()} - style={{ width: 188, marginBottom: 8, display: 'block' }} /> @@ -65,7 +63,7 @@ const getColumnSearchProps = (dataIndex, filteredInfo, that) => ({
), filterIcon: (filtered) => (), - filteredValue: filteredInfo && filteredInfo[dataIndex] || null, + filteredValue: filteredInfo[dataIndex] || null, onFilter: (value, record) => (record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : false), diff --git a/plugins/reporters/web-app-template/src/components/SummaryView.jsx b/plugins/reporters/web-app-template/src/components/SummaryView.jsx index be854980dec29..60bfe4efe9748 100644 --- a/plugins/reporters/web-app-template/src/components/SummaryView.jsx +++ b/plugins/reporters/web-app-template/src/components/SummaryView.jsx @@ -18,11 +18,7 @@ */ import React from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import { - Col, Row, Tabs, Timeline -} from 'antd'; + import { BugOutlined, CodeOutlined, @@ -32,11 +28,13 @@ import { SecurityScanOutlined, TagsOutlined } from '@ant-design/icons'; -import IssuesTable from './IssuesTable'; -import LicenseChart from './LicenseChart'; -import LicenseStatsTable from './LicenseStatsTable'; -import RuleViolationsTable from './RuleViolationsTable'; -import VulnerabilitiesTable from './VulnerabilitiesTable'; +import { + Col, Row, Tabs, Timeline +} from 'antd'; +import PropTypes from 'prop-types'; + +import { connect } from 'react-redux'; + import { getOrtResult, getSummaryCharts, @@ -46,13 +44,19 @@ import { } from '../reducers/selectors'; import store from '../store'; +import IssuesTable from './IssuesTable'; +import LicenseChart from './LicenseChart'; +import LicenseStatsTable from './LicenseStatsTable'; +import RuleViolationsTable from './RuleViolationsTable'; +import VulnerabilitiesTable from './VulnerabilitiesTable'; + class SummaryView extends React.Component { static onChangeDeclaredLicensesTable(pagination, filters, sorter, extra) { store.dispatch({ type: 'SUMMARY::CHANGE_DECLARED_LICENSES_TABLE', payload: { charts: { - declaredLicenses: extra.currentDataSource, + declaredLicenses: extra.currentDataSource }, columns: { declaredLicenses: { @@ -69,7 +73,7 @@ class SummaryView extends React.Component { type: 'SUMMARY::CHANGE_DETECTED_LICENSES_TABLE', payload: { charts: { - detectedLicensesProcessed: extra.currentDataSource, + detectedLicensesProcessed: extra.currentDataSource }, columns: { detectedLicensesProcessed: { @@ -171,7 +175,7 @@ class SummaryView extends React.Component { className="ort-summary-timeline" items={ ( () => { - var timelineItems = [ + const timelineItems = [ { children: ( @@ -216,9 +220,7 @@ class SummaryView extends React.Component { {' '} scopes { - scopes && scopes.length > 0 - && ( - + !!scopes && scopes.length > 0 && {' '} and {' '} @@ -228,17 +230,16 @@ class SummaryView extends React.Component { {' '} dependency levels - ) } ) } ]; - if (declaredLicensesProcessed.length !== 0 - && detectedLicensesProcessed.length === 0 ) { + if (declaredLicensesProcessed.length !== 0 + && detectedLicensesProcessed.length === 0) { timelineItems.push({ - children: ( + children: ( {' '} Detected @@ -249,7 +250,7 @@ class SummaryView extends React.Component { {' '} declared licenses - ) + ) }); } else if (declaredLicensesProcessed.length === 0 && detectedLicensesProcessed.length !== 0) { @@ -297,9 +298,9 @@ class SummaryView extends React.Component { children: ( { - hasUnresolvedIssues && !hasUnresolvedRuleViolations - && ( - + !!hasUnresolvedIssues + && !hasUnresolvedRuleViolations + && Completed scan with {' '} @@ -318,12 +319,11 @@ class SummaryView extends React.Component { } - ) } { - !hasUnresolvedIssues && hasUnresolvedRuleViolations - && ( - + !hasUnresolvedIssues + && !!hasUnresolvedRuleViolations + && Completed scan with {' '} @@ -342,12 +342,11 @@ class SummaryView extends React.Component { } - ) } { - hasUnresolvedIssues && hasUnresolvedRuleViolations - && ( - + !!hasUnresolvedIssues + && !!hasUnresolvedRuleViolations + && Completed scan with {' '} @@ -373,7 +372,6 @@ class SummaryView extends React.Component { } - ) } { !hasUnresolvedIssues && !hasUnresolvedRuleViolations @@ -389,7 +387,7 @@ class SummaryView extends React.Component { ), color: (hasUnresolvedIssues || hasUnresolvedRuleViolations) ? 'red' : 'green' }); - + return timelineItems; })() } @@ -405,11 +403,11 @@ class SummaryView extends React.Component { && ( - { - var tabItems = [ + const tabItems = [ { label: ( @@ -423,15 +421,15 @@ class SummaryView extends React.Component { ) ), - key: "ort-summary-rule-violations-table", + key: 'ort-summary-rule-violations-table', children: ( ) }, { @@ -447,15 +445,15 @@ class SummaryView extends React.Component { ) ), - key: "ort-summary-issues-table", + key: 'ort-summary-issues-table', children: ( ) }, { @@ -467,15 +465,15 @@ class SummaryView extends React.Component { ) ), - key: "ort-summary-vulnerabilities-table", + key: 'ort-summary-vulnerabilities-table', children: ( ) } @@ -491,7 +489,7 @@ class SummaryView extends React.Component { ) ), - key: "ort-summary-declared-licenses-table", + key: 'ort-summary-declared-licenses-table', children: ( @@ -523,7 +521,7 @@ class SummaryView extends React.Component { ) ), - key: "ort-summary-detected-licenses-table", + key: 'ort-summary-detected-licenses-table', children: ( diff --git a/plugins/reporters/web-app-template/src/components/TableView.jsx b/plugins/reporters/web-app-template/src/components/TableView.jsx index d05e2cfa4d217..7ee113d718ab6 100644 --- a/plugins/reporters/web-app-template/src/components/TableView.jsx +++ b/plugins/reporters/web-app-template/src/components/TableView.jsx @@ -18,15 +18,7 @@ */ import React from 'react'; -import { connect } from 'react-redux'; -import { - Col, - Collapse, - Dropdown, - Row, - Table, - Tooltip -} from 'antd'; + import { CloudDownloadOutlined, EyeOutlined, @@ -35,7 +27,18 @@ import { FileExcelOutlined, LaptopOutlined } from '@ant-design/icons'; +import { + Col, + Collapse, + Dropdown, + Row, + Table, + Tooltip +} from 'antd'; import PropTypes from 'prop-types'; + +import { connect } from 'react-redux'; + import { getOrtResult, getTableView, @@ -48,6 +51,7 @@ import { getTableViewScopeFilterSelections } from '../reducers/selectors'; import store from '../store'; + import PackageDetails from './PackageDetails'; import PackageFindingsTable from './PackageFindingsTable'; import PackageLicenses from './PackageLicenses'; @@ -125,10 +129,10 @@ class TableView extends React.Component { const { isExcluded } = webAppPackage; return (isExcluded && value === 'excluded') || (!isExcluded && value === 'included'); - }, render: (webAppPackage) => ( - webAppPackage.isExcluded ? ( + webAppPackage.isExcluded + ? ( - ) : ( + ) + : ( - ) + ) ), width: '2em' }); @@ -364,16 +369,18 @@ class TableView extends React.Component { filteredValue: filteredInfo.projectIndexes || null, onFilter: (value, webAppPackage) => webAppPackage.projectIndexes.has(value), render: (text, webAppPackage) => ( - webAppPackage.isProject ? ( + webAppPackage.isProject + ? ( - ) : ( + ) + : ( - ) + ) ), title: 'Project', width: 85 @@ -387,8 +394,9 @@ class TableView extends React.Component { ({ key: item.value, @@ -406,12 +414,11 @@ class TableView extends React.Component { }) ), onClick: this.onClickToggleColumnsMenu, - selectedKeys: showKeys + selectedKeys: showKeys }} onClick={() => { store.dispatch({ type: 'TABLE::RESET_COLUMNS_TABLE' }); }} - size="small" > Clear filters @@ -419,6 +426,11 @@ class TableView extends React.Component {
( { - var collapseItems = [ + const collapseItems = [ { label: 'Details', key: 'package-details', @@ -498,11 +510,18 @@ class TableView extends React.Component { ), expandRowByClick: true }} - dataSource={webAppOrtResult.packages} - indentSize={0} locale={{ emptyText: 'No packages' }} + pagination={ + { + defaultPageSize: 100, + hideOnSinglePage: true, + pageSizeOptions: ['50', '100', '250', '500'], + position: 'both', + showSizeChanger: true + } + } onChange={(pagination, filters, sorter, extra) => { store.dispatch({ type: 'TABLE::CHANGE_PACKAGES_TABLE', @@ -515,18 +534,6 @@ class TableView extends React.Component { } }); }} - pagination={ - { - defaultPageSize: 100, - hideOnSinglePage: true, - pageSizeOptions: ['50', '100', '250', '500'], - position: 'both', - showSizeChanger: true - } - } - size="small" - rowClassName="ort-package" - rowKey="key" /> ); diff --git a/plugins/reporters/web-app-template/src/components/TreeView.jsx b/plugins/reporters/web-app-template/src/components/TreeView.jsx index 7933698eda182..8e116cd6b2de3 100644 --- a/plugins/reporters/web-app-template/src/components/TreeView.jsx +++ b/plugins/reporters/web-app-template/src/components/TreeView.jsx @@ -18,7 +18,13 @@ */ import React from 'react'; -import PropTypes from 'prop-types'; + +import { + ArrowDownOutlined, + ArrowUpOutlined, + FileAddOutlined, + FileExcelOutlined +} from '@ant-design/icons'; import { Button, Collapse, @@ -28,20 +34,11 @@ import { Row, Tree } from 'antd'; -import { - ArrowDownOutlined, - ArrowUpOutlined, - FileAddOutlined, - FileExcelOutlined -} from '@ant-design/icons'; -import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; import scrollIntoView from 'scroll-into-view-if-needed'; -import PackageDetails from './PackageDetails'; -import PackageFindingsTable from './PackageFindingsTable'; -import PackageLicenses from './PackageLicenses'; -import PackagePaths from './PackagePaths'; -import PathExcludesTable from './PathExcludesTable'; -import ScopeExcludesTable from './ScopeExcludesTable'; + +import { connect } from 'react-redux'; + import { getOrtResult, getTreeView, @@ -49,6 +46,13 @@ import { } from '../reducers/selectors'; import store from '../store'; +import PackageDetails from './PackageDetails'; +import PackageFindingsTable from './PackageFindingsTable'; +import PackageLicenses from './PackageLicenses'; +import PackagePaths from './PackagePaths'; +import PathExcludesTable from './PathExcludesTable'; +import ScopeExcludesTable from './ScopeExcludesTable'; + const { Search } = Input; class TreeView extends React.Component { @@ -71,17 +75,19 @@ class TreeView extends React.Component { const { value } = e.target; const searchValue = value.trim(); const { webAppOrtResult } = this.props; - const searchPackageTreeNodeKeys = (searchValue === '') ? [] : webAppOrtResult.packages - .reduce((acc, webAppPackage) => { - if (webAppPackage.id.indexOf(searchValue) > -1) { - const treeNodeKeys = webAppOrtResult.getTreeNodeParentKeysByIndex(webAppPackage.packageIndex); - if (treeNodeKeys) { - acc.push(treeNodeKeys); + const searchPackageTreeNodeKeys = (searchValue === '') + ? [] + : webAppOrtResult.packages + .reduce((acc, webAppPackage) => { + if (webAppPackage.id.indexOf(searchValue) > -1) { + const treeNodeKeys = webAppOrtResult.getTreeNodeParentKeysByIndex(webAppPackage.packageIndex); + if (treeNodeKeys) { + acc.push(treeNodeKeys); + } } - } - return acc; - }, []); + return acc; + }, []); const expandedKeys = Array.from(searchPackageTreeNodeKeys .reduce( @@ -193,7 +199,8 @@ class TreeView extends React.Component { onPressEnter={this.onChangeSearch} /> { - matchedKeys.length ? ( + matchedKeys.length + ? ( - ) : null + ) + : null }
{ - selectedWebAppTreeNode - && !selectedWebAppTreeNode.isScope - && ( -
+ !!selectedWebAppTreeNode && !selectedWebAppTreeNode.isScope &&
{ if (webAppOrtResult.hasExcludes()) { @@ -263,18 +272,14 @@ class TreeView extends React.Component { ); })() } - placement="right" - closable onClose={this.onCloseDrawer} - open={showDrawer} - width="65%" > { - var collapseItems = [ + const collapseItems = [ { label: 'Details', key: 'package-details', @@ -283,7 +288,7 @@ class TreeView extends React.Component { ) } ]; - + if (selectedWebAppTreeNode.package.hasLicenses()) { collapseItems.push({ label: 'Licenses', @@ -293,7 +298,7 @@ class TreeView extends React.Component { ) }); } - + if (selectedWebAppTreeNode.package.hasPaths()) { collapseItems.push({ label: 'Paths', @@ -305,7 +310,7 @@ class TreeView extends React.Component { ) }); } - + if (selectedWebAppTreeNode.package.hasFindings()) { collapseItems.push({ label: 'Scan Results', @@ -317,7 +322,7 @@ class TreeView extends React.Component { ) }); } - + if (selectedWebAppTreeNode.package.hasPathExcludes()) { collapseItems.push({ label: 'Path Excludes', @@ -329,7 +334,7 @@ class TreeView extends React.Component { ) }); } - + if (selectedWebAppTreeNode.package.hasScopeExcludes()) { collapseItems.push({ label: 'Scope Excludes', @@ -341,13 +346,12 @@ class TreeView extends React.Component { ) }); } - + return collapseItems; })()} />
- ) }
); @@ -368,5 +372,5 @@ const mapStateToProps = (state) => ({ export default connect( mapStateToProps, - () => ({}), + () => ({}) )(TreeView); diff --git a/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx b/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx index 1b3adc3b40f10..a3df33f1d3b04 100644 --- a/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx +++ b/plugins/reporters/web-app-template/src/components/VulnerabilitiesTable.jsx @@ -18,8 +18,7 @@ */ import React from 'react'; -import PropTypes from 'prop-types'; -import { Collapse, Table, Tooltip } from 'antd'; + import { CloseCircleOutlined, ExclamationCircleOutlined, @@ -31,6 +30,8 @@ import { QuestionCircleOutlined, WarningOutlined } from '@ant-design/icons'; +import { Collapse, Table, Tooltip } from 'antd'; +import PropTypes from 'prop-types'; import PackageDetails from './PackageDetails'; import PackagePaths from './PackagePaths'; @@ -41,7 +42,7 @@ import { getColumnSearchProps } from './Shared'; // Generates the HTML to display vulnerabilities as a Table class VulnerabilitiesTable extends React.Component { - render () { + render() { const { onChange, vulnerabilities, @@ -55,12 +56,12 @@ class VulnerabilitiesTable extends React.Component { const renderAhref = (element, href, key, target = '_blank') => ( + {element} ); @@ -75,7 +76,7 @@ class VulnerabilitiesTable extends React.Component { dataIndex: 'severityIndex', key: 'severityIndex', filters: [ - { + { text: 'Critical', value: 0 }, @@ -113,7 +114,8 @@ class VulnerabilitiesTable extends React.Component { className="ort-ok" /> - ) : ( + ) + : ( { webAppVulnerability.severityIndex === 0 @@ -156,7 +158,7 @@ class VulnerabilitiesTable extends React.Component { ) } - ) + ) ), sorter: (a, b) => a.severityIndex - b.severityIndex, sortOrder: sortedInfo.field === 'severityIndex' && sortedInfo.order, @@ -200,7 +202,8 @@ class VulnerabilitiesTable extends React.Component { const webAppPackage = webAppVulnerability.package; if (webAppPackage) { - return webAppPackage.isExcluded ? ( + return webAppPackage.isExcluded + ? ( - ) : ( + ) + : ( - ); + ); } return null; @@ -249,12 +253,12 @@ class VulnerabilitiesTable extends React.Component { return null; } - var domainRegex = /(?:[\w-]+\.)+[\w-]+/; + const domainRegex = /(?:[\w-]+\.)+[\w-]+/; return ( { - references.map((reference, index) => + references.map((reference, index) => renderAhref( ( { const defaultActiveKey = webAppVulnerability.isResolved @@ -295,7 +301,7 @@ class VulnerabilitiesTable extends React.Component { bordered={false} defaultActiveKey={defaultActiveKey} items={(() => { - var collapseItems = []; + const collapseItems = []; if (webAppVulnerability.isResolved) { collapseItems.push({ @@ -360,7 +366,6 @@ class VulnerabilitiesTable extends React.Component { locale={{ emptyText: 'No violations' }} - onChange={onChange} pagination={ { defaultPageSize: 25, @@ -372,11 +377,10 @@ class VulnerabilitiesTable extends React.Component { showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} violations` } } - rowKey="key" - size="small" + onChange={onChange} /> ); - }; + } } VulnerabilitiesTable.propTypes = { diff --git a/plugins/reporters/web-app-template/src/index.jsx b/plugins/reporters/web-app-template/src/index.jsx index e88f7d2f25c66..d145b602cf27a 100644 --- a/plugins/reporters/web-app-template/src/index.jsx +++ b/plugins/reporters/web-app-template/src/index.jsx @@ -18,11 +18,14 @@ */ import React from 'react' + import ReactDOM from 'react-dom/client' + +import { Provider } from 'react-redux'; + import App from './App.jsx' import './index.css' import store from './store'; -import { Provider } from 'react-redux'; ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/plugins/reporters/web-app-template/src/models/VulnerabilityReference.js b/plugins/reporters/web-app-template/src/models/VulnerabilityReference.js index cc79ae940a6d2..97db4646957d5 100644 --- a/plugins/reporters/web-app-template/src/models/VulnerabilityReference.js +++ b/plugins/reporters/web-app-template/src/models/VulnerabilityReference.js @@ -60,12 +60,12 @@ class VulnerabilityReference { } if (obj.url !== null) { - this.#url= obj.url; + this.#url = obj.url; } } } - get scoringSystem () { + get scoringSystem() { return this.#scoringSystem; } diff --git a/plugins/reporters/web-app-template/src/models/WebAppOrtResult.js b/plugins/reporters/web-app-template/src/models/WebAppOrtResult.js index bc916b4199b3a..5ac4bdaec5898 100644 --- a/plugins/reporters/web-app-template/src/models/WebAppOrtResult.js +++ b/plugins/reporters/web-app-template/src/models/WebAppOrtResult.js @@ -26,12 +26,12 @@ import WebAppOrtIssue from './WebAppOrtIssue'; import WebAppPackage from './WebAppPackage'; import WebAppPath from './WebAppPath'; import WebAppPathExclude from './WebAppPathExclude'; +import WebAppResolution from './WebAppResolution'; +import WebAppRuleViolation from './WebAppRuleViolation'; import WebAppScanResult from './WebAppScanResult'; import WebAppScope from './WebAppScope'; import WebAppScopeExclude from './WebAppScopeExclude'; import WebAppTreeNode from './WebAppTreeNode'; -import WebAppRuleViolation from './WebAppRuleViolation'; -import WebAppResolution from './WebAppResolution'; import WebAppVulnerability from './WebAppVulnerability'; class WebAppOrtResult { diff --git a/plugins/reporters/web-app-template/src/models/WebAppPackage.js b/plugins/reporters/web-app-template/src/models/WebAppPackage.js index 2872d4337cf1e..d18e77a859515 100644 --- a/plugins/reporters/web-app-template/src/models/WebAppPackage.js +++ b/plugins/reporters/web-app-template/src/models/WebAppPackage.js @@ -17,10 +17,11 @@ * License-Filename: LICENSE */ +import { randomStringGenerator } from '../utils'; + import RemoteArtifact from './RemoteArtifact'; import VcsInfo from './VcsInfo'; import WebAppFinding from './WebAppFinding'; -import { randomStringGenerator } from '../utils'; class WebAppPackage { #_id; @@ -221,7 +222,7 @@ class WebAppPackage { if (obj.findings && webAppOrtResult) { setTimeout(() => { for (let i = 0, len = obj.findings.length; i < len; i++) { - if (obj.findings[i]['path_excludes'] || obj.findings[i]['pathExcludes']) { + if (obj.findings[i].path_excludes || obj.findings[i].pathExcludes) { this.#excludedFindingsIndexes.push(i); } diff --git a/plugins/reporters/web-app-template/src/models/WebAppVulnerability.js b/plugins/reporters/web-app-template/src/models/WebAppVulnerability.js index 122f2928afd59..13159c5b6625f 100644 --- a/plugins/reporters/web-app-template/src/models/WebAppVulnerability.js +++ b/plugins/reporters/web-app-template/src/models/WebAppVulnerability.js @@ -18,7 +18,8 @@ */ import { randomStringGenerator } from '../utils'; -import VulnerabilityReference from './VulnerabilityReference'; + +import VulnerabilityReference from './VulnerabilityReference'; class WebAppVulnerability { #_id; diff --git a/plugins/reporters/web-app-template/src/reducers/index.js b/plugins/reporters/web-app-template/src/reducers/index.js index dfa66e366d410..0fb13d3ae7176 100644 --- a/plugins/reporters/web-app-template/src/reducers/index.js +++ b/plugins/reporters/web-app-template/src/reducers/index.js @@ -29,7 +29,7 @@ const initState = { summary: { charts: { declaredLicensesProcessed: [], - detectedLicensesProcessed: [], + detectedLicensesProcessed: [] }, columns: { declaredLicensesProcessed: { @@ -98,353 +98,353 @@ const initState = { const states = (state = initState, action) => { switch (action.type) { - case 'APP::LOADING_DONE': { - return { - ...state, - app: { - ...state.app, - loading: { - ...state.app.loading, - text: 'Almost ready to display scan report...', - percentage: 100 + case 'APP::LOADING_DONE': { + return { + ...state, + app: { + ...state.app, + loading: { + ...state.app.loading, + text: 'Almost ready to display scan report...', + percentage: 100 + } } - } - }; - } - case 'APP::LOADING_ORT_RESULT_DATA_START': { - return { - ...state, - app: { - ...state.app, - loading: { - ...state.app.loading, - text: 'Loading result data...', - percentage: 1 + }; + } + case 'APP::LOADING_ORT_RESULT_DATA_START': { + return { + ...state, + app: { + ...state.app, + loading: { + ...state.app.loading, + text: 'Loading result data...', + percentage: 1 + } } - } - }; - } - case 'APP::LOADING_ORT_RESULT_DATA_DONE': { - return { - ...state, - app: { - ...state.app, - loading: { - ...state.app.loading, - text: 'Loaded result data...', - percentage: 20 + }; + } + case 'APP::LOADING_ORT_RESULT_DATA_DONE': { + return { + ...state, + app: { + ...state.app, + loading: { + ...state.app.loading, + text: 'Loaded result data...', + percentage: 20 + } + }, + data: { + ...state.data, + ortResult: action.payload, + ortResultLastUpdate: Date.now() } - }, - data: { - ...state.data, - ortResult: action.payload, - ortResultLastUpdate: Date.now() - } - }; - } - case 'APP::LOADING_PROCESS_ORT_RESULT_DATA_START': { - return { - ...state, - app: { - ...state.app, - loading: { - ...state.app.loading, - text: 'Processing result data...', - percentage: 55 + }; + } + case 'APP::LOADING_PROCESS_ORT_RESULT_DATA_START': { + return { + ...state, + app: { + ...state.app, + loading: { + ...state.app.loading, + text: 'Processing result data...', + percentage: 55 + } } - } - }; - } - case 'APP::LOADING_PROCESS_ORT_RESULT_DATA_DONE': { - return { - ...state, - app: { - ...state.app, - loading: { - ...state.app.loading, - text: 'Processed report data...', - percentage: 95 + }; + } + case 'APP::LOADING_PROCESS_ORT_RESULT_DATA_DONE': { + return { + ...state, + app: { + ...state.app, + loading: { + ...state.app.loading, + text: 'Processed report data...', + percentage: 95 + } + }, + data: { + ...state.data, + ortResult: action.payload } - }, - data: { - ...state.data, - ortResult: action.payload - } - }; - } - case 'APP::SHOW_NO_REPORT': { - return { - ...state, - app: { - ...state.app, - showKey: 'ort-no-report-data' - } - }; - } - case 'APP::CHANGE_TAB': { - const { tree: { showDrawer } } = state; - - const newState = { - ...state, - app: { - ...state.app, - showKey: action.key - }, - summary: { - ...state.summary, - shouldComponentUpdate: action.key === 'ort-tabs-summary' - }, - table: { - ...state.table, - shouldComponentUpdate: action.key === 'ort-tabs-table' - }, - tree: { - ...state.tree, - shouldComponentUpdate: action.key === 'ort-tabs-tree' - } - }; - - if (action.key !== 'tree' && showDrawer) { - newState.tree.showDrawer = false; + }; } + case 'APP::SHOW_NO_REPORT': { + return { + ...state, + app: { + ...state.app, + showKey: 'ort-no-report-data' + } + }; + } + case 'APP::CHANGE_TAB': { + const { tree: { showDrawer } } = state; - return newState; - } - case 'APP::HIDE_ABOUT_MODAL': { - return { - ...state, - app: { - ...state.app, - showAboutModal: false - } - }; - } - case 'APP::SHOW_ABOUT_MODAL': { - return { - ...state, - app: { - ...state.app, - showAboutModal: true - } - }; - } - case 'APP::SHOW_LOAD_VIEW': { - return { - ...state, - app: { - ...state.app, - showKey: 'ort-loading' - } - }; - } - case 'APP::SHOW_TABS': { - return { - ...state, - app: { - ...state.app, - showKey: 'ort-tabs-summary' - }, - summary: { - ...state.summary, - shouldComponentUpdate: true - } - }; - } - case 'SUMMARY::CHANGE_DECLARED_LICENSES_TABLE': - case 'SUMMARY::CHANGE_DETECTED_LICENSES_TABLE': { - const { - charts, - columns - } = action.payload; - - return { - ...state, - summary: { - ...state.summary, - charts: { - ...state.summary.charts, - ...charts + const newState = { + ...state, + app: { + ...state.app, + showKey: action.key }, - columns: { - ...state.summary.columns, - ...columns + summary: { + ...state.summary, + shouldComponentUpdate: action.key === 'ort-tabs-summary' + }, + table: { + ...state.table, + shouldComponentUpdate: action.key === 'ort-tabs-table' + }, + tree: { + ...state.tree, + shouldComponentUpdate: action.key === 'ort-tabs-tree' } + }; + + if (action.key !== 'tree' && showDrawer) { + newState.tree.showDrawer = false; } - }; - } - case 'SUMMARY::CHANGE_ISSUES_TABLE': - case 'SUMMARY::CHANGE_RULE_VIOLATIONS_TABLE': - case 'SUMMARY::CHANGE_VULNERABILITIES_TABLE': { - const { - columns - } = action.payload; - return { - ...state, - summary: { - ...state.summary, - columns: { - ...state.summary.columns, - ...columns + return newState; + } + case 'APP::HIDE_ABOUT_MODAL': { + return { + ...state, + app: { + ...state.app, + showAboutModal: false } - } - }; - } - case 'TABLE::CHANGE_COLUMNS_PACKAGES_TABLE': { - const { columnKey } = action.payload; - let { - table: { - columns: { - showKeys + }; + } + case 'APP::SHOW_ABOUT_MODAL': { + return { + ...state, + app: { + ...state.app, + showAboutModal: true } - } - } = state; + }; + } + case 'APP::SHOW_LOAD_VIEW': { + return { + ...state, + app: { + ...state.app, + showKey: 'ort-loading' + } + }; + } + case 'APP::SHOW_TABS': { + return { + ...state, + app: { + ...state.app, + showKey: 'ort-tabs-summary' + }, + summary: { + ...state.summary, + shouldComponentUpdate: true + } + }; + } + case 'SUMMARY::CHANGE_DECLARED_LICENSES_TABLE': + case 'SUMMARY::CHANGE_DETECTED_LICENSES_TABLE': { + const { + charts, + columns + } = action.payload; - if (columnKey && showKeys) { - const keys = new Set(showKeys); - if (keys.has(columnKey)) { - keys.delete(columnKey); - } else { - keys.add(columnKey); - } + return { + ...state, + summary: { + ...state.summary, + charts: { + ...state.summary.charts, + ...charts + }, + columns: { + ...state.summary.columns, + ...columns + } + } + }; + } + case 'SUMMARY::CHANGE_ISSUES_TABLE': + case 'SUMMARY::CHANGE_RULE_VIOLATIONS_TABLE': + case 'SUMMARY::CHANGE_VULNERABILITIES_TABLE': { + const { + columns + } = action.payload; - showKeys = Array.from(keys); + return { + ...state, + summary: { + ...state.summary, + columns: { + ...state.summary.columns, + ...columns + } + } + }; } + case 'TABLE::CHANGE_COLUMNS_PACKAGES_TABLE': { + const { columnKey } = action.payload; + let { + table: { + columns: { + showKeys + } + } + } = state; - return { - ...state, - table: { - ...state.table, - columns: { - ...state.table.columns, - showKeys + if (columnKey && showKeys) { + const keys = new Set(showKeys); + if (keys.has(columnKey)) { + keys.delete(columnKey); + } else { + keys.add(columnKey); } + + showKeys = Array.from(keys); } - }; - } - case 'TABLE::CHANGE_PACKAGES_TABLE': { - const { columns } = action.payload; - return { - ...state, - table: { - ...state.table, - columns: { - ...state.table.columns, - ...columns + return { + ...state, + table: { + ...state.table, + columns: { + ...state.table.columns, + showKeys + } } - } - }; - } - case 'TABLE::RESET_COLUMNS_TABLE': { - return { - ...state, - table: { - ...state.table, - columns: { - filteredInfo: {}, - filterData: [], - sortedInfo: {}, - showKeys: [ - 'declaredLicensesProcessed', - 'detectedLicensesProcessed', - 'levels', - 'scopeIndexes' - ] + }; + } + case 'TABLE::CHANGE_PACKAGES_TABLE': { + const { columns } = action.payload; + + return { + ...state, + table: { + ...state.table, + columns: { + ...state.table.columns, + ...columns + } } + }; + } + case 'TABLE::RESET_COLUMNS_TABLE': { + return { + ...state, + table: { + ...state.table, + columns: { + filteredInfo: {}, + filterData: [], + sortedInfo: {}, + showKeys: [ + 'declaredLicensesProcessed', + 'detectedLicensesProcessed', + 'levels', + 'scopeIndexes' + ] + } + } + }; + } + case 'TREE::DRAWER_CLOSE': + case 'TREE::DRAWER_OPEN': { + return { + ...state, + tree: { + ...state.tree, + showDrawer: !state.tree.showDrawer + } + }; + } + case 'TREE::NODE_EXPAND': { + return { + ...state, + tree: { + ...state.tree, + autoExpandParent: false, + expandedKeys: action.expandedKeys + } + }; + } + case 'TREE::NODE_SELECT': { + const { selectedKeys, selectedWebAppTreeNode } = action.payload; + + if (selectedWebAppTreeNode) { + return { + ...state, + tree: { + ...state.tree, + selectedWebAppTreeNode, + selectedKeys, + showDrawer: true + } + }; } - }; - } - case 'TREE::DRAWER_CLOSE': - case 'TREE::DRAWER_OPEN': { - return { - ...state, - tree: { - ...state.tree, - showDrawer: !state.tree.showDrawer - } - }; - } - case 'TREE::NODE_EXPAND': { - return { - ...state, - tree: { - ...state.tree, - autoExpandParent: false, - expandedKeys: action.expandedKeys - } - }; - } - case 'TREE::NODE_SELECT': { - const { selectedKeys, selectedWebAppTreeNode } = action.payload; - if (selectedWebAppTreeNode) { return { ...state, tree: { ...state.tree, - selectedWebAppTreeNode, selectedKeys, showDrawer: true } }; } + case 'TREE::SEARCH': { + const { expandedKeys, matchedKeys, searchValue } = action.payload; - return { - ...state, - tree: { - ...state.tree, - selectedKeys, - showDrawer: true - } - }; - } - case 'TREE::SEARCH': { - const { expandedKeys, matchedKeys, searchValue } = action.payload; - - return { - ...state, - tree: { - ...state.tree, - autoExpandParent: true, - expandedKeys, - matchedKeys, - searchIndex: 0, - searchValue, - selectedWebAppTreeNode: null, - selectedKeys: matchedKeys.length > 0 ? [matchedKeys[0]] : [], - showDrawer: false - } - }; - } - case 'TREE::SEARCH_NEXT_MATCH': { - const { tree: { searchIndex, matchedKeys } } = state; - const index = searchIndex + 1 > matchedKeys.length - 1 ? 0 : searchIndex + 1; + return { + ...state, + tree: { + ...state.tree, + autoExpandParent: true, + expandedKeys, + matchedKeys, + searchIndex: 0, + searchValue, + selectedWebAppTreeNode: null, + selectedKeys: matchedKeys.length > 0 ? [matchedKeys[0]] : [], + showDrawer: false + } + }; + } + case 'TREE::SEARCH_NEXT_MATCH': { + const { tree: { searchIndex, matchedKeys } } = state; + const index = searchIndex + 1 > matchedKeys.length - 1 ? 0 : searchIndex + 1; - return { - ...state, - tree: { - ...state.tree, - searchIndex: index, - selectedKeys: [matchedKeys[index]] - } - }; - } - case 'TREE::SEARCH_PREVIOUS_MATCH': { - const { tree: { searchIndex, matchedKeys } } = state; - const index = searchIndex - 1 < 0 ? matchedKeys.length - 1 : searchIndex - 1; + return { + ...state, + tree: { + ...state.tree, + searchIndex: index, + selectedKeys: [matchedKeys[index]] + } + }; + } + case 'TREE::SEARCH_PREVIOUS_MATCH': { + const { tree: { searchIndex, matchedKeys } } = state; + const index = searchIndex - 1 < 0 ? matchedKeys.length - 1 : searchIndex - 1; - return { - ...state, - tree: { - ...state.tree, - searchIndex: index, - selectedKeys: [matchedKeys[index]] - } - }; - } - default: - return state; + return { + ...state, + tree: { + ...state.tree, + searchIndex: index, + selectedKeys: [matchedKeys[index]] + } + }; + } + default: + return state; } }; diff --git a/plugins/reporters/web-app-template/src/reducers/selectors.jsx b/plugins/reporters/web-app-template/src/reducers/selectors.jsx index 29f3385d9a489..3600ce61d7eab 100644 --- a/plugins/reporters/web-app-template/src/reducers/selectors.jsx +++ b/plugins/reporters/web-app-template/src/reducers/selectors.jsx @@ -17,7 +17,6 @@ * License-Filename: LICENSE */ -import React from 'react'; import { FileAddOutlined, FileExcelOutlined @@ -74,7 +73,7 @@ export const getSummaryDeclaredLicensesProcessed = memoizeOne( export const getSummaryCharts = (state) => { const declaredLicensesProcessed = getSummaryDeclaredLicensesProcessed(state); const detectedLicensesProcessed = getSummaryDetectedLicensesProcessed(state); - let charts = state.summary.charts; + const charts = state.summary.charts; if (state.summary.charts.declaredLicensesProcessed.length === 0 && declaredLicensesProcessed.length !== 0) { charts.declaredLicensesProcessed = declaredLicensesProcessed; @@ -201,7 +200,8 @@ export const getTableViewProjectFilterSelections = memoizeOne( .map( (webAppPackage) => { const text = webAppPackage.definitionFilePath - ? webAppPackage.definitionFilePath : webAppPackage.id; + ? webAppPackage.definitionFilePath + : webAppPackage.id; if (webAppOrtResult.hasPathExcludes()) { if (webAppPackage.isExcluded) { diff --git a/plugins/reporters/web-app-template/src/sagas/index.js b/plugins/reporters/web-app-template/src/sagas/index.js index b53a480652110..4d5c1d8f89ab3 100644 --- a/plugins/reporters/web-app-template/src/sagas/index.js +++ b/plugins/reporters/web-app-template/src/sagas/index.js @@ -19,9 +19,10 @@ import pako from 'pako'; import { all, put, takeEvery } from 'redux-saga/effects'; + import processOrtResultData from './processOrtResultData'; -export function* loadOrtResultData() { +export function * loadOrtResultData() { yield put({ type: 'APP::SHOW_LOAD_VIEW' }); yield put({ type: 'APP::LOADING_ORT_RESULT_DATA_START' }); @@ -62,16 +63,16 @@ export function* loadOrtResultData() { } } } -export function* watchProcessOrtResultData() { +export function * watchProcessOrtResultData() { yield takeEvery('APP::LOADING_PROCESS_ORT_RESULT_DATA_START', processOrtResultData); } -export function* watchLoadOrtResultData() { +export function * watchLoadOrtResultData() { yield takeEvery('APP::LOADING_START', loadOrtResultData); } // single entry point to start all Sagas at once -export default function* rootSaga() { +export default function * rootSaga() { yield all([ watchLoadOrtResultData(), watchProcessOrtResultData() diff --git a/plugins/reporters/web-app-template/src/sagas/processOrtResultData.js b/plugins/reporters/web-app-template/src/sagas/processOrtResultData.js index 47a82b7003e0d..6ede63940a378 100644 --- a/plugins/reporters/web-app-template/src/sagas/processOrtResultData.js +++ b/plugins/reporters/web-app-template/src/sagas/processOrtResultData.js @@ -18,10 +18,11 @@ */ import { delay, put, select } from 'redux-saga/effects'; -import { getOrtResult } from '../reducers/selectors'; + import WebAppOrtResult from '../models/WebAppOrtResult'; +import { getOrtResult } from '../reducers/selectors'; -function* processOrtResultData() { +function * processOrtResultData() { const ortResultData = yield select(getOrtResult); yield delay(200); diff --git a/plugins/reporters/web-app-template/src/store/index.js b/plugins/reporters/web-app-template/src/store/index.js index f42433c82d1db..a82e300b07fdc 100644 --- a/plugins/reporters/web-app-template/src/store/index.js +++ b/plugins/reporters/web-app-template/src/store/index.js @@ -18,9 +18,9 @@ */ import { applyMiddleware, createStore } from 'redux'; +import { createLogger } from 'redux-logger'; import createSagaMiddleware from 'redux-saga'; -import { createLogger } from 'redux-logger'; import reducer from '../reducers'; import rootSaga from '../sagas'; diff --git a/plugins/reporters/web-app-template/src/utils/index.js b/plugins/reporters/web-app-template/src/utils/index.js index 48039ed55af64..fe2d1df179609 100644 --- a/plugins/reporters/web-app-template/src/utils/index.js +++ b/plugins/reporters/web-app-template/src/utils/index.js @@ -38,10 +38,10 @@ const randomStringGenerator = (length = (Math.floor(Math.random() * 501) + 20)) return alpha(l, symbol(1, alpha(r, []))).join(''); }; -// Utility function to generate color for given license string +// Utility function to generate color for given license string const licenseToHslColor = (license) => { let hash = 0; - let random = Math.floor(Math.random() * 20 + 5); + const random = Math.floor(Math.random() * 20 + 5); for (let i = 0; i < license.length; i++) { hash = license.charCodeAt(i) + ((hash << 5) - hash); @@ -49,7 +49,7 @@ const licenseToHslColor = (license) => { } return 'hsl(' + ((Math.abs(hash) % 320) + random) + ',' + - (25 + 70 * Math.random()) + '%,' + + (25 + 70 * Math.random()) + '%,' + (55 + 10 * Math.random()) + '%)'; } diff --git a/plugins/reporters/web-app-template/vite.config.js b/plugins/reporters/web-app-template/vite.config.js index 0242acfbf2f8d..e124ba1dd2bcb 100644 --- a/plugins/reporters/web-app-template/vite.config.js +++ b/plugins/reporters/web-app-template/vite.config.js @@ -17,11 +17,12 @@ * License-Filename: LICENSE */ -import { defineConfig } from 'vite' import copy from 'rollup-plugin-copy' -import react from '@vitejs/plugin-react' +import { defineConfig } from 'vite' import { viteSingleFile } from 'vite-plugin-singlefile' +import react from '@vitejs/plugin-react' + // https://vitejs.dev/config/ export default defineConfig({ build: {