feat(xo-web/VM): add tooltip for VM status icon (#3765)

Fixes #3749

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [Health, VM/disks] Display SR's container [#3021](https://github.com/vatesfr/xen-orchestra/issues/3021) (PRs [#3747](https://github.com/vatesfr/xen-orchestra/pull/3747), [#3751](https://github.com/vatesfr/xen-orchestra/pull/3751))
 - [Servers] Auto-connect to ejected host [#2238](https://github.com/vatesfr/xen-orchestra/issues/2238) (PR [#3738](https://github.com/vatesfr/xen-orchestra/pull/3738))
 - [Backup NG] Add "XOSAN" in excluded tags by default [#2128](https://github.com/vatesfr/xen-orchestra/issues/3563) (PR [#3559](https://github.com/vatesfr/xen-orchestra/pull/3563))
+- [VM] add tooltip for VM status icon [#3749](https://github.com/vatesfr/xen-orchestra/issues/3749) (PR [#3765](https://github.com/vatesfr/xen-orchestra/pull/3765))
 
 ### Bug fixes
 

packages/xo-web/src/xo-app/vm/index.js

@@ -3,6 +3,7 @@ import BaseComponent from 'base-component'
 import Copiable from 'copiable'
 import Icon from 'icon'
 import Link from 'link'
+import Tooltip from 'tooltip'
 import { NavLink, NavTabs } from 'nav'
 import Page from '../page'
 import PropTypes from 'prop-types'
@@ -60,7 +61,10 @@ import TabAdvanced from './tab-advanced'
     .sort()
   const getVdis = createGetVmDisks(getVm)
   const getSrs = createGetObjectsOfType('SR').pick(
-    createSelector(getVdis, vdis => map(vdis, '$SR'))
+    createSelector(
+      getVdis,
+      vdis => map(vdis, '$SR')
+    )
   )
 
   const getVmTotalDiskSpace = createSumBy(createGetVmDisks(getVm), 'size')
@@ -92,7 +96,7 @@ export default class Vm extends BaseComponent {
     router: PropTypes.object,
   }
 
-  loop (vm = this.props.vm) {
+  loop(vm = this.props.vm) {
     if (this.cancel) {
       this.cancel()
     }
@@ -125,15 +129,15 @@ export default class Vm extends BaseComponent {
   }
   loop = ::this.loop
 
-  componentWillMount () {
+  componentWillMount() {
     this.loop()
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     clearTimeout(this.timeout)
   }
 
-  componentWillReceiveProps (props) {
+  componentWillReceiveProps(props) {
     const vmCur = this.props.vm
     const vmNext = props.vm
 
@@ -164,21 +168,22 @@ export default class Vm extends BaseComponent {
 
   _selectOptionRenderer = option => option.name_label
 
-  header () {
+  header() {
     const { vm, container, pool, hosts } = this.props
     if (!vm) {
       return <Icon icon='loading' />
     }
+    const state = isEmpty(vm.current_operations)
+      ? vm.power_state.toLowerCase()
+      : 'busy'
     return (
       <Container>
         <Row>
           <Col mediumSize={6} className='header-title'>
             <h2>
-              {isEmpty(vm.current_operations) ? (
-                <Icon icon={`vm-${vm.power_state.toLowerCase()}`} />
-              ) : (
-                <Icon icon='vm-busy' />
-              )}{' '}
+              <Tooltip content={state}>
+                <Icon icon={`vm-${state}`} />
+              </Tooltip>{' '}
               <Text value={vm.name_label} onChange={this._setNameLabel} />
             </h2>{' '}
             <Copiable tagName='pre' className='text-muted mb-0'>
@@ -263,7 +268,7 @@ export default class Vm extends BaseComponent {
   _toggleHeader = () =>
     this.setState({ collapsedHeader: !this.state.collapsedHeader })
 
-  render () {
+  render() {
     const { container, vm } = this.props
     if (!vm) {
       return <h1>{_('statusLoading')}</h1>