Added URL navigation to tenant details (#795)

Added URL navigation to tenant details and fixed a couple of warnings

Co-authored-by: Benjamin Perez <[email protected]>

Author: bexsoft

pkg/acl/endpoints.go

@@ -44,6 +44,10 @@ var (
 	tenants                     = "/tenants"
 	tenantsDetail               = "/namespaces/:tenantNamespace/tenants/:tenantName"
 	podsDetail                  = "/namespaces/:tenantNamespace/tenants/:tenantName/pods/:podName"
+	tenantsDetailSummary        = "/namespaces/:tenantNamespace/tenants/:tenantName/summary"
+	tenantsDetailPods           = "/namespaces/:tenantNamespace/tenants/:tenantName/pods"
+	tenantsDetailPools          = "/namespaces/:tenantNamespace/tenants/:tenantName/pools"
+	tenantsDetailLicense        = "/namespaces/:tenantNamespace/tenants/:tenantName/license"
 	storage                     = "/storage"
 	storageVolumes              = "/storage/volumes"
 	storageDrives               = "/storage/drives"
@@ -318,13 +322,17 @@ var endpointRules = map[string]ConfigurationActionSet{
 
 // operatorRules contains the mapping between endpoints and ActionSets for operator only mode
 var operatorRules = map[string]ConfigurationActionSet{
-	tenants:        tenantsActionSet,
-	tenantsDetail:  tenantsActionSet,
-	podsDetail:     tenantsActionSet,
-	storage:        storageActionSet,
-	storageDrives:  storageActionSet,
-	storageVolumes: storageActionSet,
-	license:        licenseActionSet,
+	tenants:              tenantsActionSet,
+	tenantsDetail:        tenantsActionSet,
+	tenantsDetailSummary: tenantsActionSet,
+	tenantsDetailPods:    tenantsActionSet,
+	tenantsDetailPools:   tenantsActionSet,
+	tenantsDetailLicense: tenantsActionSet,
+	podsDetail:           tenantsActionSet,
+	storage:              storageActionSet,
+	storageDrives:        storageActionSet,
+	storageVolumes:       storageActionSet,
+	license:              licenseActionSet,
 }
 
 // operatorOnly ENV variable

pkg/acl/endpoints_test.go

@@ -116,7 +116,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"admin:*",
 				},
 			},
-			want: 7,
+			want: 11,
 		},
 		{
 			name: "Operator Only - all s3 endpoints",
@@ -125,7 +125,7 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 7,
+			want: 11,
 		},
 		{
 			name: "Operator Only - all admin and s3 endpoints",
@@ -135,14 +135,14 @@ func TestOperatorOnlyEndpoints(t *testing.T) {
 					"s3:*",
 				},
 			},
-			want: 7,
+			want: 11,
 		},
 		{
 			name: "Operator Only - default endpoints",
 			args: args{
 				[]string{},
 			},
-			want: 7,
+			want: 11,
 		},
 	}
 

portal-ui/src/screens/Console/Account/ChangeUserPasswordModal.tsx

@@ -29,7 +29,7 @@ import {
 import { ChangeUserPasswordRequest } from "../Buckets/types";
 import api from "../../../common/api";
 import { setModalErrorSnackMessage } from "../../../actions";
-import { User, UsersList } from "../Users/types";
+import { User } from "../Users/types";
 
 const styles = (theme: Theme) =>
   createStyles({
@@ -143,7 +143,7 @@ const ChangeUserPassword = ({
               color="primary"
               disabled={
                 loading ||
-                !(reNewPassword.length > 0 && newPassword == reNewPassword)
+                !(reNewPassword.length > 0 && newPassword === reNewPassword)
               }
             >
               Save

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -593,3 +593,82 @@ export const hrClass = {
     backgroundColor: "transparent" as const,
   },
 };
+
+export const tenantDetailsStyles = {
+  buttonContainer: {
+    textAlign: "right" as const,
+  },
+  multiContainer: {
+    display: "flex" as const,
+    alignItems: "center" as const,
+    justifyContent: "flex-start" as const,
+  },
+  sizeFactorContainer: {
+    marginLeft: 8,
+  },
+  containerHeader: {
+    display: "flex" as const,
+    justifyContent: "space-between" as const,
+  },
+  paperContainer: {
+    padding: "15px 15px 15px 50px",
+  },
+  infoGrid: {
+    display: "grid" as const,
+    gridTemplateColumns: "auto auto auto auto",
+    gridGap: 8,
+    "& div": {
+      display: "flex" as const,
+      alignItems: "center" as const,
+    },
+    "& div:nth-child(odd)": {
+      justifyContent: "flex-end" as const,
+      fontWeight: 700,
+    },
+    "& div:nth-child(2n)": {
+      paddingRight: 35,
+    },
+  },
+  masterActions: {
+    width: "25%",
+    minWidth: "120px",
+    "& div": {
+      margin: "5px 0px",
+    },
+  },
+  updateButton: {
+    backgroundColor: "transparent" as const,
+    border: 0,
+    padding: "0 6px",
+    cursor: "pointer" as const,
+    "&:focus, &:active": {
+      outline: "none",
+    },
+    "& svg": {
+      height: 12,
+    },
+  },
+  poolLabel: {
+    color: "#666666",
+  },
+  titleCol: {
+    fontWeight: 700,
+  },
+  breadcrumLink: {
+    textDecoration: "none",
+    color: "black",
+  },
+  healthCol: {
+    fontWeight: 700,
+    paddingRight: "10px",
+  },
+  ...modalBasic,
+  ...actionsTray,
+  ...buttonsStyles,
+  ...searchField,
+  ...hrClass,
+  actionsTray: {
+    ...actionsTray.actionsTray,
+    padding: "15px 0 0",
+  },
+};

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

@@ -358,6 +358,22 @@ const Console = ({
       component: PodDetails,
       path: "/namespaces/:tenantNamespace/tenants/:tenantName/pods/:podName",
     },
+    {
+      component: TenantDetails,
+      path: "/namespaces/:tenantNamespace/tenants/:tenantName/summary",
+    },
+    {
+      component: TenantDetails,
+      path: "/namespaces/:tenantNamespace/tenants/:tenantName/pods",
+    },
+    {
+      component: TenantDetails,
+      path: "/namespaces/:tenantNamespace/tenants/:tenantName/pools",
+    },
+    {
+      component: TenantDetails,
+      path: "/namespaces/:tenantNamespace/tenants/:tenantName/license",
+    },
     {
       component: License,
       path: "/license",

portal-ui/src/screens/Console/License/LicenseModal.tsx

@@ -65,7 +65,7 @@ const LicenseModal = ({ classes, open, closeModal }: ILicenseModalProps) => {
         <Grid item className={classes.subnetLicenseKey} xs={12}>
           <p>
             Copyright &copy; 2007 Free Software Foundation, Inc. &lt;
-            <a target="_blank" href="https://fsf.org/">
+            <a target="_blank" href="https://fsf.org/" rel="noreferrer">
               https://fsf.org/
             </a>
             &gt;
@@ -904,7 +904,7 @@ const LicenseModal = ({ classes, open, closeModal }: ILicenseModalProps) => {
             school, if any, to sign a &quot;copyright disclaimer&quot; for the
             program, if necessary. For more information on this, and how to
             apply and follow the GNU AGPL, see &lt;
-            <a target="_blank" href="https://www.gnu.org/licenses/">
+            <a target="_blank" href="https://www.gnu.org/licenses/" rel="noreferrer">
               https://www.gnu.org/licenses/
             </a>
             &gt;.

portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx

@@ -216,13 +216,16 @@ const ListTenants = ({
   };
 
   const healthStatusToClass = (health_status: string) => {
-    return health_status == "red"
-      ? classes.redState
-      : health_status == "yellow"
-      ? classes.yellowState
-      : health_status == "green"
-      ? classes.greenState
-      : classes.greyState;
+    switch(health_status) {
+      case "red":
+        return classes.redState;
+      case "yellow":
+        return classes.yellowState;
+      case "green":
+        return classes.greenState;
+      default:
+        return classes.greyState;
+    }
   };
 
   return (

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

@@ -0,0 +1,111 @@
+// 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 { connect } from "react-redux";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import {
+  containerForHeader,
+  tenantDetailsStyles,
+} from "../../Common/FormComponents/common/styleLibrary";
+import { niceDays } from "../../../../common/utils";
+import { IPodListElement } from "../ListTenants/types";
+import { setErrorSnackMessage } from "../../../../actions";
+import api from "../../../../common/api";
+import TableWrapper from "../../Common/TableWrapper/TableWrapper";
+
+interface IPodsSummary {
+  match: any;
+  history: any;
+}
+
+const styles = (theme: Theme) =>
+  createStyles({
+    ...tenantDetailsStyles,
+    ...containerForHeader(theme.spacing(4)),
+  });
+
+const PodsSummary = ({ match, history }: IPodsSummary) => {
+  const [pods, setPods] = useState<IPodListElement[]>([]);
+  const [loadingPods, setLoadingPods] = useState<boolean>(true);
+
+  const tenantName = match.params["tenantName"];
+  const tenantNamespace = match.params["tenantNamespace"];
+
+  const podViewAction = (pod: IPodListElement) => {
+    history.push(
+      `/namespaces/${tenantNamespace}/tenants/${tenantName}/pods/${pod.name}`
+    );
+    return;
+  };
+  const podTableActions = [{ type: "view", onClick: podViewAction }];
+
+  useEffect(() => {
+    if (loadingPods) {
+      api
+        .invoke(
+          "GET",
+          `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/pods`
+        )
+        .then((result: IPodListElement[]) => {
+          for (let i = 0; i < result.length; i++) {
+            let currentTime = new Date().getSeconds();
+            result[i].time = niceDays(
+              (currentTime - parseInt(result[i].timeCreated)).toString()
+            );
+          }
+          setPods(result);
+          setLoadingPods(false);
+        })
+        .catch((err) => {
+          setErrorSnackMessage("Error loading pods");
+        });
+    }
+  }, [loadingPods, tenantName, tenantNamespace]);
+
+  return (
+    <Fragment>
+      <br />
+      <TableWrapper
+        columns={[
+          { label: "Name", elementKey: "name" },
+          { label: "Status", elementKey: "status" },
+          { label: "Age", elementKey: "time" },
+          { label: "Pod IP", elementKey: "podIP" },
+          {
+            label: "Restarts",
+            elementKey: "restarts",
+            renderFunction: (input) => {
+              return input != null ? input : 0;
+            },
+          },
+          { label: "Node", elementKey: "node" },
+        ]}
+        isLoading={loadingPods}
+        records={pods}
+        itemActions={podTableActions}
+        entityName="Servers"
+        idField="name"
+      />
+    </Fragment>
+  );
+};
+
+const connector = connect(null, {
+  setErrorSnackMessage,
+});
+
+export default withStyles(styles)(connector(PodsSummary));