wip(hawtio#125): Progress on multiattribute table. Have to implement …

…a better way to know which are JMX nodes

packages/hawtio/src/plugins/jmx/JmxContent.tsx

@@ -21,6 +21,7 @@ import { Chart } from '@hawtiosrc/plugins/shared/chart'
 import { Operations } from '@hawtiosrc/plugins/shared/operations'
 import { Attributes } from '@hawtiosrc/plugins/shared/attributes'
 import { JmxContentMBeans, MBeanNode } from '@hawtiosrc/plugins/shared'
+import { AttributeTable } from '../shared/attributes/AttributeTable'
 
 export const JmxContent: React.FunctionComponent = () => {
   const { selectedNode } = useContext(MBeanTreeContext)
@@ -40,6 +41,7 @@ export const JmxContent: React.FunctionComponent = () => {
   }
 
   const mBeanApplicable = (node: MBeanNode) => node.objectName
+  const mBeanCollectionApplicable = (node: MBeanNode) => node?.children?.some(child => child.objectName)
 
   const allNavItems = [
     { id: 'attributes', title: 'Attributes', component: Attributes, isApplicable: mBeanApplicable },
@@ -84,7 +86,8 @@ export const JmxContent: React.FunctionComponent = () => {
             </Routes>
           </React.Fragment>
         )}
-        {navItems.length === 0 && !selectedNode.objectName && <JmxContentMBeans />}
+        {navItems.length === 0 && !selectedNode.objectName && mBeanCollectionApplicable(selectedNode) && <AttributeTable />}
+        {navItems.length === 0 && !selectedNode.objectName && !mBeanCollectionApplicable(selectedNode) && <JmxContentMBeans />}
       </PageSection>
     </React.Fragment>
   )

packages/hawtio/src/plugins/shared/attributes/AttributeTable.css

@@ -0,0 +1,3 @@
+.attribute-table > tr > th {
+    max-width: none
+}

packages/hawtio/src/plugins/shared/attributes/AttributeTable.tsx

@@ -0,0 +1,79 @@
+import { useContext, useEffect, useState } from 'react'
+import { Card, CardBody, Text } from '@patternfly/react-core'
+import { InfoCircleIcon } from '@patternfly/react-icons'
+import { OnRowClick, Table, TableBody, TableHeader, TableProps } from '@patternfly/react-table'
+import { PluginNodeSelectionContext } from '@hawtiosrc/plugins/selectionNodeContext'
+import { AttributeValues } from '@hawtiosrc/plugins/connect/jolokia-service'
+import { attributeService } from './attribute-service'
+import './AttributeTable.css'
+
+export const AttributeTable: React.FunctionComponent = () => {
+  const { selectedNode, setSelectedNode } = useContext(PluginNodeSelectionContext)
+  const [attributes, setAttributes] = useState<AttributeValues[]>([{}])
+  const [isReading, setIsReading] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (!selectedNode) {
+      return
+    }
+
+    const childrenMbeansAttributes : AttributeValues[] = []
+    const readAttributes = async () => {
+      setIsReading(true)
+      if(selectedNode.children)
+        for(let mbean of selectedNode.children) {
+          const objectName = mbean.objectName
+          if (objectName) {
+            const attrs = await attributeService.read(objectName)
+            childrenMbeansAttributes.push(attrs)
+          }
+        }
+      setAttributes([...childrenMbeansAttributes])
+      setIsReading(false)
+    }
+    readAttributes()
+  }, [selectedNode])
+
+  if (!selectedNode) {
+    return null
+  }
+
+  if (isReading) {
+    return (
+      <Card>
+        <CardBody>
+          <Text component='p'>Reading attributes...</Text>
+        </CardBody>
+      </Card>
+    )
+  }
+
+  const tidyLabels = (str : string) => str
+                              .replace(/([a-z])([A-Z])/g, '$1 $2')
+                              .replace(/\b([A-Z]+)([A-Z])([a-z])/, '$1 $2$3')
+                              .replace(/^./, function(str){ return str.toUpperCase(); })
+
+  const columns: TableProps['cells'] = Object.keys(attributes[0]).map(label => tidyLabels(label))
+  const rows: TableProps['rows'] = attributes.map(attribute => Object.values(attribute).flatMap(value => JSON.stringify(value)))
+
+  if (rows.length === 0) {
+    return (
+      <Card>
+        <CardBody>
+          <Text component='p'>
+            <InfoCircleIcon /> This node has no MBeans.
+          </Text>
+        </CardBody>
+      </Card>
+    )
+  }
+
+  return (
+    <Card isFullHeight>
+      <Table aria-label='MBeans' variant='compact' cells={columns} rows={rows} >
+        <TableHeader className={'attribute-table'} />
+        <TableBody />
+      </Table>
+    </Card>
+  )
+}