<commit_before>import _ from 'messages'
import Icon from 'icon'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import Tags from 'tags'
import Tooltip from 'tooltip'
import { editVm, addTag, removeTag } from 'xo'
import { Row, Col } from 'grid'
import React, { Component } from 'react'
import { connectStore, createComplexMatcher, osFamily, formatSize } from 'utils'
import { Link } from 'react-router'
import { Text } from 'editable'
import {
  create as createSelector,
  createFilter,
  pools,
  hosts,
  vms, vmContainers,
  tags
} from 'selectors'

import {
  Button,
  DropdownButton,
  MenuItem
} from 'react-bootstrap-4/lib'

import styles from './index.css'

class VmItem extends Component {
  componentWillMount () {
    this.setState({ collapsed: true })
  }
  render () {
    const { vm, container, expandAll } = this.props
    return <div className={styles.item}>
      <Row>
        <Col mediumSize={1} className={styles.itemPowerRow}>
          <input type='checkbox'></input>
          <i>&nbsp;&nbsp;</i>
          <Tooltip content={_(`powerState${vm.power_state}`)}><Link to={`/vms/${vm.id}`}><Icon icon={`${vm.power_state.toLowerCase()}`} /></Link></Tooltip>
        </Col>
        <Col mediumSize={4} className={styles.itemNameRow}>
          <Text onChange={value => editVm(vm, { name_label: value })}>{vm.name_label}</Text>
        </Col>
        <Col mediumSize={4}>
          {vm.os_version && vm.os_version.distro ? <Icon icon={osFamily(vm.os_version.distro)} /> : <i className='fa fa-fw'></i>}
          <span>&nbsp;&nbsp;</span>
          <Text onChange={value => editVm(vm, { name_description: value })}>
            {vm.name_description}</Text>
        </Col>
        <Col mediumSize={2}>
          {container.type === 'host'
            ? <Link to={`/hosts/${container.id}`}>{container.name_label}</Link>
            : container.name_label
          }
        </Col>
        <Col mediumSize={1} className='text-xs-right'>
          <a className={styles.itemExpandButton}
            onClick={() => { this.setState({ collapsed: !this.state.collapsed }) }}>
            <Icon icon='nav' fixedWidth />&nbsp;&nbsp;&nbsp;
          </a>
        </Col>
      </Row>
      {!this.state.collapsed || expandAll
        ? <Row>
          <Col mediumSize={4} className={styles.itemExpanded}>
            <span>
              {vm.CPUs.number}x <Icon icon='cpu' />&nbsp;&nbsp;
              {formatSize(vm.memory.size)} <Icon icon='memory' />&nbsp;&nbsp;
              {vm.VIFs.length}x <Icon icon='network' />&nbsp;&nbsp;
              {vm.$VBDs.length}x <Icon icon='disk' />&nbsp;&nbsp;
            </span>
          </Col>
          <Col largeSize={4} className={styles.itemExpanded}>
            {map(vm.addresses, address => <span key={address} className='label label-info label-ip'>{address}</span>)}
          </Col>
          <Col mediumSize={4}>
            <span style={{fontSize: '1.4em'}}>
              <Tags labels={vm.tags} onDelete={tag => removeTag(vm.id, tag)} onAdd={tag => addTag(vm.id, tag)} />
            </span>
          </Col>
        </Row>
        : null
      }
    </div>
  }
}
@connectStore({
  pools,
  hosts,
  vmContainers,
  vms,
  tags
})

export default class Home extends Component {
  constructor (props) {
    super(props)

    this.state = {
      expandAll: false,
      filter: '',
      displayActions: false
    }

    this.getFilteredVms = createFilter(
      () => this.props.vms,
      createSelector(
        () => this.state.filter,
        filter => createComplexMatcher(filter)
      ),
      true
    )
  }

  render () {
    const { vms, vmContainers, pools, hosts, tags } = this.props
    const filteredVms = this.getFilteredVms()
    return <div>
      {!isEmpty(vms)
        ? <div>
          <Row className={styles.itemRowHeader}>
            <Col mediumSize={4}>
              <div>
                <input type='text' className='form-control' onChange={event => {
                  this.setState({
                    filter: event.target.value
                  })
                }} />
              </div>
            </Col>
            <Col mediumSize={4}>
              <DropdownButton title={_('homeTypeVm')}>
                <MenuItem disabled><Icon icon='pool' /> {_('homeTypePool')}</MenuItem>
                <MenuItem disabled><Icon icon='host' /> {_('homeTypeHost')}</MenuItem>
                <MenuItem disabled><Icon icon='sr' /> {_('homeTypeSr')}</MenuItem>
                <MenuItem disabled><Icon icon='disk' /> {_('homeTypeVdi')}</MenuItem>
              </DropdownButton>
            </Col>
            <Col mediumSize={4} className='text-xs-right'><commit_msg>perf(home): debounce filter by 250ms<commit_after>import _ from 'messages'
import debounce from 'lodash/debounce'
import Icon from 'icon'
import isEmpty from 'lodash/isEmpty'
import map from 'lodash/map'
import Tags from 'tags'
import Tooltip from 'tooltip'
import { editVm, addTag, removeTag } from 'xo'
import { Row, Col } from 'grid'
import React, { Component } from 'react'
import { Link } from 'react-router'
import { Text } from 'editable'
import {
  connectStore,
  createComplexMatcher,
  formatSize,
  invoke,
  osFamily
} from 'utils'
import {
  create as createSelector,
  createFilter,
  pools,
  hosts,
  vms, vmContainers,
  tags
} from 'selectors'

import {
  Button,
  DropdownButton,
  MenuItem
} from 'react-bootstrap-4/lib'

import styles from './index.css'

class VmItem extends Component {
  componentWillMount () {
    this.setState({ collapsed: true })
  }
  render () {
    const { vm, container, expandAll } = this.props
    return <div className={styles.item}>
      <Row>
        <Col mediumSize={1} className={styles.itemPowerRow}>
          <input type='checkbox'></input>
          <i>&nbsp;&nbsp;</i>
          <Tooltip content={_(`powerState${vm.power_state}`)}><Link to={`/vms/${vm.id}`}><Icon icon={`${vm.power_state.toLowerCase()}`} /></Link></Tooltip>
        </Col>
        <Col mediumSize={4} className={styles.itemNameRow}>
          <Text onChange={value => editVm(vm, { name_label: value })}>{vm.name_label}</Text>
        </Col>
        <Col mediumSize={4}>
          {vm.os_version && vm.os_version.distro ? <Icon icon={osFamily(vm.os_version.distro)} /> : <i className='fa fa-fw'></i>}
          <span>&nbsp;&nbsp;</span>
          <Text onChange={value => editVm(vm, { name_description: value })}>
            {vm.name_description}</Text>
        </Col>
        <Col mediumSize={2}>
          {container.type === 'host'
            ? <Link to={`/hosts/${container.id}`}>{container.name_label}</Link>
            : container.name_label
          }
        </Col>
        <Col mediumSize={1} className='text-xs-right'>
          <a className={styles.itemExpandButton}
            onClick={() => { this.setState({ collapsed: !this.state.collapsed }) }}>
            <Icon icon='nav' fixedWidth />&nbsp;&nbsp;&nbsp;
          </a>
        </Col>
      </Row>
      {!this.state.collapsed || expandAll
        ? <Row>
          <Col mediumSize={4} className={styles.itemExpanded}>
            <span>
              {vm.CPUs.number}x <Icon icon='cpu' />&nbsp;&nbsp;
              {formatSize(vm.memory.size)} <Icon icon='memory' />&nbsp;&nbsp;
              {vm.VIFs.length}x <Icon icon='network' />&nbsp;&nbsp;
              {vm.$VBDs.length}x <Icon icon='disk' />&nbsp;&nbsp;
            </span>
          </Col>
          <Col largeSize={4} className={styles.itemExpanded}>
            {map(vm.addresses, address => <span key={address} className='label label-info label-ip'>{address}</span>)}
          </Col>
          <Col mediumSize={4}>
            <span style={{fontSize: '1.4em'}}>
              <Tags labels={vm.tags} onDelete={tag => removeTag(vm.id, tag)} onAdd={tag => addTag(vm.id, tag)} />
            </span>
          </Col>
        </Row>
        : null
      }
    </div>
  }
}
@connectStore({
  pools,
  hosts,
  vmContainers,
  vms,
  tags
})

export default class Home extends Component {
  constructor (props) {
    super(props)

    this.state = {
      expandAll: false,
      filter: '',
      displayActions: false
    }

    this.getFilteredVms = createFilter(
      () => this.props.vms,
      createSelector(
        () => this.state.filter,
        filter => createComplexMatcher(filter)
      ),
      true
    )
  }

  _onFilterChange = invoke(
    debounce(filter => this.setState({ filter }), 250),
    setFilter => event => setFilter(event.target.value)
  )

  render () {
    const { vms, vmContainers, pools, hosts, tags } = this.props
    const filteredVms = this.getFilteredVms()
    return <div>
      {!isEmpty(vms)
        ? <div>
          <Row className={styles.itemRowHeader}>
            <Col mediumSize={4}>
              <div>
                <input type='text' className='form-control' onChange={this._onFilterChange} />
              </div>
            </Col>
            <Col mediumSize={4}>
              <DropdownButton title={_('homeTypeVm')}>
                <MenuItem disabled><Icon icon='pool' /> {_('homeTypePool')}</MenuItem>
                <MenuItem disabled><Icon icon='host' /> {_('homeTypeHost')}</MenuItem>
                <MenuItem disabled><Icon icon='sr' /> {_('homeTypeSr')}</MenuItem>
                <MenuItem disabled><Icon icon='disk' /> {_('homeTypeVdi')}</MenuItem>
              </DropdownButton>
            </Col>
            <Col mediumSize={4} className='text-xs-right'>
{'fraction_non_alphanumeric': 0.16252773961745748, 'fraction_numerical': 0.003592940927824157, 'mean_word_length': 2.3359182234755025, 'pattern_counts': {'":': 0, '<': 165, '<?xml version=': 0, '>': 187, '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': '1648695', 'n_tokens_mistral': 2925, 'n_tokens_neox': 2928, 'n_words': 602}