summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments
diff options
context:
space:
mode:
authoraz2497 <avi.ziv@amdocs.com>2017-08-10 17:49:40 +0300
committeraz2497 <avi.ziv@amdocs.com>2017-08-10 18:47:32 +0300
commit644017cb3edd5b7a077a634ffd5daf2fee6bc088 (patch)
treed371219cede1734d6909568325345ef196be677b /openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments
parent7f7925e39cf2f428061d161bc4ffe67cad80c76e (diff)
[SDC] OnBoard with enabled tests and features
Change-Id: I4c1bbf6e1c854cf97a3561c736f83da44b58b7c0 Signed-off-by: az2497 <avi.ziv@amdocs.com> [SDC] OnBoard with enabled tests and features. Change-Id: Icd52f039aee4dd393a1404d530bb9fdd0b20e604 Signed-off-by: az2497 <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/sdc-app/onboarding/softwareProduct/attachments')
-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
3 files changed, 60 insertions, 56 deletions
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>);