feat(xo-web/VM): display creator email and template name

CHANGELOG.unreleased.md

@@ -7,6 +7,8 @@
 
 > Users must be able to say: “Nice enhancement, I'm eager to test it”
 
+- [VM/General] Displays the template name used to create the VM, as well as the email address of the VM creator for admin users (PR [#6771](https://github.com/vatesfr/xen-orchestra/pull/6771))
+
 ### Bug fixes
 
 > Users must be able to say: “I had this issue, happy to know it's fixed”
@@ -28,5 +30,6 @@
 <!--packages-start-->
 
 - xo-server minor
+- xo-web minor
 
 <!--packages-end-->

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

@@ -1120,11 +1120,12 @@ const messages = {
   noIpv4Record: 'No IPv4 record',
   noIpRecord: 'No IP record',
   started: 'Started {ago}',
-  created: 'Created on {date}',
   paraVirtualizedMode: 'Paravirtualization (PV)',
   hardwareVirtualizedMode: 'Hardware virtualization (HVM)',
   hvmModeWithPvDriversEnabled: 'Hardware virtualization with paravirtualization drivers enabled (PVHVM)',
   pvInPvhMode: 'PV inside a PVH container (PV in PVH)',
+  vmCreatedAdmin: 'Created by {user}\non {date}\nwith template {template}',
+  vmCreatedNonAdmin: 'Created on {date}\nwith template {template}',
   windowsUpdateTools: 'Manage Citrix PV drivers via Windows Update',
   windowsToolsModalTitle: 'Windows Update Tools',
   windowsToolsModalMessage:

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

@@ -914,10 +914,6 @@ export default class TabAdvanced extends Component {
             <h3>{_('miscLabel')}</h3>
             <table className='table table-hover'>
               <tbody>
-                <tr>
-                  <th>{_('originalTemplate')}</th>
-                  <td>{vm.other.base_template_name ? vm.other.base_template_name : _('unknownOriginalTemplate')}</td>
-                </tr>
                 <tr>
                   <th>{_('resourceSet')}</th>
                   <td>

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

@@ -7,9 +7,9 @@ import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 import React from 'react'
 import HomeTags from 'home-tags'
-import renderXoItem from 'render-xo-item'
+import renderXoItem, { VmTemplate } from 'render-xo-item'
 import Tooltip from 'tooltip'
-import { addTag, editVm, removeTag } from 'xo'
+import { addTag, editVm, removeTag, subscribeUsers } from 'xo'
 import { BlockLink } from 'link'
 import { FormattedRelative, FormattedDate } from 'react-intl'
 import { Container, Row, Col } from 'grid'
@@ -20,10 +20,12 @@ import {
   createGetVmLastShutdownTime,
   createSelector,
   getResolvedPendingTasks,
+  isAdmin,
 } from 'selectors'
-import { connectStore, formatSizeShort, getVirtualizationModeLabel, osFamily } from 'utils'
+import { addSubscriptions, connectStore, formatSizeShort, getVirtualizationModeLabel, osFamily } from 'utils'
 import { CpuSparkLines, MemorySparkLines, NetworkSparkLines, XvdSparkLines } from 'xo-sparklines'
 import { injectState, provideState } from 'reaclette'
+import { find } from 'lodash'
 
 const GuestToolsDetection = ({ vm }) => {
   if (vm.power_state !== 'Running' || vm.pvDriversDetected === undefined) {
@@ -93,13 +95,25 @@ const GeneralTab = decorate([
     )
 
     return (state, props) => ({
+      isAdmin: isAdmin(state, props),
       lastShutdownTime: createGetVmLastShutdownTime()(state, props),
       // true: useResourceSet to bypass permissions
       resolvedPendingTasks: getResolvedPendingTasks(state, props, true),
       vgpu: getAttachedVgpu(state, props),
       vgpuTypes: getVgpuTypes(state, props),
+      vmTemplate: createGetObjectsOfType('VM-template').find(
+        (_, { pool, vm }) =>
+          template =>
+            template.$poolId === pool.id && template.uuid === vm.creation?.template
+      )(state, props),
     })
   }),
+  addSubscriptions(
+    ({ isAdmin, vm }) =>
+      isAdmin && {
+        vmCreator: cb => subscribeUsers(users => cb(find(users, user => user.id === vm.creation?.user))),
+      }
+  ),
   provideState({
     computed: {
       vmResolvedPendingTasks: (_, { resolvedPendingTasks, vm }) => {
@@ -109,7 +123,18 @@ const GeneralTab = decorate([
     },
   }),
   injectState,
-  ({ state: { vmResolvedPendingTasks }, lastShutdownTime, statsOverview, vgpu, vgpuTypes, vm, vmTotalDiskSpace }) => {
+  ({
+    isAdmin,
+    state: { vmResolvedPendingTasks },
+    lastShutdownTime,
+    statsOverview,
+    vgpu,
+    vgpuTypes,
+    vm,
+    vmCreator,
+    vmTemplate,
+    vmTotalDiskSpace,
+  }) => {
     const {
       CPUs: cpus,
       id,
@@ -122,6 +147,22 @@ const GeneralTab = decorate([
       tags,
       VIFs: vifs,
     } = vm
+
+    const vmCreatedStyles = {
+      whiteSpace: 'pre-line',
+    }
+    const vmCreatedI18nArgs = {
+      user: vmCreator?.email ?? _('unknown'),
+      date:
+        installTime !== null ? (
+          <FormattedDate day='2-digit' month='long' value={installTime * 1000} year='numeric' />
+        ) : (
+          _('unknown')
+        ),
+      template:
+        vmTemplate !== undefined ? <VmTemplate id={vmTemplate.id} /> : vm.other.base_template_name ?? _('unknown'),
+    }
+
     return (
       <Container>
         {/* TODO: use CSS style */}
@@ -165,13 +206,7 @@ const GeneralTab = decorate([
         <br />
         <Row className='text-xs-center'>
           <Col mediumSize={3}>
-            {installTime !== null && (
-              <div className='text-xs-center'>
-                {_('created', {
-                  date: <FormattedDate day='2-digit' month='long' value={installTime * 1000} year='numeric' />,
-                })}
-              </div>
-            )}
+            <p style={vmCreatedStyles}>{_(isAdmin ? 'vmCreatedAdmin' : 'vmCreatedNonAdmin', vmCreatedI18nArgs)}</p>
             {powerState === 'Running' || powerState === 'Paused' ? (
               <div>
                 <p className='text-xs-center'>