<commit_before>import _ from 'messages'
import Icon from 'icon'
import map from 'lodash/map'
import React from 'react'
import Tags from 'tags'
import Tooltip from 'tooltip'
import { addTag, removeTag } from 'xo'
import { FormattedRelative } from 'react-intl'
import { Row, Col } from 'grid'
import {
  BlockLink,
  formatSize
} from 'utils'
import {
  CpuSparkLines,
  MemorySparkLines,
  PifSparkLines,
  LoadSparkLines
} from 'xo-sparklines'

export default ({
  statsOverview,
  host,
  vmController,
  vms
}) => <div>
  <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 && <PifSparkLines data={statsOverview} />}</BlockLink>
    </Col>
    <Col mediumSize={3}>
      <BlockLink to={`/hosts/${host.id}/disks`}><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 smallSize={3}>
      <p className='text-xs-center'>{_('started', { ago: <FormattedRelative value={host.startTime * 1000} /> })}</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.license_params.sku_marketing_name} {host.license_params.version} ({host.license_params.sku_type})</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.address}</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.bios_strings['system-manufacturer']} {host.bios_strings['system-product-name']}</p>
    </Col>
  </Row>
  <Row>
    <Col smallSize={12} className='text-xs-center'>
      <h5>RAM usage:</h5>
    </Col>
  </Row>
  <Row>
    <Col smallOffset={1} smallSize={10}>
      <span className='progress'>
        <Tooltip content='XenServer'>
          <span
            className='progress-dom0'
            style={{ width: (vmController.memory.size / host.memory.size) * 100 + '%' }}>
          </span>
        </Tooltip>
        {map(vms, vm => (
          <Tooltip content={vm.name_label}>
            <a
              href={`#/vms/${vm.id}`}
              key={vm.id}<commit_msg>fix(home/TabGeneral): use key prop on correct component<commit_after>import _ from 'messages'
import Icon from 'icon'
import map from 'lodash/map'
import React from 'react'
import Tags from 'tags'
import Tooltip from 'tooltip'
import { addTag, removeTag } from 'xo'
import { FormattedRelative } from 'react-intl'
import { Row, Col } from 'grid'
import {
  BlockLink,
  formatSize
} from 'utils'
import {
  CpuSparkLines,
  MemorySparkLines,
  PifSparkLines,
  LoadSparkLines
} from 'xo-sparklines'

export default ({
  statsOverview,
  host,
  vmController,
  vms
}) => <div>
  <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 && <PifSparkLines data={statsOverview} />}</BlockLink>
    </Col>
    <Col mediumSize={3}>
      <BlockLink to={`/hosts/${host.id}/disks`}><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 smallSize={3}>
      <p className='text-xs-center'>{_('started', { ago: <FormattedRelative value={host.startTime * 1000} /> })}</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.license_params.sku_marketing_name} {host.license_params.version} ({host.license_params.sku_type})</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.address}</p>
    </Col>
    <Col smallSize={3}>
      <p>{host.bios_strings['system-manufacturer']} {host.bios_strings['system-product-name']}</p>
    </Col>
  </Row>
  <Row>
    <Col smallSize={12} className='text-xs-center'>
      <h5>RAM usage:</h5>
    </Col>
  </Row>
  <Row>
    <Col smallOffset={1} smallSize={10}>
      <span className='progress'>
        <Tooltip content='XenServer'>
          <span
            className='progress-dom0'
            style={{ width: (vmController.memory.size / host.memory.size) * 100 + '%' }}>
          </span>
        </Tooltip>
        {map(vms, vm => (
          <Tooltip key={vm.id} content={vm.name_label}>
            <a
              href={`#/vms/${vm.id}`}
{'fraction_non_alphanumeric': 0.2, 'fraction_numerical': 0.011376146788990826, 'mean_word_length': 3.3608, 'pattern_counts': {'":': 0, '<': 153, '<?xml version=': 0, '>': 155, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2338545', 'n_tokens_mistral': 1983, 'n_tokens_neox': 1939, 'n_words': 355}