Merge pull request #935 from ashera96/intra-vendor-model-routing

Improve ModelFailover policy configuration UI
wso2 · Feb 21, 2025 · 75a7c2e · 75a7c2e
2 parents 037d725 + 60b6fb1
commit 75a7c2e
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/.../main/webapp/source/src/app/components/Apis/Details/Policies/CustomPolicies/ModelCard.tsx b/.../main/webapp/source/src/app/components/Apis/Details/Policies/CustomPolicies/ModelCard.tsx
@@ -35,7 +35,7 @@ interface ModelCardProps {
     endpointList: Endpoint[];
     isWeightApplicable: boolean;
     onUpdate: (updatedModel: ModelData) => void;
-    onDelete: () => void;
+    onDelete?: () => void;
 }
 
 const ModelCard: FC<ModelCardProps> = ({
@@ -123,17 +123,19 @@ const ModelCard: FC<ModelCardProps> = ({
                     )}
                 </Grid>
                 <Grid item xs={12}>
-                    <Button
-                        variant='outlined'
-                        color='primary'
-                        data-testid='policy-attached-details-save'
-                        onClick={onDelete}
-                    >
-                        <FormattedMessage
-                            id='Apis.Details.Policies.Custom.Policies.Modelcard.delete'
-                            defaultMessage='Delete'
-                        />
-                    </Button>
+                    {onDelete && (
+                        <Button
+                            variant='outlined'
+                            color='primary'
+                            data-testid='policy-attached-details-save'
+                            onClick={onDelete}
+                        >
+                            <FormattedMessage
+                                id='Apis.Details.Policies.Custom.Policies.Modelcard.delete'
+                                defaultMessage='Delete'
+                            />
+                        </Button>
+                    )}
                 </Grid>
             </Paper>
         </>

diff --git a/...n/webapp/source/src/app/components/Apis/Details/Policies/CustomPolicies/ModelFailover.tsx b/...n/webapp/source/src/app/components/Apis/Details/Policies/CustomPolicies/ModelFailover.tsx
@@ -195,7 +195,6 @@ const ModelFailover: FC<ModelFailoverProps> = ({
                             endpointList={productionEndpoints}
                             isWeightApplicable={false}
                             onUpdate={(updatedTargetModel) => handleTargetModelUpdate('production', 0, updatedTargetModel)}
-                            onDelete={() => {}}
                         />
                         <Button
                             variant='outlined'
@@ -243,7 +242,6 @@ const ModelFailover: FC<ModelFailoverProps> = ({
                             endpointList={productionEndpoints}
                             isWeightApplicable={false}
                             onUpdate={(updatedTargetModel) => handleTargetModelUpdate('sandbox', 0, updatedTargetModel)}
-                            onDelete={() => {}}
                         />
                         <Button
                             variant='outlined'
@@ -271,34 +269,38 @@ const ModelFailover: FC<ModelFailoverProps> = ({
                         ))}
                     </AccordionDetails>
                 </Accordion>
-                <TextField
-                    id='request-timeout'
-                    label='Request Timeout (s)'
-                    size='small'
-                    sx={{ pt: 2, mt: 2 }}
-                    // helperText={getError(spec) === '' ? spec.description : getError(spec)}
-                    // error={getError(spec) !== ''}
-                    variant='outlined'
-                    name='requestTimeout'
-                    type='number'
-                    value={config.requestTimeout}
-                    onChange={(e: any) => setConfig({ ...config, requestTimeout: e.target.value })}
-                    fullWidth
-                />
-                <TextField
-                    id='suspend-duration'
-                    label='Suspend Duration (s)'
-                    size='small'
-                    sx={{ pt: 2, mt: 2 }}
-                    // helperText={getError(spec) === '' ? spec.description : getError(spec)}
-                    // error={getError(spec) !== ''}
-                    variant='outlined'
-                    name='suspendDuration'
-                    type='number'
-                    value={config.suspendDuration}
-                    onChange={(e: any) => setConfig({ ...config, suspendDuration: e.target.value })}
-                    fullWidth
-                />
+                <Grid container mt={2}>
+                    <Grid item xs={6} pr={1}>
+                        <TextField
+                            id='request-timeout'
+                            label='Request Timeout (s)'
+                            size='small'
+                            // helperText={getError(spec) === '' ? spec.description : getError(spec)}
+                            // error={getError(spec) !== ''}
+                            variant='outlined'
+                            name='requestTimeout'
+                            type='number'
+                            value={config.requestTimeout}
+                            onChange={(e: any) => setConfig({ ...config, requestTimeout: e.target.value })}
+                            fullWidth
+                        />
+                    </Grid>
+                    <Grid item xs={6} pl={1}>
+                        <TextField
+                            id='suspend-duration'
+                            label='Suspend Duration (s)'
+                            size='small'
+                            // helperText={getError(spec) === '' ? spec.description : getError(spec)}
+                            // error={getError(spec) !== ''}
+                            variant='outlined'
+                            name='suspendDuration'
+                            type='number'
+                            value={config.suspendDuration}
+                            onChange={(e: any) => setConfig({ ...config, suspendDuration: e.target.value })}
+                            fullWidth
+                        />
+                    </Grid>
+                </Grid>
             </Grid>
         </>
     );