Skip to content

Commit

Permalink
Implement federated gateway publisher UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@dakshina99
dakshina99 committed Feb 11, 2025
1 parent 3c2c369 commit 8a17cea
Show file tree
Hide file tree
Showing 44 changed files with 2,000 additions and 1,673 deletions.
4 changes: 2 additions & 2 deletions portals/publisher/src/main/webapp/source/src/app/components/Apis/Apis.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
* under the License.
*/

import React, { Suspense, lazy } from 'react';
import React, { Suspense, lazy} from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Progress from 'AppComponents/Shared/Progress';
import AuthManager from 'AppData/AuthManager';
Expand Down Expand Up @@ -73,7 +73,7 @@ const Apis = () => {
}
}}
/>
<Route path='/apis/:apiUUID/' render={(props) => <DeferredDetails {...props} isAPIProduct={false} />} />
<Route path='/apis/:apiUUID/' render={(props) =><DeferredDetails {...props} isAPIProduct={false} />} />
<Route
path='/api-products/:apiProdUUID/'
render={(props) => {
Expand Down
12 changes: 1 addition & 11 deletions .../publisher/src/main/webapp/source/src/app/components/Apis/Create/AIAPI/APICreateAIAPI.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import { FormattedMessage, useIntl } from 'react-intl';
import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
Expand Down Expand Up @@ -80,7 +79,6 @@ function apiInputsReducer(currentState, inputAction) {
export default function ApiCreateAIAPI(props) {
const [wizardStep, setWizardStep] = useState(0);
const { history, multiGateway } = props;
const { data: settings } = usePublisherSettings();

const [apiInputs, inputsDispatcher] = useReducer(apiInputsReducer, {
type: 'ApiCreateAIAPI',
Expand Down Expand Up @@ -124,20 +122,12 @@ export default function ApiCreateAIAPI(props) {
const {
name, version, context, endpoint, gatewayType, policies = ["Unlimited"], inputValue, llmProviderId,
} = apiInputs;
let defaultGatewayType;
if (settings && settings.gatewayTypes.length === 1 && settings.gatewayTypes.includes('Regular')) {
defaultGatewayType = 'wso2/synapse';
} else if (settings && settings.gatewayTypes.length === 1 && settings.gatewayTypes.includes('APK')) {
defaultGatewayType = 'wso2/apk';
} else {
defaultGatewayType = 'default';
}

const additionalProperties = {
name,
version,
context,
gatewayType: defaultGatewayType === 'default' ? gatewayType : defaultGatewayType,
gatewayType,
policies,
subtypeConfiguration: {
subtype: 'AIAPI',
Expand Down
91 changes: 68 additions & 23 deletions portals/publisher/src/main/webapp/source/src/app/components/Apis/Create/APICreateRoutes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
* specific language governing permissions and limitations
* under the License.
*/
import React, { useState, useEffect } from 'react';
import React, { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { Route, Switch } from 'react-router-dom';
import ResourceNotFound from 'AppComponents/Base/Errors/ResourceNotFound';
import { usePublisherSettings } from 'AppComponents/Shared/AppContext';
import { Progress } from 'AppComponents/Shared';
import APICreateDefault from './Default/APICreateDefault';
import APIProductCreateWrapper from './APIProduct/APIProductCreateWrapper';
import ApiCreateSwagger from './OpenAPI/ApiCreateOpenAPI';
Expand All @@ -42,6 +43,27 @@ const Root = styled('div')({
},
});

const gatewayDetsils = {
'wso2/synapse': {
value: 'wso2/synapse',
name: 'Regular Gateway',
description: 'API gateway embedded in APIM runtime. Connect directly to API Manager.',
isNew: false
},
'wso2/apk': {
value: 'wso2/apk',
name: 'APK Gateway',
description: 'Fast API gateway on Kubernetes. Manages and secures APIs.',
isNew: false
},
'AWS': {
value: 'AWS',
name: 'AWS Gateway',
description: 'API gateway offering from AWS cloud to secures APIs efficiently.',
isNew: true
}
};

// Wrapper component to pass additional props
const WithSomeValue = (Component, additionalProps) => (routeProps) => (
<Component {...routeProps} {...additionalProps} />
Expand All @@ -54,41 +76,64 @@ const WithSomeValue = (Component, additionalProps) => (routeProps) => (
* @returns @inheritdoc
*/
function APICreateRoutes() {
const { data: settings } = usePublisherSettings();
const [gateway, setGatewayType] = useState(false);

const getGatewayType = () => {
if (settings != null) {
if (settings.gatewayTypes && settings.gatewayTypes.length === 2 ) {
setGatewayType(true);
} else {
setGatewayType(false);
}
}
};
const { data: publisherSettings, isLoading } = usePublisherSettings();
const [apiTypes, setApiTypes] = useState(null);
const [gatewayTypes, setGatewayTypes] = useState(null);

useEffect(() => {
getGatewayType();
}, [settings]);
if (!isLoading) {
setApiTypes(publisherSettings.gatewayFeatureCatalog.apiTypes);
const data = publisherSettings.gatewayTypes;
const updatedData = data.map(item => {
if (item === "Regular") return "wso2/synapse";
if (item === "APK") return "wso2/apk";
return item;
});
setGatewayTypes(updatedData);
}
}, [isLoading]);

if (isLoading) {
return <Progress per={80} message='Loading app settings ...' />;
}

return (
<Root className={classes.content}>
<Switch>
<Route path='/apis/create/rest' component={WithSomeValue(APICreateDefault, { multiGateway: gateway })}/>
<Route path='/apis/create/rest' component={WithSomeValue(APICreateDefault,
{ multiGateway: apiTypes?.rest
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/api-products/create' component={APIProductCreateWrapper} />
<Route path='/apis/create/graphQL' component={WithSomeValue(ApiCreateGraphQL,
{ multiGateway: gateway })}
{ multiGateway: apiTypes?.graphql
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/openapi' component={WithSomeValue(ApiCreateSwagger,
{ multiGateway: gateway })}
{ multiGateway: apiTypes?.rest
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/wsdl' component={WithSomeValue(ApiCreateWSDL,
{ multiGateway: apiTypes?.soap
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/wsdl' component={ApiCreateWSDL} />
{/* TODO: Remove ApiCreateWebSocket components and associated routes */}
<Route path='/apis/create/ws' component={ApiCreateWebSocket} />
<Route path='/apis/create/streamingapi/:apiType' component={APICreateStreamingAPI} />
<Route path='/apis/create/asyncapi' component={APICreateAsyncAPI} />
<Route path='/apis/create/ws' component={WithSomeValue(ApiCreateWebSocket,
{ multiGateway: apiTypes?.ws
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/streamingapi/:apiType' component={WithSomeValue(APICreateStreamingAPI,
{ multiGateway: apiTypes?.ws
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/asyncapi' component={WithSomeValue(APICreateAsyncAPI,
{ multiGateway: apiTypes?.ws
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route path='/apis/create/ai-api' component={WithSomeValue(ApiCreateAIAPI,
{ multiGateway: gateway })}/>
{ multiGateway: apiTypes?.ai
.filter(t=>gatewayTypes.includes(t)).map(type => gatewayDetsils[type]) })}
/>
<Route component={ResourceNotFound} />
</Switch>
</Root>
Expand Down
3 changes: 2 additions & 1 deletion ...sher/src/main/webapp/source/src/app/components/Apis/Create/AsyncAPI/ApiCreateAsyncAPI.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const StyledAPICreateBase = styled(APICreateBase)((
*/
export default function ApiCreateAsyncAPI(props) {
const [wizardStep, setWizardStep] = useState(0);
const { history } = props;
const { history, multiGateway } = props;
// eslint-disable-next-line no-use-before-define

const [hideEndpoint, setHideEndpoint] = useState(true);
Expand Down Expand Up @@ -355,6 +355,7 @@ export default function ApiCreateAsyncAPI(props) {
hideEndpoint={hideEndpoint}
endpointPlaceholderText='Streaming Provider'
appendChildrenBeforeEndpoint
multiGateway={multiGateway}
>
<Grid container spacing={2}>
{apiInputs.gatewayVendor === 'solace'
Expand Down
90 changes: 28 additions & 62 deletions ...isher/src/main/webapp/source/src/app/components/Apis/Create/Components/DefaultAPIForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
import TextField from '@mui/material/TextField';
import Grid from '@mui/material/Grid';
import { InputAdornment, IconButton, Icon } from '@mui/material';
import { InputAdornment, IconButton, Icon, RadioGroup, FormControlLabel, Radio } from '@mui/material';
import CircularProgress from '@mui/material/CircularProgress';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
Expand All @@ -29,9 +29,6 @@ import APIValidation from 'AppData/APIValidation';
import FormControl from '@mui/material/FormControl';
import FormHelperText from '@mui/material/FormHelperText';
import FormLabel from '@mui/material/FormLabel';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import API from 'AppData/api';
import { green } from '@mui/material/colors';

Expand Down Expand Up @@ -655,7 +652,7 @@ export default function DefaultAPIForm(props) {
}}
/>
)}
{multiGateway &&
{multiGateway && multiGateway.length > 1 &&
<Grid container spacing={2}>
<FormControl component='fieldset'>
<FormLabel sx={{ marginLeft: '15px', marginTop: '20px' }}>
Expand All @@ -671,61 +668,30 @@ export default function DefaultAPIForm(props) {
value={api.gatewayType}
onChange={onChange}
>
<Grid item xs={6}>
<FormControlLabel
value='wso2/synapse'
className={classes.radioOutline}
control={<Radio />}
label={(
<div>
<span>
<FormattedMessage
id={'Apis.Create.Components.DefaultAPIForm.'
+ 'regular.gateway.type'}
defaultMessage='Regular Gateway'
/>
</span>
<Typography variant='body2' color='textSecondary'>
<FormattedMessage
id={'Apis.Create.Components.DefaultAPIForm.'
+ 'regular.gateway.type.text'}
defaultMessage={'API gateway embedded in APIM '
+ 'runtime. Connect directly APIManager.'}
/>
</Typography>
</div>
)}
sx={{ border: getBorderColor('wso2/synapse') }}
/>
</Grid>
<Grid item xs={6}>
<FormControlLabel
value='wso2/apk'
className={classes.radioOutline}
control={<Radio />}
label={(
<div>
<span>
<FormattedMessage
id={'Apis.Create.Components.DefaultAPIForm.'
+ 'apk.gateway.type'}
defaultMessage='APK Gateway'
/>
</span>
<span className={`${classes.label} ${classes.newLabel}`}>New</span>
<Typography variant='body2' color='textSecondary'>
<FormattedMessage
id={'Apis.Create.Components.DefaultAPIForm.'
+ 'apk.gateway.type.text'}
defaultMessage={'Fast API gateway running on kubernetes'
+ ' designed to manage and secure APIs.'}
/>
</Typography>
</div>
)}
sx={{ border: getBorderColor('wso2/apk') }}
/>
</Grid>
{multiGateway.map((gateway) =>
<Grid item xs={Math.floor(12 / multiGateway.length)} key={gateway.value} >
<FormControlLabel
value={gateway.value}
className={classes.radioOutline}
control={<Radio />}
label={(
<div>
<span>
{gateway.name}
</span>
{gateway.isNew && (
<span className={`${classes.label}
${classes.newLabel}`}>New</span>
)}
<Typography variant='body2' color='textSecondary'>
{gateway.description}
</Typography>
</div>
)}
sx={{ border: getBorderColor(gateway.value) }}
/>
</Grid>
)}
</RadioGroup>
<FormHelperText sx={{ marginLeft: '15px' }}><FormattedMessage
id={'Apis.Create.Components.DefaultAPIForm.'
Expand All @@ -735,7 +701,7 @@ export default function DefaultAPIForm(props) {
</FormHelperText>
</FormControl>
</Grid>
}
}
{!appendChildrenBeforeEndpoint && !!children && children}
</form>
<Grid container direction='row' justifyContent='flex-end' alignItems='center'>
Expand All @@ -762,7 +728,7 @@ DefaultAPIForm.defaultProps = {
};
DefaultAPIForm.propTypes = {
api: PropTypes.shape({}),
multiGateway: PropTypes.string.isRequired,
multiGateway: PropTypes.isRequired,
isAPIProduct: PropTypes.shape({}).isRequired,
isWebSocket: PropTypes.shape({}),
onChange: PropTypes.func.isRequired,
Expand Down
Loading

0 comments on commit 8a17cea

Please sign in to comment.