From 566848ab488bd491b9ef76c95d65c7c44b945dfe Mon Sep 17 00:00:00 2001 From: Frederick Borges Date: Thu, 17 Nov 2022 12:36:34 +0100 Subject: [PATCH] F #5516: Change vm backup to be a stepper (#2355) --- .../Steps/BasicConfiguration/index.js | 59 +++++++++++++++ .../{ => Steps/BasicConfiguration}/schema.js | 42 ++++------- .../BackupForm/Steps/DatastoresTable/index.js | 72 +++++++++++++++++++ .../Steps/DatastoresTable/schema.js | 24 +++++++ .../components/Forms/Vm/BackupForm/index.js | 28 ++++++-- 5 files changed, 192 insertions(+), 33 deletions(-) create mode 100644 src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/index.js rename src/fireedge/src/client/components/Forms/Vm/BackupForm/{ => Steps/BasicConfiguration}/schema.js (60%) create mode 100644 src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/index.js create mode 100644 src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema.js diff --git a/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/index.js b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/index.js new file mode 100644 index 0000000000..e7652e9f96 --- /dev/null +++ b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/index.js @@ -0,0 +1,59 @@ +/* ------------------------------------------------------------------------- * + * Copyright 2002-2022, 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. * + * ------------------------------------------------------------------------- */ +/* eslint-disable jsdoc/require-jsdoc */ +import PropTypes from 'prop-types' + +import FormWithSchema from 'client/components/Forms/FormWithSchema' + +import { + SCHEMA, + FIELDS, +} from 'client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema' +import { Step } from 'client/utils' +import { T } from 'client/constants' + +export const STEP_ID = 'configuration' + +const Content = (props) => ( + FIELDS(props)} + /> +) + +/** + * Step to configure the marketplace app. + * + * @param {object} isMultiple - is multiple rows + * @returns {Step} Configuration step + */ +const ConfigurationStep = (isMultiple) => ({ + id: STEP_ID, + label: T.Configuration, + resolver: () => SCHEMA(isMultiple), + optionsValidate: { abortEarly: false }, + content: () => Content(isMultiple), +}) + +Content.propTypes = { + data: PropTypes.any, + setFormData: PropTypes.func, + nics: PropTypes.array, + isMultiple: PropTypes.bool, +} + +export default ConfigurationStep diff --git a/src/fireedge/src/client/components/Forms/Vm/BackupForm/schema.js b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema.js similarity index 60% rename from src/fireedge/src/client/components/Forms/Vm/BackupForm/schema.js rename to src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema.js index ad97c5bca7..845c0b82da 100644 --- a/src/fireedge/src/client/components/Forms/Vm/BackupForm/schema.js +++ b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema.js @@ -13,42 +13,26 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { number, object, boolean } from 'yup' -import { getValidationFromFields, arrayToOptions } from 'client/utils' +import { boolean, object, ObjectSchema } from 'yup' +import { Field, getValidationFromFields } from 'client/utils' import { T, INPUT_TYPES } from 'client/constants' -import { useGetDatastoresQuery } from 'client/features/OneApi/datastore' - -const DS_ID = { - name: 'dsId', - label: T.BackupDatastore, - type: INPUT_TYPES.SELECT, - values: () => { - const { data: datastores = [] } = useGetDatastoresQuery() - - return arrayToOptions( - datastores.filter(({ TEMPLATE }) => TEMPLATE.TYPE === 'BACKUP_DS'), - { - addEmpty: true, - getText: ({ NAME, ID } = {}) => `${ID}: ${NAME}`, - getValue: ({ ID } = {}) => parseInt(ID), - } - ) - }, - validation: number() - .positive() - .required() - .default(() => undefined) - .transform((_, val) => parseInt(val)), -} const RESET = { name: 'reset', label: T.ResetBackup, type: INPUT_TYPES.SWITCH, validation: boolean(), - grid: { xs: 12 }, + grid: { xs: 12, md: 6 }, } -export const FIELDS = [RESET, DS_ID] +/** + * @returns {Field[]} Fields + */ +export const FIELDS = () => [RESET] -export const SCHEMA = object(getValidationFromFields(FIELDS)) +/** + * @param {object} [stepProps] - Step props + * @returns {ObjectSchema} Schema + */ +export const SCHEMA = (stepProps) => + object(getValidationFromFields(FIELDS(stepProps))) diff --git a/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/index.js b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/index.js new file mode 100644 index 0000000000..9b8bab99a1 --- /dev/null +++ b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/index.js @@ -0,0 +1,72 @@ +/* ------------------------------------------------------------------------- * + * Copyright 2002-2022, 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 PropTypes from 'prop-types' +import { useFormContext } from 'react-hook-form' + +import { DatastoresTable } from 'client/components/Tables' +import { SCHEMA } from 'client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema' + +import { Step } from 'client/utils' +import { T } from 'client/constants' + +export const STEP_ID = 'datastore' + +const Content = ({ data, app }) => { + const { NAME } = data?.[0] ?? {} + const { setValue } = useFormContext() + + const handleSelectedRows = (rows) => { + const { original = {} } = rows?.[0] ?? {} + + setValue(STEP_ID, original.ID !== undefined ? [original] : []) + } + + return ( + String(row.NAME)} + initialState={{ + selectedRowIds: { [NAME]: true }, + filters: [{ id: 'TYPE', value: 'BACKUP_DS' }], + }} + onSelectedRowsChange={handleSelectedRows} + /> + ) +} + +/** + * Step to select the Datastore. + * + * @param {object} app - Marketplace App resource + * @returns {Step} Datastore step + */ +const DatastoreStep = (app) => ({ + id: STEP_ID, + label: T.SelectDatastoreImage, + resolver: SCHEMA, + content: (props) => Content({ ...props, app }), +}) + +Content.propTypes = { + data: PropTypes.any, + setFormData: PropTypes.func, + app: PropTypes.object, +} + +export default DatastoreStep diff --git a/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema.js b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema.js new file mode 100644 index 0000000000..2432cb8c5e --- /dev/null +++ b/src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema.js @@ -0,0 +1,24 @@ +/* ------------------------------------------------------------------------- * + * Copyright 2002-2022, 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 { array, object, ArraySchema } from 'yup' + +/** @type {ArraySchema} Datastore table schema */ +export const SCHEMA = array(object()) + .min(1) + .max(1) + .required() + .ensure() + .default(() => []) diff --git a/src/fireedge/src/client/components/Forms/Vm/BackupForm/index.js b/src/fireedge/src/client/components/Forms/Vm/BackupForm/index.js index 366b6956ba..4712d2d577 100644 --- a/src/fireedge/src/client/components/Forms/Vm/BackupForm/index.js +++ b/src/fireedge/src/client/components/Forms/Vm/BackupForm/index.js @@ -13,9 +13,29 @@ * See the License for the specific language governing permissions and * * limitations under the License. * * ------------------------------------------------------------------------- */ -import { SCHEMA, FIELDS } from 'client/components/Forms/Vm/BackupForm/schema' -import { createForm } from 'client/utils' +import BasicConfiguration, { + STEP_ID as BASIC_ID, +} from 'client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration' +import DatastoresTable, { + STEP_ID as DATASTORE_ID, +} from 'client/components/Forms/Vm/BackupForm/Steps/DatastoresTable' +import { createSteps } from 'client/utils' -const BackupForm = createForm(SCHEMA, FIELDS) +const Steps = createSteps( + (app) => [BasicConfiguration, DatastoresTable].filter(Boolean), + { + transformInitialValue: (app, schema) => + schema.cast({}, { context: { app } }), + transformBeforeSubmit: (formData) => { + const { [BASIC_ID]: configuration, [DATASTORE_ID]: [datastore] = [] } = + formData -export default BackupForm + return { + dsId: datastore?.ID, + ...configuration, + } + }, + } +) + +export default Steps