Correcting spinner

Change-Id: I0531805d63a9d5b8ac6a161281845a6b8cc1f4af
Issue-ID: AAI-732
Signed-off-by: Steve Thomas <steve.thomas@amdocs.com>

diff --git a/resources/scss/_components.scss b/resources/scss/_components.scss
index 38f9189..2b1d251 100644 (file)
--- a/resources/scss/_components.scss
+++ b/resources/scss/_components.scss
@@ -21,7 +21,7 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
- 
+
 @import "components/validationForm";
 @import "components/slidePanel";
 @import "components/toggleInput";

diff --git a/resources/scss/_modules.scss b/resources/scss/_modules.scss
index d2df043..085a59a 100644 (file)
--- a/resources/scss/_modules.scss
+++ b/resources/scss/_modules.scss
@@ -31,3 +31,4 @@
 @import "setAttribute/editAttributeform.scss";
 @import "inventory/inventory.scss";
 @import "vnfSearch/vnfSearch.scss";
+@import "tier-support/tierSupport.scss";

diff --git a/resources/scss/common/_layout.scss b/resources/scss/common/_layout.scss
index 07b5b4c..fedf2fa 100644 (file)
--- a/resources/scss/common/_layout.scss
+++ b/resources/scss/common/_layout.scss
@@ -20,7 +20,7 @@
  *
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
- 
+
 .hidden {
        display: none;
 }
@@ -41,14 +41,18 @@
 .showContainer {
 }
 
+.spinner-container {
+       overflow: hidden;
+       position: relative;
+}
+
 .spinner {
-       position: fixed;
+       position: absolute;
        z-index: 999;
-       height: 2em;
-       width: 2em;
-       margin: auto;
-       top: 0;
-       left: 0;
-       bottom: 0;
-       right: 0;
-}
\ No newline at end of file
+       left: 50%;
+       top: 49%;
+}
+
+.spinner-content {
+       opacity: 0.2;
+}

diff --git a/resources/scss/tier-support/_splitPane.scss b/resources/scss/tier-support/_splitPane.scss
index dc07be0..c174920 100644 (file)
--- a/resources/scss/tier-support/_splitPane.scss
+++ b/resources/scss/tier-support/_splitPane.scss
@@ -21,9 +21,12 @@
  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
  */
 
+div.SplitPane.vertical {
+  position: initial !important;
+}
+
 .SplitPane {
   min-width: $minimum-application-width;
-  height: calc(100% - #{$total-header-height}) !important;
 }
 
 .Resizer {

diff --git a/resources/scss/tier-support/_tierSupport.scss b/resources/scss/tier-support/_tierSupport.scss
new file mode 100644 (file)
index 0000000..e63bffd
--- /dev/null
+++ b/resources/scss/tier-support/_tierSupport.scss
@@ -0,0 +1,3 @@
+.tier-support-ui {
+  height: calc(100% - #{$total-header-height}) !important;
+}

diff --git a/src/app/tierSupport/TierSupport.jsx b/src/app/tierSupport/TierSupport.jsx
index 943943f..e51dde8 100644 (file)
--- a/src/app/tierSupport/TierSupport.jsx
+++ b/src/app/tierSupport/TierSupport.jsx
@@ -24,8 +24,7 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import SplitPane from 'react-split-pane';
-import { ClipLoader } from 'react-spinners';
-import {COLOR_BLUE} from 'utils/GlobalConstants.js';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 import {setSecondaryTitle} from 'app/MainScreenWrapperActionHelper.js';
 import ForceDirectedGraph from 'generic-components/graph/ForceDirectedGraph.jsx';
@@ -177,11 +176,6 @@ class TierSupport extends Component {
             onNodeMenuSelect,
             enableBusyFeedback
           } = this.props;
-
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
     let availableOverlay;
     let overlayComponent;
     // Currently only ONE overlay can be added to each view.
@@ -209,10 +203,7 @@ class TierSupport extends Component {
     let currentSelectedMenu = this.getCurrentSelectedMenu(overlayComponent);
     return (
       <div className='tier-support-ui'>
-          <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-          <div className={componentVisibitliyClassName}>
+          <Spinner loading={enableBusyFeedback}>
             <SplitPane
               split='vertical'
               enableResizing='true'
@@ -242,7 +233,7 @@ class TierSupport extends Component {
                 {currentSelectedMenu}
               </div>
             </SplitPane>
-          </div>
+          </Spinner>
       </div>
     );
   }

diff --git a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
index 806ab3a..19b37cd 100644 (file)
--- a/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfRoleVisualization.jsx
@@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n';
 
 import {CHART_NF_ROLE} from 'app/vnfSearch/VnfSearchConstants.js';
 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
-import { ClipLoader } from 'react-spinners';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 let mapStateToProps = ({vnfSearch}) => {
   let {
@@ -61,10 +61,7 @@ class VnfSearchNfRoleVisualization extends Component {
           processedNfRoleCountChartData,
           enableBusyFeedback
         } = this.props;
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
+
     let visualizationClass = 'visualizations';
 
     if (processedNfRoleCountChartData.values ===
@@ -82,10 +79,7 @@ class VnfSearchNfRoleVisualization extends Component {
         <div className='visualization-charts'>
           <div>
             <h3>{i18n(CHART_NF_ROLE.title)}</h3>
-            <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-            <div className={componentVisibitliyClassName}>
+            <Spinner loading={enableBusyFeedback}>
               <ResponsiveContainer width='100%' height={300}>
                 <BarChart data={processedNfRoleCountChartData.values}>
                   <XAxis dataKey={xAxisAttrName}/>
@@ -96,7 +90,7 @@ class VnfSearchNfRoleVisualization extends Component {
                        dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
                 </BarChart>
               </ResponsiveContainer>
-            </div>
+            </Spinner>
           </div>
         </div>
       </div>

diff --git a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
index 3f4acf0..3c862d7 100644 (file)
--- a/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchNfTypeVisualization.jsx
@@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n';
 
 import {CHART_NF_TYPE} from 'app/vnfSearch/VnfSearchConstants.js';
 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
-import { ClipLoader } from 'react-spinners';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 let mapStateToProps = ({vnfSearch}) => {
   let {
@@ -61,10 +61,7 @@ class VnfSearchNfTypeVisualization extends Component {
           processedNfTypeCountChartData,
           enableBusyFeedback
         } = this.props;
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
+
     let visualizationClass = 'visualizations';
     if (processedNfTypeCountChartData.values ===
       null ||
@@ -80,10 +77,7 @@ class VnfSearchNfTypeVisualization extends Component {
         <div className='visualization-charts'>
           <div >
             <h3>{i18n(CHART_NF_TYPE.title)}</h3>
-            <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-            <div className={componentVisibitliyClassName}>
+            <Spinner loading={enableBusyFeedback}>
               <ResponsiveContainer width='100%' height={300}>
                 <BarChart data={processedNfTypeCountChartData.values}>
                   <XAxis dataKey={xAxisAttrName}/>
@@ -94,7 +88,7 @@ class VnfSearchNfTypeVisualization extends Component {
                        dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
                 </BarChart>
               </ResponsiveContainer>
-            </div>
+            </Spinner>
           </div>
         </div>
       </div>

diff --git a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
index 7cc29d8..834e179 100644 (file)
--- a/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchOrchestratedStatusVisualization.jsx
@@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n';
 
 import {CHART_ORCH_STATUS} from 'app/vnfSearch/VnfSearchConstants.js';
 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
-import { ClipLoader } from 'react-spinners';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 let mapStateToProps = ({vnfSearch}) => {
   let {
@@ -61,10 +61,7 @@ class VnfSearchOrchStatusVisualizations extends Component {
                                                processedOrchStatusCountChartData,
             enableBusyFeedback
                                } = this.props;
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
+
     let visualizationClass = 'visualizations';
     if (processedOrchStatusCountChartData.values ===
       null ||
@@ -80,10 +77,7 @@ class VnfSearchOrchStatusVisualizations extends Component {
         <div className='visualization-charts'>
           <div >
             <h3>{i18n(CHART_ORCH_STATUS.title)}</h3>
-            <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-            <div className={componentVisibitliyClassName}>
+            <Spinner loading={enableBusyFeedback}>
               <ResponsiveContainer width='100%' height={300}>
                 <BarChart data={processedOrchStatusCountChartData.values}>
                   <XAxis dataKey={xAxisAttrName}/>
@@ -94,7 +88,7 @@ class VnfSearchOrchStatusVisualizations extends Component {
                        dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
                 </BarChart>
               </ResponsiveContainer>
-            </div>
+            </Spinner>
           </div>
         </div>
       </div>

diff --git a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
index 7ef6e9e..fe985c9 100644 (file)
--- a/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchProvStatusVisualization.jsx
@@ -36,7 +36,7 @@ import i18n from 'utils/i18n/i18n';
 
 import {CHART_PROV_STATUS} from 'app/vnfSearch/VnfSearchConstants.js';
 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
-import { ClipLoader } from 'react-spinners';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 let mapStateToProps = ({vnfSearch}) => {
   let {
@@ -62,10 +62,6 @@ class VnfSearchProvStatusVisualization extends Component {
             enableBusyFeedback
                                } = this.props;
 
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
     let visualizationClass = 'visualizations';
     if (processedProvStatusCountChartData.values ===
       null ||
@@ -81,22 +77,19 @@ class VnfSearchProvStatusVisualization extends Component {
         <div className='visualization-charts'>
           <div className='visualization-side-by-side-70'>
             <h3>{i18n(CHART_PROV_STATUS.title)}</h3>
-            <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-            <div className={componentVisibitliyClassName}>
+            <Spinner loading={enableBusyFeedback}>
               <ResponsiveContainer width='100%' height={345} >
-                  <BarChart
-                    data={processedProvStatusCountChartData.values}>
-                    <XAxis dataKey={xAxisAttrName}/>
-                    <YAxis  />
-                    <CartesianGrid strokeDasharray='3 3'/>
-                    <Tooltip/>
-                    <Bar name={i18n(CHART_PROV_STATUS.xAxisLabel)}
-                         dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
-                  </BarChart>
-                </ResponsiveContainer>
-              </div>
+                <BarChart
+                  data={processedProvStatusCountChartData.values}>
+                  <XAxis dataKey={xAxisAttrName}/>
+                  <YAxis  />
+                  <CartesianGrid strokeDasharray='3 3'/>
+                  <Tooltip/>
+                  <Bar name={i18n(CHART_PROV_STATUS.xAxisLabel)}
+                       dataKey={yAxisAttrName} fill={COLOR_BLUE}/>
+                </BarChart>
+              </ResponsiveContainer>
+            </Spinner>
           </div>
         </div>
       </div>
@@ -104,4 +97,4 @@ class VnfSearchProvStatusVisualization extends Component {
   }
 
 }
-export default connect(mapStateToProps)(VnfSearchProvStatusVisualization);
\ No newline at end of file
+export default connect(mapStateToProps)(VnfSearchProvStatusVisualization);

diff --git a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
index 553de42..0335da3 100644 (file)
--- a/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
+++ b/src/app/vnfSearch/VnfSearchTotalCountVisualization.jsx
@@ -26,8 +26,7 @@ import {connect} from 'react-redux';
 import i18n from 'utils/i18n/i18n';
 
 import {TOTAL_VNF_COUNT} from 'app/vnfSearch/VnfSearchConstants.js';
-import {COLOR_BLUE} from 'utils/GlobalConstants.js';
-import { ClipLoader } from 'react-spinners';
+import Spinner from 'utils/SpinnerContainer.jsx';
 
 let mapStateToProps = ({vnfSearch}) => {
   let {
@@ -55,10 +54,7 @@ class VnfSearchTotalCountVisualization extends Component {
           count,
           enableBusyFeedback
         } = this.props;
-    let componentVisibitliyClassName = 'showContainer';
-    if(enableBusyFeedback){
-      componentVisibitliyClassName = 'hideContainer';
-    }
+
     let visualizationClass = 'visualizations';
     if (count === null) {
       visualizationClass = 'visualizations hidden';
@@ -70,14 +66,11 @@ class VnfSearchTotalCountVisualization extends Component {
           <div className='visualization-side-by-side-30'>
             <span>&nbsp;</span>
             <h3>{i18n(TOTAL_VNF_COUNT.title)}</h3>
-            <div className='spinner'>
-              <ClipLoader color={COLOR_BLUE} loading={enableBusyFeedback} />
-            </div>
-            <div className={componentVisibitliyClassName}>
+            <Spinner loading={enableBusyFeedback}>
               <div className='total-box-entity-count'>
                 <span>{count}</span>
               </div>
-            </div>
+            </Spinner>
           </div>
         </div>
       </div>

diff --git a/src/utils/SpinnerContainer.jsx b/src/utils/SpinnerContainer.jsx
new file mode 100644 (file)
index 0000000..448999c
--- /dev/null
+++ b/src/utils/SpinnerContainer.jsx
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { ClipLoader } from 'react-spinners';
+import {COLOR_BLUE} from 'utils/GlobalConstants.js';
+
+class SpinnerContainer extends Component {
+  render() {
+    // if loading, show content as busy (ex: grey out)
+    const spinnerContentClass = this.props.loading ? 'spinner-content' : '';
+    return (
+      <div className='spinner-container'>
+        <div className='spinner'>
+          <ClipLoader color={COLOR_BLUE} loading={this.props.loading} />
+        </div>
+        <div className={spinnerContentClass}>
+          {this.props.children}
+        </div>
+      </div>
+    );
+  }
+}
+export default SpinnerContainer;
+
+SpinnerContainer.propTypes = {
+  loading: React.PropTypes.bool
+};
+
+SpinnerContainer.defaultProps = {
+  loading: false
+};
+