1
0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-16 22:50:10 +03:00

F #5422: Add switch component (#1480)

This commit is contained in:
Sergio Betanzos 2021-09-24 10:44:28 +02:00 committed by GitHub
parent bedf1ab6f3
commit 377aa9afa4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 107 additions and 4 deletions

View File

@ -0,0 +1,83 @@
/* ------------------------------------------------------------------------- *
* Copyright 2002-2021, OpenNebula Project, OpenNebula Systems *
* *
* Licensed under the Apache License, Version 2.0 (the "License"); you may *
* not use this file except in compliance with the License. You may obtain *
* a copy of the License at *
* *
* http://www.apache.org/licenses/LICENSE-2.0 *
* *
* Unless required by applicable law or agreed to in writing, software *
* distributed under the License is distributed on an "AS IS" BASIS, *
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. *
* See the License for the specific language governing permissions and *
* limitations under the License. *
* ------------------------------------------------------------------------- */
import { memo } from 'react'
import PropTypes from 'prop-types'
import { FormControl, FormControlLabel, Switch } from '@material-ui/core'
import { Controller } from 'react-hook-form'
import { ErrorHelper, Tooltip } from 'client/components/FormControl'
import { Tr } from 'client/components/HOC'
const SwitchController = memo(
({ control, cy, name, label, tooltip, error, fieldProps }) => (
<Controller
render={({ onChange, value = false }) => (
<FormControl error={Boolean(error)} margin='dense'>
<FormControlLabel
control={
<Switch
onChange={e => onChange(e.target.checked)}
name={name}
checked={Boolean(value)}
color='secondary'
inputProps={{ 'data-cy': cy }}
{...fieldProps}
/>
}
label={
<span style={{ display: 'flex', alignItems: 'center', gap: '0.5em' }}>
{Tr(label)}
{tooltip && <Tooltip title={tooltip} />}
</span>
}
labelPlacement='end'
/>
{Boolean(error) && <ErrorHelper label={error?.message} />}
</FormControl>
)}
name={name}
control={control}
/>
),
(prevProps, nextProps) => prevProps.error === nextProps.error
)
SwitchController.propTypes = {
control: PropTypes.object,
cy: PropTypes.string,
name: PropTypes.string.isRequired,
label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
tooltip: PropTypes.string,
error: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.objectOf(PropTypes.any)
]),
fieldProps: PropTypes.object
}
SwitchController.defaultProps = {
control: {},
cy: 'cy',
name: '',
label: '',
values: [],
error: false
}
SwitchController.displayName = 'SwitchController'
export default SwitchController

View File

@ -19,6 +19,7 @@ import FileController from 'client/components/FormControl/FileController'
import PasswordController from 'client/components/FormControl/PasswordController'
import SelectController from 'client/components/FormControl/SelectController'
import SliderController from 'client/components/FormControl/SliderController'
import SwitchController from 'client/components/FormControl/SwitchController'
import TextController from 'client/components/FormControl/TextController'
import TimeController from 'client/components/FormControl/TimeController'
@ -34,6 +35,7 @@ export {
PasswordController,
SelectController,
SliderController,
SwitchController,
TextController,
TimeController,

View File

@ -40,6 +40,7 @@ const INPUT_CONTROLLER = {
[INPUT_TYPES.PASSWORD]: FC.PasswordController,
[INPUT_TYPES.SELECT]: FC.SelectController,
[INPUT_TYPES.SLIDER]: FC.SliderController,
[INPUT_TYPES.SWITCH]: FC.SwitchController,
[INPUT_TYPES.CHECKBOX]: FC.CheckboxController,
[INPUT_TYPES.AUTOCOMPLETE]: FC.AutocompleteController,
[INPUT_TYPES.FILE]: FC.FileController,

View File

@ -22,7 +22,22 @@ import { INPUT_TYPES } from 'client/constants'
const RDP_FIELD = {
name: 'RDP',
label: 'RDP connection',
type: INPUT_TYPES.CHECKBOX,
type: INPUT_TYPES.SWITCH,
validation: yup
.boolean()
.transform(value => {
if (typeof value === 'boolean') return value
return String(value).toUpperCase() === 'YES'
})
.default(false),
grid: { md: 12 }
}
const SSH_FIELD = {
name: 'SSH',
label: 'SSH connection',
type: INPUT_TYPES.SWITCH,
validation: yup
.boolean()
.transform(value => {
@ -65,7 +80,7 @@ const ALIAS_FIELD = ({ nics = [] } = {}) => ({
const EXTERNAL_FIELD = {
name: 'EXTERNAL',
label: 'External',
type: INPUT_TYPES.CHECKBOX,
type: INPUT_TYPES.SWITCH,
tooltip: 'The NIC will be attached as an external alias of the VM',
dependOf: ALIAS_FIELD().name,
htmlType: type => !type?.length ? INPUT_TYPES.HIDDEN : undefined,
@ -81,6 +96,7 @@ const EXTERNAL_FIELD = {
export const FIELDS = props => [
RDP_FIELD,
SSH_FIELD,
ALIAS_FIELD(props),
EXTERNAL_FIELD
]

View File

@ -45,7 +45,7 @@ const INSTANCES = {
const HOLD = {
name: 'hold',
label: 'Start VM on hold state',
type: INPUT_TYPES.CHECKBOX,
type: INPUT_TYPES.SWITCH,
tooltip: `
Sets the new VM to hold state, instead of pending.
The scheduler will not deploy VMs in this state.
@ -57,7 +57,7 @@ const HOLD = {
const PERSISTENT = {
name: 'persistent',
label: 'Instantiate as persistent',
type: INPUT_TYPES.CHECKBOX,
type: INPUT_TYPES.SWITCH,
tooltip: `
Creates a private persistent copy of the template
plus any image defined in DISK, and instantiates that copy.`,

View File

@ -60,6 +60,7 @@ export const FILTER_POOL = {
export const INPUT_TYPES = {
AUTOCOMPLETE: 'autocomplete',
CHECKBOX: 'checkbox',
SWITCH: 'switch',
FILE: 'file',
TIME: 'time',
HIDDEN: 'hidden',