feat(xo-web/xoa): product version and pkgs list (#3621)

Fixes #3560

CHANGELOG.md

@@ -29,6 +29,7 @@
 - [xo-server] Use @xen-orchestra/log for basic logging [#3555](https://github.com/vatesfr/xen-orchestra/issues/3555) (PR [#3579](https://github.com/vatesfr/xen-orchestra/pull/3579))
 - [Backup Report] Log error when job failed [#3458](https://github.com/vatesfr/xen-orchestra/issues/3458) (PR [#3593](https://github.com/vatesfr/xen-orchestra/pull/3593))
 - [Backup NG] Display logs for backup restoration [#2511](https://github.com/vatesfr/xen-orchestra/issues/2511) (PR [#3609](https://github.com/vatesfr/xen-orchestra/pull/3609))
+- [XOA] Display product version and list of all installed packages [#3560](https://github.com/vatesfr/xen-orchestra/issues/3560) (PR [#3621](https://github.com/vatesfr/xen-orchestra/pull/3621))
 
 ### Bug fixes
 

packages/xo-web/src/common/xoa-updater.js

@@ -242,6 +242,10 @@ class XoaUpdater extends EventEmitter {
     }
   }
 
+  getLocalManifest () {
+    return this._call('getLocalManifest')
+  }
+
   async register (email, password, renew = false) {
     try {
       const token = await this._call('register', { email, password, renew })

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

@@ -18,9 +18,7 @@ import { injectState, provideState } from 'reaclette'
 import { isEmpty, map, pick, some, zipObject } from 'lodash'
 import { linkState, toggleState } from 'reaclette-utils'
 import { Password } from 'form'
-import { serverVersion, subscribeBackupNgJobs, subscribeJobs } from 'xo'
-
-import pkg from '../../../../package'
+import { subscribeBackupNgJobs, subscribeJobs } from 'xo'
 
 const ansiUp = new AnsiUp()
 
@@ -86,6 +84,7 @@ const Updates = decorate([
       ...initialProxyState(),
       ...initialRegistrationState(),
       askRegisterAgain: false,
+      showPackagesList: false,
     }),
     effects: {
       async configure () {
@@ -156,6 +155,10 @@ const Updates = decorate([
         jobs !== undefined &&
         backupNgJobs !== undefined &&
         some(jobs.concat(backupNgJobs), job => job.runId !== undefined),
+      async installedPackages () {
+        const { installer, updater, npm } = await xoaUpdater.getLocalManifest()
+        return { ...installer, ...updater, ...npm }
+      },
       isDisconnected: (_, { xoaUpdaterState }) =>
         xoaUpdater === 'disconnected' || xoaUpdaterState === 'error',
       isProxyConfigEdited: state =>
@@ -173,7 +176,12 @@ const Updates = decorate([
         !exposeTrial(xoaTrialState.trial),
       isUpdaterDown: (_, { xoaTrialState }) =>
         isEmpty(xoaTrialState) || xoaTrialState.state === 'ERROR',
-      serverVersion: () => serverVersion,
+      packagesList: ({ installedPackages }) =>
+        Object.keys(installedPackages)
+          .filter(_ => _ !== 'xen-orchestra')
+          .sort()
+          .map(name => `- ${name}: ${installedPackages[name]}`)
+          .join('\n'),
     },
   }),
   injectState,
@@ -197,9 +205,26 @@ const Updates = decorate([
             </CardHeader>
             <CardBlock>
               <p>
-                {_('currentVersion')} {`xo-server ${state.serverVersion}`} /{' '}
-                {`xo-web ${pkg.version}`}
+                {_('currentVersion')}{' '}
+                {defined(
+                  () => state.installedPackages['xen-orchestra'],
+                  'unknown'
+                )}{' '}
+                {state.installedPackages !== undefined && (
+                  <Button
+                    name='showPackagesList'
+                    onClick={effects.toggleState}
+                    size='small'
+                  >
+                    <Icon icon={state.showPackagesList ? 'minus' : 'plus'} />
+                  </Button>
+                )}
               </p>
+              {state.showPackagesList && (
+                <p>
+                  <pre>{state.packagesList}</pre>
+                </p>
+              )}
               {state.isDisconnected && (
                 <p>
                   <a href='https://xen-orchestra.com/docs/updater.html#troubleshooting'>