Create the sub components for new Clamp UI
Create the sub components for the new React Clamp UI
Issue-ID: CLAMP-414
Change-Id: I3e9e6bf05559829d22936e06556fef60635a33d0
Signed-off-by: xuegao <xg353y@intl.att.com>
diff --git a/ui-react/src/Clamp.js b/ui-react/src/Clamp.js
new file mode 100644
index 0000000..38634b3
--- /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 79a24cd..9460023 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 bbde81e..ffceee1 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 0000000..8b34dad
--- /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 0000000..65e057c
--- /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 0000000..ffba830
--- /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 0000000..5f42746
--- /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 0000000..daa3660
--- /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 0000000..bfa05f8
--- /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 0000000..8f2d845
--- /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 2078c96..ce962f3 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 d5f2554..d4b3ede 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 0000000..5a06c3b
--- /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 86e0f9e..0000000
--- 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 53d3698..39162f5 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')
)