HostListView.js

import React, { useState, useEffect, useCallback } from "react";
import {
    Container,
    Paper,
    Grid,
    Hidden,
    Tabs,
    Tab,
    Typography,
    FormControlLabel,
    Switch
} from '@material-ui/core';
import { RootContainer } from "../../components/common/Container/RootContainer";
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, transformHostQuery } from "../../components/common/Helper";
import { SearchBar } from "../../components/common/SearchBar/SearchBar";
import AccessControl from "../../components/auth/AccessControl";

const useStyles = makeStyles((theme) => ({
    root: {
        marginBottom: theme.spacing(2),
    },
}));

const NoAccess = () => <></>

export function HostListView() {
    useGlobalAppBar("IOC hosts");

    const [hosts, getHosts, /*reset*/, loading] = useCSEntrySearch();
    const [hostFilter, setHostFilter] = useState("ALL");
    const [selectedTab, setSelectedTab] = useState(0);
    const [ownOnly, setOwnOnly] = useState(false);
    const [query, setQuery] = useState("");
    const classes = useStyles();

    const hideOwnSlider = selectedTab === 2;

    const handleTabChange = useCallback((event, tab) => {
        setSelectedTab(tab);
        if (tab === 0) {
            setHostFilter("ALL");
        }
        else if (tab === 1) {
            setHostFilter("IOCS_DEPLOYED");
        }
        else if (tab === 2) {
            setHostFilter("NO_IOCS");
        }
    }, []);



    const handleChangeOwn = useCallback((event) => {
        const own = event.target.checked;
        setOwnOnly(own);
    }, [])

    const [lazyParams, setLazyParams] = useState({
        rows: 20,
        page: 0
    });

    const rowsPerPage = [20, 50];

    useEffect(() => {
        let requestParams = initRequestParams(lazyParams, transformHostQuery(query));
        requestParams.filter = ((hostFilter !== "NO_IOCS") && ownOnly) ? "OWN" : hostFilter;

        getHosts(requestParams);
    }, [getHosts, lazyParams, query, hostFilter, ownOnly])

    const content = (
        <>
            <SearchBar search={setQuery} loading={loading}>
                <Hidden smUp>
                    <HostList hosts={hosts.hostList} />
                </Hidden>
                <Hidden xsDown>
                    <HostTable hosts={hosts.hostList} loading={loading}
                        totalCount={hosts.totalCount} lazyParams={lazyParams} setLazyParams={setLazyParams}
                        rowsPerPage={rowsPerPage} />
                </Hidden>
            </SearchBar>
        </>
    );

    return (
        <RootContainer>
            <Paper className={classes.root}>
                <Grid container spacing={1}>
                    <Grid container spacing={1} component={Container} justify="space-between" alignItems="center" style={{display: "flex"}} >
                        <Grid item>
                            <Tabs
                                value={selectedTab}
                                onChange={handleTabChange}
                                indicatorColor="primary"
                                textColor="primary">
                                <Tab label={<Typography variant="h5">All</Typography>} />
                                <Tab label={<Typography variant="h5">Only hosts with IOCs</Typography>} />
                                <Tab label={<Typography variant="h5">Only hosts without IOCs</Typography>} />
                            </Tabs>
                        </Grid>
                        <Grid item>
                            <AccessControl allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
                                renderNoAccess={NoAccess} >
                                <FormControlLabel className={classes.formControl}
                                    control={<Switch disabled={hideOwnSlider} checked={ownOnly} onChange={handleChangeOwn} />}
                                    label={<Typography noWrap variant="h5">Only my IOC hosts</Typography>}
                                />
                            </AccessControl>
                        </Grid>
                    </Grid>
                    <Grid item xs={12} md={12}>
                        {content}
                    </Grid>
                </Grid>
            </Paper>
        </RootContainer>
    );
}