Merge branch 'cf-record-improvements-ICSHWI-11407' into 'develop'

CF record improvements ICSHWI-11407

See merge request !260

src/components/records/RecordSearch.js

-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>
   );
 }

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) {

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;
       }
     }