From c1a83a6127c861c96f81b8e317b0b19a521b047a Mon Sep 17 00:00:00 2001 From: Ridene Date: Fri, 2 Mar 2018 17:24:36 +0100 Subject: [PATCH] init react top counter refs: MON-2364 --- .gitignore | 3 +- package.json | 44 +++++++++++ webpack.config.js | 79 +++++++++++++++++++ .../Components/Header/ObjectStatus.js | 69 ++++++++++++++++ www/frontSrc/Components/Header/TopHeader.js | 60 ++++++++++++++ .../Components/Header/User/UserProfile.js | 52 ++++++++++++ .../Containers/ObjectStatusContainer.js | 16 ++++ www/frontSrc/Containers/TopHeaderContainer.js | 35 ++++++++ .../Containers/UserProfileContrainer.js | 32 ++++++++ www/frontSrc/Containers/index.js | 3 + www/header.html | 1 + .../core/menu/templates/BlockHeader.ihtml | 1 + www/index.js | 8 ++ www/package.json | 8 -- 14 files changed, 402 insertions(+), 9 deletions(-) create mode 100644 package.json create mode 100644 webpack.config.js create mode 100644 www/frontSrc/Components/Header/ObjectStatus.js create mode 100644 www/frontSrc/Components/Header/TopHeader.js create mode 100644 www/frontSrc/Components/Header/User/UserProfile.js create mode 100644 www/frontSrc/Containers/ObjectStatusContainer.js create mode 100644 www/frontSrc/Containers/TopHeaderContainer.js create mode 100644 www/frontSrc/Containers/UserProfileContrainer.js create mode 100644 www/frontSrc/Containers/index.js create mode 100644 www/header.html create mode 100644 www/index.js delete mode 100644 www/package.json diff --git a/.gitignore b/.gitignore index 71958c8aa6e..be5740c068f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ .idea/ /nbproject/private/ nbproject/ +node_modules/ /vendor/ -composer.lock +composer.lock \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000000..c8be2d53a3b --- /dev/null +++ b/package.json @@ -0,0 +1,44 @@ +{ + "name": "centreon", + "version": "2.8.10", + "description": "React Integration", + "scripts": { + "build": "webpack", + "dev": "webpack-dev-server --watch" + }, + "devDependencies": { + "babel-cli": "^6.26.0", + "babel-core": "^6.26.0", + "babel-loader": "^7.1.2", + "babel-plugin-transform-class-properties": "^6.24.1", + "babel-plugin-transform-decorators-legacy": "^1.3.4", + "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.6.1", + "babel-preset-react": "^6.24.1", + "babel-preset-stage-0": "^6.24.1", + "clean-webpack-plugin": "^0.1.18", + "css-loader": "^0.28.10", + "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^1.1.9", + "html-webpack-plugin": "^2.30.1", + "less": "^3.0.1", + "less-loader": "^4.0.5", + "style-loader": "^0.20.2", + "uglifyjs-webpack-plugin": "^1.1.8", + "webpack": "^3.11.0", + "webpack-dev-server": "^2.11.1", + "webpack-merge": "^4.1.1" + }, + "dependencies": { + "express": "^4.16.2", + "lodash": "^4.17.5", + "material-ui": "^1.0.0-beta.35", + "material-ui-icons": "^1.0.0-beta.35", + "numeral": "^2.0.6", + "prop-types": "^15.6.1", + "react": "^16.2.0", + "react-dom": "^16.2.0", + "styled-components": "^3.1.5", + "webpack": "^3.10.0" + } +} diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 00000000000..4f625830c24 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,79 @@ +const path = require ('path'); +const CleanWebpackPlugin = require('clean-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + resolve: { + alias: { + Components: path.resolve(__dirname, 'www/frontSrc/Containers/'), + Actions: path.resolve(__dirname, 'www/frontSrc/Actions/'), + }, + }, + entry: './www/index.js', + plugins: [ + new CleanWebpackPlugin(['dist']), + new HtmlWebpackPlugin({ + filename: 'react-header.tpl', + template: path.resolve(__dirname, './www/header.html') + }), + new ExtractTextPlugin({ + filename: '[name].[contenthash].css', + }), + ], + module: { + rules: [ + { + test: /\.less$/, + use: ExtractTextPlugin.extract({ + use: ['css-loader', 'less-loader'] + }), + }, + { + test: /\.js$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader', + options: { + presets: [ + "env", + "react", + "stage-0" + ] + } + } + }, + { + test: /\.(css|scss)$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[name].css', + outputPath: '../../../../Themes/assets/css/' + } + }, + { + loader: 'style-loader/url' + }, + { + loader: 'css-loader' + } + ] + }, + { + test: /\.jpe?g$|\.gif$|\.png$|\.ttf$|\.eot$|\.svg$/, + use: 'file-loader?name=[name].[ext]?[hash]' + }, + { + test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: 'url-loader?limit=10000&mimetype=application/fontwoff' + }, + ] + }, + output: { + filename: 'bundle.js', + publicPath: './include/core/menu/templates/', + path: path.resolve(__dirname, './www/include/core/menu/templates') + } +}; diff --git a/www/frontSrc/Components/Header/ObjectStatus.js b/www/frontSrc/Components/Header/ObjectStatus.js new file mode 100644 index 00000000000..f444cc68e25 --- /dev/null +++ b/www/frontSrc/Components/Header/ObjectStatus.js @@ -0,0 +1,69 @@ +import React from 'react' +import Button from 'material-ui/Button' +import Grid from 'material-ui/Grid' +import { withStyles } from 'material-ui/styles' +import numeral from 'numeral' +import Avatar from 'material-ui/Avatar'; + +const styles = theme => ({ + status: { + margin: '4px', + color: '#fff', + width: 36, + height: 36, + '& span': { + fontSize: 16 + }, + }, + errorStatus: { + margin: '10px 4px', + width: 40, + height: 40, + backgroundColor: theme.palette.error.main, + '& span': { + fontSize: 20 + }, + + }, + warningStatus: { + margin: '10px 4px', + color: '#fff', + width: 36, + height: 36, + '& span': { + fontSize: 16 + }, + backgroundColor: theme.palette.warning.main, + }, + avatar: { + width: 34, + height: 34, + display: 'inline-flex', + verticalAlign: 'middle', + margin: '6px', + }, +}) + +const ObjectStatus = ({ classes, object }) => ( + + + + + + + ) + +export default withStyles(styles)(ObjectStatus) diff --git a/www/frontSrc/Components/Header/TopHeader.js b/www/frontSrc/Components/Header/TopHeader.js new file mode 100644 index 00000000000..00313880b20 --- /dev/null +++ b/www/frontSrc/Components/Header/TopHeader.js @@ -0,0 +1,60 @@ +import React, {Component} from 'react' +import Grid from 'material-ui/Grid' +import AppBar from 'material-ui/AppBar' +import grey from 'material-ui/colors/grey' +import Typography from 'material-ui/Typography' +import { withStyles } from 'material-ui/styles' +import PropTypes from 'prop-types' +import { ObjectStatus, UserProfile } from 'Components' + +const styles = theme => ({ + root: { + flexGrow: 1, + zIndex: 1, + position: 'relative', + display: 'flex', + fontFamily: theme.font.openSans, + + }, + appBar: { + zIndex: theme.zIndex.drawer + 1, + color: '#fff', + backgroundColor: '#222e3c', + }, + avatar: { + margin: 10, + color: '#fff', + backgroundColor: grey[200], + }, +}) + + + +class TopHeader extends Component { + render () { + const {classes, object} = this.props + return ( +
+ + + + + Centreon + + + {object.map(obj => + + )} + + + +
+ ) + } +} + +TopHeader.propTypes = { + classes: PropTypes.object.isRequired, +} + +export default withStyles(styles)(TopHeader) diff --git a/www/frontSrc/Components/Header/User/UserProfile.js b/www/frontSrc/Components/Header/User/UserProfile.js new file mode 100644 index 00000000000..2d4f857be9d --- /dev/null +++ b/www/frontSrc/Components/Header/User/UserProfile.js @@ -0,0 +1,52 @@ +import React from 'react' +import { withStyles } from 'material-ui/styles' +import Avatar from 'material-ui/Avatar' +import Menu, { MenuItem } from 'material-ui/Menu' +import IconButton from 'material-ui/IconButton' +import Grid from 'material-ui/Grid' + +const styles = theme => ({ + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + avatar: { + width: 34, + height: 34, + display: 'inline-flex', + verticalAlign: 'middle', + margin: '6px', + }, +}) + +const UserProfile = ({classes, open, handleOpen, handleClose, anchorEl}) => ( + + + + RI + + + + Add to your bookmark + Désactivate notification sonore + + + ) + +export default withStyles(styles)(UserProfile) diff --git a/www/frontSrc/Containers/ObjectStatusContainer.js b/www/frontSrc/Containers/ObjectStatusContainer.js new file mode 100644 index 00000000000..82cbaf04901 --- /dev/null +++ b/www/frontSrc/Containers/ObjectStatusContainer.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react' +import ObjectStatus from '../Components/Header/ObjectStatus' + +class ObjectStatusContainer extends Component { + + render = () => { + + const { object } = this.props + + return ( + + ) + } +} + +export default ObjectStatusContainer \ No newline at end of file diff --git a/www/frontSrc/Containers/TopHeaderContainer.js b/www/frontSrc/Containers/TopHeaderContainer.js new file mode 100644 index 00000000000..3b5a3021a20 --- /dev/null +++ b/www/frontSrc/Containers/TopHeaderContainer.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles' +import TopHeader from '../Components/Header/TopHeader' + + +const theme = createMuiTheme({ + palette: { + primary: { main: '#88b917' }, + secondary: { main: '#00bfb3' }, + error: { main: '#e00b3d' }, + warning: { main: '#ff9a13' }, + }, + font: { + openSans: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif" + }, + overrides: { + MuiButton: { + + } + } +}); + +class TopHeaderContainer extends Component { + + render = () => { + const object = ['host', 'service'] + return ( + + + + ) + } +} + +export default TopHeaderContainer \ No newline at end of file diff --git a/www/frontSrc/Containers/UserProfileContrainer.js b/www/frontSrc/Containers/UserProfileContrainer.js new file mode 100644 index 00000000000..969a7a166d3 --- /dev/null +++ b/www/frontSrc/Containers/UserProfileContrainer.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react' +import UserProfile from '../Components/Header/User/UserProfile' + +export default class UserProfileContrainer extends Component { + + state = { + anchorEl: null, + }; + + handleOpen = event => { + this.setState({ anchorEl: event.currentTarget }) + }; + + handleClose = () => { + this.setState({ anchorEl: null }) + }; + + render () { + + const { anchorEl } = this.state + const open = Boolean(anchorEl) + + return ( + + ) + } +} \ No newline at end of file diff --git a/www/frontSrc/Containers/index.js b/www/frontSrc/Containers/index.js new file mode 100644 index 00000000000..04829426680 --- /dev/null +++ b/www/frontSrc/Containers/index.js @@ -0,0 +1,3 @@ +export { default as TopHeader } from './TopHeaderContainer' +export { default as ObjectStatus } from './ObjectStatusContainer' +export { default as UserProfile } from './UserProfileContrainer' \ No newline at end of file diff --git a/www/header.html b/www/header.html new file mode 100644 index 00000000000..8c214d76b5d --- /dev/null +++ b/www/header.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/www/include/core/menu/templates/BlockHeader.ihtml b/www/include/core/menu/templates/BlockHeader.ihtml index e66b85721ed..43a21fdb748 100644 --- a/www/include/core/menu/templates/BlockHeader.ihtml +++ b/www/include/core/menu/templates/BlockHeader.ihtml @@ -1,3 +1,4 @@ +{include file='react-header.tpl'}