diff --git a/src/components/records/RecordSearch.js b/src/components/records/RecordSearch.js index 3915e97c4b7525cf7835b74c042136d77d046773..a381f892173447f2bf60c1df1329a99d43cca6d5 100644 --- a/src/components/records/RecordSearch.js +++ b/src/components/records/RecordSearch.js @@ -1,14 +1,48 @@ -import React, { useEffect, useCallback } from "react"; +import React, { useEffect, useCallback, useState } from "react"; import { useRecordSearch } from "../../api/SwaggerApi"; import { initRequestParams } from "../common/Helper"; import { RecordTable } from "./RecordTable"; import { SearchBar } from "../common/SearchBar/SearchBar"; import useUrlState from "@ahooksjs/use-url-state"; import { serialize, deserialize } from "../common/URLState/URLState"; +import { Grid, Tabs, Tab, Typography } from "@material-ui/core"; export function RecordSearch({ iocName, rowType }) { const [records, getRecords /* reset*/, , loading] = useRecordSearch(); - const [state, setState] = useUrlState({ rows: "20", page: "0", query: "" }); + const [state, setState] = useUrlState({ + record_tab: "0", + rows: "20", + page: "0", + query: "" + }); + const [recordFilter, setRecordFilter] = useState(); + + const handleTabChange = useCallback( + (event, tab) => { + setState((s) => + serialize(s.record_tab) === serialize(tab) + ? { record_tab: serialize(tab) } + : { record_tab: serialize(tab), page: "0" } + ); + + changeTab(tab); + }, + [setState] + ); + + useEffect(() => { + state.record_tab && changeTab(deserialize(state.record_tab)); + }, [state]); + + const changeTab = (tab) => { + if (tab === 0) { + setRecordFilter(null); + } else if (tab === 1) { + setRecordFilter("ACTIVE"); + } else if (tab === 2) { + setRecordFilter("INACTIVE"); + } + }; const lazyParams = useCallback(() => { return { @@ -41,8 +75,10 @@ export function RecordSearch({ iocName, rowType }) { ioc_name: iocName }; } + requestParams.pv_status = recordFilter; + getRecords(requestParams); - }, [getRecords, lazyParams, iocName, state]); + }, [getRecords, lazyParams, iocName, state, recordFilter]); const setSearch = useCallback( (query) => { @@ -52,20 +88,39 @@ export function RecordSearch({ iocName, rowType }) { ); return ( - <SearchBar - search={setSearch} - query={deserialize(state.query)} - loading={loading} - placeholder="Search in Record" + <Grid + container + spacing={1} > - <RecordTable - records={records} - rowType={rowType} - loading={loading} - lazyParams={lazyParams()} - setLazyParams={setLazyParams} - rowsPerPage={rowsPerPage} - /> - </SearchBar> + <Grid item> + <Tabs + value={deserialize(state.record_tab)} + onChange={handleTabChange} + indicatorColor="primary" + textColor="primary" + > + <Tab label={<Typography variant="h5">All</Typography>} /> + <Tab label={<Typography variant="h5">Only active</Typography>} /> + <Tab label={<Typography variant="h5">Only inactive</Typography>} /> + </Tabs> + </Grid> + <Grid item> + <SearchBar + search={setSearch} + query={deserialize(state.query)} + loading={loading} + placeholder="Search in Record" + > + <RecordTable + records={records} + rowType={rowType} + loading={loading} + lazyParams={lazyParams()} + setLazyParams={setLazyParams} + rowsPerPage={rowsPerPage} + /> + </SearchBar> + </Grid> + </Grid> ); } diff --git a/src/components/records/RecordTable.js b/src/components/records/RecordTable.js index 6b6afaad29584f11ddfff15fa0c606650c9fa347..8846161331e454c4b6c5165ae5355c5d0dc9de79 100644 --- a/src/components/records/RecordTable.js +++ b/src/components/records/RecordTable.js @@ -14,7 +14,7 @@ const recordsColumns = [ const iocDetailsColumns = [ { id: "bulb", label: "Status", width: "5ch", textAlign: "center" }, { id: "name", label: "Record", width: "15ch" }, - { id: "iocVersion", label: "IOC version", width: "15ch" } + { id: "iocVersion", label: "Version", width: "15ch" } ]; export function createRecordsRow(record) { diff --git a/src/views/records/RecordDetailsView.js b/src/views/records/RecordDetailsView.js index ed62aa41e95e03bd399e38d078a923806e8bdea1..c905a141ad15201d384009273ffb8f5c14ed3230 100644 --- a/src/views/records/RecordDetailsView.js +++ b/src/views/records/RecordDetailsView.js @@ -51,7 +51,7 @@ export function RecordDetailsView() { ) : ( record?.iocName ), - "IOC version": record?.iocVersion, + Version: record?.iocVersion, Host: record.hostCSentryId ? ( <Typography> <MuiLink @@ -68,9 +68,9 @@ export function RecordDetailsView() { for (const [key, value] of Object.entries(record.properties)) { if (key.toLowerCase().includes("time")) { - subset[key] = formatDate(value); - } else { - subset[key] = value; + subset["Last updated"] = formatDate(value); + } else if (key.toLowerCase() !== "iocid") { + subset[key.replaceAll("_", " ")] = value; } }