webpack/components/ApplicationInstance/ApplicationInstance.js in foreman_acd-0.5.0 vs webpack/components/ApplicationInstance/ApplicationInstance.js in foreman_acd-0.6.0
- old
+ new
@@ -4,10 +4,14 @@
Icon,
Button,
} 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 AddTableEntry from '../common/AddTableEntry';
import DeleteTableEntry from '../common/DeleteTableEntry';
import RailsData from '../common/RailsData';
@@ -35,44 +39,57 @@
isEditing({rowData}) {
return (rowData.backup !== undefined);
}
+ addTableEntryAllowed() {
+ return this.props.editMode || this.props.appDefinition.id == ''
+ }
+
validateParameters() {
let result = true;
let msg = "";
this.props.hosts.forEach(h => {
- if (h.parameters.map(e => e.value).filter(i => i == "").length > 0) {
+ if (h.foremanParameters.map(e => e.value).filter(i => i == "").length > 0) {
result = false;
if (msg == "") {
- msg += "For some hosts the values for some parameters are missing. Check the values for these hosts:\n";
+ msg += __("For some hosts the values for some parameters are missing. Check the values for these hosts:\n");
}
msg += "- "+ h.hostname +"\n";
}
});
const invalidMinServices = this.props.services.filter(s => (Number(s.minCount) != 0) && (s.currentCount < s.minCount));
const invalidMaxServices = this.props.services.filter(s => (Number(s.maxCount) != 0) && (s.currentCount > s.maxCount));
+ console.log(invalidMinServices);
+
if (invalidMinServices.length > 0 || invalidMaxServices.length > 0) {
result = false;
if (msg != "") {
msg += "\n";
}
- msg += "Unachieved service counts: \n";
- invalidMinServices.map(s => { msg += "- service "+ s.name +" expects at least "+ s.minCount +" configured hosts" });
- invalidMaxServices.map(s => { msg += "- service "+ s.name +" expects no more than "+ s.maxCount +" configured hosts" });
+ msg += __("Unachieved service counts:");
+ msg += "\n";
+
+ invalidMinServices.map(s => { msg += sprintf(
+ __(`- service ${s.name} expects at ${s.minCount} least configured hosts\n`)
+ )});
+
+ invalidMaxServices.map(s => { msg += sprintf(
+ __(`- service ${s.name} expects no more than ${s.axCount} configured hosts\n`)
+ )});
}
- if (result === false) {
- window.alert(msg);
+ return {
+ validateResult: result,
+ validateMsg: msg
}
- return result;
}
componentDidMount() {
const {
data: { mode, appDefinition, hosts, ansibleVarsAll, appDefinitionUrl },
@@ -96,25 +113,25 @@
<td style={{ padding: '2px' }}>
<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" />
+ <Icon type="pf" name="settings" title={__("change parameters")} />
</Button>
<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}
@@ -124,15 +141,15 @@
</td>
),
renderEdit: (value, additionalData) => (
<td style={{ padding: '2px' }}>
<Button bsStyle="default" disabled>
- <Icon type="pf" name="edit" />
+ <Icon type="pf" name={__("edit")} />
</Button>
<Button bsStyle="default" disabled>
- <Icon type="pf" name="settings" />
+ <Icon type="pf" name={__("settings")} />
</Button>
<Button bsStyle="default" disabled>
<span>A</span>
</Button>
@@ -198,10 +215,16 @@
return inlineEditFormatterImpl.renderEditSelect(value, additionalData, serviceList);
}
prettyValue = serviceList[value];
return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
}
+ if (additionalData.property == 'hostname') {
+ if (additionalData.rowData.newEntry === true) {
+ return inlineEditFormatterImpl.renderEditText(value, additionalData);
+ }
+ return inlineEditFormatterImpl.renderValue(prettyValue, additionalData)
+ }
return inlineEditFormatterImpl.renderEditText(prettyValue, additionalData);
}
});
this.inlineEditFormatter = inlineEditFormatter;
@@ -226,18 +249,22 @@
confirmEditApplicationInstanceHost,
cancelEditApplicationInstanceHost,
closeForemanParameterSelectionModal,
openAnsibleParameterSelectionModal,
closeAnsibleParameterSelectionModal,
+ changeParameterSelectionMode,
loadApplicationDefinition,
} = this.props;
- // Start from validation when pressing submit. This should be in componentDidMount() but
- // unfortunatley then the event wasn't fired. To make sure, that the on-click is only added
- // once, there is a workaround to check if a css class "bound" exists.
- $('input[type="submit"][name="commit"]:not(.bound)').addClass('bound').on('click', () => this.validateParameters());
+ let { validateResult, validateMsg } = this.validateParameters();
+ if (validateResult == false) {
+ $('input[type="submit"][name="commit"]').attr("disabled", true);
+ } else {
+ $('input[type="submit"][name="commit"]').attr("disabled", false);
+ }
+
return (
<span>
<div class="service-counter">
<ServiceCounter
title="Service counts"
@@ -253,17 +280,17 @@
options={ applications }
onChange={ loadApplicationDefinition }
selectValue={ appDefinition.id.toString() }
additionalData={{url: appDefinitionUrl}}
/>
+ {appDefinition.id == '' ? (
+ <p style={{ paddingTop: 25 }}>
+ <pre>{ "App Definition can't be blank" }</pre>
+ </p>
+ ) : (<div></div>)}
</div>
<div className="form-group">
- <AddTableEntry
- hidden={ false }
- disabled={ this.props.editMode }
- onAddTableEntry={ addApplicationInstanceHost }
- />
<Table.PfProvider
striped
bordered
hover
dataTable
@@ -289,11 +316,11 @@
})}
/>
</Table.PfProvider>
<AddTableEntry
hidden={ false }
- disabled={ this.props.editMode }
+ disabled={ this.addTableEntryAllowed() }
onAddTableEntry={ addApplicationInstanceHost }
/>
<span style={{ marginLeft: 30 }}>
Ansible group vars 'all':
<Button
@@ -302,67 +329,74 @@
disabled={ this.props.editMode }
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"
+ title={__("Foreman Parameter specification for Application Instance")}
>
<ForemanModal.Header closeButton={false}>
Parameter specification
</ForemanModal.Header>
{this.props.parametersData ? (
<ParameterSelection
+ editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
paramType={ PARAMETER_SELECTION_PARAM_TYPE_FOREMAN }
location={ location }
organization={ organization }
paramDataUrl= { foremanDataUrl }
data={ this.props.parametersData }
/>
) : (<span>Empty</span>)
}
<ForemanModal.Footer>
<div>
- <Button bsStyle="primary" onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>Save</Button>
- <Button bsStyle="default" onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>Cancel</Button>
+ <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
+ <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeForemanParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
</div>
</ForemanModal.Footer>
</ForemanModal>
</div>
<div>
<ForemanModal
id="AppInstanceAnsibleParamSelection"
dialogClassName="param_selection_modal"
- title="Ansible group variables for Application Instance"
+ title={__("Ansible group variables for Application Instance")}
>
<ForemanModal.Header closeButton={false}>
Parameter specification
</ForemanModal.Header>
{this.props.parametersData ? (
<ParameterSelection
+ editModeCallback={ (hide) => changeParameterSelectionMode({ mode: hide })}
paramType={ PARAMETER_SELECTION_PARAM_TYPE_ANSIBLE }
location={ location }
organization={ organization }
data={ this.props.parametersData }
/>
) : (<span>Empty</span>)
}
<ForemanModal.Footer>
<div>
- <Button bsStyle="primary" onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>Save</Button>
- <Button bsStyle="default" onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>Cancel</Button>
+ <Button bsStyle="primary" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'save' })}>{__("Save")}</Button>
+ <Button bsStyle="default" disabled={this.props.paramEditMode} onClick={() => closeAnsibleParameterSelectionModal({ mode: 'cancel' })}>{__("Cancel")}</Button>
</div>
</ForemanModal.Footer>
</ForemanModal>
</div>
+ {validateResult == false ? (
+ <p style={{ paddingTop: 25 }}>
+ <pre>{ validateMsg }</pre>
+ </p>
+ ) : (<div></div>)}
<RailsData
key='applications_instance'
view='app_instance'
parameter='hosts'
value={JSON.stringify(this.props.hosts)}
@@ -385,10 +419,11 @@
hosts: [],
ansibleVarsAll: [],
parametersData: {},
columns: [],
editParamsOfRowId: null,
+ paramEditMode: false,
}
ApplicationInstance.propTypes = {
initApplicationInstance: PropTypes.func,
editMode: PropTypes.bool.isRequired,
@@ -406,9 +441,11 @@
changeEditApplicationInstanceHost: PropTypes.func,
openForemanParameterSelectionModal: PropTypes.func,
closeForemanParameterSelectionModal: PropTypes.func,
openAnsibleParameterSelectionModal: PropTypes.func,
closeAnsibleParameterSelectionModal: PropTypes.func,
+ changeParameterSelectionMode: PropTypes.func,
parametersData: PropTypes.object,
+ paramEditMode: PropTypes.bool,
};
export default ApplicationInstance;