Pods Summary UI improvements (#1449)

portal-ui/src/screens/Console/Storage/StoragePVCs.tsx

@@ -77,7 +77,7 @@ const StorageVolumes = ({
   }, [loading, setErrorSnackMessage]);
 
   const filteredRecords: IStoragePVCs[] = records.filter((elementItem) =>
-    elementItem.name.includes(filter)
+    elementItem.name.toLowerCase().includes(filter.toLowerCase())
   );
 
   const confirmDeletePVC = (pvcItem: IStoragePVCs) => {

portal-ui/src/screens/Console/Tenants/TenantDetails/PodsSummary.tsx

@@ -33,7 +33,8 @@ import { AppState } from "../../../../store";
 import { setTenantDetailsLoad } from "../actions";
 import { ErrorResponseHandler } from "../../../../common/types";
 import DeletePod from "./DeletePod";
-import { Grid } from "@mui/material";
+import {Grid, InputAdornment, TextField} from "@mui/material";
+import SearchIcon from "../../../../icons/SearchIcon";
 
 interface IPodsSummary {
   classes: any;
@@ -60,7 +61,7 @@ const PodsSummary = ({
   const [loadingPods, setLoadingPods] = useState<boolean>(true);
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
   const [selectedPod, setSelectedPod] = useState<any>(null);
-
+  const [filter, setFilter] = useState("");
   const tenantName = match.params["tenantName"];
   const tenantNamespace = match.params["tenantNamespace"];
 
@@ -83,6 +84,10 @@ const PodsSummary = ({
     setDeleteOpen(true);
   };
 
+  const filteredRecords: IPodListElement[] = pods.filter((elementItem) =>
+    elementItem.name.toLowerCase().includes(filter.toLowerCase())
+  );
+
   const podTableActions = [
     { type: "view", onClick: podViewAction },
     { type: "delete", onClick: confirmDeletePod },
@@ -130,10 +135,30 @@ const PodsSummary = ({
         />
       )}
       <h1 className={classes.sectionTitle}>Pods</h1>
+      <Grid item xs={12} className={classes.actionsTray}>
+        <TextField
+            placeholder="Search Pods"
+            className={classes.searchField}
+            id="search-resource"
+            label=""
+            InputProps={{
+              disableUnderline: true,
+              startAdornment: (
+                  <InputAdornment position="start">
+                    <SearchIcon />
+                  </InputAdornment>
+              ),
+            }}
+            onChange={(e) => {
+              setFilter(e.target.value);
+            }}
+            variant="standard"
+        />
+      </Grid>
       <Grid item xs={12} className={classes.tableBlock}>
         <TableWrapper
           columns={[
-            { label: "Name", elementKey: "name" },
+            { label: "Name", elementKey: "name", width: 200 },
             { label: "Status", elementKey: "status" },
             { label: "Age", elementKey: "time" },
             { label: "Pod IP", elementKey: "podIP" },
@@ -147,9 +172,9 @@ const PodsSummary = ({
             { label: "Node", elementKey: "node" },
           ]}
           isLoading={loadingPods}
-          records={pods}
+          records={filteredRecords}
           itemActions={podTableActions}
-          entityName="Servers"
+          entityName="Pods"
           idField="name"
         />
       </Grid>

portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx

@@ -22,10 +22,8 @@ import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
 import { Grid, InputAdornment, TextField } from "@mui/material";
 import {
-  actionsTray,
   containerForHeader,
-  searchField,
-  tableStyles,
+  tableStyles, tenantDetailsStyles,
 } from "../../Common/FormComponents/common/styleLibrary";
 import { IStoragePVCs } from "../../Storage/types";
 import { setErrorSnackMessage } from "../../../../actions";
@@ -50,15 +48,11 @@ interface ITenantVolumesProps {
 }
 
 const styles = (theme: Theme) =>
-  createStyles({
-    tableWrapper: {
-      height: "450px",
-    },
-    ...actionsTray,
-    ...searchField,
-    ...tableStyles,
-    ...containerForHeader(theme.spacing(4)),
-  });
+    createStyles({
+      ...tenantDetailsStyles,
+      ...tableStyles,
+      ...containerForHeader(theme.spacing(4)),
+    });
 
 const TenantVolumes = ({
   classes,
@@ -106,7 +100,7 @@ const TenantVolumes = ({
   };
 
   const filteredRecords: IStoragePVCs[] = records.filter((elementItem) =>
-    elementItem.name.includes(filter)
+    elementItem.name.toLowerCase().includes(filter.toLowerCase())
   );
 
   const PVCViewAction = (PVC: IPodListElement) => {
@@ -157,9 +151,6 @@ const TenantVolumes = ({
           variant="standard"
         />
       </Grid>
-      <Grid item xs={12}>
-        <br />
-      </Grid>
       <Grid item xs={12} className={classes.tableBlock}>
         <TableWrapper
           itemActions={[