mirror of
https://github.com/OpenNebula/one.git
synced 2025-03-22 18:50:08 +03:00
M #~: Improve behavior of selectors in provision form (#1188)
(cherry picked from commit e6740f6adfa359977d0e835935f0a20697df9a13)
This commit is contained in:
Sergio Betanzos
Ruben S. Montero
parent
50a43772b7
commit
80a64e9791
@ -34,6 +34,21 @@ export const PROVISIONS_STATES = [
|
||||
}
|
||||
]
|
||||
|
||||
export const PROVISIONS_TYPES = {
|
||||
metal: {
|
||||
id: 'metal',
|
||||
name: 'Metal'
|
||||
},
|
||||
onprem: {
|
||||
id: 'onprem',
|
||||
name: 'On-premise'
|
||||
},
|
||||
virtual: {
|
||||
id: 'virtual',
|
||||
name: 'Virtual'
|
||||
}
|
||||
}
|
||||
|
||||
export const PROVIDERS_TYPES = {
|
||||
aws: {
|
||||
id: 'aws',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import React, { useCallback, useEffect, useMemo } from 'react'
|
||||
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
|
||||
import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
|
||||
import Marked from 'marked'
|
||||
@ -6,9 +6,9 @@ import Marked from 'marked'
|
||||
import { useProvision, useListForm } from 'client/hooks'
|
||||
import { ListCards } from 'client/components/List'
|
||||
import { ProvisionTemplateCard } from 'client/components/Cards'
|
||||
import { sanitize } from 'client/utils'
|
||||
import { sanitize, groupBy } from 'client/utils'
|
||||
import * as ProviderTemplateModel from 'client/models/ProviderTemplate'
|
||||
import { T } from 'client/constants'
|
||||
import { T, PROVISIONS_TYPES, PROVIDERS_TYPES } from 'client/constants'
|
||||
|
||||
import { STEP_FORM_SCHEMA } from 'client/containers/Providers/Form/Create/Steps/Template/schema'
|
||||
|
||||
@ -24,23 +24,40 @@ const Template = () => ({
|
||||
content: useCallback(
|
||||
({ data, setFormData }) => {
|
||||
const { provisionsTemplates } = useProvision()
|
||||
|
||||
const templateSelected = data?.[0]
|
||||
|
||||
const [provisionSelected, setProvision] = React.useState(
|
||||
() => templateSelected?.plain?.provision_type ?? Object.keys(provisionsTemplates)?.[0]
|
||||
() => templateSelected?.plain?.provision_type
|
||||
)
|
||||
|
||||
const [providerSelected, setProvider] = React.useState(() => templateSelected?.provider)
|
||||
const [providerSelected, setProvider] = React.useState(
|
||||
() => templateSelected?.provider
|
||||
)
|
||||
|
||||
const providersTypes = provisionsTemplates?.[provisionSelected]?.providers ?? []
|
||||
const provisionSelectedDescription = provisionsTemplates?.[provisionSelected]?.description
|
||||
const templatesAvailable = providersTypes?.[providerSelected]
|
||||
const templatesByProvisionType = useMemo(() => (
|
||||
Object.values(provisionsTemplates)
|
||||
.reduce((res, { providers }) => ({
|
||||
...res,
|
||||
...groupBy(Object.values(providers)?.flat(), 'plain.provision_type')
|
||||
}), {})
|
||||
), [])
|
||||
|
||||
const templatesByProvider = useMemo(() => (
|
||||
groupBy(templatesByProvisionType[provisionSelected] ?? [], 'provider')
|
||||
), [provisionSelected])
|
||||
|
||||
const templatesAvailable = templatesByProvider?.[providerSelected] ?? []
|
||||
const provisionDescription = provisionsTemplates?.[provisionSelected]?.description
|
||||
|
||||
useEffect(() => {
|
||||
const firstProvisionType = Object.keys(templatesByProvisionType)[0]
|
||||
!provisionSelected && setProvision(firstProvisionType)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// Select the first provider type if not selected
|
||||
if (provisionSelected && !providerSelected) {
|
||||
setProvider(Object.keys(providersTypes)?.[0])
|
||||
const firstProviderType = Object.keys(templatesByProvider)[0]
|
||||
setProvider(firstProviderType)
|
||||
}
|
||||
}, [provisionSelected])
|
||||
|
||||
@ -75,10 +92,6 @@ const Template = () => ({
|
||||
: handleSelect(template)
|
||||
}
|
||||
|
||||
const RenderOptions = ({ options = {} }) => Object.keys(options)?.map(
|
||||
option => <option key={option} value={option}>{option}</option>
|
||||
) ?? <option value=''>{T.None}</option>
|
||||
|
||||
const RenderDescription = ({ description = '' }) => {
|
||||
const renderer = new Marked.Renderer()
|
||||
|
||||
@ -109,7 +122,11 @@ const Template = () => ({
|
||||
value={provisionSelected}
|
||||
variant='outlined'
|
||||
>
|
||||
<RenderOptions options={provisionsTemplates} />
|
||||
{Object.keys(templatesByProvisionType).map(key => (
|
||||
<option key={key} value={key}>
|
||||
{PROVISIONS_TYPES[key]?.name ?? key}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
@ -126,15 +143,19 @@ const Template = () => ({
|
||||
value={providerSelected}
|
||||
variant='outlined'
|
||||
>
|
||||
<RenderOptions options={providersTypes} />
|
||||
{Object.keys(templatesByProvider).map(key => (
|
||||
<option key={key} value={key}>
|
||||
{PROVIDERS_TYPES[key]?.name ?? key}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Breadcrumbs>
|
||||
|
||||
{/* -- DESCRIPTION -- */}
|
||||
{React.useMemo(() => provisionSelectedDescription && (
|
||||
<RenderDescription description={provisionSelectedDescription} />
|
||||
), [provisionSelectedDescription])}
|
||||
{React.useMemo(() => provisionDescription && (
|
||||
<RenderDescription description={provisionDescription} />
|
||||
), [provisionDescription])}
|
||||
|
||||
<Divider style={{ margin: '1rem 0' }} />
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useEffect } from 'react'
|
||||
import React, { useCallback, useEffect, useMemo } from 'react'
|
||||
import { Divider, Select, Breadcrumbs, InputLabel, FormControl } from '@material-ui/core'
|
||||
import ArrowIcon from '@material-ui/icons/ArrowForwardIosRounded'
|
||||
import Marked from 'marked'
|
||||
@ -6,9 +6,9 @@ import Marked from 'marked'
|
||||
import { useProvision, useListForm } from 'client/hooks'
|
||||
import { ListCards } from 'client/components/List'
|
||||
import { ProvisionTemplateCard } from 'client/components/Cards'
|
||||
import { sanitize } from 'client/utils'
|
||||
import { sanitize, groupBy } from 'client/utils'
|
||||
import * as ProvisionTemplateModel from 'client/models/ProvisionTemplate'
|
||||
import { T } from 'client/constants'
|
||||
import { T, PROVISIONS_TYPES, PROVIDERS_TYPES } from 'client/constants'
|
||||
|
||||
import { STEP_ID as PROVIDER_ID } from 'client/containers/Provisions/Form/Create/Steps/Provider'
|
||||
import { STEP_ID as CONFIGURATION_ID } from 'client/containers/Provisions/Form/Create/Steps/BasicConfiguration'
|
||||
@ -23,23 +23,40 @@ const Template = () => ({
|
||||
resolver: () => STEP_FORM_SCHEMA,
|
||||
content: useCallback(({ data, setFormData }) => {
|
||||
const { provisionsTemplates, providers } = useProvision()
|
||||
|
||||
const templateSelected = data?.[0]
|
||||
|
||||
const [provisionSelected, setProvision] = React.useState(
|
||||
() => templateSelected?.provision_type ?? Object.keys(provisionsTemplates)?.[0]
|
||||
() => templateSelected?.provision_type
|
||||
)
|
||||
|
||||
const [providerSelected, setProvider] = React.useState(() => templateSelected?.provider)
|
||||
const [providerSelected, setProvider] = React.useState(
|
||||
() => templateSelected?.provider
|
||||
)
|
||||
|
||||
const providersTypes = provisionsTemplates?.[provisionSelected]?.provisions ?? []
|
||||
const provisionSelectedDescription = provisionsTemplates?.[provisionSelected]?.description
|
||||
const templatesAvailable = providersTypes?.[providerSelected] ?? []
|
||||
const templatesByProvisionType = useMemo(() => (
|
||||
Object.values(provisionsTemplates)
|
||||
.reduce((res, { provisions }) => ({
|
||||
...res,
|
||||
...groupBy(Object.values(provisions)?.flat(), 'provision_type')
|
||||
}), {})
|
||||
), [])
|
||||
|
||||
const templatesByProvider = useMemo(() => (
|
||||
groupBy(templatesByProvisionType[provisionSelected] ?? [], 'provider')
|
||||
), [provisionSelected])
|
||||
|
||||
const templatesAvailable = templatesByProvider?.[providerSelected] ?? []
|
||||
const provisionDescription = provisionsTemplates?.[provisionSelected]?.description
|
||||
|
||||
useEffect(() => {
|
||||
const firstProvisionType = Object.keys(templatesByProvisionType)[0]
|
||||
!provisionSelected && setProvision(firstProvisionType)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
// Select the first provider type if not selected
|
||||
if (provisionSelected && !providerSelected) {
|
||||
setProvider(Object.keys(providersTypes)?.[0])
|
||||
const firstProviderType = Object.keys(templatesByProvider)[0]
|
||||
setProvider(firstProviderType)
|
||||
}
|
||||
}, [provisionSelected])
|
||||
|
||||
@ -78,10 +95,6 @@ const Template = () => ({
|
||||
: handleSelect(template)
|
||||
}
|
||||
|
||||
const RenderOptions = ({ options = {} }) => Object.keys(options)?.map(option => (
|
||||
<option key={option} value={option}>{option}</option>
|
||||
))
|
||||
|
||||
const RenderDescription = ({ description = '' }) => {
|
||||
const renderer = new Marked.Renderer()
|
||||
|
||||
@ -104,14 +117,19 @@ const Template = () => ({
|
||||
</InputLabel>
|
||||
<Select
|
||||
color='secondary'
|
||||
inputProps = {{ 'data-cy': 'select-provision-type' }}
|
||||
inputProps={{ 'data-cy': 'select-provision-type' }}
|
||||
labelId='select-provision-type-label'
|
||||
native
|
||||
style={{ marginTop: '1em', minWidth: '8em' }}
|
||||
onChange={handleChangeProvision}
|
||||
value={provisionSelected}
|
||||
variant='outlined'
|
||||
>
|
||||
<RenderOptions options={provisionsTemplates} />
|
||||
{Object.keys(templatesByProvisionType).map(key => (
|
||||
<option key={key} value={key}>
|
||||
{PROVISIONS_TYPES[key]?.name ?? key}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl>
|
||||
@ -120,22 +138,27 @@ const Template = () => ({
|
||||
</InputLabel>
|
||||
<Select
|
||||
color='secondary'
|
||||
inputProps = {{ 'data-cy': 'select-provider-type' }}
|
||||
inputProps={{ 'data-cy': 'select-provider-type' }}
|
||||
labelId='select-provider-type-label'
|
||||
native
|
||||
style={{ marginTop: '1em', minWidth: '8em' }}
|
||||
onChange={handleChangeProvider}
|
||||
value={providerSelected}
|
||||
variant='outlined'
|
||||
>
|
||||
<RenderOptions options={providersTypes} />
|
||||
{Object.keys(templatesByProvider).map(key => (
|
||||
<option key={key} value={key}>
|
||||
{PROVIDERS_TYPES[key]?.name ?? key}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Breadcrumbs>
|
||||
|
||||
{/* -- DESCRIPTION -- */}
|
||||
{React.useMemo(() => provisionSelectedDescription && (
|
||||
<RenderDescription description={provisionSelectedDescription} />
|
||||
), [provisionSelectedDescription])}
|
||||
{React.useMemo(() => provisionDescription && (
|
||||
<RenderDescription description={provisionDescription} />
|
||||
), [provisionDescription])}
|
||||
|
||||
<Divider style={{ margin: '1rem 0' }} />
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user