{map(vms, vm => (
<UsageElement
tooltip={`${vm.name_label} (${formatSize(vm.memory.size)})`}
key={vm.id}
value={vm.memory.size}
href={`#/vms/${vm.id}`}
/>
))}
const VmTask = ({ children, restartVmJob, task }) => (
<div>
<Vm id={task.data.id} link newTab /> <TaskStateInfos status={task.status} />{' '}
{restartVmJob !== undefined && hasTaskFailed(task) && (
<ActionButton
handler={restartVmJob}
icon='run'
size='small'
tooltip={_('backupRestartVm')}
data-vm={task.data.id}
/>
)}
<Warnings warnings={task.warnings} />
{children}
<TaskStart task={task} />
<TaskEnd task={task} />
<TaskDuration task={task} />
<TaskError task={task} />
{task.transfer !== undefined && (
<div>
{_.keyValue(
_('taskTransferredDataSize'),
formatSize(task.transfer.size)
)}
<br />
{_.keyValue(
_('taskTransferredDataSpeed'),
formatSpeed(task.transfer.size, task.transfer.duration)
)}
</div>
)}
{task.merge !== undefined && (
<div>
{_.keyValue(_('taskMergedDataSize'), formatSize(task.merge.size))}
<br />
{_.keyValue(
_('taskMergedDataSpeed'),
formatSpeed(task.merge.size, task.merge.duration)
)}
</div>
)}
{task.isFull !== undefined &&
_.keyValue(_('exportType'), task.isFull ? 'full' : 'delta')}
</div>
)
{map(pbds, pbd => {
const sr = srs[pbd.SR]
return <BlockLink key={pbd.id} to={`/srs/${sr.id}/general`} tagName='tr'>
<td>
<Text value={sr.name_label} onChange={nameLabel => editSr(sr, { nameLabel })} useLongClick />
</td>
<td>{sr.SR_type}</td>
<td>{formatSize(sr.size)}</td>
<td>
{sr.size > 1 &&
<meter value={(sr.physical_usage / sr.size) * 100} min='0' max='100' optimum='40' low='80' high='90'></meter>
}
</td>
<td>
{sr.$PBDs.length > 1
? _('srShared')
: _('srNotShared')
}
</td>
<td>
{pbd.attached
? <span>
<span className='tag tag-success'>
{_('pbdStatusConnected')}
</span>
<ButtonGroup className='pull-xs-right'>
<ActionRowButton
btnStyle='default'
icon='disconnect'
handler={disconnectPbd}
handlerParam={pbd}
/>
</ButtonGroup>
</span>
: <span>
<span className='tag tag-default'>
{_('pbdStatusDisconnected')}
</span>
<ButtonGroup className='pull-xs-right'>
<ActionRowButton
btnStyle='default'
icon='connect'
handler={connectPbd}
handlerParam={pbd}
/>
<ActionRowButton
btnStyle='default'
icon='sr-forget'
handler={deletePbd}
handlerParam={pbd}
/>
</ButtonGroup>
</span>
}
</td>
</BlockLink>
})}
_renderImportStatus = () => {
const { configFile, importStatus } = this.state
switch (importStatus) {
case 'noFile':
return _('noConfigFile')
case 'selectedFile':
return (
<span>{`${configFile.name} (${formatSize(configFile.size)})`}</span>
)
case 'start':
return <Icon icon='loading' />
case 'end':
return <span className='text-success'>{_('importConfigSuccess')}</span>
case 'importError':
return <span className='text-danger'>{_('importConfigError')}</span>
}
}
const TransferMergeTask = ({ task }) => {
const size = get(() => task.result.size)
return (
<div>
<Icon icon='task' /> {task.message}{' '}
<TaskStateInfos status={task.status} />
<Warnings warnings={task.warnings} />
<TaskStart task={task} />
<TaskEnd task={task} />
<TaskDuration task={task} />
<TaskError task={task} />
{size > 0 && (
<div>
{_.keyValue(_('operationSize'), formatSize(size))}
<br />
{_.keyValue(
_('operationSpeed'),
formatSpeed(size, task.end - task.start)
)}
</div>
)}
</div>
)
}
itemRenderer: vdi => formatSize(vdi.size),
render () {
const { resourceSet } = this.props
const {
limits: {
cpus,
disk,
memory
} = {}
} = resourceSet
return (
<div className='p-b-1'>
<Collapse buttonText={resourceSet.name} className='p-b-1'>
<ul className='list-group p-b-1'>
<li className='list-group-item'>
<Subjects subjects={resourceSet.subjects} />
</li>
{map(resourceSet.objectsByType, (objectsSet, type) => (
<li key={type} className='list-group-item'>
{map(objectsSet, object => renderXoItem(object, { className: 'm-r-1' }))}
</li>
))}
</ul>
</Collapse>
{resourceSet.missingObjects.length > 0 &&
<div className='alert alert-danger' role='alert'>
<strong>{_('resourceSetMissingObjects')}</strong> {resourceSet.missingObjects.join(', ')}
</div>
}
<Row>
<Col mediumSize={4}>
<Card>
<CardHeader>
<Icon icon='cpu' /> {_('resourceSetVcpus')}
</CardHeader>
<CardBlock className='text-center'>
{cpus ? (
<div>
<ChartistGraph
data={{
labels: [ 'Available', 'Used' ],
series: [ cpus.available, cpus.total - cpus.available ]
}}
options={{ donut: true, donutWidth: 40, showLabel: false }}
type='Pie'
/>
<p className='text-xs-center'>
{_('usedResource')} {cpus.total - cpus.available} ({_('totalResource')} {cpus.total})
</p>
</div>
) : (
<p className='text-xs-center display-1'>∞</p>
)}
</CardBlock>
</Card>
</Col>
<Col mediumSize={4}>
<Card>
<CardHeader>
<Icon icon='memory' /> {_('resourceSetMemory')}
</CardHeader>
<CardBlock className='text-center'>
{memory ? (
<div>
<ChartistGraph
data={{
labels: [ 'Available', 'Used' ],
series: [ memory.available, memory.total - memory.available ]
}}
options={{ donut: true, donutWidth: 40, showLabel: false }}
type='Pie'
/>
<p className='text-xs-center'>
{_('usedResource')} {formatSize(memory.total - memory.available)} ({_('totalResource')} {formatSize(memory.total)})
</p>
</div>
) : (
<p className='text-xs-center display-1'>∞</p>
)}
</CardBlock>
</Card>
</Col>
<Col mediumSize={4}>
<Card>
<CardHeader>
<Icon icon='disk' /> {_('resourceSetStorage')}
</CardHeader>
<CardBlock>
{disk ? (
<div>
<ChartistGraph
data={{
labels: [ 'Available', 'Used' ],
series: [ disk.available, disk.total - disk.available ]
}}
options={{ donut: true, donutWidth: 40, showLabel: false }}
type='Pie'
/>
<p className='text-xs-center'>
{_('usedResource')} {formatSize(disk.total - disk.available)} ({_('totalResource')} {formatSize(disk.total)})
</p>
</div>
) : (
<p className='text-xs-center display-1'>∞</p>
)}
</CardBlock>
</Card>
</Col>
</Row>
</div>
)
}
itemRenderer: ({ dataSize }) =>
dataSize !== undefined && formatSize(dataSize),
export default ({
statsOverview,
host,
memoryUsed,
nVms,
vmController,
vms,
}) => {
const pool = getObject(store.getState(), host.$pool)
const vmsFilter = encodeURIComponent(
new CM.Property('$container', new CM.String(host.id)).toString()
)
return (
<Container>
<br />
<Row className='text-xs-center'>
<Col mediumSize={3}>
<h2>
{host.CPUs.cpu_count}x <Icon icon='cpu' size='lg' />
</h2>
<BlockLink to={`/hosts/${host.id}/stats`}>
{statsOverview && <CpuSparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<h2>
{formatSize(host.memory.size)} <Icon icon='memory' size='lg' />
</h2>
<BlockLink to={`/hosts/${host.id}/stats`}>
{statsOverview && <MemorySparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<BlockLink to={`/hosts/${host.id}/network`}>
<h2>
{host.$PIFs.length}x <Icon icon='network' size='lg' />
</h2>
</BlockLink>
<BlockLink to={`/hosts/${host.id}/stats`}>
{statsOverview && <NetworkSparkLines data={statsOverview} />}
</BlockLink>
</Col>
<Col mediumSize={3}>
<BlockLink to={`/hosts/${host.id}/storage`}>
<h2>
{host.$PBDs.length}x <Icon icon='disk' size='lg' />
</h2>
</BlockLink>
<BlockLink to={`/hosts/${host.id}/stats`}>
{statsOverview && <LoadSparkLines data={statsOverview} />}
</BlockLink>
</Col>
</Row>
<br />
<Row className='text-xs-center'>
<Col mediumSize={3}>
<p className='text-xs-center'>
{_('started', {
ago: <FormattedRelative value={host.startTime * 1000} />,
})}
</p>
</Col>
<Col mediumSize={3}>
<p>
{host.productBrand} {host.version} (
{host.productBrand !== 'XCP-ng'
? host.license_params.sku_type
: 'GPLv2'}
)
</p>
</Col>
<Col mediumSize={3}>
<Copiable tagName='p'>{host.address}</Copiable>
</Col>
<Col mediumSize={3}>
<p>
{host.bios_strings['system-manufacturer']}{' '}
{host.bios_strings['system-product-name']}
</p>
</Col>
</Row>
<br />
<Row>
<Col className='text-xs-center'>
<BlockLink to={`/home?t=VM&s=${vmsFilter}`}>
<h2>
{nVms}x <Icon icon='vm' size='lg' />
</h2>
</BlockLink>
</Col>
</Row>
<br />
<Row>
<Col className='text-xs-center'>
<h5>{_('hostTitleRamUsage')}</h5>
</Col>
</Row>
<Row>
<Col smallOffset={1} mediumSize={10}>
<Usage total={host.memory.size}>
<UsageElement
highlight
tooltip={`XenServer (${formatSize(vmController.memory.size)})`}
value={vmController.memory.size}
/>
{map(vms, vm => (
<UsageElement
tooltip={`${vm.name_label} (${formatSize(vm.memory.size)})`}
key={vm.id}
value={vm.memory.size}
href={`#/vms/${vm.id}`}
/>
))}
</Usage>
</Col>
</Row>
<Row>
<Col className='text-xs-center'>
<h5>
{_('memoryHostState', {
memoryUsed: formatSizeShort(memoryUsed),
memoryTotal: formatSizeShort(host.memory.size),
memoryFree: formatSizeShort(host.memory.size - host.memory.usage),
})}
</h5>
</Col>
</Row>
<Row>
{pool && host.id === pool.master && (
<Row className='text-xs-center'>
<Col>
<h3>
<span className='tag tag-pill tag-info'>{_('pillMaster')}</span>
</h3>
</Col>
</Row>
)}
</Row>
<Row>
<Col>
<h2 className='text-xs-center'>
<HomeTags
type='host'
labels={host.tags}
onDelete={tag => removeTag(host.id, tag)}
onAdd={tag => addTag(host.id, tag)}
/>
</h2>
</Col>
</Row>
</Container>
)
}
({
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>
)