Update HostListView, HostList, and HostTable to use SearchBar and api loading info

src/components/host/HostList.js

@@ -4,10 +4,7 @@ import {
     ListItem,
     Paper
 } from '@material-ui/core';
-
 import { Link } from 'react-router-dom';
-import { SearchBoxFilter } from "../common/SearchBoxFilter/SearchBoxFilter";
-import { useGlobalAppBar } from "../../components/navigation/GlobalAppBar/GlobalAppBar";
 import { HostBadge } from './HostBadge';
 
 export function HostListItem({ host }) {
@@ -20,7 +17,7 @@ export function HostListItem({ host }) {
     );
 }
 
-export function HostLists({ hosts }) {
+export function HostList({ hosts }) {
     return (
         <List>
             {hosts && hosts.map((host) => {
@@ -31,23 +28,4 @@ export function HostLists({ hosts }) {
             })}
         </List>
     );
-}
-
-export default function HostList({hosts, setQuery}) {
-    useGlobalAppBar(
-        "Hosts"
-      );
-
-    const filter = (search) => {
-        setQuery(search.toLowerCase());
-        return (host) => {
-            return true;
-        }
-    }
-
-    const renderFilteredHosts = (filteredHosts) => <HostLists hosts={filteredHosts} />;
-
-    return (
-        <SearchBoxFilter items={hosts} filter={filter} render={renderFilteredHosts} />
-    );
 }
\ No newline at end of file

src/components/host/HostTable.js

 import React from 'react';
 import { Grid, Tooltip } from "@material-ui/core";
 import { CustomTable } from '../common/table/CustomTable';
-import { SearchBoxFilter } from "../common/SearchBoxFilter/SearchBoxFilter";
 import { useHistory } from 'react-router-dom';
 import { HostStatusIcon } from './HostIcons';
 
@@ -16,7 +15,7 @@ const columns = [
 
 export function rowDescription(description) {
 
-    return(
+    return (
         <div className={'shortenLongDataLines'}>
             <Tooltip title={description} arrow enterDelay={400}>
                 <label>{description}</label>
@@ -29,10 +28,10 @@ export function createRow(hostContainer) {
     const host = hostContainer.csEntryHost;
     return {
         id: host.id,
-        bulb: 
-          <Grid container direction="column" justifyContent="center" alignItems="center">
-            <HostStatusIcon host={hostContainer} />
-          </Grid>,
+        bulb:
+            <Grid container direction="column" justifyContent="center" alignItems="center">
+                <HostStatusIcon host={hostContainer} />
+            </Grid>,
         host: host.name,
         description: rowDescription(host.description),
         network: host.network,
@@ -43,31 +42,13 @@ export function createRow(hostContainer) {
 
 }
 
-export function HostsTable({ hosts, totalCount, lazyParams, setLazyParams, columnSort, setColumnSort, rowsPerPage}) {
+export function HostTable({ hosts, totalCount, lazyParams, setLazyParams, columnSort, setColumnSort, rowsPerPage, loading}) {
     const history = useHistory();
 
-    console.log(hosts);
-
     const onRowClicked = (id) => {
         history.push(`/hosts/${id}`);
     };
 
     return <CustomTable columns={columns} rows={hosts.map(host => createRow(host))} handleRowClick={onRowClicked} totalCount={totalCount}
-        lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} rowsPerPage={rowsPerPage}/>;
-}
-
-export default function HostTable({ hosts, setQuery, totalCount, lazyParams, setLazyParams, columnSort, setColumnSort, rowsPerPage}) {
-    const filter = (search) => {
-        setQuery(search.toLowerCase());
-        return (hostContainer) => {
-            return true;    
-        }
-    }
-
-    const renderFilteredHosts = (filteredHosts) => <HostsTable hosts={filteredHosts} totalCount={totalCount} 
-        lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} rowsPerPage={rowsPerPage}/>;
-
-    return (
-        <SearchBoxFilter items={hosts} filter={filter} render={renderFilteredHosts} />
-    );
+        lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort} rowsPerPage={rowsPerPage} loading={loading} />;
 }
\ No newline at end of file

src/views/host/HostListView.js

@@ -6,12 +6,13 @@ import {
     Container
 } from '@material-ui/core';
 import { RootContainer } from "../../components/common/Container/RootContainer";
-import HostList from '../../components/host/HostList';
-import HostTable from '../../components/host/HostTable';
+import { HostList } from '../../components/host/HostList';
+import { HostTable } from '../../components/host/HostTable';
 import { useCSEntrySearch } from "../../api/SwaggerApi";
 import { useGlobalAppBar } from '../../components/navigation/GlobalAppBar/GlobalAppBar';
 import { makeStyles } from '@material-ui/core/styles';
 import { initRequestParams } from "../../components/common/Helper";
+import { SearchBar } from "../../components/common/SearchBar/SearchBar";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -22,8 +23,8 @@ const useStyles = makeStyles((theme) => ({
 export function HostListView() {
     useGlobalAppBar("Explore IOC hosts");
 
-    const [hosts, getHosts] = useCSEntrySearch();
-    const [query, setQuery] = useState();
+    const [hosts, getHosts, /*reset*/, loading] = useCSEntrySearch();
+    const [query, setQuery] = useState("");
     const classes = useStyles();
 
     const [lazyParams, setLazyParams] = useState({
@@ -48,14 +49,16 @@ export function HostListView() {
    
     const content = (
         <>
+        <SearchBar search={setQuery} loading={loading}>
             <Hidden smUp>
-                <HostList hosts={hosts.hostList} setQuery={setQuery}/>
+                <HostList hosts={hosts.hostList}/>
             </Hidden>
             <Hidden xsDown>
-                <HostTable hosts={hosts.hostList} setQuery={setQuery} 
+                <HostTable hosts={hosts.hostList} loading={loading}
                     totalCount={hosts.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams} columnSort={columnSort} setColumnSort={setColumnSort}
                     rowsPerPage={rowsPerPage} />
             </Hidden>
+        </SearchBar>
         </>
     );