init react top counter

refs: MON-2364

.gitignore

@@ -1,5 +1,6 @@
 .idea/
 /nbproject/private/
 nbproject/
+node_modules/
 /vendor/
-composer.lock
+composer.lock

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"
+  }
+}

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')
+  }
+};

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 }) => (
+      <Grid item sm={3}>
+        <Avatar
+          alt="centreon object"
+          src={'./img/icons/' + object + '.png'}
+          className={classes.avatar}
+        />
+        <Button variant="fab"
+                className={(classes.status, classes.errorStatus)}>
+          {numeral(5601000).format('0a')}
+        </Button>
+        <Button variant="fab" mini
+                className={( classes.status, classes.warningStatus)}>
+          {numeral(56).format('0a')}
+        </Button>
+        <Button variant="fab" mini color="primary"
+                className={classes.status}>
+          {numeral(500).format('0a')}
+        </Button>
+      </Grid>
+    )
+
+export default withStyles(styles)(ObjectStatus)

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 (
+      <div className={classes.root}>
+        <AppBar position="static" className={classes.appBar}>
+          <Grid container spacing={16}>
+            <Grid item sm={3}>
+              <Typography variant="title" color="inherit" noWrap>
+                Centreon
+              </Typography>
+            </Grid>
+            {object.map(obj =>
+              <ObjectStatus object={obj} key={obj}/>
+            )}
+            <UserProfile />
+          </Grid>
+        </AppBar>
+      </div>
+    )
+  }
+}
+
+TopHeader.propTypes = {
+  classes: PropTypes.object.isRequired,
+}
+
+export default withStyles(styles)(TopHeader)

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}) => (
+  <Grid item sm={3}>
+    <IconButton
+      aria-haspopup="true"
+      onClick={handleOpen}
+      >
+        <Avatar className={classes.avatar}>
+          RI
+        </Avatar>
+    </IconButton>
+    <Menu
+      id="menu-appbar"
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+      open={open}
+      onClose={handleClose}
+    >
+      <MenuItem onClick={handleClose}>Add to your bookmark</MenuItem>
+      <MenuItem onClick={handleClose}>Désactivate notification sonore</MenuItem>
+    </Menu>
+  </Grid>
+    )
+
+export default withStyles(styles)(UserProfile)

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 (
+      <ObjectStatus object={object} />
+    )
+  }
+}
+
+export default ObjectStatusContainer

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 (
+      <MuiThemeProvider theme={theme}>
+        <TopHeader object={object} />
+      </MuiThemeProvider>
+    )
+  }
+}
+
+export default TopHeaderContainer