feat(xo-web/licenses): display XOSTOR licenses

packages/xo-web/src/common/intl/messages.js

@@ -2505,6 +2505,7 @@ const messages = {
   xostorDisksDropdownLabel: '({nDisks, number} disk{nDisks, plural, one {} other {s}}) {hostname}',
   xostorFailedVgAlreadyExists:
     "Formatting disks failed because a VG group named 'linstor_group' already exists on the hosts. Do you want to delete these VG groups?",
+  xostorMultipleLicenses: 'This proxy has more than 1 license!',
   xostorPackagesWillBeInstalled: '"xcp-ng-release-linstor" and "xcp-ng-linstor" will be installed on each host',
   xostorReplicationWarning: 'If a disk dies, you will lose data',
 

packages/xo-web/src/common/select-license.js

@@ -9,7 +9,7 @@ import map from 'lodash/map.js'
 import { renderXoItemFromId } from './render-xo-item'
 
 const LicenseOptions = ({ license, formatDate }) => {
-  const productId = license.productId.split('-')[1]
+  const productId = license.productId.startsWith('xostor') ? license.productId : license.productId.split('-')[1]
   return (
     <option value={license.id}>
       <span>

packages/xo-web/src/xo-app/xoa/licenses/index.js

@@ -18,7 +18,7 @@ import { get } from '@xen-orchestra/defined'
 import { getLicenses, selfBindLicense, subscribePlugins, subscribeProxies, subscribeSelfLicenses } from 'xo'
 
 import Proxies from './proxies'
-import Xosan from './xosan'
+import Xostor from './xostor'
 
 // -----------------------------------------------------------------------------
 
@@ -196,7 +196,7 @@ export default class Licenses extends Component {
 
     return getLicenses()
       .then(licenses => {
-        const { proxy, xcpng, xoa, xosan } = groupBy(licenses, license => {
+        const { proxy, xcpng, xoa, xosan, xostor } = groupBy(licenses, license => {
           for (const productType of license.productTypes) {
             if (productType === 'xo') {
               return 'xoa'
@@ -210,6 +210,9 @@ export default class Licenses extends Component {
             if (productType === 'xcpng') {
               return 'xcpng'
             }
+            if (productType === 'xostor') {
+              return 'xostor'
+            }
           }
           return 'other'
         })
@@ -219,6 +222,7 @@ export default class Licenses extends Component {
             xcpng,
             xoa,
             xosan,
+            xostor,
           },
         })
       })
@@ -300,6 +304,21 @@ export default class Licenses extends Component {
         }
       })
 
+      // --- XOSTOR ---
+      forEach(licenses.xostor, license => {
+        // When `expires` is undefined, the license isn't expired
+        if (!(license.expires < now)) {
+          products.push({
+            buyer: license.buyer,
+            expires: license.expires,
+            id: license.id,
+            product: 'XOSTOR',
+            type: 'xostor',
+            srId: license.boundObjectId,
+          })
+        }
+      })
+
       return products
     }
   )
@@ -377,18 +396,8 @@ export default class Licenses extends Component {
         </Row>
         <Row>
           <Col>
-            <h2>
-              XOSAN
-              <a
-                className='btn btn-secondary ml-1'
-                href='https://xen-orchestra.com/#!/xosan-home'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                <Icon icon='bug' /> {_('productSupport')}
-              </a>
-            </h2>
-            <Xosan xosanLicenses={this.state.licenses.xosan} updateLicenses={this._updateLicenses} />
+            <h2>XOSTOR</h2>
+            <Xostor xostorLicenses={this.state.licenses.xostor} updateLicenses={this._updateLicenses} />
           </Col>
         </Row>
         <Row>

packages/xo-web/src/xo-app/xoa/licenses/xostor.js

@@ -0,0 +1,108 @@
+import _ from 'intl'
+import ActionButton from 'action-button'
+import Component from 'base-component'
+import decorate from 'apply-decorators'
+import Icon from 'icon'
+import React from 'react'
+import SelectLicense from 'select-license'
+import SortedTable from 'sorted-table'
+import Tooltip from 'tooltip'
+import { bindLicense } from 'xo'
+import { connectStore } from 'utils'
+import { createGetObjectsOfType } from 'selectors'
+import { groupBy } from 'lodash'
+import { injectState, provideState } from 'reaclette'
+import { Pool, Sr } from 'render-xo-item'
+
+class XostorLicensesForm extends Component {
+  state = {
+    licenseId: 'none',
+  }
+
+  onChangeLicense = event => {
+    this.setState({ licenseId: event.target.value })
+  }
+
+  bind = () => {
+    const { item, userData } = this.props
+    return bindLicense(this.state.licenseId, item.uuid).then(userData.updateLicenses)
+  }
+
+  render() {
+    const { item, userData } = this.props
+    const { licenseId } = this.state
+    const licenses = userData.licensesByXostorUuid[item.id]
+
+    // Xostor bound to multiple licenses
+    if (licenses?.length > 1) {
+      return (
+        <div>
+          <span>{licenses.map(license => license.id.slice(-4)).join(',')}</span>{' '}
+          <Tooltip content={_('xostorMultipleLicenses')}>
+            <Icon color='text-danger' icon='alarm' />
+          </Tooltip>
+        </div>
+      )
+    }
+
+    const license = licenses?.[0]
+    return license !== undefined ? (
+      <span>{license.id.slice(-4)}</span>
+    ) : (
+      <form className='form-inline'>
+        <SelectLicense onChange={this.onChangeLicense} productType='xostor' />
+        <ActionButton
+          btnStyle='primary'
+          className='ml-1'
+          disabled={licenseId === 'none'}
+          handler={this.bind}
+          handlerParam={licenseId}
+          icon='connect'
+        >
+          {_('bindLicense')}
+        </ActionButton>
+      </form>
+    )
+  }
+}
+
+const INDIVIDUAL_ACTIONS = [
+  {
+    label: _('productSupport'),
+    icon: 'support',
+    handler: () => window.open('https://xen-orchestra.com'),
+  },
+]
+
+const COLUMNS = [
+  {
+    default: true,
+    name: _('name'),
+    itemRenderer: sr => <Sr id={sr.id} link container={false} />,
+    sortCriteria: 'name_label',
+  },
+  { name: _('pool'), itemRenderer: sr => <Pool id={sr.$pool} link /> },
+  { name: _('license'), component: XostorLicensesForm },
+]
+const Xostor = decorate([
+  connectStore(() => ({
+    xostorSrs: createGetObjectsOfType('SR').filter([({ SR_type }) => SR_type === 'linstor']),
+  })),
+  provideState({
+    computed: {
+      licensesByXostorUuid: (state, { xostorLicenses }) => groupBy(xostorLicenses, 'boundObjectId'),
+    },
+  }),
+  injectState,
+  ({ state, xostorSrs, updateLicenses }) => (
+    <SortedTable
+      collection={xostorSrs}
+      columns={COLUMNS}
+      data-updateLicenses={updateLicenses}
+      data-licensesByXostorUuid={state.licensesByXostorUuid}
+      individualActions={INDIVIDUAL_ACTIONS}
+    />
+  ),
+])
+
+export default Xostor