From 094a261a42746ac5fde0753564713aaac669fbba Mon Sep 17 00:00:00 2001 From: Krishanx92 Date: Sun, 18 Feb 2024 22:40:40 +0530 Subject: [PATCH] Add type feild to gateway UI --- .../main/webapp/site/public/locales/en.json | 1 + .../main/webapp/site/public/locales/fr.json | 1 + .../AddEditGWEnvironment.jsx | 76 +++++--- .../GatewayEnvironments/AddEditVhost.jsx | 8 +- .../ListGWEnviornments.jsx | 175 +++++++++++++----- .../main/webapp/source/src/app/data/api.js | 8 +- 6 files changed, 186 insertions(+), 83 deletions(-) diff --git a/portals/admin/src/main/webapp/site/public/locales/en.json b/portals/admin/src/main/webapp/site/public/locales/en.json index fe6a5d05857..501d52cdb34 100644 --- a/portals/admin/src/main/webapp/site/public/locales/en.json +++ b/portals/admin/src/main/webapp/site/public/locales/en.json @@ -78,6 +78,7 @@ "AdminPages.Gateways.List.title": "Gateway Environments", "AdminPages.Gateways.table.header.description": "Description", "AdminPages.Gateways.table.header.displayName": "Name", + "AdminPages.Gateways.table.header.type": "Type", "AdminPages.Gateways.table.header.gatewayType": "Gateway Type", "AdminPages.Gateways.table.header.vhosts": "Virtual Host(s)", "AdminPages.KeyManager.Delete.form.delete.confirmation.message": "Are you sure you want to delete this KeyManager ?", diff --git a/portals/admin/src/main/webapp/site/public/locales/fr.json b/portals/admin/src/main/webapp/site/public/locales/fr.json index d578c63c268..dea613a915a 100644 --- a/portals/admin/src/main/webapp/site/public/locales/fr.json +++ b/portals/admin/src/main/webapp/site/public/locales/fr.json @@ -79,6 +79,7 @@ "AdminPages.Gateways.table.header.description": "", "AdminPages.Gateways.table.header.displayName": "", "AdminPages.Gateways.table.header.gatewayType": "", + "AdminPages.Gateways.table.header.type": "", "AdminPages.Gateways.table.header.vhosts": "", "AdminPages.KeyManager.Delete.form.delete.confirmation.message": "", "AdminPages.KeyManagers.Delete.form.delete.successful": "", diff --git a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditGWEnvironment.jsx b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditGWEnvironment.jsx index 82e410ee80b..ad48e2774b9 100644 --- a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditGWEnvironment.jsx +++ b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditGWEnvironment.jsx @@ -24,12 +24,16 @@ import { useAppContext } from 'AppComponents/Shared/AppContext'; import { FormattedMessage, useIntl } from 'react-intl'; import FormControl from '@material-ui/core/FormControl'; import { makeStyles } from '@material-ui/core/styles'; +import MenuItem from '@material-ui/core/MenuItem'; +import Select from '@material-ui/core/Select'; +import InputLabel from '@material-ui/core/InputLabel'; import FormDialogBase from 'AppComponents/AdminPages/Addons/FormDialogBase'; import Alert from 'AppComponents/Shared/Alert'; import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import Typography from '@material-ui/core/Typography'; import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormHelperText from '@material-ui/core/FormHelperText'; import FormLabel from '@material-ui/core/FormLabel'; import AddEditVhost from 'AppComponents/GatewayEnvironments/AddEditVhost'; @@ -94,6 +98,7 @@ function reducer(state, { field, value }) { case 'displayName': case 'gatewayType': case 'description': + case 'type': case 'vhosts': return { ...state, [field]: value }; case 'editDetails': @@ -117,45 +122,40 @@ function AddEditGWEnvironment(props) { const defaultVhost = { host: '', httpContext: '', httpsPort: 8243, httpPort: 8280, wssPort: 8099, wsPort: 9099, isNew: true, }; + const { settings } = useAppContext(); + const { gatewayTypes } = settings; const [initialState, setInitialState] = useState({ displayName: '', description: '', + gatewayType: gatewayTypes && gatewayTypes.length > 1 ? 'Regular' : gatewayTypes[0], + type: 'hybrid', vhosts: [defaultVhost], }); const [editMode, setIsEditMode] = useState(false); const [state, dispatch] = useReducer(reducer, initialState); const { - name, displayName, description, vhosts, + name, displayName, description, vhosts, type, gatewayType, } = state; const onChange = (e) => { dispatch({ field: e.target.name, value: e.target.value }); }; - const [selectedGatewayType, setValue] = React.useState(''); - const { settings } = useAppContext(); - const { gatewayTypes } = settings; - const getBorderColor = (gatewayType) => { - return selectedGatewayType === gatewayType + const getBorderColor = (gatewayTypeNew) => { + return gatewayType === gatewayTypeNew ? '2px solid #1976D2' : '2px solid gray'; }; - const handleChange = (event) => { - setValue(event.target.value); - }; - useEffect(() => { setInitialState({ displayName: '', description: '', - selectedGatewayType: '', + gatewayType: '', + type: 'hybrid', vhosts: [defaultVhost], }); - if (gatewayTypes.length === 1) { - setValue(gatewayTypes[0]); - } }, []); const handleHostValidation = (vhost) => { @@ -309,7 +309,7 @@ function AddEditGWEnvironment(props) { return false; } const vhostDto = []; - if (selectedGatewayType === 'Regular') { + if (gatewayType === 'Regular') { vhosts.forEach((vhost) => { vhostDto.push({ host: vhost.host, @@ -320,7 +320,7 @@ function AddEditGWEnvironment(props) { wssPort: vhost.wssPort, }); }); - } else if (selectedGatewayType === 'APK') { + } else if (gatewayType === 'APK') { vhosts.forEach((vhost) => { vhostDto.push({ host: vhost.host, @@ -336,12 +336,12 @@ function AddEditGWEnvironment(props) { if (dataRow) { // assign the update promise to the promiseAPICall promiseAPICall = restApi.updateGatewayEnvironment( - dataRow.id, name.trim(), displayName, description, selectedGatewayType, vhostDto, + dataRow.id, name.trim(), displayName, type, description, gatewayType, vhostDto, ); } else { // assign the create promise to the promiseAPICall - promiseAPICall = restApi.addGatewayEnvironment(name.trim(), displayName, description, - selectedGatewayType, vhostDto); + promiseAPICall = restApi.addGatewayEnvironment(name.trim(), displayName, type, description, + gatewayType, vhostDto); } return promiseAPICall.then(() => { @@ -377,7 +377,9 @@ function AddEditGWEnvironment(props) { name: originalName, displayName: originalDisplayName, description: originalDescription, + type: originalType, vhosts: originalVhosts, + gatewayType: originalGatewayType, } = dataRow; setIsEditMode(true); dispatch({ @@ -385,6 +387,8 @@ function AddEditGWEnvironment(props) { value: { name: originalName, displayName: originalDisplayName, + type: originalType, + gatewayType: originalGatewayType, description: originalDescription, vhosts: originalVhosts, }, @@ -475,14 +479,15 @@ function AddEditGWEnvironment(props) { row aria-label='gateway-type' name='gateway-type' - value={selectedGatewayType} - onChange={handleChange} + value={gatewayType} + onChange={onChange} > } + disabled={editMode} label={(
Regular Gateway @@ -496,9 +501,10 @@ function AddEditGWEnvironment(props) { /> } + disabled={editMode} label={(
APK Gateway @@ -514,10 +520,32 @@ function AddEditGWEnvironment(props) { )} + + Type + + Supported Key Type of the Gateway Environment + diff --git a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditVhost.jsx b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditVhost.jsx index 6d351f8035e..165875797be 100644 --- a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditVhost.jsx +++ b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/AddEditVhost.jsx @@ -53,7 +53,7 @@ const useStyles = makeStyles((theme) => ({ function AddEditVhost(props) { const intl = useIntl(); - const { onVhostChange, initialVhosts, selectedGatewayType } = props; + const { onVhostChange, initialVhosts, gatewayType } = props; const classes = useStyles(); const [userVhosts, setUserVhosts] = useState(initialVhosts); @@ -225,7 +225,7 @@ function AddEditVhost(props) { https://${vhost.host || ''}:${vhost.httpsPort}/${vhost.httpContext}` }
- {selectedGatewayType === 'Regular' && ( + {gatewayType === 'Regular' && ( `ws://${vhost.host || ''}:${vhost.wsPort}/ | wss://${vhost.host || ''}:${vhost.wssPort}/` )} @@ -292,7 +292,7 @@ function AddEditVhost(props) { {/* WS Ports */} - {selectedGatewayType === 'Regular' && ( + {gatewayType === 'Regular' && ( @@ -362,7 +362,7 @@ AddEditVhost.defaultProps = { AddEditVhost.propTypes = { onVhostChange: PropTypes.func.isRequired, - selectedGatewayType: PropTypes.string.isRequired, + gatewayType: PropTypes.string.isRequired, initialVhosts: PropTypes.arrayOf(PropTypes.shape({ host: PropTypes.string.isRequired, httpContext: PropTypes.string, diff --git a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/ListGWEnviornments.jsx b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/ListGWEnviornments.jsx index cf87e2c466e..3ccc2754339 100644 --- a/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/ListGWEnviornments.jsx +++ b/portals/admin/src/main/webapp/source/src/app/components/GatewayEnvironments/ListGWEnviornments.jsx @@ -24,6 +24,7 @@ import ListBase from 'AppComponents/AdminPages/Addons/ListBase'; import Delete from 'AppComponents/GatewayEnvironments/DeleteGWEnvironment'; import AddEdit from 'AppComponents/GatewayEnvironments/AddEditGWEnvironment'; import EditIcon from '@material-ui/icons/Edit'; +import { useAppContext } from 'AppComponents/Shared/AppContext'; /** * API call to get Gateway labels @@ -47,62 +48,134 @@ function apiCall() { */ export default function ListGWEnviornments() { const intl = useIntl(); - const columProps = [ - { name: 'id', options: { display: false } }, - { name: 'name', options: { display: false } }, - { - name: 'displayName', - label: intl.formatMessage({ - id: 'AdminPages.Gateways.table.header.displayName', - defaultMessage: 'Name', - }), - options: { - sort: true, + let columProps; + const { settings } = useAppContext(); + const isGatewayTypeAvailable = settings.gatewayTypes.length === 2; + if (isGatewayTypeAvailable) { + columProps = [ + { name: 'id', options: { display: false } }, + { name: 'name', options: { display: false } }, + { + name: 'displayName', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.displayName', + defaultMessage: 'Name', + }), + options: { + sort: true, + }, + }, + { + name: 'gatewayType', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.gatewayType', + defaultMessage: 'Gateway Type', + }), + options: { + sort: false, + }, }, - }, - { - name: 'gatewayType', - label: intl.formatMessage({ - id: 'AdminPages.Gateways.table.header.gatewayType', - defaultMessage: 'Gateway Type', - }), - options: { - sort: false, + { + name: 'type', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.type', + defaultMessage: 'Type', + }), + options: { + sort: false, + }, }, - }, - { - name: 'description', - label: intl.formatMessage({ - id: 'AdminPages.Gateways.table.header.description', - defaultMessage: 'Description', - }), - options: { - sort: false, + { + name: 'description', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.description', + defaultMessage: 'Description', + }), + options: { + sort: false, + }, + }, + { + name: 'vhosts', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.vhosts', + defaultMessage: 'Virtual Host(s)', + }), + options: { + sort: false, + customBodyRender: (vhosts) => { + return ( + vhosts.map((vhost) => ( +
+ { + 'https://' + vhost.host + (vhost.httpsPort === 443 ? '' : ':' + vhost.httpsPort) + + (vhost.httpContext ? '/' + vhost.httpContext.replace(/^\//g, '') : '') + } +
+ )) + ); + }, + }, + }, + ]; + } else { + columProps = [ + { name: 'id', options: { display: false } }, + { name: 'name', options: { display: false } }, + { + name: 'displayName', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.displayName', + defaultMessage: 'Name', + }), + options: { + sort: true, + }, + }, + { + name: 'type', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.type', + defaultMessage: 'Type', + }), + options: { + sort: false, + }, + }, + { + name: 'description', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.description', + defaultMessage: 'Description', + }), + options: { + sort: false, + }, }, - }, - { - name: 'vhosts', - label: intl.formatMessage({ - id: 'AdminPages.Gateways.table.header.vhosts', - defaultMessage: 'Virtual Host(s)', - }), - options: { - sort: false, - customBodyRender: (vhosts) => { - return ( - vhosts.map((vhost) => ( -
- { - 'https://' + vhost.host + (vhost.httpsPort === 443 ? '' : ':' + vhost.httpsPort) - + (vhost.httpContext ? '/' + vhost.httpContext.replace(/^\//g, '') : '') - } -
- )) - ); + { + name: 'vhosts', + label: intl.formatMessage({ + id: 'AdminPages.Gateways.table.header.vhosts', + defaultMessage: 'Virtual Host(s)', + }), + options: { + sort: false, + customBodyRender: (vhosts) => { + return ( + vhosts.map((vhost) => ( +
+ { + 'https://' + vhost.host + (vhost.httpsPort === 443 ? '' : ':' + vhost.httpsPort) + + (vhost.httpContext ? '/' + vhost.httpContext.replace(/^\//g, '') : '') + } +
+ )) + ); + }, }, }, - }, - ]; + ]; + } const addButtonProps = { triggerButtonText: intl.formatMessage({ id: 'AdminPages.Gateways.List.addButtonProps.triggerButtonText', diff --git a/portals/admin/src/main/webapp/source/src/app/data/api.js b/portals/admin/src/main/webapp/source/src/app/data/api.js index 5b49829dc39..9d6a50022d4 100644 --- a/portals/admin/src/main/webapp/source/src/app/data/api.js +++ b/portals/admin/src/main/webapp/source/src/app/data/api.js @@ -471,9 +471,9 @@ class API extends Resource { /** * Add a Gateway Environment */ - addGatewayEnvironment(name, displayName, description, gatewayType, vhosts, provider="wso2", callback = null) { + addGatewayEnvironment(name, displayName, type, description, gatewayType, vhosts, provider="wso2", callback = null) { return this.client.then((client) => { - const data = { name, displayName, description, gatewayType, vhosts, provider }; + const data = { name, displayName, type, description, gatewayType, vhosts, provider }; const payload = { 'Content-Type': 'application/json', }; @@ -488,9 +488,9 @@ class API extends Resource { /** * Update a Gateway Environment */ - updateGatewayEnvironment(id, name, displayName, description, gatewayType, vhosts, callback = null) { + updateGatewayEnvironment(id, name, displayName, type, description, gatewayType, vhosts, callback = null) { return this.client.then((client) => { - const data = { name, displayName, description, gatewayType, vhosts }; + const data = { name, displayName, type, description, gatewayType, vhosts }; return client.apis['Environments'].put_environments__environmentId_( { environmentId: id }, { requestBody: data },