Create the sub components for new Clamp UI 04/90604/2
authorxuegao <xg353y@intl.att.com>
Thu, 27 Jun 2019 15:41:01 +0000 (17:41 +0200)
committerxuegao <xg353y@intl.att.com>
Fri, 28 Jun 2019 11:52:44 +0000 (13:52 +0200)
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>
17 files changed:
ui-react/package.json
ui-react/public/index.html
ui-react/src/Clamp.js [new file with mode: 0644]
ui-react/src/ClampHeader.js
ui-react/src/ClampLogo.js
ui-react/src/ClampLogoImg.js [new file with mode: 0644]
ui-react/src/ClosedLoopLogs.js [new file with mode: 0644]
ui-react/src/ClosedLoopSVG.js [new file with mode: 0644]
ui-react/src/ClosedLoopStatus.js [new file with mode: 0644]
ui-react/src/ClosedLoopView.js [new file with mode: 0644]
ui-react/src/ClosedLoopViewBody.js [new file with mode: 0644]
ui-react/src/ClosedLoopViewHeader.js [new file with mode: 0644]
ui-react/src/MenuBar.js
ui-react/src/UserBar.js
ui-react/src/css/index.css [new file with mode: 0644]
ui-react/src/index.css [deleted file]
ui-react/src/index.js

index 1664238..943ed7a 100644 (file)
     "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%",
index 4a10bab..2b740fe 100644 (file)
@@ -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 (file)
index 0000000..38634b3
--- /dev/null
@@ -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;
index 79a24cd..9460023 100644 (file)
@@ -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>
                );
        }
 }
index bbde81e..ffceee1 100644 (file)
@@ -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 (file)
index 0000000..8b34dad
--- /dev/null
@@ -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 (file)
index 0000000..65e057c
--- /dev/null
@@ -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 (file)
index 0000000..ffba830
--- /dev/null
@@ -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 (file)
index 0000000..5f42746
--- /dev/null
@@ -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 (file)
index 0000000..daa3660
--- /dev/null
@@ -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 (file)
index 0000000..bfa05f8
--- /dev/null
@@ -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 (file)
index 0000000..8f2d845
--- /dev/null
@@ -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;
index 2078c96..ce962f3 100644 (file)
@@ -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;
index d5f2554..d4b3ede 100644 (file)
@@ -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 (file)
index 0000000..5a06c3b
--- /dev/null
@@ -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 (file)
index 86e0f9e..0000000
+++ /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
index 53d3698..39162f5 100644 (file)
@@ -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')
 )