fix(new header): improve UI

centreon · Jul 4, 2018 · df7aab7 · df7aab7
1 parent 74871c0
commit df7aab7
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 107 deletions.
diff --git a/www/frontSrc/Header/Objects/HostObject.js b/www/frontSrc/Header/Objects/HostObject.js
@@ -9,24 +9,18 @@ import HostIcon from "../Icons/HostIcon"
 const styles = theme => ({
   root: {
     fontFamily: theme.font.openSans,
-    position: 'relative',
-    '&:before': {
-      width: 1,
-      height: 30,
-      backgroundColor: '#d1d2d4',
-      content: '""',
-      position: 'absolute',
-      top: 18,
-      margin: '0px -10px',
-    },
+    marginLeft: 26,
   },
-  'a': {
-    color: '#0072CE',
+  link: {
+    color: 'rgba(0, 0, 0, 0.87)',
     '&:hover': {
-      backgroundColor: '#064166'
+      color: '#09225C'
     },
     '&:visited': {
-      color: '#10069F'
+      color: 'rgba(0, 0, 0, 0.87)'
+    },
+    '&:active': {
+      color: 'rgba(0, 0, 0, 0.87)'
     }
   },
   status: {
@@ -117,9 +111,8 @@ const styles = theme => ({
   },
   objectDetails: {
     padding: '10px 16px',
-    borderBottom: '1px solid #d1d2d4',
-    '&:last-child' : {
-      borderBottom: 'none',
+    '&:first-child' : {
+      borderBottom: '1px solid #d1d2d4',
     }
   },
   total: {
@@ -140,20 +133,20 @@ const HostObject = (
       aria-label='Hosts status'
       aria-haspopup="true"
       onClick={handleOpen}
+      title="host"
     />
     { pending.total > 0 ? <span className={classes.pendingStatus} ></span> : '' }
-    {down.unhandled == 0 && unreachable.unhandled == 0 ?
-      <Button variant="fab" href={ok.url}
-              aria-label='ok hosts'
-              className={(classes.status, classes.okStatus)}>
-        {numeral(ok.total).format('0a')}
-      </Button> :
+    {down.unhandled > 0 || unreachable.unhandled > 0 ?
       <Button variant="fab" href={down.url}
               aria-label='Down hosts'
               className={(classes.status, classes.errorStatus)}>
         {numeral(down.unhandled).format('0a')}
+      </Button> :
+      <Button variant="fab" href={ok.url}
+              aria-label='ok hosts'
+              className={(classes.status, classes.okStatus)}>
+        {numeral(ok.total).format('0a')}
       </Button>
-
     }
     <Button variant="fab" mini href={unreachable.url}
             aria-label='Unreachable hosts'
@@ -177,42 +170,43 @@ const HostObject = (
       }}
     >
       <div className={classes.objectDetails}>
-        <Typography variant="caption" gutterBottom>
-          <a href={url} title="all hosts list">
+        <Typography variant="body1" gutterBottom>
+          <a href={url} title="all hosts list" className={classes.link}>
             All hosts
+            <span className={classes.total}>{total}</span>
           </a>
-          <span className={classes.total}>{total}</span>
+
         </Typography>
       </div>
       <div className={classes.objectDetails}>
-        <Typography variant="caption" gutterBottom>
+        <Typography variant="body1" gutterBottom>
           <span className={classes.chip} style={{backgroundColor: '#e00b3d'}}></span>
-          <a href={down.url} title="hosts down list">
-            {down.unhandled} Unhandled problems
+          <a href={down.url} title="hosts down" className={classes.link}>
+            Down hosts
+            <span className={classes.total}>{down.unhandled}/{down.total}</span>
           </a>
-          <span className={classes.total}> / {down.total}</span>
         </Typography>
       </div>
       <div className={classes.objectDetails}>
-        <Typography variant="caption" gutterBottom>
+        <Typography variant="body1" gutterBottom>
           <span className={classes.chip} style={{backgroundColor: '#818285'}}></span>
-          <a href={unreachable.url} title="hosts unreachable list">
-            {unreachable.unhandled} Unreachable hosts
+          <a href={unreachable.url} title="hosts unreachable" className={classes.link}>
+            Unreachable hosts
+            <span className={classes.total}>{unreachable.unhandled}/{unreachable.total}</span>
           </a>
-          <span className={classes.total}> / {unreachable.total}</span>
         </Typography>
       </div>
       <div className={classes.objectDetails}>
-        <Typography variant="caption" gutterBottom>
+        <Typography variant="body1" gutterBottom>
           <span className={classes.chip} style={{backgroundColor: '#88b917'}}></span>
-          <a href={ok.url} title="hosts ok list">
-            {ok.total} Ok hosts
+          <a href={ok.url} title="hosts ok" className={classes.link}>Ok hosts
+            <span className={classes.total}>{ok.total}</span>
           </a>
         </Typography>
       </div>
       {pending.total > 0 ?
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
+          <Typography variant="body1" gutterBottom>
             <span className={classes.chip} style={{backgroundColor: '#2AD1D4'}}></span>
             <a href={pending.url} title="pending hosts list">
             {pending.total} Pending hosts

diff --git a/www/frontSrc/Header/Objects/PollerObject.js b/www/frontSrc/Header/Objects/PollerObject.js
@@ -12,7 +12,7 @@ const styles = theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    margin: '16px 6px',
+    margin: '16px 0px',
   },
   'a': {
     color: '#0072CE',
@@ -32,13 +32,6 @@ const styles = theme => ({
       fontSize: 16
     },
   },
-  chip: {
-    height: '10px',
-    width: '10px',
-    borderRadius: 20,
-    display: 'inline-table',
-    marginRight: 6,
-  },
   errorStatus: {
     margin: '10px 4px',
     width: 46,
@@ -84,6 +77,9 @@ const styles = theme => ({
   total: {
     float: 'right',
     marginLeft: 34,
+  },
+  issueMessage: {
+
   },
   errorNotif: {
     backgroundColor: theme.palette.error.lighter,
@@ -159,11 +155,9 @@ const PollerObject = (
             } else if (issue === 'latency') {
               message ='Latency detected'
             }
-
-            console.log(message)
             return (
               <div className={classes.objectDetails} key={index}>
-                <Typography variant='subheading' gutterBottom >
+                <Typography variant='body2' className={classes.issueMessage} gutterBottom >
                   {message}
                   <span className={classes.total}>{issues[issue].total}</span>
                 </Typography>

diff --git a/www/frontSrc/Header/Objects/ServiceObject.js b/www/frontSrc/Header/Objects/ServiceObject.js
@@ -9,16 +9,7 @@ import ServiceIcon from "../Icons/ServiceIcon"
 const styles = theme => ({
   root: {
     fontFamily: theme.font.openSans,
-    position: 'relative',
-    '&:before': {
-      width: 1,
-      height: 30,
-      backgroundColor: '#d1d2d4',
-      content: '""',
-      position: 'absolute',
-      top: 18,
-      margin: '0px -10px',
-    },
+    marginLeft: 26,
   },
   status: {
     margin: '4px',
@@ -63,7 +54,8 @@ const styles = theme => ({
     width: 40,
     height: 40,
     '& span': {
-      fontSize: 16
+      fontSize: 16,
+      fontWeight: '600'
     },
     backgroundColor: theme.palette.warning.main,
     '&:hover': {
@@ -113,6 +105,18 @@ const styles = theme => ({
       color: '#D1D2D4',
     }
   },
+  link: {
+    color: 'rgba(0, 0, 0, 0.87)',
+    '&:hover': {
+      color: '#09225C'
+    },
+    '&:visited': {
+      color: 'rgba(0, 0, 0, 0.87)'
+    },
+    '&:active': {
+      color: 'rgba(0, 0, 0, 0.87)'
+    }
+  },
   paper: {
     padding: theme.spacing.unit,
   },
@@ -121,9 +125,8 @@ const styles = theme => ({
   },
   objectDetails: {
     padding: '10px 16px',
-    borderBottom: '1px solid #d1d2d4',
-    '&:last-child' : {
-      borderBottom: 'none',
+    '&:first-child' : {
+      borderBottom: '1px solid #d1d2d4',
     }
   },
   total: {
@@ -168,7 +171,6 @@ const ServiceObject = ({
               className={(classes.status, classes.unknownStatus)}>
         {numeral(unknown.unhandled).format('0a')}
       </Button>
-
       <Popover
         id='servicePopover'
         open={open}
@@ -186,53 +188,54 @@ const ServiceObject = ({
         }}
       >
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
-            <a href={url} title="all services list">
+          <Typography variant="body1" gutterBottom>
+            <a href={url} title="all services list" className={classes.link}>
               All services
+              <span className={classes.total}>{total}</span>
             </a>
-            <span className={classes.total}>{total}</span>
           </Typography>
         </div>
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
+          <Typography variant="body1" gutterBottom>
             <span className={classes.chip} style={{backgroundColor: '#e00b3d'}}></span>
-            <a href={critical.url} title="services critical list">
-              {critical.unhandled} Unhandled problems
+            <a href={critical.url} title="services critical list" className={classes.link}>
+              Critical services
+              <span className={classes.total}>{critical.unhandled}/{critical.total}</span>
             </a>
-            <span className={classes.total}> / {critical.total}</span>
           </Typography>
         </div>
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
+          <Typography variant="body1" gutterBottom>
             <span className={classes.chip} style={{backgroundColor: '#FF9A13'}}></span>
-            <a href={warning.url} title="services warning list">
-              {warning.unhandled} Warning services
+            <a href={warning.url} title="services warning list" className={classes.link}>
+              Warning services
+              <span className={classes.total}>{warning.unhandled}/{warning.total}</span>
             </a>
-            <span className={classes.total}> / {warning.total}</span>
           </Typography>
         </div>
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
+          <Typography variant="body1" gutterBottom>
             <span className={classes.chip} style={{backgroundColor: '#bcbdc0'}}></span>
-            <a href={unknown.url} title="services unknown list">
-              {unknown.unhandled} Unknown services
+            <a href={unknown.url} title="services unknown list" className={classes.link}>
+              Unknown services
+              <span className={classes.total}> {unknown.unhandled}/{unknown.total}</span>
             </a>
-            <span className={classes.total}> / {unknown.total}</span>
           </Typography>
         </div>
         <div className={classes.objectDetails}>
-          <Typography variant="caption" gutterBottom>
+          <Typography variant="body1" gutterBottom>
             <span className={classes.chip} style={{backgroundColor: '#88b917'}}></span>
-            <a href={ok.url} title="services ok list">
-              {ok.total} Ok services
+            <a href={ok.url} title="services ok list" className={classes.link}>
+              Ok services
+              <span className={classes.total}>{ok.total}</span>
             </a>
           </Typography>
         </div>
         {pending.total > 0 ?
           <div className={classes.objectDetails}>
-            <Typography variant="caption" gutterBottom>
+            <Typography variant="body1" gutterBottom>
               <span className={classes.chip} style={{backgroundColor: '#2AD1D4'}}></span>
-              <a href={pending.url} title="pending services list">
+              <a href={pending.url} title="pending services list" className={classes.link}>
                 {pending.total} Pending services
               </a>
             </Typography>

diff --git a/www/frontSrc/Header/TopHeader.js b/www/frontSrc/Header/TopHeader.js
@@ -42,6 +42,12 @@ const styles = theme => ({
     color: '#fff',
     backgroundColor: grey[200],
   },
+  indicatorContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'nowrap',
+    justifyContent: 'flex-end'
+  },
 })
 
 class TopHeader extends Component {
@@ -54,15 +60,9 @@ class TopHeader extends Component {
             <div style={{ gridColumnEnd: 'span 2' }}>
               <Logo />
             </div>
-            <div style={{ gridColumnEnd: 'span 3' }}>
-            </div>
-            <div style={{ gridColumnEnd: 'span 1' }}>
+            <div style={{ gridColumnEnd: 'span 8' }} className={classes.indicatorContainer}>
               <PollerObject />
-            </div>
-            <div style={{ gridColumnEnd: 'span 2' }}>
               <HostObject />
-            </div>
-            <div style={{ gridColumnEnd: 'span 2' }}>
               <ServiceObject />
             </div>
             <div style={{ gridColumnEnd: 'span 2' }}>

diff --git a/www/frontSrc/Header/TopHeaderContainer.js b/www/frontSrc/Header/TopHeaderContainer.js
@@ -55,6 +55,17 @@ const theme = createMuiTheme({
         fontSize: '11px',
       }
     },
+    MuiTypography: {
+      root: {
+        fontFamily: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif",
+      },
+      body1: {
+        fontFamily: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif",
+      },
+      body2: {
+        fontFamily: "'Open Sans', Arial, Tahoma, Helvetica, Sans-Serif",
+      },
+    },
   }
 });