diff --git a/app/javascript/components/cloud-tenant-form/index.jsx b/app/javascript/components/cloud-tenant-form/index.jsx index 3eca5d2c210..2372dbcc3f4 100644 --- a/app/javascript/components/cloud-tenant-form/index.jsx +++ b/app/javascript/components/cloud-tenant-form/index.jsx @@ -10,7 +10,7 @@ const CloudTenantForm = ({ recordId }) => { useEffect(() => { if (recordId) { - API.get(`/api/cloud_tenants/${recordId}`).then((initialValues) => { + API.get(`/api/cloud_tenants1/${recordId}`).then((initialValues) => { setState((state) => ({ ...state, initialValues, isLoading: false })); }); } diff --git a/app/javascript/components/miq-error-modal/miq-error-modal.jsx b/app/javascript/components/miq-error-modal/miq-error-modal.jsx new file mode 100644 index 00000000000..6d8ce6934ed --- /dev/null +++ b/app/javascript/components/miq-error-modal/miq-error-modal.jsx @@ -0,0 +1,126 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable react/prop-types */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import { Modal, ModalBody, Button } from 'carbon-components-react'; +import DOMPurify from 'dompurify'; + +const SHOW_ERROR_MODAL = '@@errorModal/show'; +const HIDE_ERROR_MODAL = '@@errorModal/hide'; +const LOAD_ERROR_MODAL = '@@errorModal/load'; + +const showModal = () => (dispatch, getState) => { + if (getState().ErrorModal && getState().ErrorModal.error) { + // If the modal has been already rendered, do not request its data twice + return dispatch({ type: SHOW_ERROR_MODAL }); + } + + // Request the modal data from the API + // return API.get('/api').then((root) => + // API.get(root.server_info.region_href).then((region) => + // API.get(root.server_info.zone_href).then((zone) => ({ ...root, region, zone })).then((data) => + // dispatch({ type: LOAD_ERROR_MODAL, data })).then(() => + // dispatch({ type: SHOW_ERROR_MODAL })))); +}; + +const hideModal = () => ({ type: HIDE_ERROR_MODAL }); + +ManageIQ.redux.addReducer({ + ErrorModal: function ErrorModalReducer(state = { show: false }, action) { + switch (action.type) { + case SHOW_ERROR_MODAL: + return { ...state, show: true }; + case HIDE_ERROR_MODAL: + return { ...state, show: false }; + case LOAD_ERROR_MODAL: + return { ...state, error: action.data }; + default: + return state; + } + }, +}); + +class MiqErrorModal extends React.Component { + constructor(props) { + super(props); + this.state = { error: '' }; + console.log(props); + } + + componentDidMount() { + const { showModal } = this.props; + // this.subscribe = window.listenToRx((event) => { + // if (event.type === 'showErrorModal') { + // showModal(); + // } + // }); + + this.subscribe = window.listenToRx((event) => { + if ('serverError' in event) { + console.log(event); + this.setState({ error: event.serverError, source: event.source, backendName: event.backendName }); + showModal(); + } + }); + } + + componentWillUnmount() { + this.subscribe.unsubscribe(); + } + + render() { + // const { + // data, dialogClassName, hideModal, + // } = this.props; + // const { show } = this.props; + // const { expand } = this.state; + // let className = 'about-modal'; + // if (dialogClassName === 'whitelabel') { + // className = dialogClassName; + // } + // if (!data) { + // return null; + // } + + console.log(this.state); + return ( +
+
+
+ ); + } +} + +MiqErrorModal.propTypes = { + dialogClassName: PropTypes.string, + show: PropTypes.bool, + data: PropTypes.shape({ + product_info: PropTypes.shape({ + name_full: PropTypes.string, + copyright: PropTypes.string, + branding_info: PropTypes.shape({ + logo: PropTypes.string, + }), + }), + server_info: PropTypes.shape({ + release: PropTypes.string, + }), + }), + hideModal: PropTypes.func.isRequired, + showModal: PropTypes.func.isRequired, +}; + +MiqErrorModal.defaultProps = { + dialogClassName: '', + show: false, + data: undefined, +}; + +const mapStateToProps = (state) => + (state.ErrorModal ? { show: state.ErrorModal.show, error: state.ErrorModal.error } : {}); +const mapDispatchToProps = (dispatch) => bindActionCreators({ showModal, hideModal }, dispatch); +export default connect(mapStateToProps, mapDispatchToProps)(MiqErrorModal); diff --git a/app/javascript/oldjs/controllers/error_modal_controller.js b/app/javascript/oldjs/controllers/error_modal_controller.js index b88eec1b0c0..67eb05ad11a 100644 --- a/app/javascript/oldjs/controllers/error_modal_controller.js +++ b/app/javascript/oldjs/controllers/error_modal_controller.js @@ -9,6 +9,7 @@ function ErrorModalController($timeout) { listenToRx(function(event) { if ('serverError' in event) { + console.log(event.serverError.headers.get('content-type')); $timeout(function() { $ctrl.show(event.serverError, event.source, event.backendName); }); diff --git a/app/javascript/packs/component-definitions-common.js b/app/javascript/packs/component-definitions-common.js index 164edaa3905..4bf66ff9858 100644 --- a/app/javascript/packs/component-definitions-common.js +++ b/app/javascript/packs/component-definitions-common.js @@ -76,6 +76,7 @@ import LiveMigrateForm from '../components/live-migrate-form'; import MarkdownPreview from '../components/MarkdownPreview'; import MiqAboutModal from '../components/miq-about-modal/miq-about-modal'; import MiqAeCustomization from '../components/miq-ae-customization'; +import MiqErrorModal from '../components/miq-error-modal/miq-error-modal'; import MiqAlertSetForm from '../components/miq-alert-set-form'; import MiqCustomTab from '../components/miq-custom-tab'; import MiqDataTable from '../components/miq-data-table'; @@ -259,6 +260,7 @@ ManageIQ.component.addReact('menu.Navbar', Navbar); ManageIQ.component.addReact('MarkdownPreview', MarkdownPreview); ManageIQ.component.addReact('MiqAboutModal', MiqAboutModal); ManageIQ.component.addReact('MiqAeCustomization', MiqAeCustomization); +ManageIQ.component.addReact('MiqErrorModal', MiqErrorModal); ManageIQ.component.addReact('MiqAlertSetForm', MiqAlertSetForm); ManageIQ.component.addReact('MiqCustomTab', MiqCustomTab); ManageIQ.component.addReact('MiqDataTable', MiqDataTable); diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index a3ad50cc3db..8faebb37f09 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -15,6 +15,7 @@ :miqGroups => groups}, :id => 'main-menu') = react('ToastList') += react('MiqErrorModal') = react('MiqAboutModal', {:dialogClassName => ::Settings.server.custom_login_logo ? 'whitelabel' : ''}) = render :partial => "layouts/spinner" diff --git a/app/views/vm_common/_evm_relationship.html.haml b/app/views/vm_common/_evm_relationship.html.haml index 86a732d4196..3213f93641b 100644 --- a/app/views/vm_common/_evm_relationship.html.haml +++ b/app/views/vm_common/_evm_relationship.html.haml @@ -3,4 +3,4 @@ %h3 = _('Servers') .col-md-12 - = react('VmServerRelationshipForm', :recordId => @record.id.to_s, :redirect => url_for(:action => :show, :id => @record.id)) + = react('VmServerRelationshipForm', :recordId => @edit[:vm_id].to_s, :redirect => url_for(:action => :show, :id => @record.id))