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.
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
Optional initial template for create vm wizard #4811
Optional initial template for create vm wizard #4811
Conversation
/assign @suomiy |
/test e2e-gcp-console |
5d45e66
to
10edf2e
Compare
/test e2e-gcp-console |
095a114
to
b678e44
Compare
/test e2e-gcp-console |
836f63d
to
1419d14
Compare
@yfrimanm @matthewcarleton please review |
/test e2e-gcp-console |
/test e2e-gcp-console |
1 similar comment
/test e2e-gcp-console |
const getCreateLink = ( | ||
namespace: string, | ||
itemName: 'yaml' | 'wizard' = 'wizard', | ||
mode: 'template' | 'vm' = 'template', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we make an enum of that?
], | ||
tableColumnClasses, | ||
); | ||
|
||
VMTemplateTableHeader.displayName = 'VMTemplateTableHeader'; | ||
|
||
const getCreateLink = ( | ||
namespace: string, | ||
itemName: 'yaml' | 'wizard' = 'wizard', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and from that?
@@ -576,6 +576,9 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr | |||
); | |||
} | |||
|
|||
const userMode = new URLSearchParams(search).get('mode'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
variable can be extracted here
@@ -584,8 +587,9 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr | |||
return ( | |||
<Firehose resources={resources} doNotConnectToState> | |||
<CreateVMWizard | |||
isCreateTemplate={!path.includes('/virtualmachines/')} | |||
isProviderImport={new URLSearchParams(search).get('mode') === 'import'} | |||
isCreateTemplate={userMode === 'template'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we can use this enum here
], | ||
tableColumnClasses, | ||
); | ||
|
||
VMTemplateTableHeader.displayName = 'VMTemplateTableHeader'; | ||
|
||
const getCreateLink = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you please make a reusable funtion which includes also import and basic vm.
Basically this funtion + createLink from vm.tsx + enums for all the stuff
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it could live probably under constants?
namespace: string, | ||
itemName: 'yaml' | 'wizard' = 'wizard', | ||
mode: 'template' | 'vm' = 'template', | ||
template?: string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
probably better to have one object as parameters
[VMSettingsField.WORKLOAD_PROFILE]: 9, | ||
[VMSettingsField.NAME]: 10, | ||
[VMSettingsField.DESCRIPTION]: 11, | ||
[VMSettingsField.NAME]: 0, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
name returns to the the top again! :)
|
||
if ( | ||
iGetCommonData(state, id, VMWizardProps.isCreateTemplate) || | ||
iGetVmSettingAttribute(state, id, VMSettingsField.USER_TEMPLATE, 'initialized') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should set the initialized property according to the VMWizardProps.userTemplateName
and VMWizardProps.isCreateTemplate
in vm-settings-tab-initial-state.ts
so we would not need this check here VMWizardProps.isCreateTemplate
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
plus this should also break when there was no change to the templates
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
about the initial state - shouldn't we set the value of template in the beggining so the user sees it? and maybe disable it for good for this wizard instance?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
about the initial state - shouldn't we set the value of template in the beggining so the user sees it? and maybe disable it for good for this wizard instance?
done 🍰
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎂 🎉 fixed
@@ -576,6 +576,9 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr | |||
); | |||
} | |||
|
|||
const userMode = new URLSearchParams(search).get('mode'); | |||
const userTemplateName = new URLSearchParams(search).get('template'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we should make a null of this if the mode is something different than the template
@@ -54,6 +55,7 @@ const tableColumnClasses = [ | |||
tableColumnClassHiddenOnSmall, | |||
tableColumnClassHiddenOnSmall, | |||
tableColumnClassHiddenOnSmall, | |||
tableColumnClass, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thses should be max 12 together
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed :-)
@yaacov I'm not sure we want to allow them to switch the template in this flow do we? |
@matthewcarleton 👍 |
@matthewcarleton I've updated the screen-shot in the description. |
@@ -40,6 +41,18 @@ export enum VMWizardProps { | |||
|
|||
export const ALL_VM_WIZARD_TABS = getStringEnumValues<VMWizardTab>(VMWizardTab); | |||
|
|||
export enum VMWizardName { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
these enums are the interface - they should be probably in ./src/constants
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved
@@ -576,6 +577,10 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr | |||
); | |||
} | |||
|
|||
const searchParams = new URLSearchParams(search); | |||
const userMode = searchParams.get('mode'); | |||
const userTemplateName = userMode === VMWizardMode.VM ? searchParams.get('template') || '' : ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const userTemplateName = userMode === VMWizardMode.VM ? searchParams.get('template') || '' : ''; | |
const userTemplateName = userMode === VMWizardMode.VM && searchParams.get('template') || ''; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thanks !
@@ -44,6 +44,8 @@ export const getInitialVmSettings = (data: CommonData): VMSettings => { | |||
[VMSettingsField.DESCRIPTION]: {}, | |||
[VMSettingsField.USER_TEMPLATE]: { | |||
isHidden: hiddenByProviderOrTemplate, | |||
initialized: isProviderImport || isCreateTemplate || !userTemplateName, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isn't this better?
initialized: isProviderImport || isCreateTemplate || !userTemplateName, | |
initialized: !(isCreateTemplate && userTemplateName), |
we don't need to check the other cases
const { id, dispatch, getState } = options; | ||
const state = getState(); | ||
|
||
if (iGetVmSettingAttribute(state, id, VMSettingsField.USER_TEMPLATE, 'initialized')) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please proceed also only if options.changedCommonData.has(VMWizardProps.userTemplates)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you please use changedCommonData
- it is more clear indicator and one can see the function prerequisites in the beginning of the function
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
vmWizardInternalActions[InternalActionType.UpdateVmSettings](id, { | ||
[VMSettingsField.USER_TEMPLATE]: { | ||
initialized: true, | ||
value: userTemplateName, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
value is already set
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
although I worry a bit that it might cause bugs in the future if somebody is listening only on the string value
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lets leave it for now
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok
/> | ||
); | ||
|
||
const optionsList = sortedNames.map((name) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no good reason to have this extracted IMO
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
right ! fixed
({ userTemplateField, userTemplates, commonTemplates, onChange, openshiftFlag }) => { | ||
({ | ||
userTemplateField, | ||
userTemplateName, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it is very confusing to read a variable like this in this context.
Can we rename it here?
like: forceSingleUserTemplateName
?
@@ -163,19 +165,7 @@ const getCreateProps = ({ namespace }: { namespace: string }) => { | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you can also use the constants to create the object keys above
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
@@ -51,3 +52,20 @@ export const getVMLikeModelDetailPath = ( | |||
namespace: string, | |||
name: string, | |||
) => `${getVMLikeModelListPath(isCreateTemplate, namespace)}/${name}`; | |||
|
|||
export const getVMWizardCreateLink = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can this live rather in ./url.ts
or ./endpoints.ts
or something like that
utils/utils.ts
should only for the most random stuff we can't place anywhere else
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved
const wizardMode = itemName === VMWizardName.IMPORT ? VMWizardMode.IMPORT : mode; | ||
|
||
const type = itemName === VMWizardName.YAML ? '~new' : '~new-wizard'; | ||
const args = `${wizardMode ? `mode=${wizardMode}` : ''}${ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we use URLSearchParams here? as it is less prone to mistakes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice 👍
f59741b
to
e09bbd0
Compare
/test frontend |
/test analyze |
5 similar comments
/test analyze |
/test analyze |
/test analyze |
/test analyze |
/test analyze |
ci/prow/e2e-gcp-console |
|
||
const userTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates); | ||
if (!userTemplates) { | ||
return; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
no need for this return
export const selectUserTemplateOnLoadedUpdater = (options: UpdateOptions) => { | ||
const { id, dispatch, getState } = options; | ||
const state = getState(); | ||
if (options.changedCommonData.has(VMWizardProps.userTemplates)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
how would this even work?
if user templates changed
do not do anything
please look at the other updaters for examples on how these guards should work
const userTemplate = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates, List()).find( | ||
(template) => iGetName(template) === userTemplateName, | ||
); | ||
|
||
if (!userTemplate) { | ||
return asValidationObject( | ||
'Template is missing, check template name', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe we should ask somebody from UX to have a better message :)
it is not that the template name is wrong - it is just the template is missing for unknown reason (probably got deleted right now)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change to be less instructive :-)
|
||
const optionsList = !forceSingleUserTemplateName && hasUserTemplates && ( | ||
<> | ||
{optionNoTemplate} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we inline the variable here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nice, I like it 👍
params.append('template', template); | ||
} | ||
|
||
return `/k8s/ns/${namespace || 'default'}/virtualization/${type}${params ? `?${params}` : ''}`; // covers 'yaml', new-wizard and default |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the params is an object here so it is always true - we should first make it a string and then do the comparison for appending "?...."
@@ -88,7 +88,7 @@ const validateUserTemplate: VmSettingsValidator = (field, options) => { | |||
|
|||
if (!userTemplate) { | |||
return asValidationObject( | |||
'Template is missing, check template name', | |||
"Can't verify tempalte, template is missing", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
typo :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
:-) thanks !
@@ -35,10 +35,6 @@ export const selectUserTemplateOnLoadedUpdater = (options: UpdateOptions) => { | |||
} | |||
|
|||
const userTemplateName = iGetCommonData(state, id, VMWizardProps.userTemplateName); | |||
if (!userTemplateName) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wrong return removed ^^ this return is quite useful.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤦♂️ :-)
@@ -26,7 +26,7 @@ import { prefillVmTemplateUpdater } from './prefill-vm-template-state-update'; | |||
export const selectUserTemplateOnLoadedUpdater = (options: UpdateOptions) => { | |||
const { id, dispatch, getState } = options; | |||
const state = getState(); | |||
if (options.changedCommonData.has(VMWizardProps.userTemplates)) { | |||
if (!options.changedCommonData.has(VMWizardProps.userTemplates)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can we check for the initialized first? As this updater will be checked only few seconds after opening and for the rest of life of the wizard the initialized prop should be enough
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍
/lgtm |
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: suomiy, yaacov The full list of commands accepted by this bot can be found here. The pull request process is described here
Needs approval from an approver in each of these files:
Approvers can indicate their approval by writing |
Btw, shouldn't we have the |
+1 it was in the design :) |
Yes, it's part of the design. Please see the attached.
Thanks.
…On Mon, Apr 6, 2020 at 5:35 PM matthew carleton ***@***.***> wrote:
Btw, shouldn't we have the Create Virtual Machine option in the template
detail as well, in the actions kebab? Shouldn't we also move this action
into the template list kebab for consistency as well?
@yaacov <https://github.com/yaacov> @yfrimanm
<https://github.com/yfrimanm> @matthewcarleton
<https://github.com/matthewcarleton>
+1 it was in the design :)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#4811 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AKUDFDDLE5DAPX53U4L5YXDRLHSEFANCNFSM4LS6ET3A>
.
|
@yfrimanm @matthewcarleton hi, thanks for the feedback, are you sure we have a design for chanes in the template detail page, I'm looking at this design[1] what am I missing ? |
@matthewcarleton the design suggest two options [1]: If we want to add both action and link (button), we will need to update the design. |
sorry for the confusion @yaacov
I took it as both options are included and the user can choose either to create a VM. I think what happened was with the second design I didn't notice the action was gone b/c the kebab menu covered it. |
IMO we should have at least kebab option in both places, so that the user can expect the same behavior in the list and in the detail. |
agreed |
Set initial template for create vm wizard
a - move name and description inputs to top of form.
b - add optional initial template to the vm wizard.
c - adjust links to the virtualization path.
d - add create vm link to the vm-template list.
Design: openshift/openshift-origin-design#350
Screenshot: