AutoMate/frontend/components/InterfaceList.js

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

const INTERFACES_FULL = gql`
  query INTERFACES_FULL {
    interfaces {
      id
      interfaceName
      workerScript {
        path
        mtime
        updated
      }
      workerProcess {
        pid
        killed
        signalCode
        exitCode
        spawnfile
        spawnargs
      }
      ports {
        id
        interfaceName
        host
        device
        name
        description
      }
      connections {
        id
        port {
          id
          interfaceName
          host
          device
          name
          description
        }
        workerProcess {
          pid
          killed
          signalCode
          exitCode
          spawnfile
          spawnargs
        }
      }
      options {
        name
        type
        description
        values
      }
    }
  }
`

const INTERFACES = gql`
  query INTERFACES {
    interfaces {
      interfaceName
      ports {
        id
      }
      connections {
        id
      }
    }
  }
`

const InterfaceList = props => (
  <Query query={INTERFACES_FULL}>
    {({ data }, loading, error) => {
      if (loading) return <p>Loading interfaces...</p>
      if (error) return <p>Error loading interfaces: {error.message}</p>
      if (!data) return <p>No interfaces found.</p>
      const { interfaces } = data
      return (
        <div>
          <h1>Interface List</h1>
          {loading ? (
            <p>Loading interfaces...</p>
          ) : (
            interfaces &&
            interfaces.map(iface => (
              <Interface key={iface.interfaceName} data={iface} />
            ))
          )}
        </div>
      )
    }}
  </Query>
)

export default InterfaceList
export { INTERFACES, INTERFACES_FULL }