diff --git a/packages/hawtio/src/plugins/camel/contexts/Contexts.tsx b/packages/hawtio/src/plugins/camel/contexts/Contexts.tsx index bd23fd22..06a5ef96 100644 --- a/packages/hawtio/src/plugins/camel/contexts/Contexts.tsx +++ b/packages/hawtio/src/plugins/camel/contexts/Contexts.tsx @@ -4,7 +4,7 @@ import { HawtioLoadingCard } from '@hawtiosrc/plugins/shared' import { AttributeValues } from '@hawtiosrc/plugins/shared/jolokia-service' import { Card, CardBody, Text } from '@patternfly/react-core' import { InfoCircleIcon } from '@patternfly/react-icons' -import { Table, TableBody, TableHeader, TableProps, wrappable } from '@patternfly/react-table' +import { TableComposable, TableProps, Tbody, Td, Th, Thead, Tr, wrappable } from '@patternfly/react-table' import { Response } from 'jolokia.js' import React, { useContext, useEffect, useState } from 'react' import { log } from '../globals' @@ -15,21 +15,20 @@ export const Contexts: React.FunctionComponent = () => { const { selectedNode } = useContext(CamelContext) const [isReading, setIsReading] = useState(true) - const emptyCtxs: ContextState[] = [] - const [contexts, setContexts] = useState(emptyCtxs) - const [selectedCtx, setSelectedCtx] = useState([]) + const [contexts, setContexts] = useState([]) + const [selectedCtx, setSelectedCtx] = useState([]) const onSelectContext = (ctx: ContextState, isSelecting: boolean) => { - const otherSelectedCtx = selectedCtx.filter(c => c.node !== ctx.node) - setSelectedCtx(isSelecting ? [...otherSelectedCtx, ctx] : [...otherSelectedCtx]) + const otherSelectedCtx = selectedCtx.filter(c => c !== ctx.node.name) + setSelectedCtx(isSelecting ? [...otherSelectedCtx, ctx.node.name] : [...otherSelectedCtx]) } const selectAllContexts = (isSelecting = true) => { - setSelectedCtx(isSelecting ? [...contexts] : []) + setSelectedCtx(isSelecting ? contexts.map(c => c.node.name) : []) } const isContextSelected = (ctx: ContextState) => { - return selectedCtx.includes(ctx) + return selectedCtx.includes(ctx.node.name) } useEffect(() => { @@ -127,27 +126,39 @@ export const Contexts: React.FunctionComponent = () => { return ( - - { - if (rowIndex === -1) { - selectAllContexts(isSelecting) - } else { - const ctx = contexts[rowIndex] - if (ctx) { - onSelectContext(ctx, isSelecting) - } - } - }} - canSelectAll={true} - aria-label='Contexts' - variant='compact' - cells={columns} - rows={rows} - > - - -
+ selectedCtx.includes(c.node.name))} + deleteCallback={handleDeletedContexts} + /> + + + + selectAllContexts(isSelecting), + isSelected: contexts.length === selectedCtx.length, + }} + /> + Context + State + + + + {contexts.map((ctx, idx) => ( + + onSelectContext(ctx, isSelecting), + isSelected: isContextSelected(ctx), + }} + /> + {ctx.node.name} + {ctx.state} + + ))} + +
) }