Skip to content

Commit

Permalink
Merge pull request #745 from Lakith-Rambukkanage/vMain-AI-UI
Browse files Browse the repository at this point in the history
Add BE Rate Limit Request Count Changes
  • Loading branch information
Lakith-Rambukkanage authored Sep 19, 2024
2 parents f668bc1 + da9ec61 commit 7ca1a09
Show file tree
Hide file tree
Showing 10 changed files with 219 additions and 44 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ import Alert from 'AppComponents/Shared/Alert';
import CircularProgress from '@mui/material/CircularProgress';
import DefaultAPIForm from 'AppComponents/Apis/Create/Components/DefaultAPIForm';
import APICreateBase from 'AppComponents/Apis/Create/Components/APICreateBase';
import { API_SECURITY_API_KEY }
from 'AppComponents/Apis/Details/Configuration/components/APISecurity/components/apiSecurityConstants';
import ProvideAIOpenAPI from './Steps/ProvideAIOpenAPI';


Expand Down Expand Up @@ -143,6 +145,7 @@ export default function ApiCreateAIAPI(props) {
llmProviderName,
llmProviderApiVersion,
},
securityScheme: [API_SECURITY_API_KEY]
};
if (endpoint) {
additionalProperties.endpointConfig = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -388,9 +388,20 @@ export default function RuntimeConfiguration() {
case 'saveButtonDisabled':
setSaveButtonDisabled(value);
return state;
case 'aiConfiguration':
case 'aiConfiguration': {
nextState.aiConfiguration = value;
const { throttlingConfiguration } = nextState.aiConfiguration;
if (throttlingConfiguration) {
throttlingConfiguration.isTokenBasedThrottlingEnabled = !!(
throttlingConfiguration.productionMaxPromptTokenCount ||
throttlingConfiguration.productionMaxCompletionTokenCount ||
throttlingConfiguration.productionMaxTotalTokenCount ||
throttlingConfiguration.sandboxMaxPromptTokenCount ||
throttlingConfiguration.sandboxMaxCompletionTokenCount ||
throttlingConfiguration.sandboxMaxTotalTokenCount)
}
return nextState;
}
default:
return state;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import Grid from '@mui/material/Grid';

import { Switch, Typography } from '@mui/material';

import { isRestricted } from 'AppData/AuthManager';
import { useAPI } from 'AppComponents/Apis/Details/components/ApiContext';
import BackendRateLimitingForm from './BackendRateLimitingForm';

// import { useIntl } from 'react-intl';
Expand All @@ -36,43 +32,9 @@ import BackendRateLimitingForm from './BackendRateLimitingForm';
*/
export default function BackendRateLimiting(props) {
const { api, configDispatcher } = props;
const [apiFromContext] = useAPI();
// const intl = useIntl();

function handleOnChangeTokenBasedSwitch({ target: { checked } }) {
let throttlingConfiguration = {};
if (api.aiConfiguration && api.aiConfiguration.throttlingConfiguration) {
throttlingConfiguration = api.aiConfiguration.throttlingConfiguration;
}
const dispatchValue = {
...api.aiConfiguration,
throttlingConfiguration: {
...throttlingConfiguration,
isTokenBasedThrottlingEnabled: checked
}
}
configDispatcher({
action: 'aiConfiguration',
value: dispatchValue,
})
}

return (
<>
<Grid item xs={12} sx={{ mb: 2, ml:1 }}>
<Typography variant='h6' component='h4'>
Token Based Throttling
<Switch
disabled={isRestricted(['apim:api_create'], apiFromContext)}
checked={api.aiConfiguration.throttlingConfiguration.isTokenBasedThrottlingEnabled}
onChange={handleOnChangeTokenBasedSwitch}
color='primary'
inputProps={{
'aria-label': 'is Token Based Throttling Enabled',
}}
/>
</Typography>
</Grid>
<Grid item xs={12} sx={{mb:2}}>
<BackendRateLimitingForm
api={api}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

import WrappedExpansionPanel from 'AppComponents/Shared/WrappedExpansionPanel';
import CommonRateLimitingForm from './CommonRateLimitingForm';
import RequestCountRateLimit from './RequestCountRateLimit';

/**
* Backend Rate Limiting for AI APIs
Expand Down Expand Up @@ -137,6 +138,11 @@ export default function BackendRateLimitingForm(props) {
tooltip: 'Max Total Token Count as an Integer value',
}}
/>
<RequestCountRateLimit
api={api}
configDispatcher={configDispatcher}
isProduction={isProduction}
/>
</AccordionDetails>
</WrappedExpansionPanel>
</Root>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,8 @@ export default function CommonRateLimitingForm(props) {
function validateValue(value) {
const validity = commonFormProps.validator ?
commonFormProps.validator.validate(value, { abortEarly: false }).error
: APIValidation.isReqNumber.validate(value, { abortEarly: false }).error;
if (validity === null) {
: APIValidation.isNumber.validate(value, { abortEarly: false }).error;
if (validity === null || !value) {
setIsValueValid(true);
configDispatcher({ action: 'saveButtonDisabled', value: false });
} else {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/*
* Copyright (c) 2024, WSO2 LLC. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import PropTypes from 'prop-types';
import { Grid, InputAdornment, TextField } from '@mui/material';
import { useIntl } from 'react-intl';

import { isRestricted } from 'AppData/AuthManager';
import RequestCountRateLimitUnit from './RequestCountRateLimitUnit';


export default function RequestCountRateLimit(props) {

const { api, configDispatcher, isProduction } = props;
const intl = useIntl();
let maxTpsValue;
if (api.maxTps) {
maxTpsValue = isProduction ? api.maxTps.production : api.maxTps.sandbox;
} else {
maxTpsValue = '';
}

return (<>
<Grid item xs={12} style={{ marginBottom: 10, position: 'relative' }}>
<TextField
label={isProduction ? intl.formatMessage({
id: 'Apis.Details.Configuration.components.MaxBackendTps.max.'
+ 'throughput.specify.max.prod.tps',
defaultMessage: 'Max Production TPS',
}) : intl.formatMessage({
id: 'Apis.Details.Configuration.components.MaxBackendTps.max.'
+ 'throughput.specify.max.sandbox.tps',
defaultMessage: 'Max Sandbox TPS',
})}
margin='normal'
variant='outlined'
onChange={(event) => {
const value = isProduction ?
{ ...api.maxTps, production: event.target.value } :
{ ...api.maxTps, sandbox: event.target.value };
configDispatcher({
action: 'maxTps',
value,
});
}}
value={api.maxTps !== null ? maxTpsValue : ''}
disabled={isRestricted(['apim:api_create'], api)}
InputProps={{
endAdornment: <InputAdornment position='end'>
<RequestCountRateLimitUnit
api={api}
configDispatcher={configDispatcher}
isProduction={isProduction}
/>
</InputAdornment>,
}}
/>
</Grid>
</>);
}

RequestCountRateLimit.propTypes = {
api: PropTypes.shape({}).isRequired,
configDispatcher: PropTypes.func.isRequired,
isProduction: PropTypes.bool.isRequired,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* Copyright (c) 2024, WSO2 LLC. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import PropTypes from 'prop-types';
import { MenuItem, TextField } from '@mui/material';

// time unit enum
const timeUnitEnum = {
SECOND: 'SECOND',
MINUTE: 'MINUTE',
HOUR: 'HOUR',
};

export default function RequestCountRateLimitUnit(props) {
const { api, configDispatcher, isProduction } = props; //eslint-disable-line
// const intl = useIntl();

let maxTpsUnitValue;
if (api.maxTps) {
maxTpsUnitValue = isProduction ? api.maxTps.productionTimeUnit : api.maxTps.sandboxTimeUnit;
}

if (!maxTpsUnitValue) {
maxTpsUnitValue = timeUnitEnum.SECOND;
}

return (
<>
<TextField
label='Time Unit'
id='time-unit-selector'
value={maxTpsUnitValue}
select
SelectProps={{
MenuProps: {
anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
},
getContentAnchorEl: null,
},
}}
name='selectTimeUnit'
onChange={(event) => {
const value = isProduction ?
{ ...api.maxTps, productionTimeUnit: event.target.value } :
{ ...api.maxTps, sandboxTimeUnit: event.target.value };
configDispatcher({
action: 'maxTps',
value,
});
}}
margin='none'
variant='standard'
sx={{
'& .MuiInputBase-root': {
'&:before': { borderBottom: 'none' }, // Remove underline
'&:after': { borderBottom: 'none' }, // Remove underline
},
}}
>
{Object.keys(timeUnitEnum).map((unit) => (
<MenuItem key={unit} value={unit}>
{unit}
</MenuItem>
))}
</TextField>
</>
);
}

RequestCountRateLimitUnit.propTypes = {
api: PropTypes.shape({}).isRequired,
configDispatcher: PropTypes.func.isRequired,
isProduction: PropTypes.bool.isRequired,
};
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,10 @@ function EndpointOverview(props) {
supportedEndpointTypes = [
{ key: 'http', value: 'HTTP/REST Endpoint' },
];
} else if (type === 'http' && api.aiConfiguration) {
supportedEndpointTypes = [
{ key: 'http', value: 'HTTP/REST Endpoint' },
]
} else {
supportedEndpointTypes = [
{ key: 'http', value: 'HTTP/REST Endpoint' },
Expand Down Expand Up @@ -727,7 +731,22 @@ function EndpointOverview(props) {
value={endpointType.key === 'MOCKED_OAS' ? 'INLINE' : endpointType.key}
onChange={handleEndpointTypeSelect}
>
{supportedEnpointTypes.map((endpoint) => {
{!api.aiConfiguration && supportedEnpointTypes.map((endpoint) => {
return (
<FormControlLabel
value={endpoint.key}
control={(
<Radio
disabled={(isRestricted(['apim:api_create'], api))}
color='primary'
id={endpoint.key}
/>
)}
label={endpoint.value}
/>
);
})}
{api.aiConfiguration && supportedEnpointTypes.map((endpoint) => {
return (
<FormControlLabel
value={endpoint.key}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -506,7 +506,7 @@ function Endpoints(props) {
api.getSwagger(apiObject.id).then((resp) => {
setSwagger(resp.obj);
}).catch((err) => {
console.err(err);
console.error(err);
});
}
}, []);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,7 @@ const definition = {
websubOperationTarget: Joi.string().regex(/^[^{}]*$/).required(),
name: Joi.string().min(1).max(255),
email: Joi.string().email({ tlds: false }).required(),
isReqNumber: Joi.number().required(),
isNumber: Joi.number(),
};

export default definition;

0 comments on commit 7ca1a09

Please sign in to comment.