Rework the status

Add status data when we load a loop + rework the look and feel of status
DIV

Issue-ID: CLAMP-429
Change-Id: Ibeb58e2653d603f29a0b71023d8afd49cf89aba1
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 1f79d39..40ae137 100644 (file)
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -46,7 +46,7 @@ const ProjectNameStyled = styled.a`
 
 `
 const LoopViewDivStyled = styled.div`
-       height: 90vh;
+       height: 100%;
        overflow: hidden;
        margin-left: 10px;
        margin-right: 10px;
@@ -138,7 +138,7 @@ export default class LoopUI extends React.Component {
        renderLoopViewHeader() {
                return (
                        <LoopViewHeaderDivStyled>
-                               Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+                               Loop Viewer - {this.state.loopName}
                        </LoopViewHeaderDivStyled>
                );
        }
@@ -147,8 +147,8 @@ export default class LoopUI extends React.Component {
                return (
                        <LoopViewBodyDivStyled>
                                <LoopSvg loopCache={this.state.loopCache} />
+                               <LoopStatus loopCache={this.state.loopCache}/>
                                <LoopLogs loopCache={this.state.loopCache} />
-                               <LoopStatus />
                        </LoopViewBodyDivStyled>
                );
        }

diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js
index b854c7c..3ee5acc 100644 (file)
--- a/ui-react/src/api/LoopCache.js
+++ b/ui-react/src/api/LoopCache.js
@@ -106,6 +106,10 @@ export default class LoopCache {
                return this.loopJsonCache.loopLogs;
        }
 
+       getComputedState() {
+               return this.loopJsonCache.lastComputedState;
+       }
+
        getComponentStates() {
                return this.loopJsonCache.components;
        }

diff --git a/ui-react/src/components/loop_viewer/logs/LoopLogs.js b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
index d7d983d..b6a777a 100644 (file)
--- a/ui-react/src/components/loop_viewer/logs/LoopLogs.js
+++ b/ui-react/src/components/loop_viewer/logs/LoopLogs.js
@@ -25,6 +25,15 @@ import Table from 'react-bootstrap/Table';
 import LoopCache from '../../../api/LoopCache';
 import styled from 'styled-components';
 
+const LoopLogsHeaderDivStyled = styled.div`
+       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+       padding: 10px 10px;
+       color: ${props => props.theme.loopViewerHeaderFontColor};
+`
+const TableStyled = styled(Table)`
+    
+    overflow: auto;
+`
 const TableRow = ({ logRow }) => (
        <tr>
                <td>{logRow.logInstant}</td>
@@ -35,13 +44,6 @@ const TableRow = ({ logRow }) => (
 
 )
 
-const LoopLogsHeaderDivStyled = styled.div`
-       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
-       padding: 10px 10px;
-       color: ${props => props.theme.loopViewerHeaderFontColor};
-       overflow: auto;
-`
-
 export default class LoopLogs extends React.Component {
 
        state = {
@@ -50,7 +52,7 @@ export default class LoopLogs extends React.Component {
        constructor(props) {
                super(props);
                this.renderLogs = this.renderLogs.bind(this);
-               this.state.loopCache=props.loopCache;
+               this.state.loopCache = props.loopCache;
        }
 
        shouldComponentUpdate(nextProps, nextState) {
@@ -65,17 +67,17 @@ export default class LoopLogs extends React.Component {
 
        renderLogs() {
                if (this.state.loopCache.getLoopLogsArray() != null) {
-               return (
-                       this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
-               )
-       } 
+                       return (
+                               this.state.loopCache.getLoopLogsArray().map(row => <TableRow logRow={row} />)
+                       )
+               }
        }
 
        render() {
                return (
                        <LoopLogsHeaderDivStyled>
                                <label>Loop Logs</label>
-                               <Table striped hover bordeless variant responsive>
+                               <TableStyled striped hover variant responsive>
                                        <thead>
                                                <tr>
                                                        <th><span align="left">Date</span></th>
@@ -87,7 +89,7 @@ export default class LoopLogs extends React.Component {
                                        <tbody>
                                                {this.renderLogs()}
                                        </tbody>
-                               </Table>
+                               </TableStyled>
                        </LoopLogsHeaderDivStyled>
 
                );

diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js
index f904d67..141a41f 100644 (file)
--- a/ui-react/src/components/loop_viewer/status/LoopStatus.js
+++ b/ui-react/src/components/loop_viewer/status/LoopStatus.js
@@ -22,34 +22,84 @@
 */
 import React from 'react';
 import Table from 'react-bootstrap/Table';
-import './LoopStatus.css';
+import styled from 'styled-components';
+import LoopCache from '../../../api/LoopCache';
+
+const LoopStatusViewDivStyled = styled.div`
+       background-color: ${props => props.theme.loopViewerHeaderBackgroundColor};
+       padding: 10px 10px;
+       color: ${props => props.theme.loopViewerHeaderFontColor};
+`
+
+const TableStyled = styled(Table)`
+    overflow: auto;
+`
+
+const TableRow = ({ statusRow }) => (
+       <tr>
+               <td>{statusRow.componentName}</td>
+               <td>{statusRow.stateName}</td>
+               <td>{statusRow.description}</td>
+       </tr>
+
+)
 
 export default class LoopStatus extends React.Component {
-  render() {
-       return (
-      <div>
-        <span id="status_clds" className="status_title">Status:
-          <span className="status">&nbsp;&nbsp;&nbsp;TestStatus&nbsp;&nbsp;&nbsp;</span>
-        </span>
-
-        <div className="status_table">
-          <Table striped hover>
-            <thead>
-                <tr>
-                  <th><span align="left" className="text">ComponentState</span></th>
-                  <th><span align="left" className="text">Description</span></th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td className="row_30_per">long test State</td>
-                  <td className="row_70_per">test description very very very long description</td>
-                </tr>
-              </tbody>
-            </Table>
-          </div>
-      </div>
-       );
-  }
+       state = {
+               loopCache: new LoopCache({}),
+       }
+
+       constructor(props) {
+               super(props);
+               this.renderStatus = this.renderStatus.bind(this);
+               this.state.loopCache = props.loopCache;
+       }
+
+
+       renderStatus() {
+               if (this.state.loopCache.getComponentStates() != null) {
+                       return Object.keys(this.state.loopCache.getComponentStates()).map((key) => {
+                               console.debug("Adding status for: ",key);
+                               var res={}
+                               res[key]=this.state.loopCache.getComponentStates()[key];
+                               return (<TableRow statusRow={{'componentName':key,'stateName':this.state.loopCache.getComponentStates()[key].componentState.stateName,'description':this.state.loopCache.getComponentStates()[key].componentState.description}} />)
+                       })
+
+               }
+       }
+
+       shouldComponentUpdate(nextProps, nextState) {
+               return this.state.loopCache !== nextState.loopCache;
+       }
+
+       componentWillReceiveProps(newProps) {
+               this.setState({
+                       loopCache: newProps.loopCache,
+               });
+       }
+
+       render() {
+               return (
+                       <LoopStatusViewDivStyled>
+                               <label>Loop Status: {this.state.loopCache.getComputedState()}
+                               </label>
+
+                               <div >
+                                       <TableStyled striped hover variant responsive>
+                                               <thead>
+                                                       <tr>
+                                                               <th><span align="left">Component Name</span></th>
+                                                               <th><span align="left">Component State</span></th>
+                                                               <th><span align="right">Description</span></th>
+                                                       </tr>
+                                               </thead>
+                                               <tbody>
+                                                       {this.renderStatus()}
+                                               </tbody>
+                                       </TableStyled>
+                               </div>
+                       </LoopStatusViewDivStyled>
+               );
+       }
 }
 

diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
index 91d74e4..3ac2f31 100644 (file)
--- a/ui-react/src/components/loop_viewer/svg/LoopSvg.js
+++ b/ui-react/src/components/loop_viewer/svg/LoopSvg.js
@@ -32,7 +32,10 @@ const LoopViewSvgDivStyled = styled.div`
        background-color: ${props => (props.theme.loopViewerBackgroundColor)};
        border: 1px solid;
        border-color: ${props => (props.theme.loopViewerHeaderColor)};
-       height: 50%;
+       margin-left: auto;
+       margin-right:auto;
+       text-align: center;
+
 `
 
 class LoopViewSvg extends React.Component {
@@ -88,7 +91,7 @@ class LoopViewSvg extends React.Component {
 
        render() {
                return (
-                       <LoopViewSvgDivStyled id="loop_svg" dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
+                       <LoopViewSvgDivStyled dangerouslySetInnerHTML={{ __html: this.state.svgContent }} onClick={this.handleSvgClick}>
 
                        </LoopViewSvgDivStyled>
                );

diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js
index 1630c50..08630cb 100644 (file)
--- a/ui-react/src/theme/globalStyle.js
+++ b/ui-react/src/theme/globalStyle.js
@@ -56,13 +56,12 @@ export const GlobalClampStyle = createGlobalStyle`
     font-size: ${props => props.theme.fontSize};
        border-radius: 4px;
        color: ${props => props.theme.fontNormal};
-    background-color: ${props => (props.theme.backgroundColor)};
+       background-color: ${props => (props.theme.backgroundColor)};
+       margin-top: 1px;
   }
-  
+
   svg {
-       padding: 10px;
        overflow: hidden;
-       background-color: ${props => (props.theme.loopViewerBackgroundColor)};
        width: 100%;
        height: 100%;
   }
@@ -75,13 +74,13 @@ export const DefaultClampTheme = {
        fontDark: '#888888',
        fontHighlight: '#ffff00',
        fontNormal: 'black',
-       
+
        backgroundColor: '#eeeeee',
        fontFamily: 'Arial, Sans-serif',
        fontSize: '15px',
-       
-       loopViewerBackgroundColor: 'white',
-       loopViewerFontColor: 'yellow',
-       loopViewerHeaderBackgroundColor: '#337ab7',
-       loopViewerHeaderFontColor: 'white',
+
+       loopViewerBackgroundColor: 'white',
+       loopViewerFontColor: 'yellow',
+       loopViewerHeaderBackgroundColor: '#337ab7',
+       loopViewerHeaderFontColor: 'white',
 };