webpack/components/ApplicationInstance/ApplicationInstance.js in foreman_acd-0.7.0 vs webpack/components/ApplicationInstance/ApplicationInstance.js in foreman_acd-0.9.0
- old
+ new
@@ -1,19 +1,21 @@
import React, { useState } from 'react'
import PropTypes from 'prop-types';
import {
Icon,
Button,
+ MessageDialog,
} from 'patternfly-react';
import * as resolve from 'table-resolver';
import ForemanModal from 'foremanReact/components/ForemanModal';
import {
sprintf,
translate as __
} from 'foremanReact/common/I18n';
import Select from 'foremanReact/components/common/forms/Select';
import ParameterSelection from '../ParameterSelection';
+import ExistingHostSelection from '../ExistingHostSelection';
import AddTableEntry from '../common/AddTableEntry';
import DeleteTableEntry from '../common/DeleteTableEntry';
import RailsData from '../common/RailsData';
import AppDefinitionSelector from './components/AppDefinitionSelector';
import ServiceCounter from './components/ServiceCounter';
@@ -39,11 +41,11 @@
isEditing({rowData}) {
return (rowData.backup !== undefined);
}
- addTableEntryAllowed() {
+ changeDataAllowed() {
return this.props.editMode || this.props.appDefinition.id == ''
}
validateParameters() {
let result = true;
@@ -103,33 +105,40 @@
if (mode === 'editInstance') {
loadApplicationDefinition(appDefinition.id, { url: appDefinitionUrl });
}
+ const already_deployed_msg = __("This is an already deployed host. Changing the parameters is not possible!");
+
const inlineEditButtonsFormatter = inlineEditFormatterFactory({
isEditing: additionalData => this.props.editMode,
renderValue: (value, additionalData) => (
<td style={{ padding: '2px' }}>
+ { additionalData.rowData.isExistingHost == true ? (
+ <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
+ ) : (<span></span>)}
<Button
bsStyle="default"
onClick={() => activateEditApplicationInstanceHost(additionalData)}
>
- <Icon type="pf" name="edit" title={__("edit entry")} />
+ <Icon type="pf" name="edit" title={__("Edit entry")} />
</Button>
- <Button
- bsStyle="default"
- onClick={() => openForemanParameterSelectionModal(additionalData)}
- >
- <Icon type="pf" name="settings" title={__("change parameters")} />
- </Button>
+ { additionalData.rowData.isExistingHost == false ? (
+ <Button
+ bsStyle="default"
+ onClick={() => openForemanParameterSelectionModal(additionalData)}
+ >
+ <Icon type="pf" name="settings" title={__("Change parameters")} />
+ </Button>
+ ) : (<span></span>)}
<Button
bsStyle="default"
onClick={() => openAnsibleParameterSelectionModal(additionalData)}
>
- <span title={__("change ansible variables")}>A</span>
+ <span title={__("Change ansible variables")}>A</span>
</Button>
<DeleteTableEntry
hidden={false}
disabled={false}
@@ -138,17 +147,22 @@
/>
</td>
),
renderEdit: (value, additionalData) => (
<td style={{ padding: '2px' }}>
+ { additionalData.rowData.isExistingHost == true ? (
+ <Icon style={{marginRight: 8, marginLeft: 2}} type="pf" name="info" title={already_deployed_msg} />
+ ) : (<span></span>)}
<Button bsStyle="default" disabled>
<Icon type="pf" name={__("edit")} />
</Button>
- <Button bsStyle="default" disabled>
- <Icon type="pf" name={__("settings")} />
- </Button>
+ { additionalData.rowData.isExistingHost == false ? (
+ <Button bsStyle="default" disabled>
+ <Icon type="pf" name={__("settings")} />
+ </Button>
+ ) : (<span></span>)}
<Button bsStyle="default" disabled>
<span>A</span>
</Button>
@@ -237,20 +251,23 @@
};
render() {
const {
data: { mode, applications, organization, location, foremanDataUrl, appDefinitionUrl },
+ showAlertModal, alertModalText, alertModalTitle, closeAlertModal,
appDefinition,
services,
hosts,
columns,
addApplicationInstanceHost,
confirmEditApplicationInstanceHost,
cancelEditApplicationInstanceHost,
closeForemanParameterSelectionModal,
openAnsibleParameterSelectionModal,
closeAnsibleParameterSelectionModal,
+ openAddExistingHostsModal,
+ closeAddExistingHostsModal,
changeParameterSelectionMode,
loadApplicationDefinition,
} = this.props;
let { validateResult, validateMsg } = this.validateParameters();
@@ -261,31 +278,42 @@
$('input[type="submit"][name="commit"]').attr("disabled", false);
}
return (
<span>
- <div class="service-counter">
+ <MessageDialog
+ show={showAlertModal}
+ onHide={closeAlertModal}
+ primaryAction={closeAlertModal}
+ primaryActionButtonContent={__('OK')}
+ primaryActionButtonBsStyle={"danger"}
+ icon={<Icon type="pf" name="error-circle-o" />}
+ title={alertModalTitle}
+ primaryContent={alertModalText}
+ />
+ <div className="service-counter">
<ServiceCounter
title="Service counts"
serviceList={ services }
hostList={ hosts }
/>
</div>
<div>
<AppDefinitionSelector
label="Application Definition"
+ hidden={ false }
editable={ mode == 'newInstance' }
viewText={ appDefinition.name }
options={ applications }
onChange={ loadApplicationDefinition }
selectValue={ appDefinition.id.toString() }
additionalData={{url: appDefinitionUrl}}
/>
{appDefinition.id == '' ? (
- <p style={{ paddingTop: 25 }}>
+ <div style={{ paddingTop: 25 }}>
<pre>{ "App Definition can't be blank" }</pre>
- </p>
+ </div>
) : (<div></div>)}
</div>
<div className="form-group">
<Table.PfProvider
striped
@@ -307,42 +335,53 @@
rowKey="id"
onRow={(rowData, { rowIndex }) => ({
role: 'row',
isEditing: () => this.isEditing({ rowData }),
onCancel: () => cancelEditApplicationInstanceHost({ rowData, rowIndex }),
- onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex }),
+ onConfirm: () => confirmEditApplicationInstanceHost({ rowData, rowIndex, appDefinition }),
last: rowIndex === services.length - 1
})}
/>
</Table.PfProvider>
<AddTableEntry
hidden={ false }
- disabled={ this.addTableEntryAllowed() }
+ disabled={ this.changeDataAllowed() }
onAddTableEntry={ addApplicationInstanceHost }
/>
+ <span style={{ marginLeft: 10 }}>
+ <Button
+ bsStyle="default"
+ disabled={ this.changeDataAllowed() }
+ onClick={() => openAddExistingHostsModal({
+ isAllGroup: true
+ })}
+ >
+ <Icon title={__("Add existing hosts")} type="pf" name="server" />
+ </Button>
+ </span>
<span style={{ marginLeft: 30 }}>
Ansible group vars 'all':
<Button
style={{ marginLeft: 10 }}
bsStyle="default"
- disabled={ this.props.editMode }
+ disabled={ this.changeDataAllowed() }
onClick={() => openAnsibleParameterSelectionModal({
isAllGroup: true
})}
>
- <span title={__("change ansible variables for 'all'")}>A</span>
+ <span title={__("Change ansible variables for 'all'")}>A</span>
</Button>
</span>
</div>
<div>
<ForemanModal
id="AppInstanceForemanParamSelection"
dialogClassName="param_selection_modal"
title={__("Foreman Parameter specification for Application Instance")}
>
<ForemanModal.Header closeButton={false}>
- Parameter specification
+ {__("Parameter specification")}
</ForemanModal.Header>
{this.props.parametersData ? (
<ParameterSelection
editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
@@ -366,11 +405,11 @@
id="AppInstanceAnsibleParamSelection"
dialogClassName="param_selection_modal"
title={__("Ansible group variables for Application Instance")}
>
<ForemanModal.Header closeButton={false}>
- Parameter specification
+ {__("Parameter specification")}
</ForemanModal.Header>
{this.props.parametersData ? (
<ParameterSelection
editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
@@ -386,33 +425,59 @@
<Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
</div>
</ForemanModal.Footer>
</ForemanModal>
</div>
+ <div>
+ <ForemanModal
+ id="AppInstanceAddExistingHosts"
+ dialogClassName="add_existing_hosts_modal"
+ title={__("Add existing hosts to an Application Instance")}
+ >
+ <ForemanModal.Header closeButton={false}>
+ {__("Existing hosts selection")}
+ </ForemanModal.Header>
+ <ExistingHostSelection
+ location={ location }
+ organization={ organization }
+ services={ services }
+ allHosts={ this.props.hosts }
+ />
+ <ForemanModal.Footer>
+ <div>
+ <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'save' })}>{__("Save")}</Button>
+ <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAddExistingHostsModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
+ </div>
+ </ForemanModal.Footer>
+ </ForemanModal>
+ </div>
{validateResult == false ? (
- <p style={{ paddingTop: 25 }}>
+ <div style={{ paddingTop: 25 }}>
<pre>{ validateMsg }</pre>
- </p>
+ </div>
) : (<div></div>)}
<RailsData
- key='applications_instance'
+ key='application_instance_hosts_data'
view='app_instance'
parameter='hosts'
value={JSON.stringify(this.props.hosts)}
/>
<RailsData
- key='applications_instance'
+ key='application_instance_ansible_data'
view='app_instance'
parameter='ansible_vars_all'
value={JSON.stringify(this.props.ansibleVarsAll)}
/>
</span>
)};
}
ApplicationInstance.defaultProps = {
error: {},
+ showAlertModal: false,
+ alertModalText: '',
+ alertModalTitle: '',
appDefinition: { "id": '', "name": '' },
editMode: false,
services: [],
hosts: [],
ansibleVarsAll: [],
@@ -422,16 +487,20 @@
paramEditMode: false,
}
ApplicationInstance.propTypes = {
initApplicationInstance: PropTypes.func,
+ showAlertModal: PropTypes.bool,
+ alertModalText: PropTypes.string,
+ alertModalTitle: PropTypes.string,
editMode: PropTypes.bool.isRequired,
services: PropTypes.array,
appDefinition: PropTypes.object,
columns: PropTypes.array,
hosts: PropTypes.array,
ansibleVarsAll: PropTypes.array,
+ closeAlertModal: PropTypes.func,
loadApplicationDefinition: PropTypes.func,
addApplicationInstanceHost: PropTypes.func,
deleteApplicationInstanceHost: PropTypes.func,
activateEditApplicationInstanceHost: PropTypes.func,
confirmEditApplicationInstanceHost: PropTypes.func,
@@ -439,9 +508,11 @@
changeEditApplicationInstanceHost: PropTypes.func,
openForemanParameterSelectionModal: PropTypes.func,
closeForemanParameterSelectionModal: PropTypes.func,
openAnsibleParameterSelectionModal: PropTypes.func,
closeAnsibleParameterSelectionModal: PropTypes.func,
+ openAddExistingHostsModal: PropTypes.func,
+ closeAddExistingHostsModal: PropTypes.func,
changeParameterSelectionMode: PropTypes.func,
parametersData: PropTypes.object,
paramEditMode: PropTypes.bool,
};