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>

15 files changed, 568 insertions, 133 deletions

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">
-					&nbsp;&nbsp;
-					<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">&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>
+  	);
+  }
+}
+
+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> &nbsp; <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')
 )