import gql from 'graphql-tag'
import { Query } from 'react-apollo'

const QUERY_SYSTEM = gql`
  query QUERY_SYSTEM {
    system {
      apiVersion
      hostname
      type
      platform
      arch
      release
      uptime
      loadavg
      totalmem
      freemem
      cpus {
        model
        speed
        times {
          user
          nice
          sys
          idle
          irq
        }
      }
      networkInterfaces {
        name
        addresses {
          address
          netmask
          family
          mac
          internal
          cidr
          scopied
        }
      }
    }
  }
`

const System = props => (
  <Query query={QUERY_SYSTEM}>
    {(data, loading, error) => (
      <div>
        <h1>System</h1>
        <p>API Version:</p><p>{data.apiVersion}</p>
        <p>Hostname:</p><p>{data.hostname}</p>
        <p>Type:</p><p>{data.type}</p>
        <p>Platform:</p><p>{data.platform}</p>
        <p>Architecture:</p><p>{data.arch}</p>
        <p>Release:</p><p>{data.release}</p>
        <p>Uptime:</p><p>{data.uptime}</p>
        <p>Total memory:</p><p>{data.totalmem}</p>
        <p>Free memory:</p><p>{data.freemem}</p>
      </div>
    )}
  </Query>
)

export default System