Frontend initial draft 21/90421/2
authorsebdet <sebastien.determe@intl.att.com>
Tue, 25 Jun 2019 09:06:06 +0000 (11:06 +0200)
committersebdet <sebastien.determe@intl.att.com>
Tue, 25 Jun 2019 09:50:09 +0000 (11:50 +0200)
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>
18 files changed:
.gitignore
pom.xml
src/main/docker/Dockerfile [deleted file]
src/main/docker/backend/Dockerfile [new file with mode: 0644]
src/main/docker/backend/backend-files.xml [moved from src/main/docker/assembly/clamp-files.xml with 80% similarity]
src/main/docker/frontend/Dockerfile [new file with mode: 0644]
src/main/docker/frontend/frontend-files.xml [new file with mode: 0644]
src/main/docker/kibana/Dockerfile [moved from src/main/docker/kibana/Dockerfile.kibana with 100% similarity]
src/main/docker/logstash/Dockerfile [moved from src/main/docker/logstash/Dockerfile.logstash with 64% similarity]
src/main/resources/boot-message.txt
ui-react/nginx/nginx.conf [new file with mode: 0644]
ui-react/package.json [new file with mode: 0644]
ui-react/public/index.html [new file with mode: 0644]
ui-react/public/manifest.json [new file with mode: 0644]
ui-react/public/onap.ico [new file with mode: 0644]
ui-react/src/images/logo_onap_2017.png [new file with mode: 0644]
ui-react/src/index.css [new file with mode: 0644]
ui-react/src/index.js [new file with mode: 0644]

index f70506a..ed38c13 100644 (file)
@@ -5,6 +5,8 @@ target
 .buildpath
 .idea
 *.iml
+ui-react/node_modules
+ui-react/build
 **/logs/
 **/.evosuite/
 **/debug-logs/
diff --git a/pom.xml b/pom.xml
index ec1033b..79cf2a9 100644 (file)
--- a/pom.xml
+++ b/pom.xml
                                                                                                                </run>
                                                                                                </image>
                                                                                                <image>
-                                                                                                               <name>onap/clamp</name>
-                                                                                                               <alias>onap-clamp</alias>
+                                                                                                               <name>onap/clamp-backend</name>
+                                                                                                               <alias>onap-clamp-backend</alias>
                                                                                                                <run>
                                                                                                                        <skip>true</skip>
                                                                                                                </run>
                                                                                                                                </tags>
                                                                                                                                <!-- A relative path is looked up in ${project.basedir}/src/main/docker
                                                                                                                                                by default -->
-                                                                                                                               <dockerFile>Dockerfile</dockerFile>
+                                                                                                                               <dockerFile>backend/Dockerfile</dockerFile>
                                                                                                                                <assembly>
-                                                                                                                                               <descriptor>assembly/clamp-files.xml</descriptor>
-                                                                                                                                               <name>onap-clamp</name>
+                                                                                                                                               <descriptor>backend/backend-files.xml</descriptor>
+                                                                                                                                               <name>onap-clamp-backend</name>
+                                                                                                                               </assembly>
+                                                                                                               </build>
+                                                                                               </image>
+                                                                                               <image>
+                                                                                                               <name>onap/clamp-frontend</name>
+                                                                                                               <alias>onap-clamp-frontend</alias>
+                                                                                                               <run>
+                                                                                                                       <skip>true</skip>
+                                                                                                               </run>
+                                                                                                               <build>
+                                                                                                                               <cleanup>true</cleanup>
+                                                                                                                               <tags>
+                                                                                                                                               <tag>latest</tag>
+                                                                                                                                               <tag>${project.docker.latesttagtimestamp.version}</tag>
+                                                                                                                                               <tag>${project.docker.latesttag.version}</tag>
+                                                                                                                               </tags>
+                                                                                                                               <!-- A relative path is looked up in ${project.basedir}/src/main/docker
+                                                                                                                                               by default -->
+                                                                                                                               <dockerFile>frontend/Dockerfile</dockerFile>
+                                                                                                                               <assembly>
+                                                                                                                                               <descriptor>frontend/frontend-files.xml</descriptor>
+                                                                                                                                               <name>onap-clamp-frontend</name>
                                                                                                                                </assembly>
                                                                                                                </build>
                                                                                                </image>
                                                                                                                                                <tag>${project.docker.latesttagtimestamp.version}</tag>
                                                                                                                                                <tag>${project.docker.latesttag.version}</tag>
                                                                                                                                </tags>
-                                                                                                                               <dockerFile>logstash/Dockerfile.logstash</dockerFile>
+                                                                                                                               <dockerFile>logstash/Dockerfile</dockerFile>
                                                                                                                </build>
                                                                                                </image>
                                                                                                <image>
                                                                                                                                                <tag>${project.docker.latesttagtimestamp.version}</tag>
                                                                                                                                                <tag>${project.docker.latesttag.version}</tag>
                                                                                                                                </tags>
-                                                                                                                               <dockerFile>kibana/Dockerfile.kibana</dockerFile>
+                                                                                                                               <dockerFile>kibana/Dockerfile</dockerFile>
                                                                                                                </build>
                                                                                                </image>
                                                                                </images>
diff --git a/src/main/docker/Dockerfile b/src/main/docker/Dockerfile
deleted file mode 100644 (file)
index c47d622..0000000
+++ /dev/null
@@ -1,34 +0,0 @@
-FROM openjdk:8u191-jdk-alpine3.9\r
-\r
-MAINTAINER "The Onap Team"\r
-LABEL Description="This immage contains alpine, openjdk 11 and clamp"\r
-\r
-ARG http_proxy\r
-ARG https_proxy\r
-ENV HTTP_PROXY=$http_proxy\r
-ENV HTTPS_PROXY=$https_proxy\r
-ENV http_proxy=$HTTP_PROXY\r
-ENV https_proxy=$HTTPS_PROXY\r
-\r
-RUN addgroup onap && adduser -D -G onap clamp\r
-VOLUME /opt/clamp/config\r
-RUN mkdir /var/log/onap\r
-RUN chmod a+rwx /var/log/onap\r
-\r
-COPY onap-clamp/clamp.jar /opt/clamp/app.jar\r
-RUN chmod 700 /opt/clamp/app.jar\r
-\r
-RUN chown -R clamp:onap /opt/clamp\r
-\r
-RUN apk add fontconfig\r
-RUN apk add ttf-dejavu\r
-\r
-RUN ln -s /usr/lib/libfontconfig.so.1 /usr/lib/libfontconfig.so && \\r
-  ln -s /lib/libuuid.so.1 /usr/lib/libuuid.so.1 && \\r
-  ln -s /lib/libc.musl-x86_64.so.1 /usr/lib/libc.musl-x86_64.so.1\r
-\r
-ENV LD_LIBRARY_PATH /usr/lib\r
-\r
-USER clamp\r
-WORKDIR /opt/clamp/\r
-ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-Xms256m", "-Xmx1g", "-jar" ,"./app.jar"]\r
diff --git a/src/main/docker/backend/Dockerfile b/src/main/docker/backend/Dockerfile
new file mode 100644 (file)
index 0000000..9e5c8d8
--- /dev/null
@@ -0,0 +1,57 @@
+###\r
+# ============LICENSE_START=======================================================\r
+# ONAP CLAMP\r
+# ================================================================================\r
+# Copyright (C) 2018 AT&T Intellectual Property. All rights\r
+#                             reserved.\r
+# ================================================================================\r
+# Licensed under the Apache License, Version 2.0 (the "License");\r
+# you may not use this file except in compliance with the License.\r
+# You may obtain a copy of the License at\r
+#\r
+# http://www.apache.org/licenses/LICENSE-2.0\r
+#\r
+# Unless required by applicable law or agreed to in writing, software\r
+# distributed under the License is distributed on an "AS IS" BASIS,\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+# See the License for the specific language governing permissions and\r
+# limitations under the License.\r
+# ============LICENSE_END============================================\r
+# ===================================================================\r
+#\r
+###\r
+\r
+FROM openjdk:8u191-jdk-alpine3.9\r
+\r
+MAINTAINER "The Onap Team"\r
+LABEL Description="This immage contains alpine, openjdk 11 and clamp"\r
+\r
+ARG http_proxy\r
+ARG https_proxy\r
+ENV HTTP_PROXY=$http_proxy\r
+ENV HTTPS_PROXY=$https_proxy\r
+ENV http_proxy=$HTTP_PROXY\r
+ENV https_proxy=$HTTPS_PROXY\r
+\r
+RUN addgroup onap && adduser -D -G onap clamp\r
+VOLUME /opt/clamp/config\r
+RUN mkdir /var/log/onap\r
+RUN chmod a+rwx /var/log/onap\r
+\r
+COPY onap-clamp-backend/clamp.jar /opt/clamp/app.jar\r
+RUN chmod 700 /opt/clamp/app.jar\r
+\r
+RUN chown -R clamp:onap /opt/clamp\r
+\r
+RUN apk add fontconfig\r
+RUN apk add ttf-dejavu\r
+\r
+RUN ln -s /usr/lib/libfontconfig.so.1 /usr/lib/libfontconfig.so && \\r
+  ln -s /lib/libuuid.so.1 /usr/lib/libuuid.so.1 && \\r
+  ln -s /lib/libc.musl-x86_64.so.1 /usr/lib/libc.musl-x86_64.so.1\r
+\r
+ENV LD_LIBRARY_PATH /usr/lib\r
+\r
+USER clamp\r
+WORKDIR /opt/clamp/\r
+ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-Xms256m", "-Xmx1g", "-jar" ,"./app.jar"]\r
similarity index 80%
rename from src/main/docker/assembly/clamp-files.xml
rename to src/main/docker/backend/backend-files.xml
index e4e9875..7a9c6f5 100644 (file)
@@ -1,6 +1,6 @@
 <!--
   ============LICENSE_START=======================================================
-  ECOMP MSO
+  ECOMP CLAMP
   ================================================================================
   Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   ================================================================================
@@ -29,7 +29,6 @@
        </formats>
        <includeBaseDirectory>false</includeBaseDirectory>
 
-
        <fileSets>
                <!-- include config files -->
                <fileSet>
                        <directory>${project.build.directory}</directory>
                        <outputDirectory>/</outputDirectory>
                </fileSet>
-               <fileSet>
-                       <includes>
-                               <include>>etc/config/**</include>
-                       </includes>
-                       <directory>${project.build.directory}</directory>
-                       <outputDirectory>/</outputDirectory>
-               </fileSet>
-               <fileSet>
-                       <includes>
-                               <include>etc/keystore/**</include>
-                       </includes>
-                       <directory>${project.build.directory}</directory>
-                       <outputDirectory>/</outputDirectory>
-               </fileSet>
        </fileSets>
 
 </assembly>
diff --git a/src/main/docker/frontend/Dockerfile b/src/main/docker/frontend/Dockerfile
new file mode 100644 (file)
index 0000000..8c755b0
--- /dev/null
@@ -0,0 +1,52 @@
+###\r
+# ============LICENSE_START=======================================================\r
+# ONAP CLAMP\r
+# ================================================================================\r
+# Copyright (C) 2019 AT&T Intellectual Property. All rights\r
+#                             reserved.\r
+# ================================================================================\r
+# Licensed under the Apache License, Version 2.0 (the "License");\r
+# you may not use this file except in compliance with the License.\r
+# You may obtain a copy of the License at\r
+#\r
+# http://www.apache.org/licenses/LICENSE-2.0\r
+#\r
+# Unless required by applicable law or agreed to in writing, software\r
+# distributed under the License is distributed on an "AS IS" BASIS,\r
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+# See the License for the specific language governing permissions and\r
+# limitations under the License.\r
+# ============LICENSE_END============================================\r
+# ===================================================================\r
+#\r
+###\r
+\r
+# build environment\r
+FROM node:12.4-alpine as build\r
+WORKDIR /app\r
+#ENV PATH /app/node_modules/.bin:$PATH\r
+COPY onap-clamp-frontend/ /app/\r
+RUN npm install --silent\r
+RUN npm run build\r
+\r
+FROM nginx:1.17.0-alpine\r
+\r
+MAINTAINER "The Onap Team"\r
+LABEL Description="This image contains Clamp frontend"\r
+\r
+ARG http_proxy\r
+ARG https_proxy\r
+ENV HTTP_PROXY=$http_proxy\r
+ENV HTTPS_PROXY=$https_proxy\r
+ENV http_proxy=$HTTP_PROXY\r
+ENV https_proxy=$HTTPS_PROXY\r
+\r
+RUN addgroup onap && adduser -D -G onap clamp\r
+RUN mkdir /var/log/onap\r
+RUN chmod a+rwx /var/log/onap\r
+\r
+COPY --from=build /app/build /usr/share/nginx/html\r
+RUN rm /etc/nginx/conf.d/default.conf\r
+COPY onap-clamp-frontend/nginx/nginx.conf /etc/nginx/conf.d\r
+EXPOSE 80\r
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/src/main/docker/frontend/frontend-files.xml b/src/main/docker/frontend/frontend-files.xml
new file mode 100644 (file)
index 0000000..2610e82
--- /dev/null
@@ -0,0 +1,43 @@
+<!--
+  ============LICENSE_START=======================================================
+  ECOMP 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=========================================================
+  -->
+
+<assembly
+       xmlns="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.1"
+       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+       xsi:schemaLocation="http://maven.apache.org/plugins/maven-assembly-plugin/assembly/1.1.1 http://maven.apache.org/xsd/assembly-1.1.1.xsd">
+       <id>clamp-files</id>
+
+       <formats>
+               <format>tar.gz</format>
+       </formats>
+       <includeBaseDirectory>false</includeBaseDirectory>
+
+       <fileSets>
+               <!-- include config files -->
+               <fileSet>
+                       <excludes>
+                               <exclude>node_modules</exclude>
+                       </excludes>
+                       <directory>${project.basedir}/ui-react</directory>
+                       <outputDirectory>/</outputDirectory>
+               </fileSet>
+       </fileSets>
+
+</assembly>
similarity index 64%
rename from src/main/docker/logstash/Dockerfile.logstash
rename to src/main/docker/logstash/Dockerfile
index f307509..73988dc 100644 (file)
@@ -1,17 +1,25 @@
-# Copyright (c) 2018 AT&T Intellectual Property.  All rights reserved.
-#
+###
+# ============LICENSE_START=======================================================
+# ONAP CLAMP
+# ================================================================================
+# Copyright (C) 2018 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
+# 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============================================
+# ===================================================================
+#
+###
 FROM  docker.elastic.co/logstash/logstash-oss:6.6.2
 
 MAINTAINER "The Onap Team"
index 92e4ab0..46b0a6f 100644 (file)
@@ -1,14 +1,15 @@
      
          
- _____  _  _    __    ____    ____  __  __  ____  __    ____  _  _ 
-(  _  )( \( )  /__\  (  _ \  (  _ \(  )(  )(  _ \(  )  (_  _)( \( )
- )(_)(  )  (  /(__)\  )___/   )(_) ))(__)(  ) _ < )(__  _)(_  )  ( 
-(_____)(_)\_)(__)(__)(__)    (____/(______)(____/(____)(____)(_)\_)
-                 ___  __      __    __  __  ____                                  
-                / __)(  )    /__\  (  \/  )(  _ \                                 
-               ( (__  )(__  /(__)\  )    (  )___/                                 
-                \___)(____)(__)(__)(_/\/\_)(__)                                   
-
+       ▐ ▄  ▄▄▄·  ▄▄▄·    ▄▄▄ .▄▄▌       ▄▄▄· ▄▄▌ ▄▄▄▄▄      
+▪     •█▌▐█▐█ ▀█ ▐█ ▄█    ▀▄.▀·██•      ▐█ ▀█ ██• •██  ▪     
+ ▄█▀▄ ▐█▐▐▌▄█▀▀█  ██▀·    ▐▀▀▪▄██▪      ▄█▀▀█ ██▪  ▐█.▪ ▄█▀▄ 
+▐█▌.▐▌██▐█▌▐█ ▪▐▌▐█▪·•    ▐█▄▄▌▐█▌▐▌    ▐█ ▪▐▌▐█▌▐▌▐█▌·▐█▌.▐▌
+ ▀█▄▀▪▀▀ █▪ ▀  ▀ .▀        ▀▀▀ .▀▀▀      ▀  ▀ .▀▀▀ ▀▀▀  ▀█▄▀▪
+                ▄▄· ▄▄▌   ▄▄▄· • ▌ ▄ ·.  ▄▄▄·                               
+               ▐█ ▌▪██•  ▐█ ▀█ ·██ ▐███▪▐█ ▄█                               
+               ██ ▄▄██▪  ▄█▀▀█ ▐█ ▌▐▌▐█· ██▀·                               
+               ▐███▌▐█▌▐▌▐█ ▪▐▌██ ██▌▐█▌▐█▪·•                               
+               ·▀▀▀ .▀▀▀  ▀  ▀ ▀▀  █▪▀▀▀.▀      
 
 
    :: Starting ::     
\ No newline at end of file
diff --git a/ui-react/nginx/nginx.conf b/ui-react/nginx/nginx.conf
new file mode 100644 (file)
index 0000000..758a646
--- /dev/null
@@ -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 (file)
index 0000000..c8197d1
--- /dev/null
@@ -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 (file)
index 0000000..8526742
--- /dev/null
@@ -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 (file)
index 0000000..8210c4e
--- /dev/null
@@ -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 (file)
index 0000000..85e168a
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 (file)
index 0000000..c6f6857
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 (file)
index 0000000..86e0f9e
--- /dev/null
@@ -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 (file)
index 0000000..fed8c0f
--- /dev/null
@@ -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')
+)