From 190227aa1bbcdc164a17fbcc8de06f78c11ebdff Mon Sep 17 00:00:00 2001 From: sebdet Date: Fri, 19 Jul 2019 16:51:19 +0200 Subject: 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 --- ui-react/src/LoopUI.js | 6 +- ui-react/src/api/LoopCache.js | 4 + .../src/components/loop_viewer/logs/LoopLogs.js | 30 +++--- .../components/loop_viewer/status/LoopStatus.js | 104 +++++++++++++++------ ui-react/src/components/loop_viewer/svg/LoopSvg.js | 7 +- ui-react/src/theme/globalStyle.js | 19 ++-- 6 files changed, 114 insertions(+), 56 deletions(-) diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js index 1f79d39e..40ae1379 100644 --- 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 ( - Loop Viewer - {this.state.loopName} + Loop Viewer - {this.state.loopName} ); } @@ -147,8 +147,8 @@ export default class LoopUI extends React.Component { return ( + - ); } diff --git a/ui-react/src/api/LoopCache.js b/ui-react/src/api/LoopCache.js index b854c7c1..3ee5acc6 100644 --- 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 d7d983d6..b6a777a4 100644 --- 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 }) => ( {logRow.logInstant} @@ -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 => ) - ) - } + return ( + this.state.loopCache.getLoopLogsArray().map(row => ) + ) + } } render() { return ( - + @@ -87,7 +89,7 @@ export default class LoopLogs extends React.Component { {this.renderLogs()} -
Date
+ ); diff --git a/ui-react/src/components/loop_viewer/status/LoopStatus.js b/ui-react/src/components/loop_viewer/status/LoopStatus.js index f904d674..141a41f5 100644 --- 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 }) => ( + + {statusRow.componentName} + {statusRow.stateName} + {statusRow.description} + + +) export default class LoopStatus extends React.Component { - render() { - return ( -
- Status: -    TestStatus    - - -
- - - - - - - - - - - - - -
ComponentStateDescription
long test Statetest description very very very long description
-
-
- ); - } + 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 () + }) + + } + } + + shouldComponentUpdate(nextProps, nextState) { + return this.state.loopCache !== nextState.loopCache; + } + + componentWillReceiveProps(newProps) { + this.setState({ + loopCache: newProps.loopCache, + }); + } + + render() { + return ( + + + +
+ + + + Component Name + Component State + Description + + + + {this.renderStatus()} + + +
+ + ); + } } diff --git a/ui-react/src/components/loop_viewer/svg/LoopSvg.js b/ui-react/src/components/loop_viewer/svg/LoopSvg.js index 91d74e4f..3ac2f31f 100644 --- 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 ( - + ); diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js index 1630c507..08630cbd 100644 --- 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', }; -- cgit 1.2.3-korg