SVG Rendering
SVG rendering draft for Config and operational policies management +
call to back-end
Issue-ID: CLAMP-422
Change-Id: Ia3ca4223e283d0cd56d98fb1871fd3b2880940ec
Signed-off-by: sebdet <sebastien.determe@intl.att.com>
diff --git a/ui-react/src/LoopUI.js b/ui-react/src/LoopUI.js
index 997f94b..a1aff3d 100644
--- a/ui-react/src/LoopUI.js
+++ b/ui-react/src/LoopUI.js
@@ -28,10 +28,16 @@
import logo from './logo.png';
import { GlobalClampStyle } from './theme/globalStyle.js';
-import ClosedLoopSvg from './components/loop_viewer/svg/ClosedLoopSvg';
-import ClosedLoopLogs from './components/loop_viewer/logs/ClosedLoopLogs';
-import ClosedLoopStatus from './components/loop_viewer/status/ClosedLoopStatus';
+import LoopSvg from './components/loop_viewer/svg/LoopSvg';
+import LoopLogs from './components/loop_viewer/logs/LoopLogs';
+import LoopStatus from './components/loop_viewer/status/LoopStatus';
import UserService from './api/UserService';
+import LoopCache from './api/LoopCache';
+
+import { Route } from 'react-router-dom'
+import OpenLoopModal from './components/dialogs/OpenLoop/OpenLoopModal';
+import OperationalPolicyModal from './components/dialogs/OperationalPolicy/OperationalPolicyModal';
+import ConfigurationPolicyModal from './components/dialogs/ConfigurationPolicy/ConfigurationPolicyModal';
const ProjectNameStyled = styled.a`
vertical-align: middle;
@@ -71,26 +77,29 @@
`
export default class LoopUI extends React.Component {
+
state = {
userName: null,
loopName: "Empty (NO loop loaded yet)",
+ loopCache: new LoopCache({}),
};
constructor() {
super();
this.getUser = this.getUser.bind(this);
+ this.updateLoopCache = this.updateLoopCache.bind(this);
}
-
- componentDidMount() {
- this.getUser();
- }
+
+ componentDidMount() {
+ this.getUser();
+ }
getUser() {
- UserService.LOGIN().then(user => {
- this.setState({userName:user})
+ UserService.login().then(user => {
+ this.setState({ userName: user })
});
}
-
+
renderMenuNavBar() {
return (
<MenuBar />
@@ -108,7 +117,7 @@
renderLogoNavBar() {
return (
<Navbar.Brand>
- <img height="50px" width="234px" src={logo} alt=""/>
+ <img height="50px" width="234px" src={logo} alt="" />
<ProjectNameStyled>CLAMP</ProjectNameStyled>
</Navbar.Brand>
);
@@ -116,48 +125,56 @@
renderNavBar() {
return (
- <Navbar expand="lg">
- {this.renderLogoNavBar()}
- {this.renderMenuNavBar()}
- {this.renderUserLoggedNavBar()}
- </Navbar>
- );
+ <Navbar expand="lg">
+ {this.renderLogoNavBar()}
+ {this.renderMenuNavBar()}
+ {this.renderUserLoggedNavBar()}
+ </Navbar>
+ );
}
-
+
renderLoopViewHeader() {
return (
<LoopViewHeaderDivStyled>
- Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
+ Loop Viewer - <LoopViewLoopNameSpanStyled id="loop_name">{this.state.loopName}</LoopViewLoopNameSpanStyled>
</LoopViewHeaderDivStyled>
);
}
-
+
renderLoopViewBody() {
return (
<LoopViewBodyDivStyled>
- <ClosedLoopSvg />
- <ClosedLoopLogs />
- <ClosedLoopStatus />
+ <LoopSvg loopCache={this.state.loopCache} />
+ <LoopLogs />
+ <LoopStatus />
</LoopViewBodyDivStyled>
);
}
-
+
renderLoopViewer() {
return (
<LoopViewDivStyled>
- {this.renderLoopViewHeader()}
- {this.renderLoopViewBody()}
+ {this.renderLoopViewHeader()}
+ {this.renderLoopViewBody()}
</LoopViewDivStyled>
- );
+ );
}
-
+
+ updateLoopCache(loopJson) {
+ this.setState({ loopCache: new LoopCache(loopJson) });
+ }
+
render() {
return (
<div id="main_div">
- <GlobalClampStyle />
- {this.renderNavBar()}
- {this.renderLoopViewer()}
- </div>
+ <GlobalClampStyle />
+ {this.renderNavBar()}
+ {this.renderLoopViewer()}
+ <Route path="/operationalPolicyModal"
+ render={(routeProps) => (<OperationalPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+ <Route path="/configurationPolicyModal" render={(routeProps) => (<ConfigurationPolicyModal {...routeProps} loopCache={this.state.loopCache} />)} />
+ <Route path="/openLoop" render={(routeProps) => (<OpenLoopModal {...routeProps} updateLoopCacheFunction={this.updateLoopCache} />)} />
+ </div>
);
}
}