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

Change the structure of the API Compliance UI #954

Merged
merged 4 commits into from
Mar 1, 2025
Merged

Change the structure of the API Compliance UI #954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f80c5c2
Add policy adherence chart to compliance page and change order
Piumal1999 Feb 28, 2025
ffacdcb
Optimize the compliance page and create rule adherence chart
Piumal1999 Feb 28, 2025
9bbfd30
Optimize the API compliance page in admin portal
Piumal1999 Feb 28, 2025
47d2686
Change compliance progress bar colors
Piumal1999 Feb 28, 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
356 changes: 275 additions & 81 deletions ...app/source/src/app/components/Governance/ComplianceDashboard/APICompliance/Compliance.jsx
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 4 additions & 21 deletions ...p/components/Governance/ComplianceDashboard/APICompliance/PolicyAdherenceSummaryTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,11 @@ import RemoveCircleIcon from '@mui/icons-material/RemoveCircle';
import { useIntl } from 'react-intl';
import PolicyIcon from '@mui/icons-material/Policy';

import GovernanceAPI from 'AppData/GovernanceAPI';
import Utils from 'AppData/Utils';

export default function PolicyAdherenceSummaryTable({ artifactId }) {
export default function PolicyAdherenceSummaryTable({ complianceData }) {
const intl = useIntl();

/**
* API call to get Policies
* @returns {Promise}.
*/
function apiCall() {
const restApi = new GovernanceAPI();
return restApi
.getComplianceByAPIId(artifactId)
.then((result) => {
return result.body.governedPolicies;
})
.catch((error) => {
throw error;
});
}

const renderProgress = (followed, total, status) => {
if (status === 'PENDING') {
return (
Expand All @@ -74,7 +57,6 @@ export default function PolicyAdherenceSummaryTable({ artifactId }) {
}

const percentage = (followed / total) * 100;
const isComplete = followed === total;

return (
<Box sx={{ width: '100%' }}>
Expand All @@ -94,7 +76,7 @@ export default function PolicyAdherenceSummaryTable({ artifactId }) {
borderRadius: 1,
backgroundColor: '#e0e0e0',
'& .MuiLinearProgress-bar': {
backgroundColor: isComplete ? '#00B81D' : '#FF5252',
backgroundColor: '#00B81D',
borderRadius: 1,
},
}}
Expand Down Expand Up @@ -286,7 +268,7 @@ export default function PolicyAdherenceSummaryTable({ artifactId }) {
return (
<ListBase
columProps={policyColumProps}
apiCall={apiCall}
initialData={complianceData ? complianceData.governedPolicies : null}
searchProps={false}
emptyBoxProps={{
content: emptyStateContent,
Expand All @@ -296,6 +278,7 @@ export default function PolicyAdherenceSummaryTable({ artifactId }) {
useContentBase={false}
options={{
elevation: 0,
rowsPerPage: 5,
}}
enableCollapsable
renderExpandableRow={renderExpandableRow}
Expand Down
231 changes: 100 additions & 131 deletions .../src/app/components/Governance/ComplianceDashboard/APICompliance/RuleViolationSummary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* under the License.
*/

import React from 'react';
import React, { useEffect, useState } from 'react';
import {
Grid, Card, CardContent, Typography, Box, Tabs, Tab, Collapse, IconButton,
TablePagination, Chip,
Expand All @@ -30,123 +30,88 @@ import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import LabelIcon from '@mui/icons-material/Label';
import RuleIcon from '@mui/icons-material/Rule';
import ListBase from 'AppComponents/AdminPages/Addons/ListBase';
import GovernanceAPI from 'AppData/GovernanceAPI';
import { useIntl } from 'react-intl';
import CircularProgress from '@mui/material/CircularProgress';
import Utils from '../../../../data/Utils';

// TODO: Improve the component
export default function RuleViolationSummary({ artifactId }) {
export default function RuleViolationSummary({ complianceData }) {
const intl = useIntl();
const [selectedTab, setSelectedTab] = React.useState(0);
const [expandedItems, setExpandedItems] = React.useState([]);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(5);
const [selectedTab, setSelectedTab] = useState(0);
const [expandedItems, setExpandedItems] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);

// TODO: Optimize + simplify
const apiCall = () => {
const restApi = new GovernanceAPI();
return restApi.getComplianceByAPIId(artifactId)
.then((response) => {
// Create a map of ruleset IDs to their results
const rulesetMap = new Map();
response.body.governedPolicies.forEach((policy) => {
policy.rulesetValidationResults.forEach((result) => {
if (!rulesetMap.has(result.id)) {
rulesetMap.set(result.id, result);
}
});
});

// Get unique ruleset IDs from all policies
const rulesetIds = [...rulesetMap.keys()];

// Get validation results for each ruleset
return Promise.all(
rulesetIds.map((rulesetId) => restApi.getRulesetValidationResultsByAPIId(artifactId, rulesetId)
.then((result) => ({
...result.body,
ruleType: rulesetMap.get(rulesetId).ruleType,
}))),
).then((rulesets) => {
// Create rulesets array with severities catagorized
const rulesetCategories = rulesets.map((ruleset) => ({
id: ruleset.id,
rulesetName: ruleset.name,
ruleType: ruleset.ruleType,
error: ruleset.violatedRules.filter((rule) => rule.severity === 'ERROR'),
warn: ruleset.violatedRules.filter((rule) => rule.severity === 'WARN'),
info: ruleset.violatedRules.filter((rule) => rule.severity === 'INFO'),
passed: ruleset.followedRules,
}));

// Group by severity level
const severityGroups = {
errors: [],
warnings: [],
info: [],
passed: [],
};

rulesetCategories.forEach((ruleset) => {
if (ruleset.error.length > 0) {
severityGroups.errors.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
ruleType: ruleset.ruleType,
rules: ruleset.error,
});
}
if (ruleset.warn.length > 0) {
severityGroups.warnings.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
ruleType: ruleset.ruleType,
rules: ruleset.warn,
});
}
if (ruleset.info.length > 0) {
severityGroups.info.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
ruleType: ruleset.ruleType,
rules: ruleset.info,
});
}
if (ruleset.passed.length > 0) {
severityGroups.passed.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
ruleType: ruleset.ruleType,
rules: ruleset.passed,
});
}
});

return severityGroups;
});
})
.catch((error) => {
console.error('Error fetching ruleset adherence data:', error);
return {
errors: [],
warnings: [],
info: [],
passed: [],
};
});
};

// Remove the mock complianceData and use state instead
const [complianceData, setComplianceData] = React.useState({
const [complianceDataState, setComplianceData] = useState({
errors: [],
warnings: [],
info: [],
passed: [],
});

React.useEffect(() => {
apiCall().then(setComplianceData);
}, [artifactId]);
useEffect(() => {
if (!complianceData) return;

// Create rulesets array with severities categorized
const rulesetCategories = complianceData.rulesets.map((ruleset) => ({
id: ruleset.id,
rulesetName: ruleset.name,
ruleType: ruleset.ruleType,
documentationLink: ruleset.documentationLink,
error: ruleset.violatedRules.filter((rule) => rule.severity === 'ERROR'),
warn: ruleset.violatedRules.filter((rule) => rule.severity === 'WARN'),
info: ruleset.violatedRules.filter((rule) => rule.severity === 'INFO'),
passed: ruleset.followedRules,
}));

// Group by severity level
const severityGroups = {
errors: [],
warnings: [],
info: [],
passed: [],
};

rulesetCategories.forEach((ruleset) => {
if (ruleset.error.length > 0) {
severityGroups.errors.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
documentationLink: ruleset.documentationLink,
ruleType: ruleset.ruleType,
rules: ruleset.error,
});
}
if (ruleset.warn.length > 0) {
severityGroups.warnings.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
documentationLink: ruleset.documentationLink,
ruleType: ruleset.ruleType,
rules: ruleset.warn,
});
}
if (ruleset.info.length > 0) {
severityGroups.info.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
documentationLink: ruleset.documentationLink,
ruleType: ruleset.ruleType,
rules: ruleset.info,
});
}
if (ruleset.passed.length > 0) {
severityGroups.passed.push({
id: ruleset.id,
rulesetName: ruleset.rulesetName,
documentationLink: ruleset.documentationLink,
ruleType: ruleset.ruleType,
rules: ruleset.passed,
});
}
});

setComplianceData(severityGroups);
}, [complianceData]);

const handleTabChange = (e, newValue) => {
setSelectedTab(newValue);
Expand Down Expand Up @@ -430,6 +395,26 @@ export default function RuleViolationSummary({ artifactId }) {
}
};

const renderTabContent = (data, emptyMessage, isPassed = false) => {
if (!complianceData) {
return (
<Box sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: 200,
}}
>
<CircularProgress />
</Box>
);
}

return data.length > 0
? renderComplianceCards(data, isPassed)
: renderEmptyContent(emptyMessage);
};

return (
<>
<Tabs
Expand Down Expand Up @@ -487,53 +472,37 @@ export default function RuleViolationSummary({ artifactId }) {
label={intl.formatMessage({
id: 'Governance.ComplianceDashboard.APICompliance.RuleViolation.tab.errors',
defaultMessage: 'Errors ({count})',
}, { count: getTotalRuleCount(complianceData.errors) })}
}, { count: getTotalRuleCount(complianceDataState.errors) })}
/>
<Tab
icon={<WarningIcon color='warning' />}
iconPosition='start'
label={intl.formatMessage({
id: 'Governance.ComplianceDashboard.APICompliance.RuleViolation.tab.warnings',
defaultMessage: 'Warnings ({count})',
}, { count: getTotalRuleCount(complianceData.warnings) })}
}, { count: getTotalRuleCount(complianceDataState.warnings) })}
/>
<Tab
icon={<InfoIcon color='info' />}
iconPosition='start'
label={intl.formatMessage({
id: 'Governance.ComplianceDashboard.APICompliance.RuleViolation.tab.info',
defaultMessage: 'Info ({count})',
}, { count: getTotalRuleCount(complianceData.info) })}
}, { count: getTotalRuleCount(complianceDataState.info) })}
/>
<Tab
icon={<CheckCircleIcon color='success' />}
iconPosition='start'
label={intl.formatMessage({
id: 'Governance.ComplianceDashboard.APICompliance.RuleViolation.tab.passed',
defaultMessage: 'Passed ({count})',
}, { count: getTotalRuleCount(complianceData.passed) })}
}, { count: getTotalRuleCount(complianceDataState.passed) })}
/>
</Tabs>
{selectedTab === 0 && (
complianceData.errors.length > 0
? renderComplianceCards(complianceData.errors)
: renderEmptyContent(getEmptyMessage(0))
)}
{selectedTab === 1 && (
complianceData.warnings.length > 0
? renderComplianceCards(complianceData.warnings)
: renderEmptyContent(getEmptyMessage(1))
)}
{selectedTab === 2 && (
complianceData.info.length > 0
? renderComplianceCards(complianceData.info)
: renderEmptyContent(getEmptyMessage(2))
)}
{selectedTab === 3 && (
complianceData.passed.length > 0
? renderComplianceCards(complianceData.passed, true)
: renderEmptyContent(getEmptyMessage(3))
)}
{selectedTab === 0 && renderTabContent(complianceDataState.errors, getEmptyMessage(0))}
{selectedTab === 1 && renderTabContent(complianceDataState.warnings, getEmptyMessage(1))}
{selectedTab === 2 && renderTabContent(complianceDataState.info, getEmptyMessage(2))}
{selectedTab === 3 && renderTabContent(complianceDataState.passed, getEmptyMessage(3), true)}
</>
);
}
Loading
Loading