Merge "Config parameter map styling, 3" into master_vca_intg
diff --git a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
index 848f0b4..dd371d3 100644
--- a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
+++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
@@ -62,87 +62,6 @@
</div>
)
- /*
- // const colors = fg.colors;
- // const stylePrimary = {borderColor: colors.primary};
- // const styleSecondary = {borderColor: colors.secondary};
-
- // context.stylePrimary = stylePrimary;
- // context.styleSecondary = styleSecondary;
-
- // const rspMap = fg.rsp.reduce((map, rsp) => {
- // map[rsp.id] = rsp;
- // rsp.classifier = [];
- // return map;
- // }, {});
-
- // fg.classifier.forEach(classifier => {
- // const rsp = rspMap[classifier.model['rsp-id-ref']];
- // if (rsp) {
- // rsp.classifier.push(classifier);
- // }
- // });
-
- // function onClickRemoveForwardingGraph(fg, event) {
- // event.preventDefault();
- // const root = fg.getRoot();
- // fg.remove();
- // CatalogItemsActions.catalogItemDescriptorChanged(root);
- // }
-
- // function onClickAddClassifier(context, fg, event) {
- // event.preventDefault();
- // fg.createClassifier();
- // CatalogItemsActions.catalogItemDescriptorChanged(fg.getRoot());
- // }
-
- // function onClickToggleShowAllFGPaths(fg, event) {
- // //event.preventDefault();
- // event.stopPropagation();
- // fg.uiState.showPaths = event.target.checked;
- // fg.rsp.forEach(rsp => rsp.uiState.showPath = event.target.checked);
- // CatalogItemsActions.catalogItemMetaDataChanged(fg.getRoot().model);
- // }
-
- // if (!fg.uiState.hasOwnProperty('showPaths')) {
- // fg.uiState.showPaths = true;
- // fg.rsp.forEach(d => d.uiState.showPath = true);
- // }
-
- // const toggleSelectAllPaths = (
- // <input type="checkbox" name={'show-path' + fg.uid} checked={fg.uiState.showPaths} onChange={() => {}} onClick={onClickToggleShowAllFGPaths.bind(null, fg)} />
- // );
-
- // const srpFactory = DescriptorModelFactory.newRecordServicePathFactory({}, fg);
- // srpFactory.uid = fg.uid + i;
-
- // const hasServiceFunctionVNFDs = context.containers.filter(d => DescriptorModelFactory.isConstituentVnfdWithServiceChain(d, 'SF')).length > 0;
-
- // return (
- // <div key={i} className={fg.className} data-uid={fg.uid} data-offset-width="true" onClick={onClickSelectAndShowInDetailsPanel.bind(null, fg)} onCut={onCutDelegateToRemove.bind(null, fg)}>
- // <div key="outline-indicator" data-outline-indicator="true"></div>
- // <div className="header-actions">
- // <Button className="remove-forwarding-graph" title="Remove" onClick={onClickRemoveForwardingGraph.bind(null, fg)} src={imgRemove}/>
- // </div>
- // <LayoutRow primaryActionColumn={toggleSelectAllPaths} secondaryActionColumn={<img className="fg-icon" src={imgFG} width="20px" />}>
- // <small>{fg.title}</small>
- // </LayoutRow>
- // <div>
- // <h4>Rendered Service Paths</h4>
- // {hasServiceFunctionVNFDs ? fg.recordServicePaths.concat(srpFactory).map(mapRecordServicePath.bind(null, context)) : <small className="no-service-function-chain-msg hint">A VNFD with the chain SF is required to build Rendered Service Paths.</small>}
- // </div>
- // <div>
- // <h4>Classifiers</h4>
- // {fg.classifier.map(mapClassifier.bind(null, context))}
- // <div className="footer-actions">
- // <div className="row-action-column">
- // <Button className="create-new-classifier" src={imgAdd} width="20px" onClick={onClickAddClassifier.bind(null, context, fg)} label="Add Classifier" />
- // </div>
- // </div>
- // </div>
- // </div>
- // );
- */
}
@@ -211,22 +130,26 @@
}
return (
<div className="ConfigParameterMap">
- {
- containers.map(function(c, i) {
- if(c.className == 'ConfigParameterMap') {
- return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
- }
- })
- }
+ <div className="config-parameter-map">
+ <div className="config-parameter-titles">
+ <div className="config-parameter">
+ Request
+ </div>
+ <div className="config-parameter">
+ Source
+ </div>
+ </div>
+ {
+ containers.map(function(c, i) {
+ if(c.className == 'ConfigParameterMap') {
+ return <EditConfigParameterMap key={i} container={c} width={self.props.width} />
+ }
+ })
+ }
+ <div className="toggle-bottom-spacer" style={{visibility: 'hidden', 'height': '50%', position: 'absolute'}}>We need this so when the user closes the panel it won't shift away and scare the bj out of them!</div>
+ </div>
</div>
)
- // return (
- // <div className=" -with-transitions" data-offset-parent="true">
- // <div key="outline-indicator" data-outline-indicator="true"></div>
- // {containers.filter(d => d.type === 'nsd').map(mapNSD.bind(context))}
- // </div>
- // );
-
}
});
diff --git a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
index bbf771b..f89b14a 100644
--- a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
+++ b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
@@ -425,14 +425,8 @@
const hasBasicFields = basicProperties.length > 0;
const closeGroup = basicProperties.length > 0;
return (
- <div className="config-parameter-map">
- <div className="config-parameter">
- Request
- </div>
- <div className="config-parameter">
- Source
- </div>
- {properties.map((property,i) => {
+
+ properties.map((property,i) => {
const path = [property.name];
const value = container.model[property.name];
if(path == 'id') {
@@ -446,18 +440,16 @@
let vnfd = catalogs[1].descriptors.filter((v) => v.id == vnfdIdRef)[0];
let primitiveName = vnfd['config-parameter']['config-parameter-request'].filter((p) => p.name == value['config-parameter-request-ref'] )[0].parameter[0]['config-primitive-name-ref'];
return (
- <div className="config-parameter config-parameter-request" key={path + '-' + i}>
- {`${vnfd['short-name']}(${vnfdIndexRef}) / ${primitiveName} / ${value['config-parameter-request-ref']}`}
+ <div className="config-parameter-request" key={path + '-' + i}>
+ {`${vnfd['short-name']} (${vnfdIndexRef}) / ${primitiveName} / ${value['config-parameter-request-ref']}`}
</div>
)
} else if(path == 'config-parameter-source') {
//Builds Source
- return <div className="config-parameter config-parameter-source"> {build(container, property, path, value, _.assign({toggle: true, width: props.width}, props), value['member-vnf-index-ref'])} </div>
+ return <div className="config-parameter-source"> {build(container, property, path, value, _.assign({toggle: true, width: props.width}, props), value['member-vnf-index-ref'])} </div>
}
- })}
- <div className="toggle-bottom-spacer" style={{visibility: 'hidden', 'height': '50%', position: 'absolute'}}>We need this so when the user closes the panel it won't shift away and scare the bj out of them!</div>
- </div>
+ })
);
}
@@ -477,7 +469,7 @@
path.push(container);
return (
- <div className="EditDescriptorModelProperties -is-tree-view">
+ <div className="EditDescriptorModelProperties -is-tree-view config-parameter config-parameter-group">
{buildAdvancedGroup()}
</div>
);
diff --git a/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss b/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
index 899eb8f..94f2b43 100644
--- a/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
+++ b/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
@@ -74,13 +74,9 @@
top:31px;
}
.ConfigParameterMap {
-
+ padding: 10px 20px;
background: $panel-bg-color;
- .EditDescriptorModelProperties {
- margin-left: 8px;
- }
-
.toggleable {
display:-ms-flexbox;
display:flex;
diff --git a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
index ed16003..352fa95 100644
--- a/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
+++ b/skyquake/plugins/composer/src/src/styles/EditConfigParameterMap.scss
@@ -17,6 +17,7 @@
*/
@import "main";
+@import "variables";
@import "ColorGroups";
.config-parameter-map {
@@ -33,13 +34,41 @@
- width: 600px;
-
+ max-width: 980px;
+ .config-parameter-titles {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ padding-bottom:10px;
+ color: #AEAEAE;
+ text-transform:uppercase;
+ .config-parameter {
+ padding-left: 10px;
+ }
+ }
.config-parameter {
+ display:-ms-flexbox;
+ display:flex;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
&-source, &-request {
- border-top:1px solid $vld-primary-color;
+ -ms-flex: 1 1 50%;
+ flex: 1 1 50%;
+ border-top:1px solid silver;
+ padding: 10px 10px;
+ }
+ &-request{
+ line-height: 25px;
+ }
+ &-group {
+ -ms-flex: 1 1 100%;
+ flex: 1 1 100%;
+ display:-ms-flexbox;
+ display:flex;
+ &:nth-child(2) {
+ background: $panel-bg-color-contrast;
+ }
}
}