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

UI implementation for allowing to have api policy and a common policy with same name and same version #809

Closed
wants to merge 4 commits into from
Closed

UI implementation for allowing to have api policy and a common policy with same name and same version #809

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
a97063f
UI implementation for allowing to have api policy and a common policy…
RusJaI Sep 20, 2024
4fa4dab
Fix compilation errors and missing changes from pulled changes
RusJaI Dec 18, 2024
e297577
fix appearance of the policy list
RusJaI Dec 18, 2024
8a9e6ae
Address review comments
RusJaI Jan 3, 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
3 changes: 3 additions & 0 deletions portals/publisher/src/main/webapp/site/public/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1173,6 +1173,8 @@
"Apis.Details.Policies.AttachedPolicyForm.General.reset": "Reset",
"Apis.Details.Policies.AttachedPolicyForm.General.save": "Save",
"Apis.Details.Policies.AttachedPolicyForm.General.saving": "Saving",
"Apis.Details.Policies.Components.TabPanel.Components.API.Policy.List": "API Policies",
"Apis.Details.Policies.Components.TabPanel.Components.Common.Policy.List": "Common Policies",
"Apis.Details.Policies.CreatePolicy.create.new.policy": "Create New Policy",
"Apis.Details.Policies.CreatePolicy.create.new.policy.link": "Want to create a common policy that will be visible to all APIs instead?",
"Apis.Details.Policies.DeletePolicy.cancel": "Cancel",
Expand Down Expand Up @@ -2045,6 +2047,7 @@
"UnexpectedError.logout": "Logout",
"UnexpectedError.message": "Error occurred due to invalid request",
"UnexpectedError.title": "Internal Server Error",
"Uploading.Policies.Error": "Incompatible file type",
"Workflow.ApplicationCreation.updateStatus.has.errors": "Unable to complete subscription creation approve/reject process.",
"Workflow.SubscriptionCreation.List.empty.content.subscriptioncreations": "There are no pending workflow requests for subscription creation.",
"Workflow.SubscriptionCreation.List.empty.title.subscriptioncreations": "Subscription Creation",
Expand Down
6 changes: 6 additions & 0 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ interface AttachedPolicyCardProps {
target: string;
allPolicies: PolicySpec[] | null;
isAPILevelPolicy: boolean;
listOriginatedFromCommonPolicies: string[];
isApiRevision: boolean;
}

/**
Expand All @@ -61,6 +63,8 @@ const AttachedPolicyCard: FC<AttachedPolicyCardProps> = ({
target,
allPolicies,
isAPILevelPolicy,
listOriginatedFromCommonPolicies,
isApiRevision
}) => {
const { api } = useContext<any>(ApiContext);
const { deleteApiOperation } = useContext<any>(ApiOperationContext);
Expand Down Expand Up @@ -155,6 +159,8 @@ const AttachedPolicyCard: FC<AttachedPolicyCardProps> = ({
handleDelete={handleDelete}
setDrawerOpen={setDrawerOpen}
PolicyConfigurationEditDrawer={PolicyConfigurationEditDrawer}
listOriginatedFromCommonPolicies={listOriginatedFromCommonPolicies}
isApiRevision={isApiRevision}
/>
);
};
Expand Down
6 changes: 6 additions & 0 deletions ...er/src/main/webapp/source/src/app/components/Apis/Details/Policies/AttachedPolicyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ interface AttachedPolicyListProps {
verb: string;
allPolicies: PolicySpec[] | null;
isAPILevelPolicy: boolean;
listOriginatedFromCommonPolicies: string[];
isApiRevision: boolean;
}

/**
Expand All @@ -54,6 +56,8 @@ const AttachedPolicyList: FC<AttachedPolicyListProps> = ({
verb,
allPolicies,
isAPILevelPolicy,
listOriginatedFromCommonPolicies,
isApiRevision
}) => {
const reversedPolicyList = [...currentPolicyList].reverse();
const policyListToDisplay =
Expand Down Expand Up @@ -105,6 +109,8 @@ const AttachedPolicyList: FC<AttachedPolicyListProps> = ({
handleDragEnd={handleDragEnd}
policyListToDisplay={policyListToDisplay}
AttachedPolicyCard={AttachedPolicyCard}
listOriginatedFromCommonPolicies={listOriginatedFromCommonPolicies}
isApiRevision={isApiRevision}
/>
);
};
Expand Down
77 changes: 55 additions & 22 deletions ...ls/publisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/Policies.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,9 @@ const Policies: React.FC = () => {

const [api, updateAPI] = useAPI();
const [updating, setUpdating] = useState(false);
const [policies, setPolicies] = useState<Policy[] | null>(null);
const [apiPolicies, setApiPolicies] = useState<Policy[] | null>(null);
const [commonPolicies, setCommonPolicies] = useState<Policy[] | null>(null);
const [policies, setPolicies] = useState<Policy[]>([]);
const [allPolicies, setAllPolicies] = useState<PolicySpec[] | null>(null);
const [expandedResource, setExpandedResource] = useState<string | null>(null);
const [isChoreoConnectEnabled, setIsChoreoConnectEnabled] = useState(api.gatewayType === 'wso2/apk');
Expand Down Expand Up @@ -175,53 +177,83 @@ const Policies: React.FC = () => {
const commonPoliciesPromise = API.getCommonOperationPolicies();
Promise.all([apiPoliciesPromise, commonPoliciesPromise]).then((response) => {
const [apiPoliciesResponse, commonPoliciesResponse] = response;
const apiSpecificPolicies = apiPoliciesResponse.body.list;
const commonPolicies = commonPoliciesResponse.body.list;
const mergedList = [...commonPolicies, ...apiSpecificPolicies];
const apiSpecificPoliciesList = apiPoliciesResponse.body.list;
const commonPoliciesList = commonPoliciesResponse.body.list;
const mergedList = [...commonPoliciesList, ...apiSpecificPoliciesList];

// Get all common policies and API specific policies
setAllPolicies(mergedList);

let unionByPolicyDisplayName;
let apiPolicyByPolicyDisplayName;
let commonPolicyByPolicyDisplayName;
if (showMultiVersionPolicies) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be simplified as follows.

// Get the policies depending on the policy display name and version
apiPolicyByPolicyDisplayName = [...apiSpecificPoliciesList
    .reduce((map: Map<string, Policy>, obj: Policy) => 
        map.set((showMultiVersionPolicies ? obj.name + obj.version : obj.name), obj), new Map()).values()];
commonPolicyByPolicyDisplayName = [...commonPoliciesList
    .reduce((map: Map<string, Policy>, obj: Policy) => 
        map.set((showMultiVersionPolicies ? obj.name + obj.version : obj.name), obj), new Map()).values()];

// Get the union of policies depending on the policy display name and version
unionByPolicyDisplayName = [...mergedList
.reduce((map, obj) => map.set(obj.name + obj.version, obj), new Map()).values()];
// Get the policies depending on the policy display name and version
apiPolicyByPolicyDisplayName = [...apiSpecificPoliciesList
.reduce((map: Map<string, Policy>, obj: Policy) =>
map.set(obj.name + obj.version, obj), new Map()).values()];
commonPolicyByPolicyDisplayName = [...commonPoliciesList
.reduce((map: Map<string, Policy>, obj: Policy) =>
map.set(obj.name + obj.version, obj), new Map()).values()];
} else {
// Get the union of policies depending on the policy display name
unionByPolicyDisplayName = [...mergedList
.reduce((map, obj) => map.set(obj.name, obj), new Map()).values()];
// Get the policies depending on the policy display name
apiPolicyByPolicyDisplayName = [...apiSpecificPoliciesList
.reduce((map: Map<string, Policy>, obj: Policy) =>
map.set(obj.name, obj), new Map()).values()];
commonPolicyByPolicyDisplayName = [...commonPoliciesList
.reduce((map: Map<string, Policy>, obj: Policy) =>
map.set(obj.name, obj), new Map()).values()];
}
unionByPolicyDisplayName.sort(
apiPolicyByPolicyDisplayName.sort(
(a: Policy, b: Policy) => a.name.localeCompare(b.name))
commonPolicyByPolicyDisplayName.sort(
(a: Policy, b: Policy) => a.name.localeCompare(b.name))

let filteredApiPolicyByGatewayTypeList = null;
let filteredCommonPolicyByGatewayTypeList = null;

let filteredByGatewayTypeList = null;
if (!isChoreoConnectEnabled) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be simplified as,

let gatewayType = isChoreoConnectEnabled ? 'ChoreoConnect' : 'Synapse';
// Get relevant gateway supported policies
filteredApiPolicyByGatewayTypeList = apiPolicyByPolicyDisplayName.filter(
    (policy: Policy) => policy.supportedGateways.includes(gatewayType));
filteredCommonPolicyByGatewayTypeList = commonPolicyByPolicyDisplayName.filter(
    (policy: Policy) => policy.supportedGateways.includes(gatewayType));

// Get synpase gateway supported policies
filteredByGatewayTypeList = unionByPolicyDisplayName.filter(
filteredApiPolicyByGatewayTypeList = apiPolicyByPolicyDisplayName.filter(
(policy: Policy) => policy.supportedGateways.includes('Synapse'));
filteredCommonPolicyByGatewayTypeList = commonPolicyByPolicyDisplayName.filter(
(policy: Policy) => policy.supportedGateways.includes('Synapse'));
} else {
// Get CC gateway supported policies
filteredByGatewayTypeList = unionByPolicyDisplayName.filter(
filteredApiPolicyByGatewayTypeList = apiPolicyByPolicyDisplayName.filter(
(policy: Policy) => policy.supportedGateways.includes('ChoreoConnect'));
filteredCommonPolicyByGatewayTypeList = commonPolicyByPolicyDisplayName.filter(
(policy: Policy) => policy.supportedGateways.includes('ChoreoConnect'));
}

let filteredByAPITypeList = null;
let filteredApiPoliciesByAPITypeList = [];
let filteredCommonPoliciesByAPITypeList = [];

if (api.type === "HTTP") {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be simplify as,

if (api.type === 'HTTP' || api.type === 'SOAP' || api.type === 'SOAPTOREST') {
    // Get HTTP, SOAP and SOAP to REST supported policies
    filteredApiPoliciesByAPITypeList = filteredApiPolicyByGatewayTypeList.filter(
        (policy: Policy) => policy.supportedApiTypes.includes(api.type));
    filteredCommonPoliciesByAPITypeList = filteredCommonPolicyByGatewayTypeList.filter(
        (policy: Policy) => policy.supportedApiTypes.includes(api.type));
}

// Get HTTP supported policies
filteredByAPITypeList = filteredByGatewayTypeList.filter(
filteredApiPoliciesByAPITypeList = filteredApiPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('HTTP'));
filteredCommonPoliciesByAPITypeList = filteredCommonPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('HTTP'));
} else if (api.type === "SOAP"){
// Get SOAP supported policies
filteredByAPITypeList = filteredByGatewayTypeList.filter(
filteredApiPoliciesByAPITypeList = filteredApiPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('SOAP'));
filteredCommonPoliciesByAPITypeList = filteredCommonPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('SOAP'));
} else if (api.type === "SOAPTOREST"){
// Get SOAP to REST supported policies
filteredByAPITypeList = filteredByGatewayTypeList.filter(
filteredApiPoliciesByAPITypeList = filteredApiPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('SOAPTOREST'));
filteredCommonPoliciesByAPITypeList = filteredCommonPolicyByGatewayTypeList.filter(
(policy: Policy) => policy.supportedApiTypes.includes('SOAPTOREST'));
}

setPolicies(filteredByAPITypeList);
setApiPolicies(filteredApiPoliciesByAPITypeList);
setCommonPolicies(filteredCommonPoliciesByAPITypeList);
const combinedPolicyList = [...filteredCommonPoliciesByAPITypeList, ...filteredApiPoliciesByAPITypeList];
combinedPolicyList.sort(
(a: Policy, b: Policy) => a.name.localeCompare(b.name))
setPolicies(combinedPolicyList);

}).catch((error) => {
console.error(error);
Expand Down Expand Up @@ -498,7 +530,7 @@ const Policies: React.FC = () => {
],
);

if (!policies || !openAPISpec || updating) {
if (!apiPolicies || !commonPolicies || !openAPISpec || updating) {
return <Progress per={90} message='Loading Policies ...' />
}

Expand Down Expand Up @@ -597,7 +629,8 @@ const Policies: React.FC = () => {
</Box>
<Box width='35%' p={1}>
<PolicyList
policyList={policies}
apiPolicyList={apiPolicies}
commonPolicyList={commonPolicies}
fetchPolicies={fetchPolicies}
isChoreoConnectEnabled={isChoreoConnectEnabled}
/>
Expand Down
32 changes: 14 additions & 18 deletions ...her/src/main/webapp/source/src/app/components/Apis/Details/Policies/PoliciesExpansion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
const { apiOperations } = useContext<any>(ApiOperationContext);
const { apiLevelPolicies } = useContext<any>(ApiOperationContext);
const { api } = useContext<any>(APIContext);
const [listOriginatedFromCommonPolicies, setListOriginatedFromCommonPolicies] = useState<string[]>([]);

useEffect(() => {
const requestList = [];
Expand Down Expand Up @@ -119,12 +120,13 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
op.verb.toLowerCase() === verb.toLowerCase(),
) : null;
const apiPolicies = (isAPILevelPolicy) ? apiLevelPolicies : null;
const originatedFromCommonPolicies : string[] = [];

// Populate request flow attached policy list
const requestFlowList: AttachedPolicy[] = [];
const requestFlow = (isAPILevelPolicy) ? apiPolicies.request : operationInAction.operationPolicies.request;
for (const requestFlowAttachedPolicy of requestFlow) {
const { policyId, policyName, policyVersion, uuid } =
const { policyId, policyName, uuid } =
requestFlowAttachedPolicy;
if (policyId === null) {
// Handling migration flow
Expand All @@ -136,14 +138,11 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
uniqueKey: uuid,
});
} else {
const policyObj = allPolicies?.find(
(policy: PolicySpec) =>
policy.name === policyName &&
policy.version === policyVersion,
);
const policyObj = allPolicies?.find((policy: PolicySpec) => policy.id === policyId);
if (policyObj) {
requestFlowList.push({ ...policyObj, uniqueKey: uuid });
} else {
originatedFromCommonPolicies.push(policyId);
try {
// eslint-disable-next-line no-await-in-loop
const policyResponse = await API.getOperationPolicy(
Expand All @@ -167,7 +166,7 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
const responseFlowList: AttachedPolicy[] = [];
const responseFlow = isAPILevelPolicy ? apiPolicies.response : operationInAction.operationPolicies.response;
for (const responseFlowAttachedPolicy of responseFlow) {
const { policyId, policyName, policyVersion, uuid } =
const { policyId, policyName, uuid } =
responseFlowAttachedPolicy;
if (policyId === null) {
// Handling migration flow
Expand All @@ -179,14 +178,11 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
uniqueKey: uuid,
});
} else {
const policyObj = allPolicies?.find(
(policy: PolicySpec) =>
policy.name === policyName &&
policy.version === policyVersion,
);
const policyObj = allPolicies?.find((policy: PolicySpec) => policy.id === policyId);
if (policyObj) {
responseFlowList.push({ ...policyObj, uniqueKey: uuid });
} else {
originatedFromCommonPolicies.push(policyId);
try {
// eslint-disable-next-line no-await-in-loop
const policyResponse = await API.getOperationPolicy(
Expand All @@ -211,7 +207,7 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
const faultFlowList: AttachedPolicy[] = [];
const faultFlow = isAPILevelPolicy ? apiPolicies.fault : operationInAction.operationPolicies.fault;
for (const faultFlowAttachedPolicy of faultFlow) {
const { policyId, policyName, policyVersion, uuid } =
const { policyId, policyName, uuid } =
faultFlowAttachedPolicy;
if (policyId === null) {
// Handling migration flow
Expand All @@ -223,14 +219,11 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
uniqueKey: uuid,
});
} else {
const policyObj = allPolicies?.find(
(policy: PolicySpec) =>
policy.name === policyName &&
policy.version === policyVersion,
);
const policyObj = allPolicies?.find((policy: PolicySpec) => policy.id === policyId);
if (policyObj) {
faultFlowList.push({ ...policyObj, uniqueKey: uuid });
} else {
originatedFromCommonPolicies.push(policyId);
try {
// eslint-disable-next-line no-await-in-loop
const policyResponse = await API.getOperationPolicy(
Expand All @@ -250,6 +243,7 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
}
setFaultFlowPolicyList(faultFlowList);
}
setListOriginatedFromCommonPolicies(originatedFromCommonPolicies);
})();
}, [apiOperations, apiLevelPolicies]);

Expand All @@ -271,6 +265,8 @@ const PoliciesExpansion: FC<PoliciesExpansionProps> = ({
faultFlowDroppablePolicyList={faultFlowDroppablePolicyList}
FlowArrow={FlowArrow}
PolicyDropzone={PolicyDropzone}
listOriginatedFromCommonPolicies={listOriginatedFromCommonPolicies}
isApiRevision={api.isRevision}
/>
);
};
Expand Down
6 changes: 6 additions & 0 deletions ...lisher/src/main/webapp/source/src/app/components/Apis/Details/Policies/PolicyDropzone.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,8 @@ interface PolicyDropzoneProps {
verb: string;
allPolicies: PolicySpec[] | null;
isAPILevelPolicy: boolean;
listOriginatedFromCommonPolicies: string[];
isApiRevision: boolean;
}

/**
Expand All @@ -106,6 +108,8 @@ const PolicyDropzone: FC<PolicyDropzoneProps> = ({
verb,
allPolicies,
isAPILevelPolicy,
listOriginatedFromCommonPolicies,
isApiRevision
}) => {

const [droppedPolicy, setDroppedPolicy] = useState<Policy | null>(null);
Expand Down Expand Up @@ -134,6 +138,8 @@ const PolicyDropzone: FC<PolicyDropzoneProps> = ({
setDroppedPolicy={setDroppedPolicy}
AttachedPolicyList={AttachedPolicyList}
PolicyConfiguringDrawer={PolicyConfiguringDrawer}
listOriginatedFromCommonPolicies={listOriginatedFromCommonPolicies}
isApiRevision={isApiRevision}
/>
);
};
Expand Down
Loading
Loading