From c95e8dfe17f9ebf48ece6450c7bab40d7546ee0d Mon Sep 17 00:00:00 2001 From: sebdet Date: Tue, 25 Jun 2019 11:06:06 +0200 Subject: 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 --- ui-react/nginx/nginx.conf | 17 +++++++++++ ui-react/package.json | 27 ++++++++++++++++++ ui-react/public/index.html | 18 ++++++++++++ ui-react/public/manifest.json | 15 ++++++++++ ui-react/public/onap.ico | Bin 0 -> 18046 bytes ui-react/src/images/logo_onap_2017.png | Bin 0 -> 21360 bytes ui-react/src/index.css | 50 +++++++++++++++++++++++++++++++++ ui-react/src/index.js | 46 ++++++++++++++++++++++++++++++ 8 files changed, 173 insertions(+) create mode 100644 ui-react/nginx/nginx.conf create mode 100644 ui-react/package.json create mode 100644 ui-react/public/index.html create mode 100644 ui-react/public/manifest.json create mode 100644 ui-react/public/onap.ico create mode 100644 ui-react/src/images/logo_onap_2017.png create mode 100644 ui-react/src/index.css create mode 100644 ui-react/src/index.js (limited to 'ui-react') diff --git a/ui-react/nginx/nginx.conf b/ui-react/nginx/nginx.conf new file mode 100644 index 000000000..758a646e5 --- /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 000000000..c8197d1e6 --- /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 000000000..85267426d --- /dev/null +++ b/ui-react/public/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + +Clamp Designer UI + + + +
+ + diff --git a/ui-react/public/manifest.json b/ui-react/public/manifest.json new file mode 100644 index 000000000..8210c4ee5 --- /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 000000000..85e168ae2 Binary files /dev/null and b/ui-react/public/onap.ico 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 000000000..c6f6857a5 Binary files /dev/null and b/ui-react/src/images/logo_onap_2017.png differ diff --git a/ui-react/src/index.css b/ui-react/src/index.css new file mode 100644 index 000000000..86e0f9e4b --- /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 000000000..fed8c0f41 --- /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 ( +
Hello:{user} +
+ ); + } +} + +class ClampLogo extends React.Component { + render() { + return ( +
+ +
+    + CLAMP +
+
+ ); + } +} + +class ClampHeader extends React.Component { + render() { + return ( +
+ +
+ +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +) -- cgit 1.2.3-korg