From f97059e75cbd7c209b9752ece5ec7f14135a4e56 Mon Sep 17 00:00:00 2001 From: Samuel Liu Date: Thu, 12 Dec 2024 09:13:06 -0500 Subject: [PATCH 1/3] wip --- .../components/miq-data-table/index.jsx | 2 +- .../settings-replication-form/helper.js | 34 +++ .../settings-replication-form/index.jsx | 220 ++++++++++++++++++ .../settings-replication-form.schema.js | 194 +++++++++++++++ .../subscriptions-table.jsx | 48 ++++ .../validate-subscription.jsx | 31 +++ .../packs/component-definitions-common.js | 2 + app/stylesheet/miq-data-table.scss | 6 + .../ops/_settings_replication_tab.html.haml | 2 + 9 files changed, 538 insertions(+), 1 deletion(-) create mode 100644 app/javascript/components/settings-replication-form/helper.js create mode 100644 app/javascript/components/settings-replication-form/index.jsx create mode 100644 app/javascript/components/settings-replication-form/settings-replication-form.schema.js create mode 100644 app/javascript/components/settings-replication-form/subscriptions-table.jsx create mode 100644 app/javascript/components/settings-replication-form/validate-subscription.jsx diff --git a/app/javascript/components/miq-data-table/index.jsx b/app/javascript/components/miq-data-table/index.jsx index cb2c3af58bd..4ea239b9977 100644 --- a/app/javascript/components/miq-data-table/index.jsx +++ b/app/javascript/components/miq-data-table/index.jsx @@ -89,7 +89,7 @@ const MiqDataTable = ({ /** Function to render the header cells. */ const renderHeaders = (getHeaderProps) => (headers.map((header) => { const { sortHeader, sortDirection } = headerSortingData(header); - let isSortable = true; + let isSortable = sortable; if (header.header.split('_')[0] === DefaultKey) { isSortable = false; } diff --git a/app/javascript/components/settings-replication-form/helper.js b/app/javascript/components/settings-replication-form/helper.js new file mode 100644 index 00000000000..2e86e9ebf06 --- /dev/null +++ b/app/javascript/components/settings-replication-form/helper.js @@ -0,0 +1,34 @@ +// Creates the rows for the 'subscriptions-table' component +export const createRows = (subscriptions) => { + const rows = []; + + subscriptions.forEach((value, index) => { + rows.push({ + id: index.toString(), + dbname: { text: value.dbname }, + host: { text: value.host }, + user: { text: value.user }, + password: { text: value.password }, + port: { text: value.port }, + backlog: { text: value.backlog ? value.backlog : '' }, + status: { text: value.status ? value.status : '' }, + provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' }, + edit: { + is_button: true, + text: __('Update'), + kind: 'tertiary', + size: 'md', + callback: 'editSubscription', + }, + delete: { + is_button: true, + text: __('Delete'), + kind: 'danger', + size: 'md', + callback: 'deleteSubscription', + }, + }); + }); + + return rows; +}; \ No newline at end of file diff --git a/app/javascript/components/settings-replication-form/index.jsx b/app/javascript/components/settings-replication-form/index.jsx new file mode 100644 index 00000000000..796d4d3d588 --- /dev/null +++ b/app/javascript/components/settings-replication-form/index.jsx @@ -0,0 +1,220 @@ +import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; + +import MiqFormRenderer from '@@ddf'; +// import { Button } from 'carbon-components-react'; +// import MiqDataTable from '../miq-data-table'; +import createSchema from './settings-replication-form.schema'; +import { SubscriptionsTableComponent } from './subscriptions-table'; +import ValidateSubscription from './validate-subscription'; +import miqRedirectBack from '../../helpers/miq-redirect-back'; +import mapper from '../../forms/mappers/componentMapper'; +import { http } from '../../http_api'; + +const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => { + const [{ + initialValues, subscriptions, form, replicationHelperText, isLoading, + }, setState] = useState({ isLoading: !!pglogicalReplicationFormId }); + const submitLabel = __('Save'); + + console.log(initialValues); + console.log(subscriptions); + + const componentMapper = { + ...mapper, + 'subscriptions-table': SubscriptionsTableComponent, + 'validate-subscription': ValidateSubscription, + }; + + // console.log(initialValues, form); + + useEffect(() => { + if (pglogicalReplicationFormId) { + miqSparkleOn(); + http.get(`/ops/pglogical_subscriptions_form_fields/${pglogicalReplicationFormId}`).then((response) => { + setState({ + initialValues: { + replication_type: response.replication_type, + subscriptions: response.subscriptions, + }, + subscriptions: response.subscriptions, + form: { + type: 'replication', + className: 'replication_form', + action: 'edit', + }, + replicationHelperText: '', + isLoading: false, + }); + }); + miqSparkleOff(); + } + }, [pglogicalReplicationFormId]); + + const onSubmit = (values) => { + if (form.type === 'subscription') { + if (form.action === 'add') { + const newSubscriptions = []; + + newSubscriptions.push({ + dbname: values.dbname, + host: values.host, + user: values.user, + password: values.password, + port: values.port, + }); + + setState((state) => ({ + ...state, + initialValues: { + replication_type: state.initialValues.replication_type, + subscriptions: state.initialValues.subscriptions, + }, + subscriptions: subscriptions.concat(newSubscriptions), + form: { + type: 'replication', + className: 'replication_form', + action: 'edit', + }, + })); + } else if (form.action === 'edit') { + let modifiedSubscriptions = []; + modifiedSubscriptions = modifiedSubscriptions.concat(subscriptions); + + const editedSub = { + dbname: values.dbname, + host: values.host, + password: values.password, + port: values.port, + user: values.user, + }; + + modifiedSubscriptions[initialValues.subId] = editedSub; + + setState((state) => ({ + ...state, + initialValues: { + replication_type: state.initialValues.replication_type, + subscriptions: state.initialValues.subscriptions, + }, + subscriptions: modifiedSubscriptions, + form: { + type: 'replication', + className: 'replication_form', + action: 'edit', + }, + })); + } + } else { + // Redirect to Settings -> Tasks + + /* http.post(`/ops/pglogical_save_subscriptions/${pglogicalReplicationFormId}?button=${'save'}`, submitData, { skipErrors: [400] }).then(() => { + const message = __('Order Request was Submitted'); + miqRedirectBack(message, 'success', '/miq_request/show_list?typ=service/'); + }).catch((err) => { + console.log(err); + }); */ + } + }; + + /* const onReset = () => { + setEnforced(() => ({ ...initialValues.enforced })); + setValues(() => ({ ...initialValues.values })); + setDisabled(true); + setChanged(true); + setInvalid(() => ({ ...initialValues.invalid })); + // eslint-disable-next-line no-return-assign + Array.from(document.querySelectorAll('.quota-table-input')).forEach((input, index) => input.value = initialValues.values[index]); + add_flash(__('All changes have been reset'), 'warn'); + }; */ + + const onCancel = () => { + if (form.type === 'subscription') { + setState((state) => ({ + ...state, + form: { + type: 'replication', + className: 'replication_form', + action: 'edit', + }, + })); + } else { + const message = __('Dialog Cancelled'); + miqRedirectBack(message, 'warning', '/ops/explorer'); + } + }; + + return !isLoading && ( + + ); + + /* if (form.type === 'subscription') { + } else { + return !isLoading && ( +
+
+
+ +
+
+ onCellClick(selectedRow, cellType, formOptions)} + /> +
+
+
+ + + +
+
+ ); + } */ +}; + +SettingsReplicationForm.propTypes = { + pglogicalReplicationFormId: PropTypes.string, +}; +SettingsReplicationForm.defaultProps = { + pglogicalReplicationFormId: undefined, +}; + +export default SettingsReplicationForm; diff --git a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js new file mode 100644 index 00000000000..e2cc5deacac --- /dev/null +++ b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js @@ -0,0 +1,194 @@ +/* eslint-disable camelcase */ +import { componentTypes, validatorTypes } from '@@ddf'; +import { createRows } from './helper'; + +const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => { + const deleteSubscription = (selectedRow, cellType, formOptions) => { + subscriptions.splice(selectedRow.id, 1); + + setState((state) => ({ + ...state, + subscriptions, + })); + + console.log(formOptions.getFieldState('subscriptions-table')); + console.log(formOptions.getRegisteredFields()); + console.log(formOptions.getState()); + console.log(formOptions.schema); + }; + + const editSubscription = (selectedRow) => { + setState((state) => ({ + ...state, + initialValues: { + ...state.initialValues, + dbname: selectedRow.cells[0].value, + host: selectedRow.cells[1].value, + user: selectedRow.cells[2].value, + password: selectedRow.cells[3].value, + port: selectedRow.cells[4].value, + subId: selectedRow.id, + }, + form: { + type: 'subscription', + className: 'subscription-form', + action: 'edit', + }, + })); + }; + + const replicationFields = ({ + fields: [ + { + component: componentTypes.SELECT, + id: 'replication_type', + name: 'replication_type', + label: __('Type'), + helperText: replicationHelperText, + onChange: (value) => { + let helperText; + + if (initialValues.replication_type === 'none' && value === 'none') { + helperText = __('No replication role has been set'); + } else if (initialValues.replication_type === 'remote' && value === 'none') { + helperText = __('Replication will be disabled for this region'); + } else if (initialValues.replication_type === 'global' && value === 'none') { + helperText = __('All current subscriptions will be removed'); + } else if (initialValues.replication_type === 'global' && value === 'remote') { + helperText = __('Changing to remote replication role will remove all current subscriptions'); + } + + setState((state) => ({ + ...state, + replicationHelperText: helperText, + })); + }, + options: [ + { + label: `<${_('None')}>`, + value: 'none', + }, + { + label: `Global`, + value: 'global', + }, + { + label: `Remote`, + value: 'remote', + }, + ], + }, + { + component: componentTypes.SUB_FORM, + name: 'subscriptions_section', + id: 'subscriptions_section', + condition: { + when: 'replication_type', + is: 'global', + }, + fields: [{ + component: 'subscriptions-table', + name: 'subscriptions-table', + id: 'subscriptions-table', + rows: createRows(subscriptions), + onCellClick: (selectedRow, cellType, formOptions) => { + switch (selectedRow.callbackAction) { + case 'editSubscription': + editSubscription(selectedRow); + break; + case 'deleteSubscription': + deleteSubscription(selectedRow, cellType, formOptions); + break; + default: + break; + } + }, + addButtonLabel: __('Add Subscription'), + onButtonClick: (formOptions) => { + console.log(formOptions.getRegisteredFields()); + console.log(formOptions.getState()); + console.log(formOptions.schema); + + setState((state) => ({ + ...state, + initialValues: { + replication_type: state.initialValues.replication_type, + subscriptions: state.initialValues.subscriptions, + }, + form: { + type: 'subscription', + className: 'subscription-form', + action: 'add', + }, + })); + + console.log(formOptions.getRegisteredFields()); + console.log(formOptions.getState()); + console.log(formOptions.schema); + }, + }], + }, + ], + }); + + const subscriptionFields = ({ + fields: [ + { + component: 'validate-subscription', + name: 'validate-sub', + id: 'validate-sub', + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + skipSubmit: true, + fields: [ + { + component: componentTypes.TEXT_FIELD, + name: 'dbname', + id: 'dbname', + label: __('Database'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'host', + id: 'host', + label: __('Host'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'user', + id: 'user', + label: __('Username'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'password', + id: 'password', + label: __('Password'), + type: 'password', + isReadOnly: form.action === 'edit', + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'port', + id: 'port', + label: __('Port'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + ], + }, + ], + }); + + return form.type === 'subscription' ? subscriptionFields : replicationFields; +}; + +export default createSchema; diff --git a/app/javascript/components/settings-replication-form/subscriptions-table.jsx b/app/javascript/components/settings-replication-form/subscriptions-table.jsx new file mode 100644 index 00000000000..17d8bff9cd8 --- /dev/null +++ b/app/javascript/components/settings-replication-form/subscriptions-table.jsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { useFieldApi, useFormApi } from '@@ddf'; +import { Button } from 'carbon-components-react'; +import MiqDataTable from '../miq-data-table'; + +export const SubscriptionsTableComponent = (props) => { + const { + rows, onCellClick, addButtonLabel, onButtonClick, + } = useFieldApi(props); + const formOptions = useFormApi(); + + return ( +
+
+ +
+ +
+ onCellClick(selectedRow, cellType, formOptions)} + /> +
+
+ ); +}; diff --git a/app/javascript/components/settings-replication-form/validate-subscription.jsx b/app/javascript/components/settings-replication-form/validate-subscription.jsx new file mode 100644 index 00000000000..62f4dc17c4c --- /dev/null +++ b/app/javascript/components/settings-replication-form/validate-subscription.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { pick } from 'lodash'; + +import AsyncCredentials from '../async-credentials/async-credentials'; + +const ValidateSubscription = ({ ...props }) => { + const asyncValidate = (fields, fieldNames) => new Promise((resolve, reject) => { + const resource = pick(fields, fieldNames); + + resolve(); + + /* API.post('/api/ops/', { action: 'validate', resource }).then((response) => { + console.log(response); + }).catch(({ message }) => { console.log(message); return reject([__('Validation failed:'), message].join(' ')); }); */ + }); + + return ; +}; + +ValidateSubscription.propTypes = { + ...AsyncCredentials.propTypes, + asyncValidate: PropTypes.func, + validation: PropTypes.bool, +}; +ValidateSubscription.defaultProps = { + validation: true, + ...AsyncCredentials.defaultProps, +}; + +export default ValidateSubscription; diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js index a196a68e5cd..a1c742ea4ea 100644 --- a/app/javascript/packs/component-definitions-common.js +++ b/app/javascript/packs/component-definitions-common.js @@ -136,6 +136,7 @@ import SettingsCompanyTags from '../components/settings-company-tags'; import SettingsCompanyTagsEntryForm from '../components/settings-company-tags-entry-form'; import SettingsDetailsTab from '../components/settings-details-tab'; import SettingsLabelTagMapping from '../components/settings-label-tag-mapping'; +import SettingsReplicationForm from '../components/settings-replication-form'; import SettingsTasksForm from '../components/settings-tasks-form'; import SettingsTimeProfileForm from '../components/settings-time-profile-form'; import SettingsZone from '../components/settings-zone'; @@ -318,6 +319,7 @@ ManageIQ.component.addReact('SettingsCompanyTags', SettingsCompanyTags); ManageIQ.component.addReact('SettingsCompanyTagsEntryForm', SettingsCompanyTagsEntryForm); ManageIQ.component.addReact('SettingsDetailsTab', SettingsDetailsTab); ManageIQ.component.addReact('SettingsLabelTagMapping', SettingsLabelTagMapping); +ManageIQ.component.addReact('SettingsReplicationForm', SettingsReplicationForm); ManageIQ.component.addReact('SettingsTasksForm', SettingsTasksForm); ManageIQ.component.addReact('SettingsTimeProfileForm', SettingsTimeProfileForm); ManageIQ.component.addReact('SettingsZone', SettingsZone); diff --git a/app/stylesheet/miq-data-table.scss b/app/stylesheet/miq-data-table.scss index 2097fba9820..3c3c680862a 100644 --- a/app/stylesheet/miq-data-table.scss +++ b/app/stylesheet/miq-data-table.scss @@ -306,6 +306,12 @@ table.miq_preview { } } +.subscriptions-table { + .subscription-add { + margin-bottom: 16px; + } +} + .header-button { width: 100px !important; } diff --git a/app/views/ops/_settings_replication_tab.html.haml b/app/views/ops/_settings_replication_tab.html.haml index d96bafa7d05..867dcbbbd44 100644 --- a/app/views/ops/_settings_replication_tab.html.haml +++ b/app/views/ops/_settings_replication_tab.html.haml @@ -1,4 +1,6 @@ - if @sb[:active_tab] == "settings_replication" + #tab_div + = react('SettingsReplicationForm', :pglogicalReplicationFormId => 'new') - @angular_form = true %form.form-horizontal#form_div{"name" => "angularForm", From 24bd2c56d26d6438a67ce64e1bc4b2f69c4ceb40 Mon Sep 17 00:00:00 2001 From: Samuel Liu Date: Wed, 18 Dec 2024 13:27:06 -0500 Subject: [PATCH 2/3] wip --- .../components/settings-replication-form/index.jsx | 3 --- .../settings-replication-form.schema.js | 11 +++++++---- .../settings-replication-form/subscriptions-table.jsx | 1 - 3 files changed, 7 insertions(+), 8 deletions(-) diff --git a/app/javascript/components/settings-replication-form/index.jsx b/app/javascript/components/settings-replication-form/index.jsx index 796d4d3d588..5ae9eb9bf9e 100644 --- a/app/javascript/components/settings-replication-form/index.jsx +++ b/app/javascript/components/settings-replication-form/index.jsx @@ -17,9 +17,6 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => { }, setState] = useState({ isLoading: !!pglogicalReplicationFormId }); const submitLabel = __('Save'); - console.log(initialValues); - console.log(subscriptions); - const componentMapper = { ...mapper, 'subscriptions-table': SubscriptionsTableComponent, diff --git a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js index e2cc5deacac..2f4327eecb5 100644 --- a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js +++ b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js @@ -4,17 +4,20 @@ import { createRows } from './helper'; const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => { const deleteSubscription = (selectedRow, cellType, formOptions) => { + console.log('here'); + console.log('subscriptions: ', subscriptions); subscriptions.splice(selectedRow.id, 1); + console.log('subscriptions after: ', subscriptions); setState((state) => ({ ...state, subscriptions, })); - console.log(formOptions.getFieldState('subscriptions-table')); - console.log(formOptions.getRegisteredFields()); - console.log(formOptions.getState()); - console.log(formOptions.schema); + console.log("subscriptions table: ", formOptions.getFieldState('subscriptions-table')); + console.log("registered fields: ", formOptions.getRegisteredFields()); + console.log("state: ", formOptions.getState()); + console.log("schema: ", formOptions.schema); }; const editSubscription = (selectedRow) => { diff --git a/app/javascript/components/settings-replication-form/subscriptions-table.jsx b/app/javascript/components/settings-replication-form/subscriptions-table.jsx index 17d8bff9cd8..f867ecac80b 100644 --- a/app/javascript/components/settings-replication-form/subscriptions-table.jsx +++ b/app/javascript/components/settings-replication-form/subscriptions-table.jsx @@ -22,7 +22,6 @@ export const SubscriptionsTableComponent = (props) => { {addButtonLabel} -
Date: Thu, 9 Jan 2025 22:02:23 -0500 Subject: [PATCH 3/3] move form to modal --- .../settings-replication-form/index.jsx | 62 +++++- .../modal-form.schema.js | 64 ++++++ .../settings-replication-form.schema.js | 154 ++++++------- .../ops/_settings_replication_tab.html.haml | 202 ------------------ 4 files changed, 186 insertions(+), 296 deletions(-) create mode 100644 app/javascript/components/settings-replication-form/modal-form.schema.js diff --git a/app/javascript/components/settings-replication-form/index.jsx b/app/javascript/components/settings-replication-form/index.jsx index 5ae9eb9bf9e..ede9a2834bc 100644 --- a/app/javascript/components/settings-replication-form/index.jsx +++ b/app/javascript/components/settings-replication-form/index.jsx @@ -2,9 +2,11 @@ import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import MiqFormRenderer from '@@ddf'; +import { Modal } from 'carbon-components-react'; // import { Button } from 'carbon-components-react'; // import MiqDataTable from '../miq-data-table'; import createSchema from './settings-replication-form.schema'; +import createSubscriptionSchema from './modal-form.schema'; import { SubscriptionsTableComponent } from './subscriptions-table'; import ValidateSubscription from './validate-subscription'; import miqRedirectBack from '../../helpers/miq-redirect-back'; @@ -17,6 +19,21 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => { }, setState] = useState({ isLoading: !!pglogicalReplicationFormId }); const submitLabel = __('Save'); + const [isModalOpen, setModalOpen] = useState(false); + const [modalAction, setModalAction] = useState(''); + const [currentSubscription, setCurrentSubscription] = useState(null); + + const handleModalOpen = (action, subscription = null) => { + setModalAction(action); + setCurrentSubscription(subscription); + setModalOpen(true); + }; + + const handleModalClose = () => { + setModalOpen(false); + setCurrentSubscription(null); + }; + const componentMapper = { ...mapper, 'subscriptions-table': SubscriptionsTableComponent, @@ -142,16 +159,41 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => { }; return !isLoading && ( - +
+ + + onSubmit(currentSubscription || {})} + > + {/* Render the MiqFormRenderer inside the modal */} + + +
+ ); /* if (form.type === 'subscription') { diff --git a/app/javascript/components/settings-replication-form/modal-form.schema.js b/app/javascript/components/settings-replication-form/modal-form.schema.js new file mode 100644 index 00000000000..2628ffdd413 --- /dev/null +++ b/app/javascript/components/settings-replication-form/modal-form.schema.js @@ -0,0 +1,64 @@ +/* eslint-disable camelcase */ +import { componentTypes, validatorTypes } from '@@ddf'; + +const createSubscriptionSchema = (initialValues, subscriptions, form, replicationHelperText, setState, setModalOpen) => { + const subscriptionFields = ({ + fields: [ + { + component: 'validate-subscription', + name: 'validate-sub', + id: 'validate-sub', + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + skipSubmit: true, + fields: [ + { + component: componentTypes.TEXT_FIELD, + name: 'dbname', + id: 'dbname', + label: __('Database'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'host', + id: 'host', + label: __('Host'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'user', + id: 'user', + label: __('Username'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'password', + id: 'password', + label: __('Password'), + type: 'password', + // isReadOnly: form.action === 'edit', + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + { + component: componentTypes.TEXT_FIELD, + name: 'port', + id: 'port', + label: __('Port'), + isRequired: true, + validate: [{ type: validatorTypes.REQUIRED }], + }, + ], + }, + ], + }); + return subscriptionFields; +} + +export default createSubscriptionSchema; diff --git a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js index 2f4327eecb5..86a152a03e9 100644 --- a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js +++ b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js @@ -2,22 +2,14 @@ import { componentTypes, validatorTypes } from '@@ddf'; import { createRows } from './helper'; -const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => { +const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState, setModalOpen) => { const deleteSubscription = (selectedRow, cellType, formOptions) => { - console.log('here'); - console.log('subscriptions: ', subscriptions); subscriptions.splice(selectedRow.id, 1); - console.log('subscriptions after: ', subscriptions); setState((state) => ({ ...state, subscriptions, })); - - console.log("subscriptions table: ", formOptions.getFieldState('subscriptions-table')); - console.log("registered fields: ", formOptions.getRegisteredFields()); - console.log("state: ", formOptions.getState()); - console.log("schema: ", formOptions.schema); }; const editSubscription = (selectedRow) => { @@ -32,12 +24,13 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText, port: selectedRow.cells[4].value, subId: selectedRow.id, }, - form: { - type: 'subscription', - className: 'subscription-form', - action: 'edit', - }, + // form: { + // type: 'subscription', + // className: 'subscription-form', + // action: 'edit', + // }, })); + setModalOpen(true); }; const replicationFields = ({ @@ -108,90 +101,83 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText, }, addButtonLabel: __('Add Subscription'), onButtonClick: (formOptions) => { - console.log(formOptions.getRegisteredFields()); - console.log(formOptions.getState()); - console.log(formOptions.schema); - + setModalOpen(true); setState((state) => ({ ...state, initialValues: { replication_type: state.initialValues.replication_type, subscriptions: state.initialValues.subscriptions, }, - form: { - type: 'subscription', - className: 'subscription-form', - action: 'add', - }, + // form: { + // type: 'subscription', + // className: 'subscription-form', + // action: 'add', + // }, })); - - console.log(formOptions.getRegisteredFields()); - console.log(formOptions.getState()); - console.log(formOptions.schema); }, }], }, ], }); - const subscriptionFields = ({ - fields: [ - { - component: 'validate-subscription', - name: 'validate-sub', - id: 'validate-sub', - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - skipSubmit: true, - fields: [ - { - component: componentTypes.TEXT_FIELD, - name: 'dbname', - id: 'dbname', - label: __('Database'), - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - }, - { - component: componentTypes.TEXT_FIELD, - name: 'host', - id: 'host', - label: __('Host'), - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - }, - { - component: componentTypes.TEXT_FIELD, - name: 'user', - id: 'user', - label: __('Username'), - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - }, - { - component: componentTypes.TEXT_FIELD, - name: 'password', - id: 'password', - label: __('Password'), - type: 'password', - isReadOnly: form.action === 'edit', - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - }, - { - component: componentTypes.TEXT_FIELD, - name: 'port', - id: 'port', - label: __('Port'), - isRequired: true, - validate: [{ type: validatorTypes.REQUIRED }], - }, - ], - }, - ], - }); + // const subscriptionFields = ({ + // fields: [ + // { + // component: 'validate-subscription', + // name: 'validate-sub', + // id: 'validate-sub', + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // skipSubmit: true, + // fields: [ + // { + // component: componentTypes.TEXT_FIELD, + // name: 'dbname', + // id: 'dbname', + // label: __('Database'), + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // }, + // { + // component: componentTypes.TEXT_FIELD, + // name: 'host', + // id: 'host', + // label: __('Host'), + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // }, + // { + // component: componentTypes.TEXT_FIELD, + // name: 'user', + // id: 'user', + // label: __('Username'), + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // }, + // { + // component: componentTypes.TEXT_FIELD, + // name: 'password', + // id: 'password', + // label: __('Password'), + // type: 'password', + // isReadOnly: form.action === 'edit', + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // }, + // { + // component: componentTypes.TEXT_FIELD, + // name: 'port', + // id: 'port', + // label: __('Port'), + // isRequired: true, + // validate: [{ type: validatorTypes.REQUIRED }], + // }, + // ], + // }, + // ], + // }); - return form.type === 'subscription' ? subscriptionFields : replicationFields; + return replicationFields; }; export default createSchema; diff --git a/app/views/ops/_settings_replication_tab.html.haml b/app/views/ops/_settings_replication_tab.html.haml index 867dcbbbd44..f87936abf11 100644 --- a/app/views/ops/_settings_replication_tab.html.haml +++ b/app/views/ops/_settings_replication_tab.html.haml @@ -1,209 +1,7 @@ - if @sb[:active_tab] == "settings_replication" #tab_div = react('SettingsReplicationForm', :pglogicalReplicationFormId => 'new') - - @angular_form = true - %form.form-horizontal#form_div{"name" => "angularForm", - "ng-controller" => "pglogicalReplicationFormController", - "ng-show" => "afterGet"} - .form-group{"ng-class" => "{'has-error': angularForm.subscriptions.$invalid}"} - %label.col-md-2.control-label - = _('Type') - .col-md-2 - = select_tag('replication_type', - options_for_select([["<#{_('None')}>", 'none'], ["Global", 'global'], ["Remote", 'remote']]), - "ng-model" => "pglogicalReplicationModel.replication_type", - "ng-change" => "replicationTypeChanged()", - "miqrequired" => "", - "checkchange" => "", - "selectpicker-for-select-tag" => "") - - .subscriptions_div{"ng-if" => "pglogicalReplicationModel.replication_type == 'global'"} - %h3 - = _('Subscriptions') - %br - %span{"style"=>"color:red", "ng-show" => "subscriptionInValidMessage()"} - = _("At least 1 subscription must be added to save server replication type") - %table{:width => "100%", :align => "bottom"} - %tr - %td#buttons_on{:align => "right"} - %button.btn.btn-primary{:type => "button", "ng-disabled" => "addInProgress()", "ng-click" => "enableSubscriptionAdd()", :align => "left"}= _('Add Subscription') - %br - %br - %table.table.table-striped.table-hover.table-condensed.table-bordered - %thead - %th= _('Database') - %th= _('Host') - %th= _('Username') - %th= _('Password') - %th= _('Port') - %th= _('Backlog') - %th= _('Status') - %th= _('Region') - %th{:colspan => 2}=_('Actions') - %tbody - %tr{"ng-if" => "pglogicalReplicationModel.addEnabled"} - %td - %input.form-control{"type" => "text", - "id" => "host", - "name" => "host", - "ng-model" => "pglogicalReplicationModel.dbname", - "miqrequired" => "", - "checkchange" => ""} - %td - %input.form-control{"type" => "text", - "id" => "host", - "name" => "host", - "ng-model" => "pglogicalReplicationModel.host", - "miqrequired" => "", - "checkchange" => ""} - %td - %input.form-control{"type" => "text", - "id" => "userid", - "name" => "userid", - "ng-model" => "pglogicalReplicationModel.user", - "miqrequired" => "", - "checkchange" => ""} - %td - %input.form-control{"type" => "password", - "id" => "password", - "name" => "password", - "ng-model" => "pglogicalReplicationModel.password", - :autocomplete => "off", - "placeholder" => placeholder_if_present("pglogicalReplicationModel.password"), - "miqrequired" => "", - "checkchange" => ""} - %td - %input.form-control{"type" => "text", - "id" => "port", - "name" => "port", - "ng-model" => "pglogicalReplicationModel.port"} - %td - %td - %td - %td{:class => "action-cell"} - %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "!subscriptionValid()", "ng-click" => "addSubscription()"}= _('Accept') - - %td - .dropdown.pull-right.dropdown-kebab-pf - %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true"} - %span.fa.fa-ellipsis-v - %ul.dropdown-menu.dropdown-menu-right.3 - %li - %a{:class => "disabled", "ng-show" => "!subscriptionValid()"} - = _('Validate') - %li - %a{"ng-show" => "subscriptionValid()", "ng-click" => "validateSubscription()"} - = _('Validate') - %li - %a{"ng-click" => "discardSubscription()"} - = _('Discard') - - %tr{"ng-repeat" => "subscription in pglogicalReplicationModel.subscriptions track by $index", "ng-form" => "rowForm", "ng-class" => "{'danger': showCancelDelete($index)}"} - %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)", - "ng-class"=>"{'active': showChanged($index, 'dbname')}"} - {{subscription.dbname}} - %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index", - "ng-class"=>"{'active': showChanged($index, 'dbname')}"} - %input.form-control{"type" => "text", - "name" => "dbname", - "ng-model" => "pglogicalReplicationModel.dbname", - "ng-change" => "showChanged($index, 'dbname')", - "miqrequired" => ""} - - %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)", - "ng-class"=>"{'active': showChanged($index, 'host')}"} - {{subscription.host}} - %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index", - "ng-class"=>"{'active': showChanged($index, 'host')}"} - %input.form-control{"type" => "text", - "name" => "host", - "ng-model" => "pglogicalReplicationModel.host", - "miqrequired" => ""} - %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)", - "ng-class"=>"{'active': showChanged($index, 'user')}"} - {{subscription.user}} - %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index", - "ng-class"=>"{'active': showChanged($index, 'user')}"} - %input.form-control{"type" => "text", - "name" => "user", - "ng-model" => "pglogicalReplicationModel.user", - "miqrequired" => ""} - - %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)", - "ng-class"=>"{'active': showChanged($index, 'password')}"} - ●●●●●●●● - %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index", - "ng-class"=>"{'active': showChanged($index, 'password')}"} - %input.form-control{"type" => "password", - :autocomplete => "off", - "name" => "password", - "ng-model" => "pglogicalReplicationModel.password", - "ng-disabled" => "!subscription.newRecord"} - - %td{"ng-if" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)", - "ng-class"=>"{'active': showChanged($index, 'port')}"} - {{subscription.port}} - %td{"ng-if" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index", - "ng-class"=>"{'active': showChanged($index, 'port')}"} - %input.form-control{"type" => "text", - "name" => "port", - "ng-model" => "pglogicalReplicationModel.port"} - - %td - {{subscription.backlog}} - %td - {{subscription.status}} - %td - {{subscription.provider_region}} - %td{:class => "action-cell", "ng-show" => "showCancelDelete($index)"} - %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-click" => "cancelDelete($index)"} - = _('Cancel Delete') - - %td{:class => "action-cell","ng-show" => "!showCancelDelete($index) && (!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index))"} - %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "addInProgress()", "ng-click" => "enableSubscriptionUpdate($index)"} - = _('Update') - %td{"ng-show" => "!pglogicalReplicationModel.updateEnabled || (pglogicalReplicationModel.updateEnabled && $index !== pglogicalReplicationModel.s_index)"} - .dropdown.pull-right.dropdown-kebab-pf - %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true", "ng-disabled" => "showCancelDelete($index)"} - %span.fa.fa-ellipsis-v - %ul.dropdown-menu.dropdown-menu-right.3 - %li - %a{"ng-click" => "removeSubscription($index)"} - = _('Delete') - %li - %a{"ng-click" => "validateSubscription($index)"} - = _('Validate') - - %td{:class => "action-cell", "ng-show" => "!showCancelDelete($index) && pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index"} - %button.btn.btn-default.btn-block.btn-sm{:type => "button", "ng-disabled" => "!subscriptionValid()", "ng-click" => "addSubscription($index)"}= _('Accept') - - %td{"ng-show" => "pglogicalReplicationModel.updateEnabled && $index === pglogicalReplicationModel.s_index"} - .dropdown.pull-right.dropdown-kebab-pf - %button.btn.btn-link.dropdown-toggle{"data-toggle" => "dropdown", "aria-haspopup" => "true", "ng-disabled" => "showCancelDelete($index)"} - %span.fa.fa-ellipsis-v - %ul.dropdown-menu.dropdown-menu-right.3 - %li - %a{:class => "disabled", "ng-show" => "!subscriptionValid()"} - = _('Validate') - %li - %a{"ng-show" => "subscriptionValid()", "ng-click" => "validateSubscription($index)"} - = _('Validate') - %li - %a{"ng-click" => "discardSubscription($index)"} - = _('Discard') - - .button-group{:align => "right"} - %miq-button{:name => t = _("Save"), - :title => t, - :alt => t, - :enabled => "saveEnabled(angularForm)", - 'on-click' => "saveClicked()"} - %miq-button{:name => t = _("Reset"), - :title => t, - :alt => t, - :enabled => "saveEnabled(angularForm)", - 'on-click' => "resetClicked()"} :javascript ManageIQ.angular.app.value('pglogicalReplicationFormId', 'new'); miq_bootstrap('#form_div');