feat(xo-web): unlock basic stats for all editions (#4172)

Fixes #4166

CHANGELOG.md

@@ -8,6 +8,7 @@
 - [Metadata backup] Detailed logs [#4005](https://github.com/vatesfr/xen-orchestra/issues/4005) (PR [#4014](https://github.com/vatesfr/xen-orchestra/pull/4014))
 - [Backup reports] Support metadata backups (PR [#4084](https://github.com/vatesfr/xen-orchestra/pull/4084))
 - [VM migration] Auto select default SR and collapse optional actions [#3326](https://github.com/vatesfr/xen-orchestra/issues/3326) (PR [#4121](https://github.com/vatesfr/xen-orchestra/pull/4121))
+- Unlock basic stats on all editions [#4166](https://github.com/vatesfr/xen-orchestra/issues/4166) (PR [#4172](https://github.com/vatesfr/xen-orchestra/pull/4172))
 
 ### Enhancements
 

packages/xo-web/src/xo-app/host/tab-stats.js

@@ -3,7 +3,6 @@ import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
 import Tooltip from 'tooltip'
-import Upgrade from 'xoa-upgrade'
 import { Container, Row, Col } from 'grid'
 import { Toggle } from 'form'
 import { fetchHostStats } from 'xo'
@@ -105,7 +104,7 @@ export default class HostStats extends Component {
 
     return !stats ? (
       <p>No stats.</p>
-    ) : process.env.XOA_PLAN > 2 ? (
+    ) : (
       <Container>
         <Row>
           <Col mediumSize={5}>
@@ -179,10 +178,6 @@ export default class HostStats extends Component {
           </Col>
         </Row>
       </Container>
-    ) : (
-      <Container>
-        <Upgrade place='hostStats' available={3} />
-      </Container>
     )
   }
 }

packages/xo-web/src/xo-app/pool/tab-stats.js

@@ -4,7 +4,6 @@ import getEventValue from 'get-event-value'
 import Icon from 'icon'
 import React from 'react'
 import Tooltip from 'tooltip'
-import Upgrade from 'xoa-upgrade'
 import { Container, Row, Col } from 'grid'
 import { Toggle } from 'form'
 import { fetchHostStats } from 'xo'
@@ -96,100 +95,91 @@ export default class PoolStats extends Component {
       useCombinedValues,
     } = this.state
 
-    return process.env.XOA_PLAN > 2 ? (
-      stats ? (
-        <Container>
-          <Row>
-            <Col mediumSize={5}>
-              <div className='form-group'>
-                <Tooltip content={_('useStackedValuesOnStats')}>
-                  <Toggle
-                    value={useCombinedValues}
-                    onChange={this.linkState('useCombinedValues')}
-                  />
-                </Tooltip>
-              </div>
-            </Col>
-            <Col mediumSize={1}>
-              {selectStatsLoading && (
-                <div className='text-xs-right'>
-                  <Icon icon='loading' size={2} />
-                </div>
-              )}
-            </Col>
-            <Col mediumSize={6}>
-              <div className='btn-tab'>
-                <select
-                  className='form-control'
-                  onChange={this._handleSelectStats}
-                  defaultValue={granularity}
-                >
-                  {_('statLastTenMinutes', message => (
-                    <option value='seconds'>{message}</option>
-                  ))}
-                  {_('statLastTwoHours', message => (
-                    <option value='minutes'>{message}</option>
-                  ))}
-                  {_('statLastWeek', message => (
-                    <option value='hours'>{message}</option>
-                  ))}
-                  {_('statLastYear', message => (
-                    <option value='days'>{message}</option>
-                  ))}
-                </select>
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='cpu' /> {_('statsCpu')}
-              </h5>
-              <PoolCpuLineChart addSumSeries={useCombinedValues} data={stats} />
-            </Col>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='memory' /> {_('statsMemory')}
-              </h5>
-              <PoolMemoryLineChart
-                addSumSeries={useCombinedValues}
-                data={stats}
-              />
-            </Col>
-          </Row>
-          <br />
-          <hr />
-          <Row>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='network' /> {_('statsNetwork')}
-              </h5>
-              {/* key: workaround that unmounts and re-mounts the chart to make sure the legend updates when toggling "stacked values"
-              FIXME: remove key prop once this issue is fixed: https://github.com/CodeYellowBV/chartist-plugin-legend/issues/5 */}
-              <PoolPifLineChart
-                key={useCombinedValues ? 'stacked' : 'unstacked'}
-                addSumSeries={useCombinedValues}
-                data={stats}
-              />
-            </Col>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='disk' /> {_('statLoad')}
-              </h5>
-              <PoolLoadLineChart
-                addSumSeries={useCombinedValues}
-                data={stats}
-              />
-            </Col>
-          </Row>
-        </Container>
-      ) : (
-        <p>{_('poolNoStats')}</p>
-      )
-    ) : (
+    return stats ? (
       <Container>
-        <Upgrade place='hostStats' available={3} />
+        <Row>
+          <Col mediumSize={5}>
+            <div className='form-group'>
+              <Tooltip content={_('useStackedValuesOnStats')}>
+                <Toggle
+                  value={useCombinedValues}
+                  onChange={this.linkState('useCombinedValues')}
+                />
+              </Tooltip>
+            </div>
+          </Col>
+          <Col mediumSize={1}>
+            {selectStatsLoading && (
+              <div className='text-xs-right'>
+                <Icon icon='loading' size={2} />
+              </div>
+            )}
+          </Col>
+          <Col mediumSize={6}>
+            <div className='btn-tab'>
+              <select
+                className='form-control'
+                onChange={this._handleSelectStats}
+                defaultValue={granularity}
+              >
+                {_('statLastTenMinutes', message => (
+                  <option value='seconds'>{message}</option>
+                ))}
+                {_('statLastTwoHours', message => (
+                  <option value='minutes'>{message}</option>
+                ))}
+                {_('statLastWeek', message => (
+                  <option value='hours'>{message}</option>
+                ))}
+                {_('statLastYear', message => (
+                  <option value='days'>{message}</option>
+                ))}
+              </select>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='cpu' /> {_('statsCpu')}
+            </h5>
+            <PoolCpuLineChart addSumSeries={useCombinedValues} data={stats} />
+          </Col>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='memory' /> {_('statsMemory')}
+            </h5>
+            <PoolMemoryLineChart
+              addSumSeries={useCombinedValues}
+              data={stats}
+            />
+          </Col>
+        </Row>
+        <br />
+        <hr />
+        <Row>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='network' /> {_('statsNetwork')}
+            </h5>
+            {/* key: workaround that unmounts and re-mounts the chart to make sure the legend updates when toggling "stacked values"
+              FIXME: remove key prop once this issue is fixed: https://github.com/CodeYellowBV/chartist-plugin-legend/issues/5 */}
+            <PoolPifLineChart
+              key={useCombinedValues ? 'stacked' : 'unstacked'}
+              addSumSeries={useCombinedValues}
+              data={stats}
+            />
+          </Col>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='disk' /> {_('statLoad')}
+            </h5>
+            <PoolLoadLineChart addSumSeries={useCombinedValues} data={stats} />
+          </Col>
+        </Row>
       </Container>
+    ) : (
+      <p>{_('poolNoStats')}</p>
     )
   }
 }

packages/xo-web/src/xo-app/sr/tab-stats.js

@@ -3,7 +3,6 @@ import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
 import Tooltip from 'tooltip'
-import Upgrade from 'xoa-upgrade'
 import { Container, Row, Col } from 'grid'
 import { fetchSrStats } from 'xo'
 import { get } from 'lodash'
@@ -85,81 +84,79 @@ export default class SrStats extends Component {
     return data === undefined ? (
       <span>{_('srNoStats')}</span>
     ) : (
-      <Upgrade place='srStats' available={3}>
-        <Container>
-          <Row>
-            <Col mediumSize={5}>
-              <div className='form-group'>
-                <Tooltip content={_('useStackedValuesOnStats')}>
-                  <Toggle
-                    value={useCombinedValues}
-                    onChange={this.linkState('useCombinedValues')}
-                  />
-                </Tooltip>
+      <Container>
+        <Row>
+          <Col mediumSize={5}>
+            <div className='form-group'>
+              <Tooltip content={_('useStackedValuesOnStats')}>
+                <Toggle
+                  value={useCombinedValues}
+                  onChange={this.linkState('useCombinedValues')}
+                />
+              </Tooltip>
+            </div>
+          </Col>
+          <Col mediumSize={1}>
+            {selectStatsLoading && (
+              <div className='text-xs-right'>
+                <Icon icon='loading' size={2} />
               </div>
-            </Col>
-            <Col mediumSize={1}>
-              {selectStatsLoading && (
-                <div className='text-xs-right'>
-                  <Icon icon='loading' size={2} />
-                </div>
-              )}
-            </Col>
-            <Col mediumSize={6}>
-              <div className='btn-tab'>
-                <select
-                  className='form-control'
-                  onChange={this._onGranularityChange}
-                  defaultValue={granularity}
-                >
-                  {_('statLastTenMinutes', message => (
-                    <option value='seconds'>{message}</option>
-                  ))}
-                  {_('statLastTwoHours', message => (
-                    <option value='minutes'>{message}</option>
-                  ))}
-                  {_('statLastWeek', message => (
-                    <option value='hours'>{message}</option>
-                  ))}
-                  {_('statLastYear', message => (
-                    <option value='days'>{message}</option>
-                  ))}
-                </select>
-              </div>
-            </Col>
-          </Row>
-          <Row>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='iops' size={1} /> {_('statsIops')}
-              </h5>
-              <IopsLineChart addSumSeries={useCombinedValues} data={data} />
-            </Col>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='disk' size={1} /> {_('statsIoThroughput')}
-              </h5>
-              <IoThroughputChart addSumSeries={useCombinedValues} data={data} />
-            </Col>
-          </Row>
-          <br />
-          <hr />
-          <Row>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='latency' size={1} /> {_('statsLatency')}
-              </h5>
-              <LatencyChart addSumSeries={useCombinedValues} data={data} />
-            </Col>
-            <Col mediumSize={6}>
-              <h5 className='text-xs-center'>
-                <Icon icon='iowait' size={1} /> {_('statsIowait')}
-              </h5>
-              <IowaitChart addSumSeries={useCombinedValues} data={data} />
-            </Col>
-          </Row>
-        </Container>
-      </Upgrade>
+            )}
+          </Col>
+          <Col mediumSize={6}>
+            <div className='btn-tab'>
+              <select
+                className='form-control'
+                onChange={this._onGranularityChange}
+                defaultValue={granularity}
+              >
+                {_('statLastTenMinutes', message => (
+                  <option value='seconds'>{message}</option>
+                ))}
+                {_('statLastTwoHours', message => (
+                  <option value='minutes'>{message}</option>
+                ))}
+                {_('statLastWeek', message => (
+                  <option value='hours'>{message}</option>
+                ))}
+                {_('statLastYear', message => (
+                  <option value='days'>{message}</option>
+                ))}
+              </select>
+            </div>
+          </Col>
+        </Row>
+        <Row>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='iops' size={1} /> {_('statsIops')}
+            </h5>
+            <IopsLineChart addSumSeries={useCombinedValues} data={data} />
+          </Col>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='disk' size={1} /> {_('statsIoThroughput')}
+            </h5>
+            <IoThroughputChart addSumSeries={useCombinedValues} data={data} />
+          </Col>
+        </Row>
+        <br />
+        <hr />
+        <Row>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='latency' size={1} /> {_('statsLatency')}
+            </h5>
+            <LatencyChart addSumSeries={useCombinedValues} data={data} />
+          </Col>
+          <Col mediumSize={6}>
+            <h5 className='text-xs-center'>
+              <Icon icon='iowait' size={1} /> {_('statsIowait')}
+            </h5>
+            <IowaitChart addSumSeries={useCombinedValues} data={data} />
+          </Col>
+        </Row>
+      </Container>
     )
   }
 }

packages/xo-web/src/xo-app/vm/tab-stats.js

@@ -3,7 +3,6 @@ import Component from 'base-component'
 import Icon from 'icon'
 import React from 'react'
 import Tooltip from 'tooltip'
-import Upgrade from 'xoa-upgrade'
 import { fetchVmStats } from 'xo'
 import { Toggle } from 'form'
 import { injectIntl } from 'react-intl'
@@ -105,7 +104,7 @@ export default injectIntl(
 
       return !stats ? (
         <p>No stats.</p>
-      ) : process.env.XOA_PLAN > 2 ? (
+      ) : (
         <Container>
           <Row>
             <Col mediumSize={6}>
@@ -177,10 +176,6 @@ export default injectIntl(
             </Col>
           </Row>
         </Container>
-      ) : (
-        <Container>
-          <Upgrade place='vmStats' available={3} />
-        </Container>
       )
     }
   }