From 2323e56fa954cf4f172943df8d43a06818a07ba2 Mon Sep 17 00:00:00 2001
From: Adam Stafford <adfost@comcast.net>
Date: Mon, 24 Jan 2022 16:58:34 -0800
Subject: [PATCH 1/2] adding PVC events UI

---
 .../src/common/SecureComponent/permissions.ts |   2 +
 portal-ui/src/screens/Console/Console.tsx     |   5 +
 .../Tenants/TenantDetails/PVCDetails.tsx      | 113 ++++++++++++++++++
 .../Tenants/TenantDetails/TenantDetails.tsx   |   5 +
 .../Tenants/TenantDetails/VolumesSummary.tsx  |  12 +-
 5 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx

diff --git a/portal-ui/src/common/SecureComponent/permissions.ts b/portal-ui/src/common/SecureComponent/permissions.ts
index 966d6d95c3..09d72f2a8d 100644
--- a/portal-ui/src/common/SecureComponent/permissions.ts
+++ b/portal-ui/src/common/SecureComponent/permissions.ts
@@ -199,6 +199,8 @@ export const IAM_PAGES = {
   NAMESPACE_TENANT_HOP: "/namespaces/:tenantNamespace/tenants/:tenantName/hop",
   NAMESPACE_TENANT_PODS:
     "/namespaces/:tenantNamespace/tenants/:tenantName/pods/:podName",
+  NAMESPACE_TENANT_PVCS:
+    "/namespaces/:tenantNamespace/tenants/:tenantName/pvcs/:PVCName",
   NAMESPACE_TENANT_PODS_LIST:
     "/namespaces/:tenantNamespace/tenants/:tenantName/pods",
   NAMESPACE_TENANT_SUMMARY:
diff --git a/portal-ui/src/screens/Console/Console.tsx b/portal-ui/src/screens/Console/Console.tsx
index 7102f87400..95564521b8 100644
--- a/portal-ui/src/screens/Console/Console.tsx
+++ b/portal-ui/src/screens/Console/Console.tsx
@@ -416,6 +416,11 @@ const Console = ({
       path: IAM_PAGES.NAMESPACE_TENANT_PODS,
       forceDisplay: true,
     },
+    {
+      component: TenantDetails,
+      path: IAM_PAGES.NAMESPACE_TENANT_PVCS,
+      forceDisplay: true,
+    },
     {
       component: TenantDetails,
       path: IAM_PAGES.NAMESPACE_TENANT_SUMMARY,
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx
new file mode 100644
index 0000000000..32466e5a70
--- /dev/null
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx
@@ -0,0 +1,113 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Fragment, useEffect, useState } from "react";
+import { Theme } from "@mui/material/styles";
+import createStyles from "@mui/styles/createStyles";
+import withStyles from "@mui/styles/withStyles";
+import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import Grid from "@mui/material/Grid";
+import { Link } from "react-router-dom";
+import { setErrorSnackMessage } from "../../../../actions";
+import api from "../../../../common/api";
+import { IEvent } from "../ListTenants/types";
+import { niceDays } from "../../../../common/utils";
+import { ErrorResponseHandler } from "../../../../common/types";
+import TableWrapper from "../../Common/TableWrapper/TableWrapper";
+
+interface IPVCDetailsProps {
+  classes: any;
+  match: any;
+  setErrorSnackMessage: typeof setErrorSnackMessage;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    breadcrumLink: {
+      textDecoration: "none",
+      color: "black",
+    },
+    ...containerForHeader(theme.spacing(4)),
+  });
+
+const PVCDetails = ({
+  classes,
+  match,
+  setErrorSnackMessage,
+}: IPVCDetailsProps) => {
+  const [loading, setLoading] = useState<boolean>(true);
+  const tenantNamespace = match.params["tenantNamespace"];
+  const tenantName = match.params["tenantName"];
+  const PVCName = match.params["PVCName"];
+  const [event, setEvent] = useState<IEvent[]>([]);
+
+  useEffect(() => {
+    if (loading) {
+      api
+        .invoke(
+          "GET",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/pvcs/${PVCName}/events`
+        )
+        .then((res: IEvent[]) => {
+          for (let i = 0; i < res.length; i++) {
+            let currentTime = (Date.now() / 1000) | 0;
+
+            res[i].seen = niceDays((currentTime - res[i].last_seen).toString());
+          }
+          setEvent(res);
+          setLoading(false);
+        })
+        .catch((err: ErrorResponseHandler) => {
+          setErrorSnackMessage(err);
+          setLoading(false);
+        });
+    }
+  }, [loading, PVCName, tenantNamespace, tenantName, setErrorSnackMessage]);
+
+  return (
+    <Fragment>
+      <Grid item xs={12}>
+        <h1 className={classes.sectionTitle}>
+          <Link
+            to={`/namespaces/${tenantNamespace}/tenants/${tenantName}/volumes`}
+            className={classes.breadcrumLink}
+          >
+            PVCs
+          </Link>{" "}
+          &gt; {PVCName}
+        </h1>
+      </Grid>
+      <Grid container>
+        <TableWrapper
+          itemActions={[]}
+          columns={[
+            { label: "Namespace", elementKey: "namespace" },
+            { label: "Last Seen", elementKey: "seen" },
+            { label: "Message", elementKey: "message" },
+            { label: "Event Type", elementKey: "event_type" },
+            { label: "Reason", elementKey: "reason" },
+          ]}
+          isLoading={loading}
+          records={event}
+          entityName="Events"
+          idField="event"
+        />
+      </Grid>
+    </Fragment>
+  );
+};
+
+export default withStyles(styles)(PVCDetails);
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
index db976ed91e..3e321222be 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx
@@ -50,6 +50,7 @@ import BackLink from "../../../../common/BackLink";
 import VerticalTabs from "../../Common/VerticalTabs/VerticalTabs";
 import BoxIconButton from "../../Common/BoxIconButton/BoxIconButton";
 import withSuspense from "../../Common/Components/withSuspense";
+import PVCDetails from "./PVCDetails";
 
 const TenantYAML = withSuspense(React.lazy(() => import("./TenantYAML")));
 const TenantSummary = withSuspense(React.lazy(() => import("./TenantSummary")));
@@ -438,6 +439,10 @@ const TenantDetails = ({
                     path="/namespaces/:tenantNamespace/tenants/:tenantName/pods"
                     component={PodsSummary}
                   />
+                  <Route
+                    path="/namespaces/:tenantNamespace/tenants/:tenantName/pvcs/:PVCName"
+                    component={PVCDetails}
+                  />
                   <Route
                     path="/namespaces/:tenantNamespace/tenants/:tenantName/volumes"
                     component={VolumesSummary}
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
index 3c117c3979..87b4c6ff27 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/VolumesSummary.tsx
@@ -33,10 +33,12 @@ import { ErrorResponseHandler } from "../../../../common/types";
 import api from "../../../../common/api";
 import TableWrapper from "../../Common/TableWrapper/TableWrapper";
 import SearchIcon from "../../../../icons/SearchIcon";
+import { IPodListElement } from "../ListTenants/types";
 
 interface ITenantVolumesProps {
   classes: any;
   setErrorSnackMessage: typeof setErrorSnackMessage;
+  history: any;
   match: any;
 }
 
@@ -54,6 +56,7 @@ const styles = (theme: Theme) =>
 const TenantVolumes = ({
   classes,
   setErrorSnackMessage,
+  history,
   match,
 }: ITenantVolumesProps) => {
   const [records, setRecords] = useState<IStoragePVCs[]>([]);
@@ -86,6 +89,13 @@ const TenantVolumes = ({
     elementItem.name.includes(filter)
   );
 
+  const PVCViewAction = (PVC: IPodListElement) => {
+    history.push(
+      `/namespaces/${tenantNamespace}/tenants/${tenantName}/pvcs/${PVC.name}`
+    );
+    return;
+  };
+
   return (
     <Fragment>
       <h1 className={classes.sectionTitle}>Volumes</h1>
@@ -114,7 +124,7 @@ const TenantVolumes = ({
       </Grid>
       <Grid item xs={12} className={classes.tableBlock}>
         <TableWrapper
-          itemActions={[]}
+          itemActions={[{ type: "view", onClick: PVCViewAction }]}
           columns={[
             {
               label: "Name",

From 3e2e8c2f96496cb856c5efa1a656b50b8f3c5e1a Mon Sep 17 00:00:00 2001
From: Adam Stafford <adfost@comcast.net>
Date: Mon, 24 Jan 2022 17:26:10 -0800
Subject: [PATCH 2/2] adding label

---
 .../src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx
index 32466e5a70..51de31cbd5 100644
--- a/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/PVCDetails.tsx
@@ -91,6 +91,7 @@ const PVCDetails = ({
         </h1>
       </Grid>
       <Grid container>
+        <h1 className={classes.sectionTitle}>Events</h1>
         <TableWrapper
           itemActions={[]}
           columns={[