Skip to content

Commit 28ac0bd

Browse files
Taj010Taj010
authored
Model destination location Form Fields (#2141)
* form fields for model destination locations Signed-off-by: Taj010 <[email protected]> * pass some s3 as props Signed-off-by: Taj010 <[email protected]> * fix type error in registrycatalogmodelform.tsx Signed-off-by: Taj010 <[email protected]> * address comments Signed-off-by: Taj010 <[email protected]> * adjust RegistrationModelLocationFields component Signed-off-by: Taj010 <[email protected]> --------- Signed-off-by: Taj010 <[email protected]>
1 parent 23c8cf8 commit 28ac0bd

File tree

5 files changed

+165
-16
lines changed

5 files changed

+165
-16
lines changed

‎clients/ui/frontend/src/app/pages/modelCatalog/screens/RegisterCatalogModelForm.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,18 +62,11 @@ const RegisterCatalogModelForm: React.FC<RegisterCatalogModelFormProps> = ({
6262

6363
const uri = artifacts.length > 0 ? getModelArtifactUri(artifacts) : '';
6464

65-
const initialFormData: RegisterCatalogModelFormData = {
65+
const initialFormData: Partial<RegisterCatalogModelFormData> = {
6666
modelName: getModelName(decodedParams.modelName || ''),
6767
modelDescription: model?.description || '',
6868
versionName: 'Version 1',
69-
versionDescription: '',
70-
sourceModelFormat: '',
71-
sourceModelFormatVersion: '',
7269
modelLocationType: ModelLocationType.URI,
73-
modelLocationEndpoint: '',
74-
modelLocationBucket: '',
75-
modelLocationRegion: '',
76-
modelLocationPath: '',
7770
modelLocationURI: uri || '',
7871
modelRegistry: preferredModelRegistry.name,
7972
modelCustomProperties: { ...getLabelsFromCustomProperties(model?.customProperties), ...tasks },

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegisterAndStoreFields.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
33
import FormSection from '~/app/pages/modelRegistry/components/pf-overrides/FormSection';
44
import { RegistrationCommonFormData } from './useRegisterModelData';
55
import RegistrationModelLocationFields from './RegistrationModelLocationFields';
6+
import RegistrationDestinationLocationFields from './RegistrationDestinationLocationFields';
67

78
type RegisterAndStoreFieldsProps<D extends RegistrationCommonFormData> = {
89
formData: D;
@@ -33,19 +34,14 @@ const RegisterAndStoreFields = <D extends RegistrationCommonFormData>({
3334
formData={formData}
3435
setData={setData}
3536
isCatalogModel={isCatalogModel}
37+
includeCredentialFields
3638
/>
3739
</FormSection>
3840
<FormSection
3941
title="Model destination location"
40-
description="Specify the location that will be used to store the registered model."
42+
description="Specify the OCI registry location that will be used to store the registered model."
4143
>
42-
TODO destination location fields here
43-
{/*
44-
TODO this will need the inputs we require to create the secret required by the job,
45-
but in a generic way - don't recreate the whole ODH create/select connection flow
46-
here. start with bare minimum simple inputs.
47-
Jobs are documented here: https://github.com/kubeflow/model-registry/tree/main/jobs/async-upload
48-
*/}
44+
<RegistrationDestinationLocationFields formData={formData} setData={setData} />
4945
</FormSection>
5046
</>
5147
);

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationDestinationLocationFields.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import React from 'react';
2+
import { FormGroup, TextInput } from '@patternfly/react-core';
3+
import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
4+
import PasswordInput from '~/app/shared/components/PasswordInput';
5+
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
6+
import { RegistrationCommonFormData } from './useRegisterModelData';
7+
8+
type RegistrationDestinationLocationFieldsProps<D extends RegistrationCommonFormData> = {
9+
formData: D;
10+
setData: UpdateObjectAtPropAndValue<D>;
11+
};
12+
13+
const RegistrationDestinationLocationFields = <D extends RegistrationCommonFormData>({
14+
formData,
15+
setData,
16+
}: RegistrationDestinationLocationFieldsProps<D>): React.ReactNode => {
17+
const {
18+
destinationOciRegistry,
19+
destinationOciUsername,
20+
destinationOciPassword,
21+
destinationOciUri,
22+
destinationOciEmail,
23+
} = formData;
24+
25+
// OCI fields
26+
const ociRegistryInput = (
27+
<TextInput
28+
isRequired
29+
type="text"
30+
id="destination-oci-registry"
31+
name="destination-oci-registry"
32+
value={destinationOciRegistry}
33+
onChange={(_e, value) => setData('destinationOciRegistry', value)}
34+
/>
35+
);
36+
37+
const ociUsernameInput = (
38+
<TextInput
39+
isRequired
40+
type="text"
41+
id="destination-oci-username"
42+
name="destination-oci-username"
43+
value={destinationOciUsername}
44+
onChange={(_e, value) => setData('destinationOciUsername', value)}
45+
/>
46+
);
47+
48+
const ociPasswordInput = (
49+
<PasswordInput
50+
isRequired
51+
id="destination-oci-password"
52+
name="destination-oci-password"
53+
value={destinationOciPassword}
54+
onChange={(_e, value) => setData('destinationOciPassword', value)}
55+
/>
56+
);
57+
58+
const ociUriInput = (
59+
<TextInput
60+
isRequired
61+
type="text"
62+
id="destination-oci-uri"
63+
name="destination-oci-uri"
64+
value={destinationOciUri}
65+
onChange={(_e, value) => setData('destinationOciUri', value)}
66+
/>
67+
);
68+
69+
const ociEmailInput = (
70+
<TextInput
71+
type="email"
72+
id="destination-oci-email"
73+
name="destination-oci-email"
74+
value={destinationOciEmail}
75+
onChange={(_e, value) => setData('destinationOciEmail', value)}
76+
/>
77+
);
78+
79+
return (
80+
<>
81+
<FormGroup label="Registry" isRequired fieldId="destination-oci-registry">
82+
<FormFieldset component={ociRegistryInput} field="Registry" />
83+
</FormGroup>
84+
<FormGroup label="URI" isRequired fieldId="destination-oci-uri">
85+
<FormFieldset component={ociUriInput} field="URI" />
86+
</FormGroup>
87+
<FormGroup label="Username" isRequired fieldId="destination-oci-username">
88+
<FormFieldset component={ociUsernameInput} field="Username" />
89+
</FormGroup>
90+
<FormGroup label="Email" fieldId="destination-oci-email">
91+
<FormFieldset component={ociEmailInput} field="Email" />
92+
</FormGroup>
93+
<FormGroup label="Password" isRequired fieldId="destination-oci-password">
94+
<FormFieldset component={ociPasswordInput} field="Password" />
95+
</FormGroup>
96+
</>
97+
);
98+
};
99+
100+
export default RegistrationDestinationLocationFields;

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/RegistrationModelLocationFields.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,22 @@ import {
1010
} from '@patternfly/react-core';
1111
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
1212
import { UpdateObjectAtPropAndValue } from 'mod-arch-shared';
13+
import PasswordInput from '~/app/shared/components/PasswordInput';
1314
import FormFieldset from '~/app/pages/modelRegistry/screens/components/FormFieldset';
1415
import { ModelLocationType, RegistrationCommonFormData } from './useRegisterModelData';
1516

1617
type RegistrationModelLocationFieldsProps<D extends RegistrationCommonFormData> = {
1718
formData: D;
1819
setData: UpdateObjectAtPropAndValue<D>;
1920
isCatalogModel?: boolean;
21+
includeCredentialFields?: boolean;
2022
};
2123

2224
const RegistrationModelLocationFields = <D extends RegistrationCommonFormData>({
2325
formData,
2426
setData,
2527
isCatalogModel,
28+
includeCredentialFields = false,
2629
}: RegistrationModelLocationFieldsProps<D>): React.ReactNode => {
2730
const {
2831
modelLocationType,
@@ -31,6 +34,8 @@ const RegistrationModelLocationFields = <D extends RegistrationCommonFormData>({
3134
modelLocationRegion,
3235
modelLocationPath,
3336
modelLocationURI,
37+
modelLocationS3AccessKeyId,
38+
modelLocationS3SecretAccessKey,
3439
} = formData;
3540

3641
const endpointInput = (
@@ -90,6 +95,27 @@ const RegistrationModelLocationFields = <D extends RegistrationCommonFormData>({
9095
/>
9196
);
9297

98+
const s3AccessKeyIdInput = (
99+
<TextInput
100+
isRequired
101+
type="text"
102+
id="location-s3-access-key-id"
103+
name="location-s3-access-key-id"
104+
value={modelLocationS3AccessKeyId}
105+
onChange={(_e, value) => setData('modelLocationS3AccessKeyId', value)}
106+
/>
107+
);
108+
109+
const s3SecretAccessKeyInput = (
110+
<PasswordInput
111+
isRequired
112+
id="location-s3-secret-access-key"
113+
name="location-s3-secret-access-key"
114+
value={modelLocationS3SecretAccessKey}
115+
onChange={(_e, value) => setData('modelLocationS3SecretAccessKey', value)}
116+
/>
117+
);
118+
93119
return (
94120
<>
95121
<Radio
@@ -131,6 +157,26 @@ const RegistrationModelLocationFields = <D extends RegistrationCommonFormData>({
131157
</HelperTextItem>
132158
</HelperText>
133159
</FormGroup>
160+
{includeCredentialFields && (
161+
<>
162+
<FormGroup
163+
className={spacing.mlLg}
164+
label="Access Key ID"
165+
isRequired
166+
fieldId="location-s3-access-key-id"
167+
>
168+
<FormFieldset component={s3AccessKeyIdInput} field="Access Key ID" />
169+
</FormGroup>
170+
<FormGroup
171+
className={spacing.mlLg}
172+
label="Secret Access Key"
173+
isRequired
174+
fieldId="location-s3-secret-access-key"
175+
>
176+
<FormFieldset component={s3SecretAccessKeyInput} field="Secret Access Key" />
177+
</FormGroup>
178+
</>
179+
)}
134180
</>
135181
)}
136182
<Radio

‎clients/ui/frontend/src/app/pages/modelRegistry/screens/RegisterModel/useRegisterModelData.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@ export type RegistrationCommonFormData = {
1818
modelLocationRegion: string;
1919
modelLocationPath: string;
2020
modelLocationURI: string;
21+
modelLocationS3AccessKeyId: string;
22+
modelLocationS3SecretAccessKey: string;
23+
destinationOciRegistry: string;
24+
destinationOciUsername: string;
25+
destinationOciPassword: string;
26+
destinationOciUri: string;
27+
destinationOciEmail: string;
2128
versionCustomProperties?: ModelRegistryCustomProperties;
2229
modelCustomProperties?: ModelRegistryCustomProperties;
2330
additionalArtifactProperties?: Partial<ModelArtifact>;
@@ -47,6 +54,13 @@ const registrationCommonFormDataDefaults: RegistrationCommonFormData = {
4754
modelLocationRegion: '',
4855
modelLocationPath: '',
4956
modelLocationURI: '',
57+
modelLocationS3AccessKeyId: '',
58+
modelLocationS3SecretAccessKey: '',
59+
destinationOciRegistry: '',
60+
destinationOciUsername: '',
61+
destinationOciPassword: '',
62+
destinationOciUri: '',
63+
destinationOciEmail: '',
5064
modelCustomProperties: {},
5165
versionCustomProperties: {},
5266
};

0 commit comments

Comments
 (0)