Skip to content

Commit 578f2e1

Browse files
author
Keivan Vosoughi
committed
Add Model Provider Modal
1 parent 447a043 commit 578f2e1

File tree

7 files changed

+460
-80
lines changed

7 files changed

+460
-80
lines changed

‎app/client/src/components/JobStatus/jobStatusIcon.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ const IconWrapper = styled.div`
2424
}
2525
`
2626

27+
const StyledIconWrapper = styled(IconWrapper)`
28+
svg {
29+
color: #008cff;
30+
}
31+
`;
32+
2733

2834
export default function JobStatusIcon({ status, customTooltipTitles }: JobStatusProps) {
2935
const tooltipTitles = {...defaultTooltipTitles, ...customTooltipTitles};
@@ -44,11 +50,11 @@ export default function JobStatusIcon({ status, customTooltipTitles }: JobStatus
4450
</Tooltip>;
4551
case 'ENGINE_SCHEDULING':
4652
return <Tooltip title={tooltipTitles.ENGINE_SCHEDULING}>
47-
<IconWrapper><LoadingOutlined spin/></IconWrapper>
53+
<StyledIconWrapper><LoadingOutlined spin/><span style={{ marginLeft: '5px' }}>{'Scheduling'}</span></StyledIconWrapper>
4854
</Tooltip>;
4955
case 'ENGINE_RUNNING':
5056
return <Tooltip title={tooltipTitles.ENGINE_RUNNING}>
51-
<IconWrapper><LoadingOutlined spin /></IconWrapper>
57+
<StyledIconWrapper><LoadingOutlined spin /></StyledIconWrapper>
5258
</Tooltip>;
5359
case null:
5460
return <Tooltip title={tooltipTitles.null}>

‎app/client/src/pages/DataGenerator/Configure.tsx‎

Lines changed: 66 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { useLocation, useParams } from 'react-router-dom';
1515
import { WizardModeType } from '../../types';
1616
import get from 'lodash/get';
1717
import forEach from 'lodash/forEach';
18+
import { useModelProviders } from '../Settings/hooks';
19+
import { ModelProviderType } from '../Settings/AddModelProviderButton';
20+
import { CustomModel } from '../Settings/SettingsPage';
1821

1922

2023
const StepContainer = styled(Flex)`
@@ -83,6 +86,7 @@ const Configure: FunctionComponent = () => {
8386
// let formData = Form.useWatch((values) => values, form);
8487
const { setIsStepValid } = useWizardCtx();
8588
const { data } = useFetchModels();
89+
const customModelPrividersReq = useModelProviders();
8690
const [selectedFiles, setSelectedFiles] = useState(
8791
!isEmpty(form.getFieldValue('doc_paths')) ? form.getFieldValue('doc_paths') : []);
8892

@@ -157,32 +161,42 @@ const Configure: FunctionComponent = () => {
157161
}
158162
}
159163

160-
const getModelsGroupOptions = (models: any) => {
161-
if (isEmpty(models)) {
162-
return [];
163-
}
164-
const options = [];
165-
const modelTypes = Object.keys(models);
166-
console.log('modelTypes', modelTypes);
167-
forEach(modelTypes, (modelType: string) => {
168-
const models = get(modelTypes, modelType);
169-
console.log('models', models);
170-
const children = models.map((model: string) => ({
171-
label: <span>${model}</span>,
172-
value: model
173-
}))
174-
const groupOption = {
175-
label: <span>${modelType}</span>,
176-
title: modelType,
177-
options: children,
178-
};
179-
options.push(groupOption);
180-
181-
});
182-
}
164+
// const getModelsGroupOptions = (models: any) => {
165+
// if (isEmpty(models)) {
166+
// return [];
167+
// }
168+
// const options = [];
169+
// const modelTypes = Object.keys(models);
170+
// console.log('modelTypes', modelTypes);
171+
// forEach(modelTypes, (modelType: string) => {
172+
// const models = get(modelTypes, modelType);
173+
// console.log('models', models);
174+
// if (!isEmpty(models)) {
175+
// const children = models.map((model: string) => ({
176+
// label: <span>${model}</span>,
177+
// value: model
178+
// }))
179+
// const groupOption = {
180+
// label: <span>${modelType}</span>,
181+
// title: modelType,
182+
// options: children,
183+
// };
184+
// options.push(groupOption);
185+
// }
186+
// });
187+
// }
183188

184189
console.log('data?.models', data?.models);
185-
console.log(getModelsGroupOptions(data?.models))
190+
const customModels = get(customModelPrividersReq, 'data.endpoints', []);
191+
const customModelIds: string[] = [];
192+
forEach(customModels, (model: CustomModel) => {
193+
if (model.provider_type === ModelProviderType.GEMINIE ||
194+
model.provider_type === ModelProviderType.OPENAI
195+
) {
196+
customModelIds.push(model.model_id)
197+
}
198+
});
199+
console.log('customModelIds', customModelIds);
186200

187201
return (
188202
<StepContainer justify='center'>
@@ -229,15 +243,37 @@ const Configure: FunctionComponent = () => {
229243
{formData?.inference_type === ModelProviders.CAII ? (
230244
<Input placeholder={'Enter Cloudera AI Inference Model ID'}/>
231245
) : (
232-
<Select placeholder={'Select a Model'} notFoundContent={'You must select a Model Provider before selecting a Model'}>
233-
{!isEmpty(data?.models) && data?.models[ModelProviders.BEDROCK]?.map((model, i) =>
234-
<Select.Option key={`${model}-${i}`} value={model}>
235-
{model}
236-
</Select.Option>
246+
<Select
247+
placeholder={'Select a Model'}
248+
notFoundContent={'You must select a Model Provider before selecting a Model'}
249+
>
250+
{!isEmpty(data?.models) && !isEmpty(data?.models?.[ModelProviders.BEDROCK]) && (
251+
<Select.OptGroup label="AWS-Bedrock">
252+
{data?.models?.[ModelProviders.BEDROCK]?.map((model, i) => (
253+
<Select.Option key={`${model}-${i}`} value={model}>
254+
{model}
255+
</Select.Option>
256+
))}
257+
</Select.OptGroup>
258+
)}
259+
260+
{/* Add custom model providers here as needed */}
261+
{!isEmpty(customModelIds) && (
262+
<Select.OptGroup label="Custom">
263+
{customModelIds.map((model_id, i) => {
264+
console.log('model', model_id, i)
265+
return (
266+
<Select.Option key={`${model_id}-${i}`} value={model_id}>
267+
{model_id}
268+
</Select.Option>
269+
);
270+
271+
272+
})}
273+
</Select.OptGroup>
237274
)}
238275
</Select>
239276
)}
240-
241277
</Form.Item>
242278
{formData?.inference_type === ModelProviders.CAII && (
243279
<>

‎app/client/src/pages/Home/DatasetsTab.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,16 @@ const DatasetsTab: React.FC<Props> = ({ hideSearch = false }) => {
106106
key: 'job_status',
107107
title: 'Status',
108108
dataIndex: 'job_status',
109-
width: 80,
109+
width: 140,
110110
sorter: sortItemsByKey('job_status'),
111-
render: (status: JobStatus) => <Flex justify='center' align='center'>
111+
render: (status: JobStatus) =>
112+
<Flex>
112113
<JobStatusIcon status={status} customTooltipTitles={{"null": `Job wasn't executed because dataset total count is less than ${JOB_EXECUTION_TOTAL_COUNT_THRESHOLD}!`}}></JobStatusIcon>
114+
{status === 'ENGINE_SCHEDULING' && <div style={{ marginLeft: '5px'}}>{'Scheduling'}</div> }
115+
{status === 'ENGINE_RUNNING' && <div style={{ marginLeft: '5px'}}>{'Running'}</div> }
116+
{status === 'ENGINE_STOPPED' && <div style={{ marginLeft: '5px'}}>{'Stopped'}</div> }
117+
{status === 'ENGINE_SUCCEEDED' && <div style={{ marginLeft: '5px'}}>{'Success'}</div> }
118+
{status === 'ENGINE_TIMEDOUT' && <div style={{ marginLeft: '5px'}}>{'Timeout'}</div> }
113119
</Flex>
114120
},
115121
{

0 commit comments

Comments
 (0)