Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Merged
merged 20 commits into from
Jul 8, 2022
Merged

feat(frontend) Support LIST, STRUCT type in RuntimeConfig parameters #7991

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
f6a4169
Convert string-type user input to real-type pararmeter. (Currently su…
jlyaoyuli Jun 21, 2022
643b23e
Delete unnecessary console.log
jlyaoyuli Jun 21, 2022
e5d0d68
Change incorrect type.
jlyaoyuli Jun 22, 2022
a5a8fc0
Format.
jlyaoyuli Jun 22, 2022
5e91dff
Move inputConverter out from function component.
jlyaoyuli Jun 22, 2022
2faedf8
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jun 22, 2022
ca71e50
Change inputConverter from if-else to switch.
jlyaoyuli Jun 22, 2022
b53aa87
1. Change paramTypeIdx to ParameterTypeEnum.
jlyaoyuli Jun 23, 2022
de688f5
Format
jlyaoyuli Jun 23, 2022
91a8f77
Support LIST and STRUCT type.
jlyaoyuli Jul 1, 2022
4a4225e
1. Fixed default value bugs.
jlyaoyuli Jul 6, 2022
d7628d8
Added type into param.
jlyaoyuli Jul 6, 2022
91fc887
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
29b452e
Added comment.
jlyaoyuli Jul 6, 2022
aeec427
Merge branch 'master' of https://github.com/kubeflow/pipelines into s…
jlyaoyuli Jul 6, 2022
65a8c80
Added unit test for invalid JSON form input.
jlyaoyuli Jul 6, 2022
1375a73
Removed incorrect merge conflicts.
jlyaoyuli Jul 6, 2022
3edc791
Support double type.
jlyaoyuli Jul 7, 2022
d8412a8
Clean unnecessary expect() in the unit tests.
jlyaoyuli Jul 8, 2022
f61293e
Added additional tests to check for the existence of display value 4.56
jlyaoyuli Jul 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions frontend/src/components/NewRunParametersV2.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,146 @@ describe('NewRunParametersV2', () => {
});
});

it('test convertInput function for LIST type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
defaultValue: [1, 2, 3],
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved

const listParam = screen.getByDisplayValue('[1,2,3]');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we check the screen now has [4,5,6]?

screen.getByDisplayValue('[4,5,6]');

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same for all cases below.

expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
});

it('test convertInput function for LIST type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6]' } });
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: [4, 5, 6],
});
});

it('test convertInput function for LIST type with invalid input (invalid JSON form)', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
listParam: {
parameterType: ParameterType_ParameterTypeEnum.LIST,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);

const listParam = screen.getByLabelText('listParam - LIST');
fireEvent.change(listParam, { target: { value: '[4,5,6' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
listParam: null,
});
});

it('test convertInput function for STRUCT type with default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
defaultValue: { A: 1, B: 2 },
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);

const structParam = screen.getByDisplayValue('{"A":1,"B":2}');
fireEvent.change(structParam, { target: { value: '{"C":3,"D":4}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { C: 3, D: 4 },
});
});

it('test convertInput function for STRUCT type without default value', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '{"A":1,"B":2}' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: { A: 1, B: 2 },
});
});

it('test convertInput function for STRUCT type with invalid input (invalid JSON form)', () => {
const handleParameterChangeSpy = jest.fn();
const props = {
titleMessage: 'default Title',
pipelineRoot: 'defalut pipelineRoot',
specParameters: {
structParam: {
parameterType: ParameterType_ParameterTypeEnum.STRUCT,
},
},
handlePipelineRootChange: jest.fn(),
handleParameterChange: handleParameterChangeSpy,
};
render(<NewRunParametersV2 {...props}></NewRunParametersV2>);

const structParam = screen.getByLabelText('structParam - STRUCT');
fireEvent.change(structParam, { target: { value: '"A":1,"B":2' } });
expect(handleParameterChangeSpy).toHaveBeenCalledTimes(1);
expect(handleParameterChangeSpy).toHaveBeenLastCalledWith({
structParam: null,
});
});

it('does not display any text fields if there are no parameters', () => {
const { container } = render(
<CommonTestWrapper>
Expand Down
71 changes: 57 additions & 14 deletions frontend/src/components/NewRunParametersV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@ function convertInput(paramStr: string, paramType: ParameterType_ParameterTypeEn
return Number(paramStr);
}
return null;
case ParameterType_ParameterTypeEnum.LIST:
case ParameterType_ParameterTypeEnum.STRUCT:
try {
return JSON.parse(paramStr);
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
} catch (err) {
return null;
}
default:
// TODO: (jlyaoyuli) Validate if the type of parameters matches the value
// If it doesn't throw an error message next to the TextField.
Expand All @@ -89,7 +96,20 @@ function NewRunParametersV2(props: NewRunParametersProps) {
Object.keys(props.specParameters).map(key => {
if (props.specParameters[key].defaultValue) {
// TODO(zijianjoy): Make sure to consider all types of parameters.
runtimeParametersWithDefault[key] = props.specParameters[key].defaultValue;
let defaultValStr; // Convert default to string type first to avoid error from convertInput
switch (props.specParameters[key].parameterType) {
case ParameterType_ParameterTypeEnum.STRUCT:
case ParameterType_ParameterTypeEnum.LIST:
defaultValStr = JSON.stringify(props.specParameters[key].defaultValue);
break;
case ParameterType_ParameterTypeEnum.BOOLEAN:
case ParameterType_ParameterTypeEnum.NUMBER_INTEGER:
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
defaultValStr = props.specParameters[key].defaultValue.toString();
break;
default:
defaultValStr = props.specParameters[key].defaultValue;
}
runtimeParametersWithDefault[key] = defaultValStr;
}
});
setUpdatedParameters(runtimeParametersWithDefault);
Expand Down Expand Up @@ -145,6 +165,7 @@ function NewRunParametersV2(props: NewRunParametersProps) {
const param = {
key: `${k} - ${ParameterType_ParameterTypeEnum[v.parameterType]}`,
value: updatedParameters[k],
type: v.parameterType,
};

return (
Expand All @@ -160,7 +181,7 @@ function NewRunParametersV2(props: NewRunParametersProps) {
let parametersInRealType: RuntimeParameters = {};
Object.entries(nextUpdatedParameters).map(([k, v1]) => {
parametersInRealType[k] = convertInput(
v1.toString(),
v1,
props.specParameters[k].parameterType,
);
});
Expand All @@ -182,6 +203,7 @@ export default NewRunParametersV2;
interface Param {
key: string;
value: any;
type: ParameterType_ParameterTypeEnum;
}

interface ParamEditorProps {
Expand All @@ -202,16 +224,22 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {
prevState: ParamEditorState,
): { isInJsonForm: boolean; isJsonField: boolean } {
let isJson = true;
try {
const displayValue = JSON.parse('');
// Nulls, booleans, strings, and numbers can all be parsed as JSON, but we don't care
// about rendering. Note that `typeOf null` returns 'object'
if (displayValue === null || typeof displayValue !== 'object') {
throw new Error('Parsed JSON was neither an array nor an object. Using default renderer');
}
} catch (err) {
isJson = false;
let paramType = nextProps.param.type;

switch (paramType) {
case ParameterType_ParameterTypeEnum.LIST:
case ParameterType_ParameterTypeEnum.STRUCT:
isJson = true;
break;
case ParameterType_ParameterTypeEnum.STRING:
case ParameterType_ParameterTypeEnum.BOOLEAN:
case ParameterType_ParameterTypeEnum.NUMBER_INTEGER:
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
isJson = false;
break;
default:
isJson = false;
}

return {
isInJsonForm: isJson,
isJsonField: prevState.isJsonField || isJson,
Expand All @@ -229,8 +257,23 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {

const onClick = () => {
if (this.state.isInJsonForm) {
let paramType = param.type;
let displayValue;
switch (paramType) {
case ParameterType_ParameterTypeEnum.LIST:
displayValue = JSON.parse(param.value || '[]');
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
break;
case ParameterType_ParameterTypeEnum.STRUCT:
displayValue = JSON.parse(param.value || '{}');
break;
default:
// TODO(jlyaoyuli): If the type from PipelineSpec is either LIST or STURCT,
// but the user-input or default value is invalid JSON form, show error message.
displayValue = JSON.parse('');
}

// TODO(zijianjoy): JSON format needs to be struct or list type.
const displayValue = JSON.parse(param.value?.string_value || '');
zijianjoy marked this conversation as resolved.
Show resolved Hide resolved
// const displayValue = JSON.parse(param.value?.string_value || '');
if (this.state.isEditorOpen) {
onChange(JSON.stringify(displayValue) || '');
} else {
Expand All @@ -249,8 +292,8 @@ class ParamEditor extends React.Component<ParamEditorProps, ParamEditorState> {
id={id}
disabled={this.state.isEditorOpen}
variant='outlined'
// label={param.name}
// value={param.value || ''}
label={param.key}
value={param.value || ''}
onChange={ev => onChange(ev.target.value || '')}
className={classes(commonCss.textField, css.textfield)}
InputProps={{
Expand Down