Config parameter map styling, 3

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>

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 (file)
--- a/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
+++ b/skyquake/plugins/composer/src/src/components/ConfigPrimitiveParameters/ConfigPrimitiveParameters.js
@@ -62,87 +62,6 @@ function configParameterMapMap(ap, i) {
 
         </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 @@ const ConfigPrimitiveParameters = React.createClass({
         }
         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 (file)
--- a/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
+++ b/skyquake/plugins/composer/src/src/components/EditConfigParameterMap.js
@@ -425,14 +425,8 @@ export default function EditDescriptorModelProperties(props, type) {
                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 @@ export default function EditDescriptorModelProperties(props, type) {
                                                        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 @@ export default function EditDescriptorModelProperties(props, type) {
        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 (file)
--- a/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
+++ b/skyquake/plugins/composer/src/src/styles/CanvasPanelTray.scss
@@ -74,13 +74,9 @@ $tray-head-height: 25px;
                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 (file)
--- 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;
+                       }
                    }
        }