web: migrate pages to react-table

This migrates the Labels, Nodes and
Projects pages to using the react-table
component from patternfly.

Change-Id: Iaa75e70f4b0c25113369939f97a297571f2ea7a5

web/src/pages/Labels.jsx

@@ -15,8 +15,15 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Table } from 'patternfly-react'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
+import {
+  Table,
+  TableVariant,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table'
+import { TagIcon } from '@patternfly/react-icons'
+import { IconProperty } from '../Misc'
 
 import { fetchLabelsIfNeeded } from '../actions/labels'
 import { Fetchable, Fetching } from '../containers/Fetching'
@@ -54,18 +61,22 @@ class LabelsPage extends React.Component {
       return <Fetching />
     }
 
-    const headerFormat = value => <Table.Heading>{value}</Table.Heading>
-    const cellFormat = value => <Table.Cell>{value}</Table.Cell>
-    const columns = []
-    const myColumns = ['name']
-    myColumns.forEach(column => {
-      let formatter = cellFormat
-      let prop = column
-      columns.push({
-        header: {label: column, formatters: [headerFormat]},
-        property: prop,
-        cell: {formatters: [formatter]}
-      })
+    const columns = [
+      {
+        title: (
+          <IconProperty icon={<TagIcon />} value="Name" />
+        ),
+        dataLabel: 'name'
+      }
+    ]
+    let rows = []
+    labels.forEach((label) => {
+      let r = {
+        cells: [
+          {title: label.name, props: {column: 'Name'}}
+        ],
+      }
+      rows.push(r)
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
@@ -75,18 +86,16 @@ class LabelsPage extends React.Component {
             fetchCallback={this.updateData}
           />
         </PageSection>
-        <Table.PfProvider
-          striped
-          bordered
-          hover
-          columns={columns}
+        <Table
+          aria-label="Labels Table"
+          variant={TableVariant.compact}
+          cells={columns}
+          rows={rows}
+          className="zuul-table"
         >
-          <Table.Header/>
-          <Table.Body
-            rows={labels}
-            rowKey="name"
-          />
-        </Table.PfProvider>
+          <TableHeader />
+          <TableBody />
+        </Table>
       </PageSection>
     )
   }

web/src/pages/Nodes.jsx

@@ -15,9 +15,29 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Table } from 'patternfly-react'
+import {
+  Table,
+  TableVariant,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table'
 import * as moment from 'moment'
-import { PageSection, PageSectionVariants } from '@patternfly/react-core'
+import {
+  PageSection,
+  PageSectionVariants,
+  ClipboardCopy,
+} from '@patternfly/react-core'
+import {
+  BuildIcon,
+  ClusterIcon,
+  ConnectedIcon,
+  OutlinedCalendarAltIcon,
+  TagIcon,
+  RunningIcon,
+  PencilAltIcon,
+  ZoneIcon,
+} from '@patternfly/react-icons'
+import { IconProperty } from '../Misc'
 
 import { fetchNodesIfNeeded } from '../actions/nodes'
 import { Fetchable } from '../containers/Fetching'
@@ -51,43 +71,69 @@ class NodesPage extends React.Component {
     const { remoteData } = this.props
     const nodes = remoteData.nodes
 
-    const headerFormat = value => <Table.Heading>{value}</Table.Heading>
-    const cellFormat = value => <Table.Cell>{value}</Table.Cell>
-    const cellLabelsFormat = value => <Table.Cell>{value.join(',')}</Table.Cell>
-    const cellPreFormat = value => (
-      <Table.Cell style={{fontFamily: 'Menlo,Monaco,Consolas,monospace'}}>
-        {value}
-      </Table.Cell>)
-    const cellAgeFormat = value => (
-      <Table.Cell style={{fontFamily: 'Menlo,Monaco,Consolas,monospace'}}>
-        {moment.unix(value).fromNow()}
-      </Table.Cell>)
-
-    const columns = []
-    const myColumns = [
-      'id', 'labels', 'connection', 'server', 'provider', 'state',
-      'age', 'comment'
-    ]
-    myColumns.forEach(column => {
-      let formatter = cellFormat
-      let prop = column
-      if (column === 'labels') {
-        prop = 'type'
-        formatter = cellLabelsFormat
-      } else if (column === 'connection') {
-        prop = 'connection_type'
-      } else if (column === 'server') {
-        prop = 'external_id'
-        formatter = cellPreFormat
-      } else if (column === 'age') {
-        prop = 'state_time'
-        formatter = cellAgeFormat
+    const columns = [
+      {
+        title: (
+          <IconProperty icon={<BuildIcon />} value="ID" />
+        ),
+        dataLabel: 'id',
+      },
+      {
+        title: (
+          <IconProperty icon={<TagIcon />} value="Labels" />
+        ),
+        dataLabel: 'labels',
+      },
+      {
+        title: (
+          <IconProperty icon={<ConnectedIcon />} value="Connection" />
+        ),
+        dataLabel: 'connection',
+      },
+      {
+        title: (
+          <IconProperty icon={<ClusterIcon />} value="Server" />
+        ),
+        dataLabel: 'server',
+      },
+      {
+        title: (
+          <IconProperty icon={<ZoneIcon />} value="Provider" />
+        ),
+        dataLabel: 'provider',
+      },
+      {
+        title: (
+          <IconProperty icon={<RunningIcon />} value="State" />
+        ),
+        dataLabel: 'state',
+      },
+      {
+        title: (
+          <IconProperty icon={<OutlinedCalendarAltIcon />} value="Age" />
+        ),
+        dataLabel: 'age',
+      },
+      {
+        title: (
+          <IconProperty icon={<PencilAltIcon />} value="Comment" />
+        ),
+        dataLabel: 'comment',
       }
-      columns.push({
-        header: {label: column, formatters: [headerFormat]},
-        property: prop,
-        cell: {formatters: [formatter]}
-      })
+    ]
+    let rows = []
+    nodes.forEach((node) => {
+        let r = [
+            {title: node.id, props: {column: 'ID'}},
+            {title: node.type.join(','), props: {column: 'Label' }},
+            {title: node.connection_type, props: {column: 'Connection'}},
+            {title: <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">{node.external_id}</ClipboardCopy>, props: {column: 'Server'}},
+            {title: node.provider, props: {column: 'Provider'}},
+            {title: node.state, props: {column: 'State'}},
+            {title: moment.unix(node.state_time).fromNow(), props: {column: 'Age'}},
+            {title: node.comment, props: {column: 'Comment'}},
+        ]
+        rows.push({cells: r})
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
@@ -97,18 +143,17 @@ class NodesPage extends React.Component {
             fetchCallback={this.updateData}
           />
         </PageSection>
-        <Table.PfProvider
-          striped
-          bordered
-          hover
-          columns={columns}
+
+        <Table
+          aria-label="Nodes Table"
+          variant={TableVariant.compact}
+          cells={columns}
+          rows={rows}
+          className="zuul-table"
         >
-          <Table.Header/>
-          <Table.Body
-            rows={nodes}
-            rowKey="id"
-          />
-        </Table.PfProvider>
+          <TableHeader />
+          <TableBody />
+        </Table>
       </PageSection>
     )
   }

web/src/pages/Projects.jsx

@@ -16,8 +16,18 @@ import * as React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Link } from 'react-router-dom'
-import { Table } from 'patternfly-react'
 import { PageSection, PageSectionVariants } from '@patternfly/react-core'
+import {
+  Table,
+  TableVariant,
+  TableHeader,
+  TableBody,
+} from '@patternfly/react-table'
+import {
+  CubeIcon,
+  ConnectedIcon,
+} from '@patternfly/react-icons'
+import { IconProperty } from '../Misc'
 
 import { fetchProjectsIfNeeded } from '../actions/projects'
 import { Fetchable, Fetching } from '../containers/Fetching'
@@ -59,42 +69,35 @@ class ProjectsPage extends React.Component {
       return <Fetching />
     }
 
-    const headerFormat = value => <Table.Heading>{value}</Table.Heading>
-    const cellFormat = (value) => (
-      <Table.Cell>{value}</Table.Cell>)
-    const cellProjectFormat = (value, row) => (
-      <Table.Cell>
-        <Link to={this.props.tenant.linkPrefix + '/project/' + row.rowData.canonical_name}>
-          {value}
-        </Link>
-      </Table.Cell>)
-    const cellBuildFormat = (value) => (
-      <Table.Cell>
-        <Link to={this.props.tenant.linkPrefix + '/builds?project=' + value}>
-          builds
-        </Link>
-      </Table.Cell>)
-    const columns = []
-    const myColumns = ['name', 'connection', 'type', 'last builds']
-    myColumns.forEach(column => {
-      let formatter = cellFormat
-      let prop = column
-      if (column === 'name') {
-        formatter = cellProjectFormat
+    const columns = [
+      {
+        title: <IconProperty icon={<CubeIcon />} value="Name" />,
+        dataLabel: 'name',
+      },
+      {
+        title: <IconProperty icon={<ConnectedIcon />} value="Connection" />,
+        dataLabel: 'connection',
+      },
+      {
+        title: 'Type',
+        dataLabel: 'type',
+      },
+      {
+        title: 'Last builds',
+        dataLabel: 'last-builds',
       }
-      if (column === 'connection') {
-        prop = 'connection_name'
+    ]
+    let rows = []
+    projects.forEach((project) => {
+      let r = {
+        cells: [
+          {title: <Link to={this.props.tenant.linkPrefix + '/project/' + project.canonical_name}>{project.name}</Link>, props: {column: 'Name'}},
+          {title: project.connection_name, props: {column: 'Connection'}},
+          {title: project.type, props: {column: 'Type'}},
+          {title: <Link to={this.props.tenant.linkPrefix + '/builds?project=' + project.name}>Builds</Link>, props: {column: 'Last builds'}},
+        ]
       }
-      if (column === 'last builds') {
-        prop = 'name'
-        formatter = cellBuildFormat
-      }
-      columns.push({
-        header: {label: column,
-          formatters: [headerFormat]},
-        property: prop,
-        cell: {formatters: [formatter]}
-      })
+      rows.push(r)
     })
     return (
       <PageSection variant={PageSectionVariants.light}>
@@ -104,18 +107,16 @@ class ProjectsPage extends React.Component {
             fetchCallback={this.updateData}
           />
         </PageSection>
-        <Table.PfProvider
-          striped
-          bordered
-          hover
-          columns={columns}
+        <Table
+          aria-label="Projects Table"
+          variant={TableVariant.compact}
+          cells={columns}
+          rows={rows}
+          className="zuul-table"
         >
-          <Table.Header/>
-          <Table.Body
-            rows={projects}
-            rowKey="name"
-          />
-        </Table.PfProvider>
+          <TableHeader />
+          <TableBody />
+        </Table>
       </PageSection>
     )
   }