Skip to content

Commit

Permalink
refactor(runtime): polish Runtime plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@tadayosi
tadayosi committed Sep 28, 2023
1 parent 89892f9 commit fa499b8
Show file tree
Hide file tree
Showing 5 changed files with 248 additions and 233 deletions.
2 changes: 1 addition & 1 deletion packages/hawtio/src/plugins/runtime/Metrics.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { ChartBullet } from '@patternfly/react-charts'
import { Card, CardBody, CardHeader, Grid, GridItem, Title } from '@patternfly/react-core'
import React, { useEffect, useState } from 'react'
import { runtimeService } from './runtime-service'
import { Metric } from './types'
import { ChartBullet } from '@patternfly/react-charts'

export const Metrics: React.FunctionComponent = () => {
const [metrics, setMetrics] = useState<Record<string, Metric>>({})
Expand Down
30 changes: 9 additions & 21 deletions packages/hawtio/src/plugins/runtime/Runtime.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
import {
PageSection,
PageSectionVariants,
NavItem,
Title,
PageGroup,
PageNavigation,
Nav,
NavList,
Card,
} from '@patternfly/react-core'
import { Nav, NavItem, NavList, PageGroup, PageNavigation, PageSection, Title } from '@patternfly/react-core'
import React from 'react'

import { SysProps } from './SysProps'
import { Navigate, NavLink, Route, Routes, useLocation } from 'react-router-dom'
import { Metrics } from './Metrics'
import { SysProps } from './SysProps'
import { Threads } from './Threads'

type NavItem = {
Expand All @@ -32,7 +22,7 @@ export const Runtime: React.FunctionComponent = () => {

return (
<React.Fragment>
<PageSection variant={PageSectionVariants.light}>
<PageSection variant='light'>
<Title headingLevel='h1'>Runtime</Title>
</PageSection>
<PageGroup>
Expand All @@ -49,14 +39,12 @@ export const Runtime: React.FunctionComponent = () => {
</PageNavigation>
</PageGroup>
<PageSection>
<Card isFullHeight>
<Routes>
{navItems.map(navItem => (
<Route key={navItem.id} path={navItem.id} element={navItem.component} />
))}
<Route path='/' element={<Navigate to='sysprops' />} />
</Routes>
</Card>
<Routes>
{navItems.map(navItem => (
<Route key={navItem.id} path={navItem.id} element={navItem.component} />
))}
<Route path='/' element={<Navigate to='sysprops' />} />
</Routes>
</PageSection>
</React.Fragment>
)
Expand Down
166 changes: 84 additions & 82 deletions packages/hawtio/src/plugins/runtime/SysProps.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React, { useEffect, useState } from 'react'
import { objectSorter } from '@hawtiosrc/util/objects'
import {
Bullseye,
Button,
Card,
CardBody,
Dropdown,
DropdownItem,
DropdownToggle,
Expand All @@ -19,10 +18,10 @@ import {
ToolbarGroup,
ToolbarItem,
} from '@patternfly/react-core'
import { TableComposable, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table'
import { SearchIcon } from '@patternfly/react-icons'
import { TableComposable, Tbody, Td, Th, ThProps, Thead, Tr } from '@patternfly/react-table'
import React, { useEffect, useState } from 'react'
import { runtimeService } from './runtime-service'
import { objectSorter } from '@hawtiosrc/util/objects'
import { SystemProperty } from './types'

export const SysProps: React.FunctionComponent = () => {
Expand Down Expand Up @@ -137,6 +136,7 @@ export const SysProps: React.FunctionComponent = () => {
},
columnIndex: sortColumn,
})

const sortProperties = (): SystemProperty[] => {
let sortedProps = filteredProperties
if (sortIndex >= 0) {
Expand All @@ -149,86 +149,88 @@ export const SysProps: React.FunctionComponent = () => {

return sortedProps
}

const tableToolbar = (
<Toolbar>
<ToolbarContent>
<ToolbarGroup>
<Dropdown
data-testid='attribute-select'
onSelect={() => setIsDropdownOpen(false)}
defaultValue='name'
toggle={
<DropdownToggle data-testid='attribute-select-toggle' id='toggle-basic' onToggle={setIsDropdownOpen}>
{attributes.find(att => att.key === attributeMenuItem)?.value}
</DropdownToggle>
}
isOpen={isDropdownOpen}
dropdownItems={dropdownItems}
/>
<ToolbarFilter
chips={filters}
deleteChip={(_e, filter) => onDeleteFilter(filter as string)}
deleteChipGroup={clearFilters}
categoryName='Filters'
>
<SearchInput
type='text'
data-testid='filter-input'
id='search-input'
placeholder='Search...'
value={searchTerm}
onChange={(_event, value) => handleSearch(value, attributeMenuItem, filters)}
aria-label='Search input'
/>
</ToolbarFilter>
<Button variant='secondary' onClick={addToFilters} isSmall>
Add Filter
</Button>
</ToolbarGroup>

<ToolbarItem variant='pagination'>
<PropsPagination />
</ToolbarItem>
</ToolbarContent>
</Toolbar>
)

return (
<Card isFullHeight>
<CardBody>
<Toolbar>
<ToolbarContent>
<ToolbarGroup>
<Dropdown
data-testid='attribute-select'
onSelect={() => setIsDropdownOpen(false)}
defaultValue='name'
toggle={
<DropdownToggle data-testid='attribute-select-toggle' id='toggle-basic' onToggle={setIsDropdownOpen}>
{attributes.find(att => att.key === attributeMenuItem)?.value}
</DropdownToggle>
}
isOpen={isDropdownOpen}
dropdownItems={dropdownItems}
/>
<ToolbarFilter
chips={filters}
deleteChip={(_e, filter) => onDeleteFilter(filter as string)}
deleteChipGroup={clearFilters}
categoryName='Filters'
>
<SearchInput
type='text'
data-testid='filter-input'
id='search-input'
placeholder='Search...'
value={searchTerm}
onChange={(_event, value) => handleSearch(value, attributeMenuItem, filters)}
aria-label='Search input'
/>
</ToolbarFilter>
<Button variant='secondary' onClick={addToFilters}>
Add Filter
</Button>
</ToolbarGroup>

<ToolbarItem variant='pagination'>
<PropsPagination />
</ToolbarItem>
</ToolbarContent>
</Toolbar>

{sortProperties().length > 0 && (
<FormGroup>
<TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped>
<Thead>
<Tr>
<Th data-testid={'name-header'} sort={getSortParams(0)}>
Property Name
</Th>
<Th data-testid={'value-header'} sort={getSortParams(1)}>
Property Value
</Th>
</Tr>
</Thead>
<Tbody>
{getPageProperties().map((prop, index) => {
return (
<Tr key={'row' + index} data-testid={'row' + index}>
<Td style={{ width: '20%' }}>{prop.key}</Td>
<Td style={{ flex: 3 }}>{prop.value}</Td>
</Tr>
)
})}
</Tbody>
</TableComposable>
</FormGroup>
)}
{filteredProperties.length === 0 && (
<Bullseye>
<EmptyState>
<EmptyStateIcon icon={SearchIcon} />
<EmptyStateBody>No results found.</EmptyStateBody>
</EmptyState>
</Bullseye>
)}
</CardBody>
{tableToolbar}
{sortProperties().length > 0 && (
<FormGroup>
<TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
<Thead>
<Tr>
<Th data-testid={'name-header'} sort={getSortParams(0)}>
Property Name
</Th>
<Th data-testid={'value-header'} sort={getSortParams(1)}>
Property Value
</Th>
</Tr>
</Thead>
<Tbody>
{getPageProperties().map((prop, index) => {
return (
<Tr key={'row' + index} data-testid={'row' + index}>
<Td style={{ width: '20%' }}>{prop.key}</Td>
<Td style={{ flex: 3 }}>{prop.value}</Td>
</Tr>
)
})}
</Tbody>
</TableComposable>
</FormGroup>
)}
{filteredProperties.length === 0 && (
<Bullseye>
<EmptyState>
<EmptyStateIcon icon={SearchIcon} />
<EmptyStateBody>No results found.</EmptyStateBody>
</EmptyState>
</Bullseye>
)}
</Card>
)
}
47 changes: 30 additions & 17 deletions packages/hawtio/src/plugins/runtime/ThreadInfoModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,14 @@ import { Thread } from '@hawtiosrc/plugins/runtime/types'
import { Grid, GridItem, Modal, ModalVariant } from '@patternfly/react-core'

export const ThreadInfoModal: React.FunctionComponent<{
thread: Thread
thread?: Thread
isOpen: boolean
setIsOpen: (open: boolean) => void
}> = ({ thread, isOpen, setIsOpen }) => {
const CustomItem: React.FunctionComponent<{ itemName: string; itemValue: string | number | null | undefined }> = ({
itemName,
itemValue,
}) => {
if (itemValue) {
if ((typeof itemValue === 'number' && itemValue > -1) || (typeof itemValue === 'string' && itemValue !== ''))
return (
<>
<GridItem span={3}>
<i>{itemName}</i>
</GridItem>
<GridItem span={9}>{itemValue}</GridItem>
</>
)
}
return <></>
if (!thread) {
return null
}

return (
<Modal
bodyAriaLabel='Thread Details'
Expand Down Expand Up @@ -123,3 +110,29 @@ export const ThreadInfoModal: React.FunctionComponent<{
</Modal>
)
}

const CustomItem: React.FunctionComponent<{
itemName: string
itemValue: string | number | null
}> = ({ itemName, itemValue }) => {
if (!itemValue) {
return null
}

if (typeof itemValue === 'number' && itemValue < 0) {
return null
}

if (typeof itemValue === 'string' && itemValue === '') {
return null
}

return (
<>
<GridItem span={3}>
<i>{itemName}</i>
</GridItem>
<GridItem span={9}>{itemValue}</GridItem>
</>
)
}
Loading

0 comments on commit fa499b8

Please sign in to comment.