{map(this.props.subjects, id => {
if (state.users[id]) {
return renderXoItem(
{ type: 'user', ...state.users[id] },
{
className: 'mr-1',
}
)
}
if (state.groups[id]) {
return renderXoItem(
{ type: 'group', ...state.groups[id] },
{
className: 'mr-1',
}
)
}
return (
<span key={id} className='mr-1'>
{_('unknownResourceSetValue')}
</span>
)
})}
itemRenderer: acl => acl.object.id ? renderXoItem(acl.object) : renderXoItemFromId(acl.object),
{map(objectsSet, object => renderXoItem(object, { className: 'm-r-1' }))}
({
lastShutdownTime,
statsOverview,
vgpu,
vgpuTypes,
vm,
vmTotalDiskSpace,
}) => (
<Container>
{/* TODO: use CSS style */}
<br />
<Row className='text-xs-center'>
<Col mediumSize={3}>
<h2>
<Number
value={vm.CPUs.number}
onChange={vcpus => editVm(vm, { CPUs: vcpus })}
/>
x <Icon icon='cpu' size='lg' />
</h2>
<BlockLink to={`/vms/${vm.id}/stats`}>
{statsOverview && <CpuSparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<h2 className='form-inline'>
<Size
value={defined(vm.memory.dynamic[1], null)}
onChange={memory => editVm(vm, { memory })}
/>
<span>
<Icon icon='memory' size='lg' />
</span>
</h2>
<BlockLink to={`/vms/${vm.id}/stats`}>
{statsOverview && <MemorySparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<BlockLink to={`/vms/${vm.id}/network`}>
<h2>
{vm.VIFs.length}x <Icon icon='network' size='lg' />
</h2>
</BlockLink>
<BlockLink to={`/vms/${vm.id}/stats`}>
{statsOverview && <NetworkSparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<BlockLink to={`/vms/${vm.id}/disks`}>
<h2>
{formatSize(vmTotalDiskSpace)} <Icon icon='disk' size='lg' />
</h2>
</BlockLink>
<BlockLink to={`/vms/${vm.id}/stats`}>
{statsOverview && <XvdSparkLines data={statsOverview} />}
</BlockLink>
</Col>
</Row>
{/* TODO: use CSS style */}
<br />
<Row className='text-xs-center'>
<Col mediumSize={3}>
{vm.power_state === 'Running' ? (
<div>
<p className='text-xs-center'>
{_('started', {
ago: <FormattedRelative value={vm.startTime * 1000} />,
})}
</p>
</div>
) : (
<p className='text-xs-center'>
{lastShutdownTime
? _('vmHaltedSince', {
ago: <FormattedRelative value={lastShutdownTime * 1000} />,
})
: _('vmNotRunning')}
</p>
)}
</Col>
<Col mediumSize={3}>
<p>{_(getVirtualizationModeLabel(vm))}</p>
{vgpu !== undefined && (
<p>{renderXoItem(vgpuTypes[vgpu.vgpuType])}</p>
)}
</Col>
<Col mediumSize={3}>
<BlockLink to={`/vms/${vm.id}/network`}>
{vm.addresses && vm.addresses['0/ip'] ? (
<Copiable tagName='p'>{vm.addresses['0/ip']}</Copiable>
) : (
<p>{_('noIpv4Record')}</p>
)}
</BlockLink>
</Col>
<Col mediumSize={3}>
<BlockLink to={`/vms/${vm.id}/advanced`}>
<Tooltip
content={vm.os_version ? vm.os_version.name : _('unknownOsName')}
>
<h1>
<Icon
className='text-info'
icon={
vm.os_version &&
vm.os_version.distro &&
osFamily(vm.os_version.distro)
}
/>
</h1>
</Tooltip>
</BlockLink>
</Col>
</Row>
{!vm.xenTools && vm.power_state === 'Running' && (
<Row className='text-xs-center'>
<Col>
<Icon icon='error' />
<em> {_('noToolsDetected')}.</em>
</Col>
</Row>
)}
{/* TODO: use CSS style */}
<br />
<Row>
<Col>
<h2 className='text-xs-center'>
<HomeTags
type='VM'
labels={vm.tags}
onDelete={tag => removeTag(vm.id, tag)}
onAdd={tag => addTag(vm.id, tag)}
/>
</h2>
</Col>
</Row>
{isEmpty(vm.current_operations) ? null : (
<Row className='text-xs-center'>
<Col>
<h4>
{_('vmCurrentStatus')} {map(vm.current_operations)[0]}
</h4>
</Col>
</Row>
)}
</Container>
)