Skip to content

Add pagination for devportal application subscriptions list #1390

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

Merged
PasanT9 merged 4 commits into from
Jul 13, 2026
Merged

Add pagination for devportal application subscriptions list #1390

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
30c142c
Add pagination for devportal application subscriptions and reduce red…
PasanT9 Jul 10, 2026
0335f08
Split devportal subscriptions pagination into independent API and MCP…
PasanT9 Jul 10, 2026
095fe8b
Address CodeRabbit review: avoid unnecessary full-list walks, evict r…
PasanT9 Jul 10, 2026
d6e966f
Merge branch 'main' into fix-17318-apim-main
PasanT9 Jul 13, 2026
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
1 change: 0 additions & 1 deletion portals/devportal/src/main/webapp/source/src/app/components/Apis/Details/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,6 @@ class DetailsLegacy extends React.Component {
if (user != null) {
this.setState({ open: user.isSideBarOpen });
const restApi = new Api();
existingSubscriptions = restApi.getSubscriptions(this.api_uuid, null);
const subscriptionLimit = app.subscribeApplicationLimit || 5000;
existingSubscriptions = restApi.getSubscriptions(this.api_uuid, null, subscriptionLimit);
promisedApplications = restApi.getAllApplications(null, subscriptionLimit);
Expand Down
133 changes: 88 additions & 45 deletions ...al/src/main/webapp/source/src/app/components/Applications/Details/SubscriptionSection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import TablePagination from '@mui/material/TablePagination';
import PropTypes from 'prop-types';
import Typography from '@mui/material/Typography';
import Icon from '@mui/material/Icon';
Expand All @@ -44,6 +45,7 @@ const classes = {
genericMessageWrapper: `${PREFIX}-genericMessageWrapper`,
subsTable: `${PREFIX}-subsTable`,
sectionContainer: `${PREFIX}-sectionContainer`,
pagination: `${PREFIX}-pagination`,
};

const Root = styled('div')((
Expand Down Expand Up @@ -151,6 +153,19 @@ const Root = styled('div')((
tableLayout: 'fixed',
width: '100%',
},

[`& .${classes.pagination}`]: {
display: 'flex',
justifyContent: 'flex-end',
borderTop: `1px solid ${theme.palette.divider}`,
'& .MuiTablePagination-toolbar': {
minHeight: 48,
paddingRight: 0,
},
'& .MuiTablePagination-displayedRows': {
margin: 0,
},
},
}));

/**
Expand All @@ -167,6 +182,13 @@ const SubscriptionSection = ({
onAddClick,
handleSubscriptionDelete,
handleSubscriptionUpdate,
getAPIById,
getMCPServerById,
getSubscriptionPolicyByName,
paginationCount,
paginationPage,
rowsPerPage,
onPaginationPageChange,
noSubscriptionsMessage,
noSubscriptionsContent,
entityNameColumn,
Expand Down Expand Up @@ -220,52 +242,66 @@ const SubscriptionSection = ({
{subscriptionsNotFound ? (
<ResourceNotFound />
) : (
<Table className={classes.subsTable}>
<TableHead>
<TableRow>
<TableCell className={classes.firstCell}>
{entityNameColumn}
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.subscription.state'
defaultMessage='Lifecycle State'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.business.plan'
defaultMessage='Business Plan'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.Status'
defaultMessage='Subscription Status'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.action'
defaultMessage='Action'
/>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{subscriptions
&& subscriptions.map((subscription) => {
return (
<SubscriptionTableData
key={subscription.subscriptionId}
subscription={subscription}
handleSubscriptionDelete={handleSubscriptionDelete}
handleSubscriptionUpdate={handleSubscriptionUpdate}
<>
<Table className={classes.subsTable}>
<TableHead>
<TableRow>
<TableCell className={classes.firstCell}>
{entityNameColumn}
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.subscription.state'
defaultMessage='Lifecycle State'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.business.plan'
defaultMessage='Business Plan'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.Status'
defaultMessage='Subscription Status'
/>
</TableCell>
<TableCell>
<FormattedMessage
id='Applications.Details.Subscriptions.action'
defaultMessage='Action'
/>
);
})}
</TableBody>
</Table>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{subscriptions
&& subscriptions.map((subscription) => {
return (
<SubscriptionTableData
key={subscription.subscriptionId}
subscription={subscription}
handleSubscriptionDelete={handleSubscriptionDelete}
handleSubscriptionUpdate={handleSubscriptionUpdate}
getAPIById={getAPIById}
getMCPServerById={getMCPServerById}
getSubscriptionPolicyByName={getSubscriptionPolicyByName}
/>
);
})}
</TableBody>
</Table>
<TablePagination
className={classes.pagination}
component='div'
count={paginationCount}
page={paginationPage}
rowsPerPage={rowsPerPage}
rowsPerPageOptions={[]}
onPageChange={onPaginationPageChange}
/>
</>
)}
</Box>
)}
Expand All @@ -285,6 +321,13 @@ SubscriptionSection.propTypes = {
onAddClick: PropTypes.func.isRequired,
handleSubscriptionDelete: PropTypes.func.isRequired,
handleSubscriptionUpdate: PropTypes.func.isRequired,
getAPIById: PropTypes.func.isRequired,
getMCPServerById: PropTypes.func.isRequired,
getSubscriptionPolicyByName: PropTypes.func.isRequired,
paginationCount: PropTypes.number.isRequired,
paginationPage: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
onPaginationPageChange: PropTypes.func.isRequired,
noSubscriptionsMessage: PropTypes.node.isRequired,
noSubscriptionsContent: PropTypes.node.isRequired,
entityNameColumn: PropTypes.node.isRequired,
Expand Down
98 changes: 35 additions & 63 deletions .../src/main/webapp/source/src/app/components/Applications/Details/SubscriptionTableData.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,7 @@
import { FormattedMessage } from 'react-intl';
import { ScopeValidation, resourceMethods, resourcePaths } from 'AppComponents/Shared/ScopeValidation';
import PropTypes from 'prop-types';
import Api from 'AppData/api';
import MCPServer from 'AppData/MCPServer';
import CONSTANTS from 'AppData/Constants';
import Subscription from 'AppData/Subscription';
import { getBasePath } from 'AppUtils/utils';
import { mdiOpenInNew } from '@mdi/js';
import { Icon as MDIcon } from '@mdi/react';
Expand Down Expand Up @@ -85,8 +82,7 @@
this.handleRequestOpen = this.handleRequestOpen.bind(this);
this.handleRequestDelete = this.handleRequestDelete.bind(this);
this.checkIfDynamicUsagePolicy = this.checkIfDynamicUsagePolicy.bind(this);
this.checkIfMonetizedAPI = this.checkIfMonetizedAPI.bind(this);
this.populateSubscriptionTiers = this.populateSubscriptionTiers.bind(this);
this.populateAPIData = this.populateAPIData.bind(this);
this.handleSubscriptionTierUpdate = this.handleSubscriptionTierUpdate.bind(this);
this.handleRequestCloseEditMenu = this.handleRequestCloseEditMenu.bind(this);
this.handleRequestOpenEditMenu = this.handleRequestOpenEditMenu.bind(this);
Expand All @@ -103,10 +99,14 @@
*/
componentDidMount() {
const { subscription } = this.props;
this.mounted = true;
this.checkIfWebhookAPI();
this.checkIfMonetizedAPI(subscription.apiId);
this.checkIfDynamicUsagePolicy(subscription.subscriptionId);
this.populateSubscriptionTiers(subscription.apiId);
this.populateAPIData(subscription.apiId);
this.checkIfDynamicUsagePolicy(subscription.throttlingPolicy);
}

componentWillUnmount() {
this.mounted = false;
}

/**
Expand Down Expand Up @@ -182,75 +182,44 @@
}

/**
* Getting the policies from api details
* @param {string} apiUUID API UUID
* Fetch the tiers and monetization status of the subscribed API/MCP Server in a single call.
* @param {string} apiUUID API/MCP Server UUID
*/
populateSubscriptionTiers(apiUUID) {
let promisedApi;
const { subscription } = this.props;
populateAPIData(apiUUID) {
const { subscription, getAPIById, getMCPServerById } = this.props;
const isMCPServer = subscription.apiInfo.type === 'MCP';
if (isMCPServer) {
promisedApi = new MCPServer().getMCPServerById(apiUUID);
} else {
promisedApi = new Api().getAPIById(apiUUID);
}
promisedApi.then((response) => {
if (response && response.data) {
const api = JSON.parse(response.data);
const apiTiers = api.tiers;
const promisedApi = isMCPServer ? getMCPServerById(apiUUID) : getAPIById(apiUUID);
promisedApi.then((api) => {
if (this.mounted && api) {
const apiTiers = api.tiers || [];
const tiers = [];
for (let i = 0; i < apiTiers.length; i++) {
const { tierName } = apiTiers[i];
tiers.push({ value: tierName, label: tierName });
}
this.setState({ tiers });
}
});
}

/**
* Check if the API is monetized
* @param {string} apiUUID API UUID
*/
checkIfMonetizedAPI(apiUUID) {
let promisedApi;
const { subscription } = this.props;
const isMCPServer = subscription.apiInfo.type === 'MCP';
if (isMCPServer) {
promisedApi = new MCPServer().getMCPServerById(apiUUID);
} else {
promisedApi = new Api().getAPIById(apiUUID);
}
promisedApi.then((response) => {
if (response && response.data) {
const apiData = JSON.parse(response.data);
this.setState({ isMonetizedAPI: apiData.monetization.enabled });
this.setState({
tiers,
isMonetizedAPI: api.monetization && api.monetization.enabled,

Check warning on line 202 in portals/devportal/src/main/webapp/source/src/app/components/Applications/Details/SubscriptionTableData.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=wso2_apim-apps&issues=AZ9KiKcVBiKvcAMPZ_gE&open=AZ9KiKcVBiKvcAMPZ_gE&pullRequest=1390
});
}
});
}

/**
* Check if the policy is dynamic usage type
* @param {string} subscriptionUUID subscription UUID
* @param {string} throttlingPolicy throttling policy name, already available on the subscription
*/
checkIfDynamicUsagePolicy(subscriptionUUID) {
const client = new Subscription();
const promisedSubscription = client.getSubscription(subscriptionUUID);
promisedSubscription.then((response) => {
if (response && response.body) {
const subscriptionData = JSON.parse(response.data);
if (subscriptionData.throttlingPolicy) {
const apiClient = new Api();
const promisedPolicy = apiClient.getTierByName(subscriptionData.throttlingPolicy, 'subscription');
promisedPolicy.then((policyResponse) => {
const policyData = JSON.parse(policyResponse.data);
if (policyData.monetizationAttributes.billingType
&& (policyData.monetizationAttributes.billingType
=== 'DYNAMICRATE')) {
this.setState({ isDynamicUsagePolicy: true });
}
});
}
checkIfDynamicUsagePolicy(throttlingPolicy) {
if (!throttlingPolicy) {
return;
}
const { getSubscriptionPolicyByName } = this.props;
getSubscriptionPolicyByName(throttlingPolicy).then((policyData) => {
if (this.mounted
&& policyData
&& policyData.monetizationAttributes
&& policyData.monetizationAttributes.billingType === 'DYNAMICRATE') {

Check warning on line 221 in portals/devportal/src/main/webapp/source/src/app/components/Applications/Details/SubscriptionTableData.jsx

View check run for this annotation

SonarQubeCloud / SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=wso2_apim-apps&issues=AZ9KiKcVBiKvcAMPZ_gG&open=AZ9KiKcVBiKvcAMPZ_gG&pullRequest=1390
this.setState({ isDynamicUsagePolicy: true });
}
});
}
Expand Down Expand Up @@ -619,5 +588,8 @@
}).isRequired,
handleSubscriptionDelete: PropTypes.func.isRequired,
handleSubscriptionUpdate: PropTypes.func.isRequired,
getAPIById: PropTypes.func.isRequired,
getMCPServerById: PropTypes.func.isRequired,
getSubscriptionPolicyByName: PropTypes.func.isRequired,
};
export default SubscriptionTableData;
Loading
Loading