From fa499b875f8241dcf4d018b9ed01dc3baec7d68b Mon Sep 17 00:00:00 2001
From: Tadayoshi Sato <sato.tadayoshi@gmail.com>
Date: Thu, 28 Sep 2023 16:47:34 +0900
Subject: [PATCH] refactor(runtime): polish Runtime plugin

---
 .../hawtio/src/plugins/runtime/Metrics.tsx    |   2 +-
 .../hawtio/src/plugins/runtime/Runtime.tsx    |  30 +--
 .../hawtio/src/plugins/runtime/SysProps.tsx   | 166 ++++++------
 .../src/plugins/runtime/ThreadInfoModal.tsx   |  47 ++--
 .../hawtio/src/plugins/runtime/Threads.tsx    | 236 +++++++++---------
 5 files changed, 248 insertions(+), 233 deletions(-)

diff --git a/packages/hawtio/src/plugins/runtime/Metrics.tsx b/packages/hawtio/src/plugins/runtime/Metrics.tsx
index cfad5617..8eb7a17c 100644
--- a/packages/hawtio/src/plugins/runtime/Metrics.tsx
+++ b/packages/hawtio/src/plugins/runtime/Metrics.tsx
@@ -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>>({})
diff --git a/packages/hawtio/src/plugins/runtime/Runtime.tsx b/packages/hawtio/src/plugins/runtime/Runtime.tsx
index cc385f33..66232252 100644
--- a/packages/hawtio/src/plugins/runtime/Runtime.tsx
+++ b/packages/hawtio/src/plugins/runtime/Runtime.tsx
@@ -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 = {
@@ -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>
@@ -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>
   )
diff --git a/packages/hawtio/src/plugins/runtime/SysProps.tsx b/packages/hawtio/src/plugins/runtime/SysProps.tsx
index 64e5251e..4c326371 100644
--- a/packages/hawtio/src/plugins/runtime/SysProps.tsx
+++ b/packages/hawtio/src/plugins/runtime/SysProps.tsx
@@ -1,9 +1,8 @@
-import React, { useEffect, useState } from 'react'
+import { objectSorter } from '@hawtiosrc/util/objects'
 import {
   Bullseye,
   Button,
   Card,
-  CardBody,
   Dropdown,
   DropdownItem,
   DropdownToggle,
@@ -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 = () => {
@@ -137,6 +136,7 @@ export const SysProps: React.FunctionComponent = () => {
     },
     columnIndex: sortColumn,
   })
+
   const sortProperties = (): SystemProperty[] => {
     let sortedProps = filteredProperties
     if (sortIndex >= 0) {
@@ -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>
   )
 }
diff --git a/packages/hawtio/src/plugins/runtime/ThreadInfoModal.tsx b/packages/hawtio/src/plugins/runtime/ThreadInfoModal.tsx
index 8c279f35..abfdd7df 100644
--- a/packages/hawtio/src/plugins/runtime/ThreadInfoModal.tsx
+++ b/packages/hawtio/src/plugins/runtime/ThreadInfoModal.tsx
@@ -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'
@@ -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>
+    </>
+  )
+}
diff --git a/packages/hawtio/src/plugins/runtime/Threads.tsx b/packages/hawtio/src/plugins/runtime/Threads.tsx
index e4d8ff19..3fd29683 100644
--- a/packages/hawtio/src/plugins/runtime/Threads.tsx
+++ b/packages/hawtio/src/plugins/runtime/Threads.tsx
@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from 'react'
 import {
   Bullseye,
   Button,
   Card,
-  CardBody,
   CodeBlock,
   CodeBlockCode,
   Dropdown,
@@ -14,7 +12,6 @@ import {
   EmptyStateIcon,
   FormGroup,
   Modal,
-  ModalVariant,
   Pagination,
   SearchInput,
   Toolbar,
@@ -23,19 +20,21 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core'
+import React, { useEffect, useState } from 'react'
 
-import { TableComposable, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table'
+import { Thread } from '@hawtiosrc/plugins/runtime/types'
+import { objectSorter } from '@hawtiosrc/util/objects'
 import { SearchIcon } from '@patternfly/react-icons'
+import { TableComposable, Tbody, Td, Th, Thead, ThProps, Tr } from '@patternfly/react-table'
 import { runtimeService } from './runtime-service'
-import { objectSorter } from '@hawtiosrc/util/objects'
-import { Thread } from '@hawtiosrc/plugins/runtime/types'
 import { ThreadInfoModal } from './ThreadInfoModal'
 
 const ThreadsDumpModal: React.FunctionComponent<{
   isOpen: boolean
   setIsOpen: (opened: boolean) => void
 }> = ({ isOpen, setIsOpen }) => {
-  const [threadsDump, setThreadsDump] = useState<string>('')
+  const [threadsDump, setThreadsDump] = useState('')
+
   useEffect(() => {
     const readThreadDump = async () => {
       const threadsDump = await runtimeService.dumpThreads()
@@ -51,7 +50,7 @@ const ThreadsDumpModal: React.FunctionComponent<{
       bodyAriaLabel='Thread Dump'
       tabIndex={0}
       isOpen={isOpen}
-      variant={ModalVariant.large}
+      variant='large'
       title='Thread Dump'
       onClose={() => setIsOpen(false)}
     >
@@ -85,7 +84,7 @@ export const Threads: React.FunctionComponent = () => {
       setThreads(threads)
       setFilteredThreads(threads)
       setThreadConnectionMonitoring(await runtimeService.isThreadContentionMonitoringEnabled())
-      await runtimeService.registerLoadThreadsRequest(threads => {
+      runtimeService.registerLoadThreadsRequest(threads => {
         setThreads(threads)
         setFilteredThreads(threads)
       })
@@ -104,6 +103,7 @@ export const Threads: React.FunctionComponent = () => {
     setFilters([...filters, `${attributeMenuItem}:${searchTerm}`])
     setSearchTerm('')
   }
+
   const clearFilters = () => {
     setFilters([])
     setSearchTerm('')
@@ -131,6 +131,7 @@ export const Threads: React.FunctionComponent = () => {
     const end = start + perPage
     return filteredThreads.slice(start, end)
   }
+
   const handleSearch = (value: string, key: string, filters: string[]) => {
     setSearchTerm(value)
     //filter with findTerm
@@ -192,10 +193,12 @@ export const Threads: React.FunctionComponent = () => {
       State
     </DropdownItem>,
   ]
+
   const getIndexedThread = (thread: Thread): (string | number)[] => {
     const { suspended, blockedTime, inNative, threadId, threadName, threadState, waitedTime } = thread
     return [threadId, threadState, threadName, waitedTime, blockedTime, String(inNative), String(suspended)]
   }
+
   const getSortParams = (sortColumn: number): ThProps['sort'] => ({
     sortBy: {
       index: sortIndex,
@@ -208,6 +211,7 @@ export const Threads: React.FunctionComponent = () => {
     },
     columnIndex: sortColumn,
   })
+
   const sortThreads = (): Thread[] => {
     let sortedThreads = filteredThreads
     if (sortIndex >= 0) {
@@ -220,117 +224,125 @@ export const Threads: React.FunctionComponent = () => {
     return sortedThreads
   }
 
-  function onThreadDumpClick() {
+  const onThreadDumpClick = () => {
     setIsThreadsDumpModalOpen(true)
   }
 
-  async function handleConnectionThreadMonitoring() {
-    runtimeService.enableThreadContentionMonitoring(!threadConnectionMonitoring)
+  const handleConnectionThreadMonitoring = async () => {
+    await runtimeService.enableThreadContentionMonitoring(!threadConnectionMonitoring)
     setThreadConnectionMonitoring(!threadConnectionMonitoring)
   }
 
+  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}>
+                {tableColumns.find(att => att.value === 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>
+          <ToolbarItem>
+            <Button variant='secondary' onClick={addToFilters} isSmall>
+              Add Filter
+            </Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Button variant='secondary' onClick={handleConnectionThreadMonitoring} isSmall>
+              {threadConnectionMonitoring ? 'Disable' : 'Enable'} Connection Thread Monitoring
+            </Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant='secondary' onClick={onThreadDumpClick} isSmall>
+              Thread Dump
+            </Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+
+        <ToolbarItem variant='pagination'>
+          <PropsPagination />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  )
+
   return (
     <Card isFullHeight>
-      <CardBody>
-        {isThreadsDumpModalOpen && (
-          <ThreadsDumpModal isOpen={isThreadsDumpModalOpen} setIsOpen={setIsThreadsDumpModalOpen} />
-        )}
-        {isThreadDetailsOpen && currentThread && (
-          <ThreadInfoModal isOpen={isThreadDetailsOpen} thread={currentThread} setIsOpen={setIsThreadDetailsOpen} />
-        )}
-        <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}>
-                    {tableColumns.find(att => att.value === 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>
-              <Button variant='secondary' onClick={handleConnectionThreadMonitoring}>
-                {threadConnectionMonitoring ? 'Disable' : 'Enable'} Connection Thread Monitoring
-              </Button>
-              <Button variant='secondary' onClick={onThreadDumpClick}>
-                Thread Dump
-              </Button>
-            </ToolbarGroup>
-
-            <ToolbarItem variant='pagination'>
-              <PropsPagination />
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-        {sortThreads().length > 0 && (
-          <FormGroup>
-            <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped>
-              <Thead>
-                <Tr>
-                  {tableColumns.map((att, index) => (
-                    <Th key={'th-key' + index} data-testid={'id-' + att.key} sort={getSortParams(index)}>
-                      {att.value}
-                    </Th>
-                  ))}
-                  <Th> Actions</Th>
-                </Tr>
-              </Thead>
-              <Tbody>
-                {getThreadsPage().map((thread, index) => {
-                  return (
-                    <Tr key={'row' + index} data-testid={'row' + index}>
-                      {tableColumns.map((att, column) => (
-                        <Td key={'col' + index + '-' + column}>{getIndexedThread(thread)[column]}</Td>
-                      ))}
-                      <Td>
-                        <Button
-                          onClick={_event => {
-                            setIsThreadDetailsOpen(true)
-                            setCurrentThread(thread)
-                          }}
-                        >
-                          More
-                        </Button>
-                      </Td>
-                    </Tr>
-                  )
-                })}
-              </Tbody>
-            </TableComposable>
-          </FormGroup>
-        )}
-        {filteredThreads.length === 0 && (
-          <Bullseye>
-            <EmptyState>
-              <EmptyStateIcon icon={SearchIcon} />
-              <EmptyStateBody>No results found.</EmptyStateBody>
-            </EmptyState>
-          </Bullseye>
-        )}
-      </CardBody>
+      <ThreadsDumpModal isOpen={isThreadsDumpModalOpen} setIsOpen={setIsThreadsDumpModalOpen} />
+      <ThreadInfoModal isOpen={isThreadDetailsOpen} thread={currentThread} setIsOpen={setIsThreadDetailsOpen} />
+      {tableToolbar}
+      {sortThreads().length > 0 && (
+        <FormGroup>
+          <TableComposable aria-label='Message Table' variant='compact' height='80vh' isStriped isStickyHeader>
+            <Thead>
+              <Tr>
+                {tableColumns.map((att, index) => (
+                  <Th key={'th-key' + index} data-testid={'id-' + att.key} sort={getSortParams(index)}>
+                    {att.value}
+                  </Th>
+                ))}
+                <Th> Actions</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {getThreadsPage().map((thread, index) => {
+                return (
+                  <Tr key={'row' + index} data-testid={'row' + index}>
+                    {tableColumns.map((att, column) => (
+                      <Td key={'col' + index + '-' + column}>{getIndexedThread(thread)[column]}</Td>
+                    ))}
+                    <Td>
+                      <Button
+                        onClick={_event => {
+                          setIsThreadDetailsOpen(true)
+                          setCurrentThread(thread)
+                        }}
+                        isSmall
+                      >
+                        More
+                      </Button>
+                    </Td>
+                  </Tr>
+                )
+              })}
+            </Tbody>
+          </TableComposable>
+        </FormGroup>
+      )}
+      {filteredThreads.length === 0 && (
+        <Bullseye>
+          <EmptyState>
+            <EmptyStateIcon icon={SearchIcon} />
+            <EmptyStateBody>No results found.</EmptyStateBody>
+          </EmptyState>
+        </Bullseye>
+      )}
     </Card>
   )
 }