diff options
| -rw-r--r-- | ui-react/public/index.html | 23 | ||||
| -rw-r--r-- | ui-react/src/ClampHeader.js | 42 | ||||
| -rw-r--r-- | ui-react/src/ClampLogo.js | 43 | ||||
| -rw-r--r-- | ui-react/src/MenuBar.js | 55 | ||||
| -rw-r--r-- | ui-react/src/UserBar.js | 36 | ||||
| -rw-r--r-- | ui-react/src/index.js | 62 |
6 files changed, 221 insertions, 40 deletions
diff --git a/ui-react/public/index.html b/ui-react/public/index.html index 85267426d..f255b75fb 100644 --- a/ui-react/public/index.html +++ b/ui-react/public/index.html @@ -1,4 +1,25 @@ - +/*- + * ============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============================================ + * =================================================================== + * + */ <!DOCTYPE html> <html lang="en"> <head> diff --git a/ui-react/src/ClampHeader.js b/ui-react/src/ClampHeader.js new file mode 100644 index 000000000..79a24cdff --- /dev/null +++ b/ui-react/src/ClampHeader.js @@ -0,0 +1,42 @@ +/*- + * ============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 ClampLogo from './ClampLogo'; +import UserBar from './UserBar'; +import MenuBar from './MenuBar'; +import './index.css'; + +class ClampHeader extends React.Component { + render() { + return ( + <div > + +<MenuBar /> + <UserBar /> + </div> + ); + } +} + +export default ClampHeader; diff --git a/ui-react/src/ClampLogo.js b/ui-react/src/ClampLogo.js new file mode 100644 index 000000000..bbde81e71 --- /dev/null +++ b/ui-react/src/ClampLogo.js @@ -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 './index.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"> + + <b>CLAMP</b> + </div> + </div> + ); + } +} + +export default ClampLogo; diff --git a/ui-react/src/MenuBar.js b/ui-react/src/MenuBar.js new file mode 100644 index 000000000..2078c962b --- /dev/null +++ b/ui-react/src/MenuBar.js @@ -0,0 +1,55 @@ +/*- + * ============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 Nav from 'react-bootstrap/Nav'; +import NavItem from 'react-bootstrap/NavItem'; +import NavDropdown from 'react-bootstrap/NavDropdown'; + + +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> + </NavDropdown> + </Nav> + </Navbar.Collapse> +</Navbar> + + </div> + + + ); + } +} + +export default MenuBar; diff --git a/ui-react/src/UserBar.js b/ui-react/src/UserBar.js new file mode 100644 index 000000000..d5f2554bc --- /dev/null +++ b/ui-react/src/UserBar.js @@ -0,0 +1,36 @@ +/*- + * ============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 './index.css'; + +class UserBar extends React.Component { + render () { + const user = this.props.user; + return ( + <div className="user_name">Hello:{user} + </div> + ); + } +} + +export default UserBar; diff --git a/ui-react/src/index.js b/ui-react/src/index.js index fed8c0f41..53d369888 100644 --- a/ui-react/src/index.js +++ b/ui-react/src/index.js @@ -1,44 +1,28 @@ +/*- + * ============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 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> - ); - } -} +import ClampHeader from './ClampHeader'; ReactDOM.render( <ClampHeader />, |