Show tooltip to tell the meaning of the item color

packages/frontend/package.json

@@ -117,6 +117,7 @@
     "react-redux": "^4.0.0",
     "react-router": "^2.2.0",
     "react-router-redux": "^4.0.0",
+    "react-tooltip": "^3.2.10",
     "redux": "^3.0.0",
     "redux-thunk": "^2.0.0",
     "rimraf": "^2.5.1",

packages/frontend/src/components/adminPage/Components/Components.js

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import ComponentDialog, { componentDialogType } from 'components/adminPage/ComponentDialog'
 import FoolproofDialog from 'components/adminPage/FoolproofDialog'
 import Button from 'components/common/Button'
+import Tooltip from 'components/common/Tooltip'
 import ErrorMessage from 'components/common/ErrorMessage'
 import { getComponentColor } from 'utils/status'
 import { innerDialogID } from 'utils/dialog'
@@ -73,7 +74,8 @@ export default class Components extends React.Component {
       <li key={component.componentID} className='mdl-list__item mdl-list__item--two-line mdl-shadow--2dp'>
         <span className='mdl-list__item-primary-content'>
           <i className={classnames(classes.icon, 'material-icons', 'mdl-list__item-avatar')}
-            style={{color: statusColor}}>web</i>
+            style={{color: statusColor}} data-tip={component.status}>web</i>
+          <Tooltip />
           <span>{component.name}</span>
           <span className='mdl-list__item-sub-title'>{component.description}</span>
         </span>

packages/frontend/src/components/adminPage/IncidentItem/index.js

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import classnames from 'classnames'
 import Button from 'components/common/Button'
+import Tooltip from 'components/common/Tooltip'
 import { getDateTimeFormat } from 'utils/datetime'
 import classes from './IncidentItem.scss'
 
@@ -32,7 +33,8 @@ export default class IncidentItem extends React.Component {
       <li className='mdl-list__item mdl-list__item--two-line mdl-shadow--2dp'>
         <span className='mdl-list__item-primary-content'>
           <i className={classnames(classes.icon, 'material-icons', 'mdl-list__item-avatar')}
-            style={{ color: statusColor }}>brightness_1</i>
+            style={{ color: statusColor }} data-tip={incident.status}>report</i>
+          <Tooltip />
           <span>{incident.name}</span>
           <span className='mdl-list__item-sub-title'>
             updated at {getDateTimeFormat(incident.updatedAt)}

packages/frontend/src/components/adminPage/Metrics/Metrics.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import classnames from 'classnames'
 import Button from 'components/common/Button'
 import ErrorMessage from 'components/common/ErrorMessage'
+import Tooltip from 'components/common/Tooltip'
 import MetricDialog, { metricDialogType } from 'components/adminPage/MetricDialog'
 import MetricPreviewDialog from 'components/adminPage/MetricPreviewDialog'
 import FoolproofDialog from 'components/adminPage/FoolproofDialog'
@@ -79,7 +80,8 @@ export default class Metrics extends React.Component {
       <li key={metric.metricID} className='mdl-list__item mdl-list__item--two-line mdl-shadow--2dp'>
         <span className='mdl-list__item-primary-content'>
           <i className={classnames(classes.icon, 'material-icons', 'mdl-list__item-avatar')}
-            style={{color: statusColor}}>insert_chart</i>
+            style={{color: statusColor}} data-tip={metric.status}>insert_chart</i>
+          <Tooltip />
           <span>{metric.title}</span>
           <span className='mdl-list__item-sub-title'>{metric.description}</span>
         </span>

packages/frontend/src/components/common/Tooltip/Tooltip.scss

@@ -0,0 +1,8 @@
+.tooltip {
+  background-color: #777 !important;
+  padding: 5px 10px !important;
+}
+
+.tooltip::after {
+  border-top-color: #777 !important;
+}

packages/frontend/src/components/common/Tooltip/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactTooltip from 'react-tooltip'
+import classes from './Tooltip.scss'
+
+export default class Tooltip extends React.Component {
+  render () {
+    return (<ReactTooltip effect='solid' offset={{top: -10}} className={classes.tooltip} />)
+  }
+}