Connected filters for bucket details sections (#801)

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx

@@ -104,6 +104,13 @@ const BucketEventsPanel = ({
 
   const tableActions = [{ type: "delete", onClick: confirmDeleteEvent }];
 
+  const filteredRecords = records.filter((item: BucketEvent) => {
+    if(item.arn.toLowerCase().includes(filter.toLowerCase())) {
+      return true;
+    }
+    return false;
+  });
+
   return (
     <Fragment>
       {deleteOpen && (
@@ -170,7 +177,7 @@ const BucketEventsPanel = ({
               { label: "Suffix", elementKey: "suffix" },
             ]}
             isLoading={loadingEvents}
-            records={records}
+            records={filteredRecords}
             entityName="Events"
             idField="id"
           />

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx

@@ -61,6 +61,7 @@ const BucketLifecyclePanel = ({
   const [lifecycleRecords, setLifecycleRecords] = useState<LifeCycleItem[]>([]);
   const [addLifecycleOpen, setAddLifecycleOpen] = useState<boolean>(false);
   const [editLifecycleOpen, setEditLifecycleOpen] = useState<boolean>(false);
+  const [filter, setFilter] = useState<string>("");
 
   const bucketName = match.params["bucketName"];
 
@@ -153,6 +154,16 @@ const BucketLifecyclePanel = ({
     },
   ];
 
+  const filteredRecords = lifecycleRecords.filter(
+    (item: LifeCycleItem) => {
+      if (item.id.toLocaleLowerCase().includes(filter.toLowerCase()))
+      {
+        return true;
+      }
+      return false;
+    }
+  );
+
   return (
     <Fragment>
       {editLifecycleOpen && (
@@ -180,7 +191,7 @@ const BucketLifecyclePanel = ({
             id="search-resource"
             label=""
             onChange={(event) => {
-              // setFilter(event.target.value);
+              setFilter(event.target.value);
             }}
             InputProps={{
               disableUnderline: true,
@@ -211,7 +222,7 @@ const BucketLifecyclePanel = ({
             itemActions={[]}
             columns={lifecycleColumns}
             isLoading={loadingLifecycle}
-            records={lifecycleRecords}
+            records={filteredRecords}
             entityName="Lifecycle"
             customEmptyMessage="There are no Lifecycle rules yet"
             idField="id"

portal-ui/src/screens/Console/Buckets/BucketDetails/BucketReplicationPanel.tsx

@@ -72,6 +72,7 @@ const BucketReplicationPanel = ({
     useState<boolean>(false);
   const [openSetReplication, setOpenSetReplication] = useState<boolean>(false);
   const [selectedRRule, setSelectedRRule] = useState<string>("");
+  const [filter, setFilter] = useState<string>("");
 
   const bucketName = match.params["bucketName"];
 
@@ -185,6 +186,19 @@ const BucketReplicationPanel = ({
     },
   ];
 
+  const filteredRecords = replicationRules.filter(
+    (item: BucketReplicationRule) => {
+      if (
+        (item.prefix &&
+          item.prefix.toLowerCase().includes(filter.toLowerCase())) ||
+        (item.tags && item.tags.toLowerCase().includes(filter.toLowerCase()))
+      ) {
+        return true;
+      }
+      return false;
+    }
+  );
+
   return (
     <Fragment>
       {openSetReplication && (
@@ -211,7 +225,7 @@ const BucketReplicationPanel = ({
             id="search-resource"
             label=""
             onChange={(event) => {
-              // setFilter(event.target.value);
+              setFilter(event.target.value);
             }}
             InputProps={{
               disableUnderline: true,
@@ -274,7 +288,7 @@ const BucketReplicationPanel = ({
               { label: "Status", elementKey: "status" },
             ]}
             isLoading={loadingReplication}
-            records={replicationRules}
+            records={filteredRecords}
             entityName="Replication Rules"
             idField="id"
           />

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

@@ -16,7 +16,6 @@
 
 import React, { Fragment, useEffect, useState } from "react";
 import { connect } from "react-redux";
-import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import {
   actionsTray,
@@ -28,29 +27,15 @@ import {
 } from "../../Common/FormComponents/common/styleLibrary";
 import Grid from "@material-ui/core/Grid";
 import {
-  Button,
-  IconButton,
-  Menu,
-  MenuItem,
   TextField,
 } from "@material-ui/core";
-import Tabs from "@material-ui/core/Tabs";
-import Tab from "@material-ui/core/Tab";
-import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import Paper from "@material-ui/core/Paper";
 import api from "../../../../common/api";
 import PageHeader from "../../Common/PageHeader/PageHeader";
-import { ILog, ITenant } from "../ListTenants/types";
-import { LicenseInfo } from "../../License/types";
 import { Link } from "react-router-dom";
 import { setErrorSnackMessage } from "../../../../actions";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import TenantYAML from "./TenantYAML";
-import SubnetLicenseTenant from "./SubnetLicenseTenant";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import SearchIcon from "@material-ui/icons/Search";
-import history from "../../../../history";
-import { LogMessage } from "../../Logs/types";
 
 interface ITenantDetailsProps {
   classes: any;
@@ -165,8 +150,6 @@ const TenantDetails = ({
   match,
   setErrorSnackMessage,
 }: ITenantDetailsProps) => {
-  const [selectedTab, setSelectedTab] = useState<number>(0);
-  const [log, setLog] = useState<string>("");
   const [highlight, setHighlight] = useState<string>("");
   const [logLines, setLogLines] = useState<string[]>([]);
   const tenantNamespace = match.params["tenantNamespace"];
@@ -225,13 +208,12 @@ const TenantDetails = ({
         `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/pods/${podName}`
       )
       .then((res: string) => {
-        setLog(res);
         setLogLines(res.split("\n"));
       })
       .catch((err) => {
         setErrorSnackMessage(err);
       });
-  }, [tenantNamespace, tenantName, podName]);
+  }, [tenantNamespace, tenantName, podName, setErrorSnackMessage]);
 
   return (
     <React.Fragment>