summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct')
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js2
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx37
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx51
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx28
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js6
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js9
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js2
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx5
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx1
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx4
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx1
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx47
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx14
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx17
-rw-r--r--openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx14
15 files changed, 120 insertions, 118 deletions
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
index 90a2bb8f2e..d4bee0a876 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/SoftwareProductActionHelper.js
@@ -409,6 +409,7 @@ const SoftwareProductActionHelper = {
}
});
const newVersionId = adjustMajorVersion(version.label, 1);
+ OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version: {id: newVersionId}});
return Promise.resolve({newVersion: {id: newVersionId}});
});
@@ -438,6 +439,7 @@ const SoftwareProductActionHelper = {
newVersionId = adjustMinorVersion(version.label, -1);
break;
}
+ OnboardingActionHelper.updateCurrentScreenVersion(dispatch, {label: newVersionId, id: newVersionId});
SoftwareProductActionHelper.fetchSoftwareProduct(dispatch,{softwareProductId, version:{id: newVersionId}});
return Promise.resolve({newVersion: {id: newVersionId}});
});
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
index ef4aecf568..3da26cc20f 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/SoftwareProductAttachmentsView.jsx
@@ -18,7 +18,7 @@ import Tabs from 'react-bootstrap/lib/Tabs.js';
import Tab from 'react-bootstrap/lib/Tab.js';
import {tabsMapping} from './SoftwareProductAttachmentsConstants.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
+import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import HeatValidation from './validation/HeatValidation.js';
class HeatScreenView extends Component {
@@ -38,27 +38,32 @@ class HeatScreenView extends Component {
<div className='vsp-attachments-view'>
<div className='attachments-view-controllers'>
{(this.state.activeTab === tabsMapping.SETUP) &&
- <Icon
- iconClassName={heatDataExist ? '' : 'disabled'}
- className={heatDataExist ? '' : 'disabled'}
- image='download'
+ <SVGIcon
+ disabled={heatDataExist ? false : true}
+ name='download'
+ className='icon-component'
label={i18n('Download HEAT')}
+ labelPosition='right'
+ color='secondary'
onClick={heatDataExist ? () => onDownload({heatCandidate: heatSetup, isReadOnlyMode, version}) : undefined}
data-test-id='download-heat'/>}
{(this.state.activeTab === tabsMapping.VALIDATION && softwareProductId) &&
- <Icon
- iconClassName={this.props.goToOverview ? '' : 'disabled'}
- className={`go-to-overview-icon ${this.props.goToOverview ? '' : 'disabled'}`}
- labelClassName='go-to-overview-label'
+ <SVGIcon
+ disabled={this.props.goToOverview !== true}
onClick={this.props.goToOverview ? () => onGoToOverview({version}) : undefined}
- image='go-to-overview'
+ name='proceedToOverview'
+ className='icon-component'
label={i18n('Go to Overview')}
+ labelPosition='right'
+ color={this.props.goToOverview ? 'primary' : 'secondary'}
data-test-id='go-to-overview'/>}
- <Icon
- image='upload'
+ <SVGIcon
+ name='upload'
+ className='icon-component'
label={i18n('Upload New HEAT')}
- className={isReadOnlyMode ? 'disabled' : ''}
- iconClassName={isReadOnlyMode ? 'disabled' : ''}
+ labelPosition='right'
+ color='secondary'
+ disabled={isReadOnlyMode}
onClick={evt => {this.refs.hiddenImportFileInput.click(evt);}}
data-test-id='upload-heat'/>
<input
@@ -87,9 +92,9 @@ class HeatScreenView extends Component {
}
handleTabPress(key) {
- let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;
+ let {heatSetup, heatSetupCache, onProcessAndValidate, isReadOnlyMode, version} = this.props;
switch (key) {
- case tabsMapping.VALIDATION:
+ case tabsMapping.VALIDATION:
onProcessAndValidate({heatData: heatSetup, heatDataCache: heatSetupCache, isReadOnlyMode, version}).then(
() => this.setState({activeTab: tabsMapping.VALIDATION})
);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
index 901a583e24..17b3179d01 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/setup/HeatSetupView.jsx
@@ -20,7 +20,6 @@ import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger.js';
import FormControl from 'react-bootstrap/lib/FormControl.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import SelectInput from 'nfvo-components/input/SelectInput.jsx';
-import Icon from 'nfvo-components/icon/Icon.jsx';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import {fileTypes} from './HeatSetupConstants.js';
import {tabsMapping} from '../SoftwareProductAttachmentsConstants.js';
@@ -52,7 +51,7 @@ class SortableModuleFileList extends Component {
render() {
- let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist} = this.props;
+ let {unassigned, onModuleRename, onModuleDelete, onModuleAdd, onBaseAdd, onModuleFileTypeChange, isBaseExist, isReadOnlyMode} = this.props;
const childProps = module => ({
module,
onModuleRename,
@@ -68,19 +67,17 @@ class SortableModuleFileList extends Component {
items={this.state.data}
draggingIndex={this.state.draggingIndex}
sortId={i}
- outline='list'><ModuleFile {...childProps(item)} /></SortableListItem>
+ outline='list'><ModuleFile {...childProps(item)} isReadOnlyMode={this.props.isReadOnlyMode} /></SortableListItem>
);
}, this);
return (
- <div className='modules-list-wrapper'>
+ <div className={`modules-list-wrapper ${(listItems.length > 0) ? 'modules-list-wrapper-divider' : ''}`}>
<div className='modules-list-header'>
- <div className='modules-list-controllers'>
- {!isBaseExist && <Button btnType='link' onClick={onBaseAdd} disabled={unassigned.length === 0}>{i18n('Add Base')}</Button>}
- <Button btnType='link' onClick={onModuleAdd} disabled={unassigned.length === 0}>{i18n('Add Module')}</Button>
- </div>
+ {!isBaseExist && <div><Button btnType='link' onClick={onBaseAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Base')}</Button></div>}
+ <div><Button btnType='link' onClick={onModuleAdd} disabled={isReadOnlyMode || unassigned.length === 0}>{i18n('Add Module')}</Button></div>
</div>
- <ul>{listItems}</ul>
+ {(listItems.length > 0) && <ul>{listItems}</ul>}
</div>
);
}
@@ -89,20 +86,24 @@ class SortableModuleFileList extends Component {
const tooltip = (name) => <Tooltip id='tooltip-bottom'>{name}</Tooltip>;
const UnassignedFileList = (props) => {
return (
- <div className='unassigned-files'>
+ <div>
+ <div className='modules-list-header'/>
+ <div className='unassigned-files'>
<div className='unassigned-files-title'>{i18n('UNASSIGNED FILES')}</div>
<div className='unassigned-files-list'>{props.children}</div>
+ </div>
</div>
);
};
const EmptyListContent = props => {
- let {onClick, heatDataExist} = props;
+ let {onClick, heatDataExist, isReadOnlyMode} = props;
let displayText = heatDataExist ? 'All Files Are Assigned' : '';
return (
<div className='go-to-validation-button-wrapper'>
<div className='all-files-assigned'>{i18n(displayText)}</div>
- {heatDataExist && <div className={'link'} onClick={onClick} data-test-id='go-to-validation'>{i18n('Proceed To Validation')}<SVGIcon name='angleRight'/></div>}
+ {heatDataExist && <SVGIcon disabled={isReadOnlyMode} name='angleRight' onClick={onClick}
+ data-test-id='go-to-validation' label={i18n('Proceed To Validation')} labelPosition='left' color='primary'/>}
</div>
);
};
@@ -112,14 +113,11 @@ const UnassignedFile = (props) => (
</OverlayTrigger>
);
-const AddOrDeleteVolumeFiels = ({add = true, onAdd, onDelete}) => {
+const AddOrDeleteVolumeFiles = ({add = true, onAdd, onDelete, isReadOnlyMode}) => {
const displayText = add ? 'Add Volume Files' : 'Delete Volume Files';
const action = add ? onAdd : onDelete;
return (
- <div className='add-or-delete-volumes' onClick={action}>
- <SVGIcon name={add ? 'plus' : 'close'} />
- <span>{i18n(displayText)}</span>
- </div>
+ <Button disabled={isReadOnlyMode} onClick={action} btnType='link' className='add-or-delete-volumes' iconName={add ? 'plus' : 'close'}>{i18n(displayText)}</Button>
);
};
@@ -195,14 +193,14 @@ class ModuleFile extends Component {
}
render() {
- const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange} = this.props;
+ const {module: {name, isBase, yaml, env, vol, volEnv}, onModuleDelete, files, onModuleFileTypeChange, isReadOnlyMode} = this.props;
const {displayVolumes} = this.state;
const moduleType = isBase ? 'BASE' : 'MODULE';
return (
<div className='modules-list-item' data-test-id='module-item'>
<div className='modules-list-item-controllers'>
<div className='modules-list-item-filename'>
- <Icon image={isBase ? 'base' : 'module'} iconClassName='heat-setup-module-icon' />
+ <SVGIcon name={isBase ? 'base' : 'module'} color='primary' iconClassName='heat-setup-module-icon' />
<span className='module-title-by-type'>{`${moduleType}: `}</span>
<div className={`text-and-icon ${this.state.isInNameEdit ? 'in-edit' : ''}`}>
{this.renderNameAccordingToEditState()}
@@ -235,7 +233,7 @@ class ModuleFile extends Component {
files={files}
selected={volEnv}
onChange={onModuleFileTypeChange}/>}
- <AddOrDeleteVolumeFiels onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
+ <AddOrDeleteVolumeFiles isReadOnlyMode={isReadOnlyMode} onAdd={() => this.setState({displayVolumes: true})} onDelete={() => this.deleteVolumeFiles()} add={!displayVolumes}/>
</div>
</div>
);
@@ -245,15 +243,15 @@ class ModuleFile extends Component {
class ArtifactOrNestedFileList extends Component {
render() {
- let {type, title, selected, options, onSelectChanged, onAddAllUnassigned} = this.props;
+ let {type, title, selected, options, onSelectChanged, onAddAllUnassigned, isReadOnlyMode, headerClassName} = this.props;
return (
- <div className={`artifact-files ${type === 'nested' ? 'nested' : ''}`}>
+ <div className={`artifact-files ${type === 'nested' ? 'nested' : ''} ${headerClassName} `}>
<div className='artifact-files-header'>
<span>
- {type === 'artifact' && (<Icon image='artifacts' iconClassName='heat-setup-module-icon' />)}
+ {type === 'artifact' && (<SVGIcon color='primary' name='artifacts' iconClassName='heat-setup-module-icon' />)}
{`${title}`}
</span>
- {type === 'artifact' && <span className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</span>}
+ {type === 'artifact' && <Button disabled={isReadOnlyMode} btnType='link' className='add-all-unassigned' onClick={onAddAllUnassigned}>{i18n('Add All Unassigned Files')}</Button>}
</div>
{type === 'nested' ? (
<ul className='nested-list'>{selected.map(nested =>
@@ -294,6 +292,7 @@ class SoftwareProductHeatSetupView extends Component {
<div className='heat-setup-view-modules-and-artifacts'>
<SortableModuleFileList
{...this.props}
+ isReadOnlyMode={this.props.isReadOnlyMode}
artifacts={formattedArtifacts}
unassigned={formattedUnassigned}/>
<ArtifactOrNestedFileList
@@ -302,11 +301,14 @@ class SoftwareProductHeatSetupView extends Component {
options={formattedUnassigned}
selected={formattedArtifacts}
onSelectChanged={onArtifactListChange}
+ isReadOnlyMode={this.props.isReadOnlyMode}
+ headerClassName={(modules && modules.length > 0) ? 'with-list-items' : ''}
onAddAllUnassigned={onAddAllUnassigned}/>
<ArtifactOrNestedFileList
type={'nested'}
title={i18n('NESTED HEAT FILES')}
options={[]}
+ isReadOnlyMode={this.props.isReadOnlyMode}
selected={nested}/>
</div>
<UnassignedFileList>
@@ -316,6 +318,7 @@ class SoftwareProductHeatSetupView extends Component {
:
(<EmptyListContent
heatDataExist={heatDataExist}
+ isReadOnlyMode={this.props.isReadOnlyMode}
onClick={() => this.processAndValidateHeat({modules, unassigned, artifacts, nested}, heatSetupCache)}/>)
}
</UnassignedFileList>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
index f2d5de4dff..62dcb82db1 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments/validation/HeatValidationView.jsx
@@ -16,19 +16,18 @@
import React, {Component, PropTypes} from 'react';
import classNames from 'classnames';
import Collapse from 'react-bootstrap/lib/Collapse.js';
-import Icon from 'nfvo-components/icon/Icon.jsx';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import i18n from 'nfvo-utils/i18n/i18n.js';
import {mouseActions, errorLevels, nodeFilters} from './HeatValidationConstants.js';
const leftPanelWidth = 250;
const typeToIcon = Object.freeze({
- heat: 'heat',
- volume: 'volume',
+ heat: 'nestedHeat',
+ volume: 'base',
network: 'network',
- artifact: 'validation-artifacts',
+ artifact: 'artifacts',
env: 'env',
- other: 'validation-other'
+ other: 'other'
});
@@ -74,7 +73,7 @@ function HeatFileTreeRow(props) {
{
<span className='tree-node-icon'>
- <Icon image={typeToIcon[node.type]} iconClassName={selectedNode === node.name ? 'selected' : ''}/>
+ <SVGIcon name={typeToIcon[node.type]} color={selectedNode === node.name ? 'primary' : 'secondary'}/>
</span>
}
{
@@ -94,7 +93,7 @@ function HeatFileTreeHeader(props) {
<div onClick={() => props.selectNode(nodeFilters.ALL)} className={classNames({'attachments-tree-header': true,
'header-selected' : props.selectedNode === nodeFilters.ALL})} data-test-id='validation-tree-header'>
<div className='tree-header-title' >
- <Icon image='zip' iconClassName={classNames(props.selectedNode === nodeFilters.ALL ? 'selected' : '', 'header-icon')} />
+ <SVGIcon name='zip' color={props.selectedNode === nodeFilters.ALL ? 'primary' : ''} iconClassName='header-icon' />
<span className={classNames({'tree-header-title-text' : true,
'tree-header-title-selected' : props.selectedNode === nodeFilters.ALL})}>{i18n(`HEAT${hasErrors ? ' (Draft)' : ''}`)}</span>
</div>
@@ -200,12 +199,13 @@ class HeatMessageBoard extends Component {
}
renderError(error) {
let rand = Math.random() * (3000 - 1) + 1;
+ console.log(this.props.selectedNode );
return (
<div
key={error.name + error.errorMessage + error.parentName + rand}
className='error-item' data-test-id='validation-error'>
{error.level === errorLevels.WARNING ?
- <SVGIcon name='exclamationTriangleLine' iconClassName='large' /> : <Icon image='error-lg' /> }
+ <SVGIcon name='exclamationTriangleLine' iconClassName='large' color='warning' /> : <SVGIcon iconClassName='large' color='negative' /> }
<span className='error-item-file-type'>
{
(this.props.selectedNode === nodeFilters.ALL) ?
@@ -217,7 +217,7 @@ class HeatMessageBoard extends Component {
{i18n(error.errorMessage)}
</span>
</span> :
- i18n(error.errorMesage)
+ i18n(error.errorMessage)
}
</span>
</div>
@@ -234,18 +234,14 @@ class ErrorsAndWarningsCount extends Component {
if (!errors) {
return null;
}
- let errIcon = 'error';
let {size} = this.props;
- if (size && size === 'large') {
- errIcon += '-lg';
- }
return (<div className='counters'>
{(errors.errorCount > 0) && <div className='counter'>
- <Icon image={errIcon} iconClassName='counter-icon'/>
- <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>{errors.errorCount}</div>
+ <SVGIcon name='error' color='negative' iconClassName={size}/>
+ <div className={'error-text ' + (size ? size : '')} data-test-id='validation-error-count'>={errors.errorCount}</div>
</div>}
{(errors.warningCount > 0) && <div className='counter'>
- <SVGIcon name='exclamationTriangleLine' iconClassName={size} />
+ <SVGIcon name='exclamationTriangleLine' iconClassName={size} color='warning'/>
<div className={'warning-text ' + (size ? size : '')} data-test-id='validation-warning-count'>{errors.warningCount}</div>
</div>}
</div>);
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
new file mode 100644
index 0000000000..2483d0aaa2
--- /dev/null
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/ImageValidations.js
@@ -0,0 +1,6 @@
+
+import Validator from 'nfvo-utils/Validator.js';
+
+export const imageCustomValidations = {
+ 'version': value => Validator.validate('version', value, [{type: 'required', data: true}])
+};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
index 49d891c9df..5c81f05e80 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditor.js
@@ -54,9 +54,12 @@ const mapActionsToProps = (dispatch, {softwareProductId, componentId, version})
onDataChanged: (deltaData) => ValidationHelper.dataChanged(dispatch, {deltaData, formName: forms.IMAGE_EDIT_FORM}),
onSubmit: ({data, qdata}) => SoftwareProductComponentsImageActionHelper.saveImageDataAndQuestionnaire(dispatch, {softwareProductId, componentId, version, data, qdata}),
onCancel: () => SoftwareProductComponentsImageActionHelper.closeImageEditor(dispatch),
- onValidateForm: () => ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM),
- onQDataChanged: (deltaData) => ValidationHelper.qDataChanged(dispatch, {deltaData,
- qName: IMAGE_QUESTIONNAIRE}),
+ onValidateForm: customValidations => {
+ ValidationHelper.validateForm(dispatch, forms.IMAGE_EDIT_FORM);
+ ValidationHelper.qValidateForm(dispatch, IMAGE_QUESTIONNAIRE, customValidations);
+ },
+ onQDataChanged: (deltaData, customValidations) => ValidationHelper.qDataChanged(dispatch, {deltaData,
+ qName: IMAGE_QUESTIONNAIRE, customValidations}),
};
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
index 0ab785a97f..7c357429e5 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorReducer.js
@@ -30,7 +30,7 @@ export default (state = {}, action) => {
'fileName' : {
isValid: true,
errorText: '',
- validations: [{type: 'required', data: true}, {type: 'validateName', data: true}]
+ validations: [{type: 'required', data: true}]
}
},
formName: forms.IMAGE_EDIT_FORM
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
index 300f8edcc3..7c1a3f5b55 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/SoftwareProductComponentsImageEditorView.jsx
@@ -20,6 +20,7 @@ import Form from 'nfvo-components/input/validation/Form.jsx';
import FileDetails from './imagesEditorComponents/FileDetails.jsx';
import ImageDetails from './imagesEditorComponents/ImageDetails.jsx';
+import {imageCustomValidations} from './ImageValidations.js';
class SoftwareProductComponentsImageEditorView extends React.Component {
static propTypes = {
@@ -44,7 +45,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
isValid={isFormValid}
formReady={formReady}
submitButtonText={editingMode ? i18n('Save') : i18n('Create')}
- onValidateForm={() => onValidateForm() }
+ onValidateForm={() => onValidateForm(imageCustomValidations) }
className='vsp-components-image-editor'>
<div className='editor-data'>
<FileDetails
@@ -56,7 +57,7 @@ class SoftwareProductComponentsImageEditorView extends React.Component {
isManual={isManual}
dataMap={dataMap}
onQDataChanged={onQDataChanged}/>
- {editingMode && <ImageDetails dataMap={dataMap}qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
+ {editingMode && <ImageDetails dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
</div>
</Form>}
</div>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
index ca58b697a2..2e9ab417d8 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/FileDetails.jsx
@@ -40,6 +40,7 @@ const FileDetails = ({editingMode, fileName, onDataChanged, isManual, dataMap, o
type='text'
className='image-filename'/>
</GridItem>
+ {!editingMode && <div className='note-text'>{i18n('After image creation you must go to Edit Image and add File Version')}</div>}
{editingMode && <Version isManual={isManual} dataMap={dataMap} qgenericFieldInfo={qgenericFieldInfo} onQDataChanged={onQDataChanged}/>}
{editingMode && <Format isManual={isManual} qgenericFieldInfo={qgenericFieldInfo} dataMap={dataMap} onQDataChanged={onQDataChanged}/>}
</GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
index 3cac9a51b8..7dd577b8c9 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/images/imagesEditorComponents/Version.jsx
@@ -17,6 +17,7 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Input from 'nfvo-components/input/validation/Input.jsx';
import GridItem from 'nfvo-components/grid/GridItem.jsx';
+import {imageCustomValidations} from '../ImageValidations.js';
const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
@@ -28,7 +29,8 @@ const Version = ({isManual, dataMap, qgenericFieldInfo, onQDataChanged}) => {
type='text'
className='image-version'
label={i18n('Version')}
- onChange={(version) => onQDataChanged({'version' : version})}
+ isRequired={true}
+ onChange={(version) => onQDataChanged({'version' : version}, {'version' : imageCustomValidations['version']})}
isValid={qgenericFieldInfo['version'].isValid}
errorText={qgenericFieldInfo['version'].errorText}
value={dataMap['version']}/>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
index 9ae9e359b0..8a82f54901 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/loadBalancing/SoftwareProductComponentLoadBalancingRefView.jsx
@@ -50,6 +50,7 @@ const pointers = [
added: 'Please describe.'
}
];
+//TODO check for buttons
const TextAreaItem = ({item, toggle, expanded, genericFieldInfo, dataMap, onQDataChanged}) => (
<GridItem colSpan={3} key={item.key} >
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
index 36c1728ef3..2d5a965c40 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/monitoring/SoftwareProductComponentsMonitoringView.jsx
@@ -15,10 +15,8 @@
*/
import React, {Component, PropTypes} from 'react';
import Dropzone from 'react-dropzone';
-import ButtonGroup from 'react-bootstrap/lib/ButtonGroup.js';
-import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar.js';
-import Button from 'react-bootstrap/lib/Button.js';
-import i18n from 'nfvo-utils/i18n/i18n.js';
+import Button from 'sdc-ui/lib/react/Button.js';
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
import {fileTypes, type2Title, type2Name} from './SoftwareProductComponentsMonitoringConstants.js';
@@ -59,7 +57,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
let typeDisplayName = type2Title[type];
return (
<Dropzone
- className={`snmp-dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
+ className={`dropzone ${this.state.dragging ? 'active-dragging' : ''}`}
onDrop={(acceptedFiles, rejectedFiles) => this.handleImport(acceptedFiles, rejectedFiles, {isReadOnlyMode, type, refAndName})}
onDragEnter={() => this.handleOnDragEnter(isReadOnlyMode)}
onDragLeave={() => this.setState({dragging:false})}
@@ -71,7 +69,7 @@ class SoftwareProductComponentsMonitoringView extends Component {
disabled>
<div className='draggable-wrapper'>
<div className='section-title'>{typeDisplayName}</div>
- {fileName ? this.renderUploadedFileName(fileName, type) : this.renderUploadButton(refAndName)}
+ {fileName ? this.renderUploadedFileName(fileName, type, isReadOnlyMode) : this.renderUploadButton(refAndName)}
</div>
</Dropzone>
);
@@ -80,25 +78,32 @@ class SoftwareProductComponentsMonitoringView extends Component {
renderUploadButton(refAndName) {
let {isReadOnlyMode} = this.props;
return (
- <div
- className={`software-product-landing-view-top-block-col-upl${isReadOnlyMode ? ' disabled' : ''}`}>
- <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
- <div className='or-text'>{i18n('or')}</div>
- <div className='upload-btn primary-btn' data-test-id={`monitoring-upload-${refAndName}`} onClick={() => this.refs[refAndName].open()}>
- <span className='primary-btn-text'>{i18n('Select file')}</span>
- </div>
- </div>
+ <DraggableUploadFileBox
+ dataTestId={`monitoring-upload-${refAndName}`}
+ className='software-product-landing-view-top-block-col-upl'
+ isReadOnlyMode={isReadOnlyMode}
+ onClick={() => this.refs[refAndName].open()}/>
);
}
- renderUploadedFileName(filename, type) {
+ renderUploadedFileName(filename, type, isReadOnlyMode) {
return (
- <ButtonToolbar>
- <ButtonGroup>
- <Button disabled>{filename}</Button>
- <Button data-test-id={`monitoring-delete-${type}`} className='delete-button' onClick={()=>this.props.onDeleteFile(type)}>X</Button>
- </ButtonGroup>
- </ButtonToolbar>
+ <div className='monitoring-file'>
+ <Button
+ color='white'
+ disabled={true}
+ className='filename'>
+ {filename}
+ </Button>
+
+ <Button
+ color='gray'
+ data-test-id={`monitoring-delete-${type}`}
+ disabled={isReadOnlyMode}
+ onClick={()=>this.props.onDeleteFile(type)}
+ iconName='close'
+ className='delete'/>
+ </div>
);
}
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
index 18f2ee129c..87abaf4978 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/components/processes/SoftwareProductComponentProcessesEditorView.jsx
@@ -17,6 +17,7 @@ import React from 'react';
import i18n from 'nfvo-utils/i18n/i18n.js';
import Dropzone from 'react-dropzone';
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
import {optionsInputValues as ComponentProcessesOptionsInputValues} from './SoftwareProductComponentProcessesConstants.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
import Input from 'nfvo-components/input/validation/Input.jsx';
@@ -31,17 +32,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
type: React.PropTypes.string
});
-const FileUploadBox = ({onClick}) => {
- return (
- <div className='file-upload-box'>
- <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
- <div className='or-text'>{i18n('or')}</div>
- <div className='upload-btn primary-btn' onClick={onClick}>
- <span className='primary-btn-text'>{i18n('Select file')}</span>
- </div>
- </div>
- );
-};
class SoftwareProductProcessesEditorView extends React.Component {
@@ -99,7 +89,7 @@ class SoftwareProductProcessesEditorView extends React.Component {
type='text'/>
</GridItem>
<GridItem colSpan={2}>
- <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()} />
+ <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()} />
</GridItem>
</GridSection>
<GridSection>
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
index d3738e3ea4..7ffbeda4dc 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/landingPage/SoftwareProductLandingPageView.jsx
@@ -19,7 +19,7 @@ import Dropzone from 'react-dropzone';
import i18n from 'nfvo-utils/i18n/i18n.js';
-
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
import SoftwareProductComponentsList from '../components/SoftwareProductComponentsList.js';
@@ -128,14 +128,11 @@ class SoftwareProductLandingPageView extends React.Component {
</div>
</div>
</div>
- <div
- className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}>
- <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
- <div className='or-text'>{i18n('or')}</div>
- <div data-test-id='upload-btn' className='upload-btn primary-btn' onClick={() => this.refs.fileInput.open()}>
- <span className='primary-btn-text'>{i18n('Select file')}</span>
- </div>
- </div>
+ <DraggableUploadFileBox
+ dataTestId='upload-btn'
+ isReadOnlyMode={isReadOnlyMode}
+ className={classnames('software-product-landing-view-top-block-col-upl', {'disabled': isReadOnlyMode})}
+ onClick={() => this.refs.fileInput.open()}/>
</div>
</div>
);
@@ -229,7 +226,7 @@ const ProductSummary = ({currentSoftwareProduct, onDetailsSelect}) => {
const LicenseAgreement = ({licenseAgreementName}) => {
if (!licenseAgreementName) {
- return (<div className='missing-license'><SVGIcon name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
+ return (<div className='missing-license'><SVGIcon color='warning' name='exclamationTriangleFull'/><div className='warning-text'>{i18n('Missing')}</div></div>);
}
return <div>{licenseAgreementName}</div>;
};
diff --git a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
index 137e4a2b4e..0df36cf65d 100644
--- a/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
+++ b/openecomp-ui/src/sdc-app/onboarding/softwareProduct/processes/SoftwareProductProcessesEditorView.jsx
@@ -17,6 +17,7 @@ import React from 'react';
import Dropzone from 'react-dropzone';
import classnames from 'classnames';
+import DraggableUploadFileBox from 'nfvo-components/fileupload/DraggableUploadFileBox.jsx';
import i18n from 'nfvo-utils/i18n/i18n.js';
import {optionsInputValues as ProcessesOptionsInputValues} from './SoftwareProductProcessesConstants.js';
import Form from 'nfvo-components/input/validation/Form.jsx';
@@ -32,17 +33,6 @@ const SoftwareProductProcessEditorPropType = React.PropTypes.shape({
type: React.PropTypes.string
});
-const FileUploadBox = ({onClick}) => {
- return (
- <div className='file-upload-box'>
- <div className='drag-text'>{i18n('Drag & drop for upload')}</div>
- <div className='or-text'>{i18n('or')}</div>
- <div className='upload-btn primary-btn' onClick={onClick}>
- <span className='primary-btn-text'>{i18n('Select file')}</span>
- </div>
- </div>
- );
-};
class SoftwareProductProcessesEditorView extends React.Component {
@@ -101,7 +91,7 @@ class SoftwareProductProcessesEditorView extends React.Component {
type='text'/>
</GridItem>
<GridItem colSpan={2}>
- <FileUploadBox onClick={() => this.refs.processEditorFileInput.open()}/>
+ <DraggableUploadFileBox isReadOnlyMode={isReadOnlyMode} className='file-upload-box' onClick={() => this.refs.processEditorFileInput.open()}/>
</GridItem>
</GridSection>
<GridSection>