Frontend initial draft

New frontend initial draft in React with docker image in nginx

Issue-ID: CLAMP-413
Change-Id: Ie5826d79aa3db23f863e8fd217189ba41534abe9
Signed-off-by: sebdet <sebastien.determe@intl.att.com>

3 files changed, 96 insertions, 0 deletions

diff --git a/ui-react/src/images/logo_onap_2017.png b/ui-react/src/images/logo_onap_2017.png
new file mode 100644
index 00000000..c6f6857a
--- /dev/null
+++ b/ui-react/src/images/logo_onap_2017.png
diff --git a/ui-react/src/index.css b/ui-react/src/index.css
new file mode 100644
index 00000000..86e0f9e4
--- /dev/null
+++ b/ui-react/src/index.css
@@ -0,0 +1,50 @@
+.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
new file mode 100644
index 00000000..fed8c0f4
--- /dev/null
+++ b/ui-react/src/index.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+
+class UserBar extends React.Component {
+	render () {
+		const user = this.props.user;
+		return (
+			<div className="user_name">Hello:{user}
+			</div>
+		);
+	}
+}
+
+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>
+		);
+	}
+}
+
+class ClampHeader extends React.Component {
+	render() {
+		return (
+			<div className='rowC'>
+			<ClampLogo />
+			<div className="dummy"></div>
+			<UserBar />
+			</div>
+		);
+	}
+}
+
+ReactDOM.render(
+	<ClampHeader />,
+	document.getElementById('root')
+)