Add redux

package.json

@@ -30,14 +30,23 @@
     "webpack-merge": "^4.1.1"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "express": "^4.16.2",
     "lodash": "^4.17.5",
     "material-ui": "^1.0.0-beta.35",
     "material-ui-icons": "^1.0.0-beta.35",
+    "moment": "^2.21.0",
+    "moment-timezone": "^0.5.14",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-moment": "^0.7.0",
+    "react-redux": "^5.0.7",
+    "react-router-dom": "^4.2.2",
+    "redux": "^3.7.2",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.2.0",
     "styled-components": "^3.1.5",
     "webpack": "^3.10.0"
   }

webpack.config.js

@@ -4,12 +4,6 @@ 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']),

www/frontSrc/Components/Header/User/UserProfile.js

-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/index.js

-export { default as TopHeader } from './TopHeaderContainer'
-export { default as ObjectStatus } from './ObjectStatusContainer'
-export { default as UserProfile } from './UserProfileContrainer'
\ No newline at end of file

www/frontSrc/Header/Actions/UserActions.js

+export const REQUEST_USER = 'REQUEST_USER'
+export const REQUEST_USER_SUCCESS = 'REQUEST_USER_SUCCESS'
+export const REQUEST_USER_FAIL = 'REQUEST_USER_FAIL'
+
+export function requestUser () {
+  return {
+    type: REQUEST_USER,
+  }
+}
+
+export function requestUserSuccess (res) {
+  return {
+    type: REQUEST_USER_SUCCESS,
+    data: res,
+  }
+}
+
+export function requestUserFail (err) {
+  return {
+    type: REQUEST_USER_FAIL,
+    error: err,
+  }
+}
\ No newline at end of file

www/frontSrc/Components/Header/ObjectStatus.js → www/frontSrc/Header/ObjectStatus.js

@@ -3,7 +3,7 @@ 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';
+import Avatar from 'material-ui/Avatar'
 
 const styles = theme => ({
   status: {
@@ -44,8 +44,8 @@ const styles = theme => ({
   },
 })
 
-const ObjectStatus = ({ classes, object }) => (
-      <Grid item sm={3}>
+const ObjectStatus = ({ classes, object, status }) => (
+  <Grid item xs>
     <Avatar
       alt="centreon object"
       src={'./img/icons/' + object + '.png'}

www/frontSrc/Containers/ObjectStatusContainer.js → www/frontSrc/Header/ObjectStatusContainer.js

 import React, { Component } from 'react'
-import ObjectStatus from '../Components/Header/ObjectStatus'
+import ObjectStatus from './ObjectStatus'
 
 class ObjectStatusContainer extends Component {
 
   render = () => {
 
-    const { object } = this.props
-
-    return (
-      <ObjectStatus object={object} />
-    )
+    return <ObjectStatus
+      object='service' />
   }
 }
 

www/frontSrc/Header/Reducers/UserReducer.js

+import {
+  REQUEST_USER,
+  REQUEST_USER_SUCCESS,
+  REQUEST_USER_FAIL,
+} from '../Actions/UserActions'
+
+export default function authReducer (
+  state = {
+    data: {}
+  },
+  action
+) {
+  switch (action.type) {
+    case REQUEST_USER:
+      return {
+        ...state
+      }
+    case REQUEST_USER_SUCCESS:
+      console.log(action)
+      return {
+        ...state,
+        data: action.data
+      }
+    default:
+      return state
+  }
+}
\ No newline at end of file

www/frontSrc/Components/Header/TopHeader.js → www/frontSrc/Header/TopHeader.js

@@ -5,14 +5,13 @@ 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'
+import ObjectStatus from './ObjectStatusContainer'
+import UserProfile from './User/UserProfileContrainer'
 
 const styles = theme => ({
   root: {
     flexGrow: 1,
     zIndex: 1,
-    position: 'relative',
-    display: 'flex',
     fontFamily: theme.font.openSans,
 
   },
@@ -32,19 +31,17 @@ const styles = theme => ({
 
 class TopHeader extends Component {
   render () {
-    const {classes, object} = this.props
+    const {classes} = this.props
     return (
       <div className={classes.root}>
         <AppBar position="static" className={classes.appBar}>
           <Grid container spacing={16}>
-            <Grid item sm={3}>
+            <Grid item xs>
               <Typography variant="title" color="inherit" noWrap>
                 Centreon
               </Typography>
             </Grid>
-            {object.map(obj =>
-              <ObjectStatus object={obj} key={obj}/>
-            )}
+            <ObjectStatus />
             <UserProfile />
           </Grid>
         </AppBar>

www/frontSrc/Containers/TopHeaderContainer.js → www/frontSrc/Header/TopHeaderContainer.js

 import React, { Component } from 'react'
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
-import TopHeader from '../Components/Header/TopHeader'
+import TopHeader from './TopHeader'
 
 
 const theme = createMuiTheme({
@@ -14,19 +14,29 @@ const theme = createMuiTheme({
     openSans: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif"
   },
   overrides: {
-    MuiButton: {
-
+    MuiMenuItem: {
+      root: {
+        height: '18px',
+        fontSize: '0.9rem',
+        font: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif",
+        paddingTop: '8px',
+        paddingBottom: '8px',
+      },
+    },
+    MuiPopover: {
+      paper: {
+        padding: '14px'
       }
+    },
   }
 });
 
 class TopHeaderContainer extends Component {
 
   render = () => {
-    const object = ['host', 'service']
     return (
       <MuiThemeProvider theme={theme}>
-        <TopHeader object={object} />
+        <TopHeader />
       </MuiThemeProvider>
     )
   }

www/frontSrc/Header/User/UserProfile.js

+import React from 'react'
+import { withStyles } from 'material-ui/styles'
+import Avatar from 'material-ui/Avatar'
+import { MenuItem } from 'material-ui/Menu'
+import IconButton from 'material-ui/IconButton'
+import Grid from 'material-ui/Grid'
+import Popover from 'material-ui/Popover'
+import Button from 'material-ui/Button'
+import Bookmark from 'material-ui-icons/Bookmark'
+import VolumeUp from 'material-ui-icons/VolumeUp'
+import Typography from 'material-ui/Typography'
+import Moment from 'moment'
+
+const styles = theme => ({
+  profileRoot: {
+    display: 'flex',
+    flexDirection: 'row-reverse'
+  },
+  moment: {
+    alignSelf: 'flex-start',
+    margin: '10px 0px',
+  },
+  headerDate: {
+    fontSize: '1.5vw',
+    lineHeight: '16px',
+    margin: '2px 0',
+  },
+  headerTime: {
+    fontSize: '2.5vw',
+    lineHeight: '20px',
+  },
+  avatarButton: {
+    alignSelf: 'flex-end',
+    margin: '6px 4px'
+  },
+  avatar: {
+    backgroundColor: '#FDFEFE',
+    width: 36,
+    height: 36,
+    display: 'inline-flex',
+    verticalAlign: 'middle',
+    color: '#24323E',
+  },
+  profile: {
+    padding: '10px 16px',
+    borderBottom: '1px solid #d1d2d4',
+  },
+  profileLink: {
+    float: 'right'
+  },
+  logoutButton: {
+    textTransform: 'initial',
+    border: '1px solid ' + theme.palette.error.main,
+    color: theme.palette.error.main,
+  },
+  menuFooter: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    padding: '10px 16px',
+    boxSizing: 'content-box',
+    borderTop: '1px solid #d1d2d4',
+  }
+})
+
+const UserProfile = ({
+    classes,
+    open,
+    handleOpen,
+    handleClose,
+    anchorEl
+  }) => (
+  <Grid item xs={3}>
+    <div className={classes.profileRoot}>
+      <IconButton
+        aria-haspopup="true"
+        onClick={handleOpen}
+        className={classes.avatarButton}
+      >
+        <Avatar className={classes.avatar}>
+          RI
+        </Avatar>
+      </IconButton>
+      <div className={classes.moment}>
+        <div className={classes.headerDate}> {Moment(new Date()).format('LL')} </div>
+        <div className={classes.headerTime}> {Moment().format('LT')} </div>
+      </div>
+    </div>
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      anchorReference='anchorEl'
+      anchorPosition={{ top: 200, left: 400 }}
+      onClose={handleClose}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
+    >
+      <div className={classes.profile}>
+        <Typography component="title" gutterBottom>
+          Rabaa Ridene
+        </Typography>
+        <Typography variant="caption" gutterBottom>
+          as Rayden <a href="./main.php?p=50104&o=c" className={classes.profileLink}>Edit profile </a>
+        </Typography>
+      </div>
+      <MenuItem onClick={handleClose}>
+        <Bookmark /> Add to your bookmark
+      </MenuItem>
+      <MenuItem onClick={handleClose}>
+        <VolumeUp /> Désactivate notification sonore
+      </MenuItem>
+      <div className={classes.menuFooter}>
+        <a href="index.php?disconnect=1">
+          <Button className={classes.logoutButton}>
+            Sign out
+          </Button>
+        </a>
+      </div>
+    </Popover>
+  </Grid>
+    )
+
+export default withStyles(styles)(UserProfile)

www/frontSrc/Containers/UserProfileContrainer.js → www/frontSrc/Header/User/UserProfileContrainer.js

 import React, { Component } from 'react'
-import UserProfile from '../Components/Header/User/UserProfile'
+import { connect } from 'react-redux'
+import UserProfile from './UserProfile'
+import { getUser } from "../../webservices/userApi"
 
-export default class UserProfileContrainer extends Component {
+class UserProfileContrainer extends Component {
 
   state = {
     anchorEl: null,
+    logoutUrl: 'index.php?disconnect=1'
   };
 
   handleOpen = event => {
@@ -17,6 +20,8 @@ export default class UserProfileContrainer extends Component {
 
   render () {
 
+    console.log(this.props.user)
+
     const { anchorEl } = this.state
     const open = Boolean(anchorEl)
 
@@ -30,3 +35,13 @@ export default class UserProfileContrainer extends Component {
       )
   }
 }
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    user: () => {
+      dispatch(getUser())
+    }
+  }
+}
+
+export default connect(null, mapDispatchToProps)(UserProfileContrainer)

www/frontSrc/Store/store.js

+import { combineReducers , createStore, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
+import { createLogger } from 'redux-logger'
+import UserReducer from '../Header/Reducers/UserReducer'
+
+const logger = createLogger()
+
+const rootReducer = combineReducers({
+  user: UserReducer
+})
+
+export const store = createStore(
+  rootReducer,
+  applyMiddleware(thunk, logger)
+)
\ No newline at end of file

www/frontSrc/webservices/userApi.js

+import axios from 'axios'
+import { requestUser, requestUserSuccess, requestUserFail } from '../Header/Actions/UserActions'
+
+const userUrl = 'http://10.30.2.138/centreon/api/user.json'
+
+export function getUser() {
+  return (dispatch) => {
+    dispatch(requestUser())
+  }
+  return axios.get(
+    userUrl
+  )
+    .then(
+      res => {
+        dispatch(requestUserSuccess(res))
+      }
+    )
+    .catch(
+      err => {
+        dispatch(requestUserFail(err))
+      }
+    )
+}
\ No newline at end of file

www/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import { TopHeader } from 'Components'
+import TopHeader from './frontSrc/Header/TopHeaderContainer'
 
 ReactDOM.hydrate(
   <TopHeader />,