diff options
| -rw-r--r-- | ui-react/package.json | 5 | ||||
| -rw-r--r-- | ui-react/public/index.html | 20 | ||||
| -rw-r--r-- | ui-react/src/Clamp.js | 40 | ||||
| -rw-r--r-- | ui-react/src/ClampHeader.js | 33 | ||||
| -rw-r--r-- | ui-react/src/ClampLogo.js | 37 | ||||
| -rw-r--r-- | ui-react/src/ClampLogoImg.js | 40 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopLogs.js | 57 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopSVG.js | 35 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopStatus.js | 56 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopView.js | 41 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopViewBody.js | 70 | ||||
| -rw-r--r-- | ui-react/src/ClosedLoopViewHeader.js | 43 | ||||
| -rw-r--r-- | ui-react/src/MenuBar.js | 59 | ||||
| -rw-r--r-- | ui-react/src/UserBar.js | 30 | ||||
| -rw-r--r-- | ui-react/src/css/index.css | 88 | ||||
| -rw-r--r-- | ui-react/src/index.css | 50 | ||||
| -rw-r--r-- | ui-react/src/index.js | 22 |
17 files changed, 579 insertions, 147 deletions
diff --git a/ui-react/package.json b/ui-react/package.json index 166423854..943ed7ad1 100644 --- a/ui-react/package.json +++ b/ui-react/package.json @@ -16,11 +16,8 @@ "react": "~16.8.0", "react-dom": "~16.8.0", "react-scripts": "~3.0.1", - "onap-ui-react": "0.1.1", "react-bootstrap": "1.0.0-beta.9", - "babel-loader": "8.0.5", - "webpack": "4.29.6", - "browserslist": "4.6.3" + "bootstrap-css-only": "4.3.1" }, "browserslist": [ ">0.2%", diff --git a/ui-react/public/index.html b/ui-react/public/index.html index 4a10babe9..2b740fea8 100644 --- a/ui-react/public/index.html +++ b/ui-react/public/index.html @@ -5,22 +5,22 @@ Copyright (C) 2019 AT&T Intellectual Property. All rights reserved. ================================================================================ - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. You may obtain a copy of the License at - + http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ =================================================================== - + --> - + <!DOCTYPE html> <html lang="en"> <head> diff --git a/ui-react/src/Clamp.js b/ui-react/src/Clamp.js new file mode 100644 index 000000000..38634b3a4 --- /dev/null +++ b/ui-react/src/Clamp.js @@ -0,0 +1,40 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react'; +import ClampHeader from './ClampHeader'; +import ClosedLoopView from './ClosedLoopView'; + + +class Clamp extends React.Component { + render() { + return ( + <div> + <ClampHeader /> + <ClosedLoopView /> + </div> + ); + } +} + +export default Clamp; diff --git a/ui-react/src/ClampHeader.js b/ui-react/src/ClampHeader.js index 79a24cdff..9460023f6 100644 --- a/ui-react/src/ClampHeader.js +++ b/ui-react/src/ClampHeader.js @@ -5,36 +5,39 @@ * Copyright (C) 2019 AT&T Intellectual Property. All rights * reserved. * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END============================================ * =================================================================== - * + * */ import React from 'react'; +import ClampLogoImg from './ClampLogoImg'; import ClampLogo from './ClampLogo'; import UserBar from './UserBar'; import MenuBar from './MenuBar'; -import './index.css'; +import Navbar from 'react-bootstrap/Navbar'; +import 'bootstrap-css-only/css/bootstrap.min.css'; class ClampHeader extends React.Component { render() { return ( - <div > - -<MenuBar /> - <UserBar /> - </div> + <Navbar bg="light" expand="lg"> + <ClampLogoImg /> + <ClampLogo /> + <MenuBar /> + <UserBar /> + </Navbar> ); } } diff --git a/ui-react/src/ClampLogo.js b/ui-react/src/ClampLogo.js index bbde81e71..ffceee1df 100644 --- a/ui-react/src/ClampLogo.js +++ b/ui-react/src/ClampLogo.js @@ -5,37 +5,36 @@ * Copyright (C) 2019 AT&T Intellectual Property. All rights * reserved. * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END============================================ * =================================================================== - * + * */ import React from 'react'; -import './index.css'; +import Navbar from 'react-bootstrap/Navbar'; +import Nav from 'react-bootstrap/Nav'; +import './css/index.css'; +import 'bootstrap-css-only/css/bootstrap.min.css'; class ClampLogo extends React.Component { render() { return ( - <div className="col-md-4 col-lg-4"> - <img className="image_style" alt="" src={require('./images/logo_onap_2017.png')} - height="50px" - width="234px"/> - <div className="navbar-brand logo"> - - <b>CLAMP</b> - </div> - </div> + <Nav className="justify-content-left logo_text"> + <Navbar.Text> + Clamp + </Navbar.Text> + </Nav> ); } } diff --git a/ui-react/src/ClampLogoImg.js b/ui-react/src/ClampLogoImg.js new file mode 100644 index 000000000..8b34dad9c --- /dev/null +++ b/ui-react/src/ClampLogoImg.js @@ -0,0 +1,40 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react'; +import Navbar from 'react-bootstrap/Navbar'; +import 'bootstrap-css-only/css/bootstrap.min.css'; + +class ClampLogoImg extends React.Component { + render() { + return ( + <Navbar.Brand> + <img alt="" src={require('./images/logo_onap_2017.png')} + height="50px" width="234px" + className="d-inline-block align-top"/> + </Navbar.Brand> + ); + } +} + +export default ClampLogoImg; diff --git a/ui-react/src/ClosedLoopLogs.js b/ui-react/src/ClosedLoopLogs.js new file mode 100644 index 000000000..65e057cce --- /dev/null +++ b/ui-react/src/ClosedLoopLogs.js @@ -0,0 +1,57 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import Table from 'react-bootstrap/Table'; +import './css/index.css'; + +class ClosedLoopViewLogs extends React.Component { + render() { + return ( + <div className="log_div"> + <div className="log_table"> + <label className="table_header">Loop Logs</label> + <Table striped hover id="loop-log-div"> + <thead> + <tr> + <th><span align="left" className="text">Date</span></th> + <th><span align="left" className="text">Type</span></th> + <th><span align="left" className="text">Component</span></th> + <th><span align="right" className="text">Log</span></th> + </tr> + </thead> + <tbody> + <tr> + <td className="row_10_per">test</td> + <td className="row_10_per">test</td> + <td className="row_10_per">test</td> + <td className="row_70_per">test</td> + </tr> + </tbody> + </Table> + </div> + </div> + ); + } +} + +export default ClosedLoopViewLogs; diff --git a/ui-react/src/ClosedLoopSVG.js b/ui-react/src/ClosedLoopSVG.js new file mode 100644 index 000000000..ffba83093 --- /dev/null +++ b/ui-react/src/ClosedLoopSVG.js @@ -0,0 +1,35 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import './css/index.css'; + +class ClosedLoopViewSVG extends React.Component { + render() { + return ( + <div id="loop_content"> + </div> + ); + } +} + +export default ClosedLoopViewSVG; diff --git a/ui-react/src/ClosedLoopStatus.js b/ui-react/src/ClosedLoopStatus.js new file mode 100644 index 000000000..5f4274649 --- /dev/null +++ b/ui-react/src/ClosedLoopStatus.js @@ -0,0 +1,56 @@ +/*- +* ============LICENSE_START======================================================= +* ONAP CLAMP +* ================================================================================ +* Copyright (C) 2019 AT&T Intellectual Property. All rights +* reserved. +* ================================================================================ +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +* ============LICENSE_END============================================ +* =================================================================== +* +*/ +import React from 'react'; +import Table from 'react-bootstrap/Table'; +import './css/index.css'; + +class ClosedLoopStatus extends React.Component { + render() { + return ( + <div> + <span id="status_clds" className="status_title">Status: + <span className="status"> TestStatus </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> + ); + } +} + +export default ClosedLoopStatus; diff --git a/ui-react/src/ClosedLoopView.js b/ui-react/src/ClosedLoopView.js new file mode 100644 index 000000000..daa366062 --- /dev/null +++ b/ui-react/src/ClosedLoopView.js @@ -0,0 +1,41 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import ClosedLoopViewHeader from './ClosedLoopViewHeader'; +import ClosedLoopViewBody from './ClosedLoopViewBody'; +import './css/index.css'; + + class ClosedLoopView extends React.Component { + render() { + return ( + <div className="container-fluid cldsmodelling"> + <div className="cl_panel"> + <ClosedLoopViewHeader /> + <ClosedLoopViewBody /> + </div> + </div> + ); + } + } + + export default ClosedLoopView; diff --git a/ui-react/src/ClosedLoopViewBody.js b/ui-react/src/ClosedLoopViewBody.js new file mode 100644 index 000000000..bfa05f8b9 --- /dev/null +++ b/ui-react/src/ClosedLoopViewBody.js @@ -0,0 +1,70 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ +import React from 'react'; +import ClosedLoopSVG from './ClosedLoopSVG'; +import ClosedLoopLogs from './ClosedLoopLogs'; +import ClosedLoopStatus from './ClosedLoopStatus'; +import './css/index.css'; + + class ClosedLoopViewBody extends React.Component { + + constructor(props) { + super(props); + this.state = { + disableDiv: false + }; + this.disableDiv = this.disableDiv.bind(this); + this.enableDiv = this.enableDiv.bind(this); + } + + disableDiv() { + this.setState({ + disableDiv:true + }); + } + + enableDiv() { + this.setState({ + disableDiv:false + }); + } + + + render() { + var divStyle = { + display:this.state.disableDiv?'block':'none' + }; + return ( + <div id="paletteDiv" className="cl_view_body" style={divStyle}> + <div id="js-canvas" className="js_canvas"> + <ClosedLoopSVG /> + <ClosedLoopLogs /> + </div> + <ClosedLoopStatus /> + </div> + ); + } + } + + + export default ClosedLoopViewBody; diff --git a/ui-react/src/ClosedLoopViewHeader.js b/ui-react/src/ClosedLoopViewHeader.js new file mode 100644 index 000000000..8f2d845f1 --- /dev/null +++ b/ui-react/src/ClosedLoopViewHeader.js @@ -0,0 +1,43 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import React from 'react'; +import './css/index.css'; + +class ClosedLoopViewHeader extends React.Component { + render() { + return ( + <div className="cl_panel_heading clearfix"> + <div className="color_white"> + <span className="pull-left"> <span id="modeler_name">Closed + Loop Modeler</span> + </span> <span className="pull-right"> <span id="loop_name">No + LOOP loaded yet</span> <i ></i> + </span> + </div> + </div> + ); + } +} + +export default ClosedLoopViewHeader; diff --git a/ui-react/src/MenuBar.js b/ui-react/src/MenuBar.js index 2078c962b..ce962f338 100644 --- a/ui-react/src/MenuBar.js +++ b/ui-react/src/MenuBar.js @@ -5,51 +5,58 @@ * Copyright (C) 2019 AT&T Intellectual Property. All rights * reserved. * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END============================================ * =================================================================== - * + * */ import React from 'react'; import Navbar from 'react-bootstrap/Navbar'; -import Nav from 'react-bootstrap/Nav'; -import NavItem from 'react-bootstrap/NavItem'; import NavDropdown from 'react-bootstrap/NavDropdown'; - +import 'bootstrap-css-only/css/bootstrap.min.css'; class MenuBar extends React.Component { render () { return ( -<div> -<Navbar bg="light" expand="lg"> - <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand> - <Navbar.Toggle aria-controls="basic-navbar-nav" /> - <Navbar.Collapse id="basic-navbar-nav"> - <Nav className="mr-auto"> - <NavDropdown title="Dropdown" id="basic-nav-dropdown"> - <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> - <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item> - <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item> + <Navbar.Collapse id="basic-navbar-nav" className="justify-content-center"> + <NavDropdown title="Closed Loop" id="basic-nav-dropdown"> + <NavDropdown.Item href="#action/3.1">Open CL</NavDropdown.Item> + <NavDropdown.Item href="#action/3.2">Properties CL</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">Close Model</NavDropdown.Item> </NavDropdown> - </Nav> + <NavDropdown title="Manage" id="basic-nav-dropdown"> + <NavDropdown.Item href="#action/3.1">Submit</NavDropdown.Item> + <NavDropdown.Item href="#action/3.2">Stop</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">Restart</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">Delete</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">Deploy</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">UnDeploy</NavDropdown.Item> + </NavDropdown> + <NavDropdown title="View" id="basic-nav-dropdown"> + <NavDropdown.Item href="#action/3.1">Refresh Status</NavDropdown.Item> + </NavDropdown> + <NavDropdown title="Help" id="basic-nav-dropdown"> + <NavDropdown.Item href="#action/3.1">Wiki</NavDropdown.Item> + <NavDropdown.Item href="#action/3.2">Contact Us</NavDropdown.Item> + <NavDropdown.Item href="#action/3.3">User Info</NavDropdown.Item> + </NavDropdown> </Navbar.Collapse> -</Navbar> - - </div> ); } } + + export default MenuBar; diff --git a/ui-react/src/UserBar.js b/ui-react/src/UserBar.js index d5f2554bc..d4b3ede74 100644 --- a/ui-react/src/UserBar.js +++ b/ui-react/src/UserBar.js @@ -5,30 +5,36 @@ * Copyright (C) 2019 AT&T Intellectual Property. All rights * reserved. * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END============================================ * =================================================================== - * + * */ import React from 'react'; -import './index.css'; +import Navbar from 'react-bootstrap/Navbar'; +import 'bootstrap-css-only/css/bootstrap.min.css'; class UserBar extends React.Component { render () { const user = this.props.user; return ( - <div className="user_name">Hello:{user} - </div> + + <Navbar.Collapse className="justify-content-end"> + <Navbar.Text> + Hello: <a>{user}</a> + </Navbar.Text> +</Navbar.Collapse> + ); } } diff --git a/ui-react/src/css/index.css b/ui-react/src/css/index.css new file mode 100644 index 000000000..5a06c3b2b --- /dev/null +++ b/ui-react/src/css/index.css @@ -0,0 +1,88 @@ +.cldsmodelling { + height: 90vh; + overflow: hidden; + margin-left: 1px; + margin-right: 1px; +} +.cl_panel { + margin-bottom: 20px; + background-color: #fff; + border: 1px solid transparent; + border-radius: 4px; + box-shadow: 0 1px 1px rgba(0, 0, 0, .05); + width:100% ; + height: 100%; + border-color: #337ab7; +} +.cl_panel_heading{ + color: #fff; + background-color: #337ab7; + border-color: #337ab7; + padding: 10px 15px; + border-bottom: 1px solid transparent; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + font-size: 12px; +} +.pull-left{ + float: left !important; +} +.pull-right{ + float: right !important; +} + +.color_white { + color: white; +} +.cl_view_body { + height: 83.5vh; width: 100%; +} +.logo_text { + font-size: 20px; + font-weight: bold; +} +.js_canvas { + margin-top: 200px; + margin-left: 20px; + margin-right: 20px; +} +.log_div{ + border: 2px solid gray; + margin-right: 20px; + font-size: 12px; +} +.log_table { + width: 100%; + height: 87%; + overflow: auto; +} +.row_10_per { + width: 10%; +} +.row_30_per { + width: 30%; +} +.row_70_per { + width: 70%; +} +.table_header { + font-weight: bold; +} +.status_title{ + position: absolute; + left: 61%; + top: 151px; + font-size:20px; +} +.status{ + background-color: gray; + -moz-border-radius: 50px; + -webkit-border-radius: 50px; + border-radius: 50px; +} +.status_table { + position: absolute; + left: 61%; + top: 191px; + font-size:10px; +} diff --git a/ui-react/src/index.css b/ui-react/src/index.css deleted file mode 100644 index 86e0f9e4b..000000000 --- a/ui-react/src/index.css +++ /dev/null @@ -1,50 +0,0 @@ -.nav { - margin-left: 2px; - margin-right: 2px; -} -.navbar-brand { - float: left; - height: 50px; - padding: 15px 15px; - font-size: 18px; - line-height: 20px; -} -.rowC { - display: flex; - flex-direction:row; -} -.logo { - font-family: 'Trebuchet MS', cursive; - font-size: 20px; - font-weight: 500; - text-align: center; -} -.image_style { - display: inline-block; - float: left; -} -.dummy { - float: right; - padding-right: 50px; -} -.user_name { - display: block; - float: left; - font-family: 'Trebuchet MS', cursive; - font-size: 15px; - font-weight: 500; - height: 50px; - text-align: right; -} - -.ClampHeader { - margin-left: 2px; - margin-right: 2px; -} - -.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - }
\ No newline at end of file diff --git a/ui-react/src/index.js b/ui-react/src/index.js index 53d369888..39162f562 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -5,26 +5,26 @@ * Copyright (C) 2019 AT&T Intellectual Property. All rights * reserved. * ================================================================================ - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. * You may obtain a copy of the License at - * + * * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and * limitations under the License. * ============LICENSE_END============================================ * =================================================================== - * + * */ import React from 'react'; import ReactDOM from 'react-dom'; -import ClampHeader from './ClampHeader'; +import Clamp from './Clamp'; ReactDOM.render( - <ClampHeader />, + <Clamp />, document.getElementById('root') ) |