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>
diff --git a/ui-react/nginx/nginx.conf b/ui-react/nginx/nginx.conf
new file mode 100644
index 0000000..758a646
--- /dev/null
+++ b/ui-react/nginx/nginx.conf
@@ -0,0 +1,17 @@
+server {
+
+ listen 80;
+
+ location / {
+ root /usr/share/nginx/html;
+ index index.html index.htm;
+ try_files $uri $uri/ /index.html;
+ }
+
+ error_page 500 502 503 504 /50x.html;
+
+ location = /50x.html {
+ root /usr/share/nginx/html;
+ }
+
+}
\ No newline at end of file
diff --git a/ui-react/package.json b/ui-react/package.json
new file mode 100644
index 0000000..c8197d1
--- /dev/null
+++ b/ui-react/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "clamp-ui",
+ "version": "0.0.1",
+ "description": "ONAP Clamp Designer UI",
+ "main": "index.js",
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "author": "ONAP Clamp Team",
+ "license": "Apache-2.0",
+ "dependencies": {
+ "json-editor": "^0.7.28",
+ "react": "~16.8.0",
+ "react-dom": "~16.8.0",
+ "react-scripts": "~3.0.1",
+ "onap-ui-react":"0.1.1"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/ui-react/public/index.html b/ui-react/public/index.html
new file mode 100644
index 0000000..8526742
--- /dev/null
+++ b/ui-react/public/index.html
@@ -0,0 +1,18 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport"
+ content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="theme-color" content="#000000">
+<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+<link rel="shortcut icon" href="%PUBLIC_URL%/onap.ico">
+
+<title>Clamp Designer UI</title>
+</head>
+<body>
+ <noscript>You need to enable JavaScript to run this app.</noscript>
+ <div id="root"></div>
+</body>
+</html>
diff --git a/ui-react/public/manifest.json b/ui-react/public/manifest.json
new file mode 100644
index 0000000..8210c4e
--- /dev/null
+++ b/ui-react/public/manifest.json
@@ -0,0 +1,15 @@
+{
+ "short_name": "Clamp Designer UI",
+ "name": "Clamp Designer UI",
+ "icons": [
+ {
+ "src": "onap.ico",
+ "sizes": "64x64 32x32 24x24 16x16",
+ "type": "image/x-icon"
+ }
+ ],
+ "start_url": "./index.html",
+ "display": "standalone",
+ "theme_color": "#000000",
+ "background_color": "#ffffff"
+}
diff --git a/ui-react/public/onap.ico b/ui-react/public/onap.ico
new file mode 100644
index 0000000..85e168a
--- /dev/null
+++ b/ui-react/public/onap.ico
Binary files differ
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 0000000..c6f6857
--- /dev/null
+++ b/ui-react/src/images/logo_onap_2017.png
Binary files differ
diff --git a/ui-react/src/index.css b/ui-react/src/index.css
new file mode 100644
index 0000000..86e0f9e
--- /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 0000000..fed8c0f
--- /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">
+
+ <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')
+)
