show service account status and expiry in ui

Author: prakashsvmx

models/service_accounts.go

@@ -728,7 +728,13 @@ export interface BulkUserGroups {
   groups: string[];
 }
 
-export type ServiceAccounts = string[];
+export type ServiceAccounts = {
+  accountStatus?: string;
+  name?: string;
+  description?: string;
+  expiration?: string;
+  accessKey?: string;
+}[];
 
 export interface ServiceAccountRequest {
   /** policy to be applied to the Service Account if any */
@@ -3565,7 +3571,7 @@ export class Api<
      * @secure
      */
     listUsersForPolicy: (policy: string, params: RequestParams = {}) =>
-      this.request<ServiceAccounts, Error>({
+      this.request<string[], Error>({
         path: `/policies/${policy}/users`,
         method: "GET",
         secure: true,
@@ -3583,7 +3589,7 @@ export class Api<
      * @secure
      */
     listGroupsForPolicy: (policy: string, params: RequestParams = {}) =>
-      this.request<ServiceAccounts, Error>({
+      this.request<string[], Error>({
         path: `/policies/${policy}/groups`,
         method: "GET",
         secure: true,
@@ -3717,7 +3723,7 @@ export class Api<
       },
       params: RequestParams = {},
     ) =>
-      this.request<ServiceAccounts, Error>({
+      this.request<string[], Error>({
         path: `/bucket-users/${bucket}`,
         method: "GET",
         query: query,
@@ -4472,7 +4478,7 @@ export class Api<
      * @secure
      */
     listNodes: (params: RequestParams = {}) =>
-      this.request<ServiceAccounts, Error>({
+      this.request<string[], Error>({
         path: `/nodes`,
         method: "GET",
         secure: true,

portal-ui/src/api/consoleApi.ts

@@ -29,7 +29,6 @@ import {
 } from "mds";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { stringSort } from "../../../utils/sortFunctions";
 import { actionsTray } from "../Common/FormComponents/common/styleLibrary";
 
 import ChangePasswordModal from "./ChangePasswordModal";
@@ -57,6 +56,9 @@ import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
 import { api } from "api";
 import { errorToHandler } from "api/errors";
 import HelpMenu from "../HelpMenu";
+import { ServiceAccounts } from "../../../api/consoleApi";
+import { usersSort } from "../../../utils/sortFunctions";
+import { ACCOUNT_TABLE_COLUMNS } from "./AccountUtils";
 
 const DeleteServiceAccount = withSuspense(
   React.lazy(() => import("./DeleteServiceAccount")),
@@ -68,7 +70,7 @@ const Account = () => {
 
   const features = useSelector(selFeatures);
 
-  const [records, setRecords] = useState<string[]>([]);
+  const [records, setRecords] = useState<ServiceAccounts>([]);
   const [loading, setLoading] = useState<boolean>(false);
   const [filter, setFilter] = useState<string>("");
   const [deleteOpen, setDeleteOpen] = useState<boolean>(false);
@@ -97,10 +99,9 @@ const Account = () => {
       api.serviceAccounts
         .listUserServiceAccounts()
         .then((res) => {
-          const serviceAccounts = res.data.sort(stringSort);
-
           setLoading(false);
-          setRecords(serviceAccounts);
+          const sortedRows = res.data.sort(usersSort);
+          setRecords(sortedRows);
         })
         .catch((err) => {
           dispatch(setErrorSnackMessage(errorToHandler(err.error)));
@@ -136,14 +137,6 @@ const Account = () => {
     setPolicyOpen(true);
   };
 
-  const selectAllItems = () => {
-    if (selectedSAs.length === records.length) {
-      setSelectedSAs([]);
-      return;
-    }
-    setSelectedSAs(records);
-  };
-
   const closePolicyModal = () => {
     setPolicyOpen(false);
     setLoading(true);
@@ -155,12 +148,27 @@ const Account = () => {
   };
 
   const tableActions = [
-    { type: "view", onClick: policyModalOpen },
-    { type: "delete", onClick: confirmDeleteServiceAccount },
+    {
+      type: "view",
+      onClick: (value: any) => {
+        if (value) {
+          policyModalOpen(value.accessKey);
+        }
+      },
+    },
+    {
+      type: "delete",
+      onClick: (value: any) => {
+        if (value) {
+          confirmDeleteServiceAccount(value.accessKey);
+        }
+      },
+    },
   ];
 
-  const filteredRecords = records.filter((elementItem) =>
-    elementItem.toLowerCase().includes(filter.toLowerCase()),
+  const filteredRecords = records.filter(
+    (elementItem) =>
+      elementItem?.accessKey?.toLowerCase().includes(filter.toLowerCase()),
   );
 
   return (
@@ -259,14 +267,14 @@ const Account = () => {
 
           <Grid item xs={12}>
             <DataTable
-              isLoading={loading}
-              records={filteredRecords}
-              entityName={"Access Keys"}
-              columns={[{ label: "Access Key" }]}
               itemActions={tableActions}
-              selectedItems={selectedSAs}
+              entityName={"Access Keys"}
+              columns={ACCOUNT_TABLE_COLUMNS}
               onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
-              onSelectAll={selectAllItems}
+              selectedItems={selectedSAs}
+              isLoading={loading}
+              records={filteredRecords}
+              idField="accessKey"
             />
           </Grid>
           <Grid item xs={12} sx={{ marginTop: 15 }}>

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

@@ -0,0 +1,49 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2023 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 from "react";
+import { DateTime } from "luxon";
+
+export const ACCOUNT_TABLE_COLUMNS = [
+  { label: "Access Key", elementKey: "accessKey" },
+  {
+    label: "Expiry",
+    elementKey: "expiration",
+    renderFunction: (expTime: string) => {
+      if (expTime) {
+        const fmtDate = DateTime.fromISO(expTime)
+          .toUTC()
+          .toFormat("y/M/d hh:mm:ss z");
+
+        return <span title={fmtDate}>{fmtDate}</span>;
+      }
+      return "";
+    },
+  },
+  {
+    label: "Status",
+    elementKey: "accountStatus",
+    renderFunction: (status: string) => {
+      if (status === "off") {
+        return "Disabled";
+      } else {
+        return "Enabled";
+      }
+    },
+  },
+  { label: "Name", elementKey: "name" },
+  { label: "Description", elementKey: "description" },
+];

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

@@ -37,12 +37,14 @@ const ServiceAccountPolicy = ({
   closeModalAndRefresh,
 }: IServiceAccountPolicyProps) => {
   const dispatch = useAppDispatch();
-  const [loading, setLoading] = useState<boolean>(true);
+  const [loading, setLoading] = useState<boolean>(false);
   const [policyDefinition, setPolicyDefinition] = useState<string>("");
   useEffect(() => {
-    if (loading) {
+    if (!loading && selectedAccessKey !== "") {
+      const sourceAccKey = encodeURLString(selectedAccessKey);
+      setLoading(true);
       api.serviceAccounts
-        .getServiceAccountPolicy(encodeURLString(selectedAccessKey))
+        .getServiceAccountPolicy(sourceAccKey)
         .then((res) => {
           setLoading(false);
           setPolicyDefinition(res.data);
@@ -52,7 +54,8 @@ const ServiceAccountPolicy = ({
           dispatch(setModalErrorSnackMessage(errorToHandler(err)));
         });
     }
-  }, [loading, setLoading, dispatch, selectedAccessKey]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedAccessKey]);
 
   const setPolicy = (event: React.FormEvent, newPolicy: string) => {
     event.preventDefault();

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

@@ -33,7 +33,7 @@ import { encodeURLString } from "../../../../common/utils";
 import { setErrorSnackMessage, setHelpName } from "../../../../systemSlice";
 import { selBucketDetailsLoading } from "./bucketDetailsSlice";
 import { useAppDispatch } from "../../../../store";
-import { Policy, ServiceAccounts } from "../../../../api/consoleApi";
+import { Policy } from "../../../../api/consoleApi";
 
 const AccessDetails = () => {
   const dispatch = useAppDispatch();
@@ -46,7 +46,7 @@ const AccessDetails = () => {
   const [loadingPolicies, setLoadingPolicies] = useState<boolean>(true);
   const [bucketPolicy, setBucketPolicy] = useState<Policy[] | undefined>([]);
   const [loadingUsers, setLoadingUsers] = useState<boolean>(true);
-  const [bucketUsers, setBucketUsers] = useState<ServiceAccounts>([]);
+  const [bucketUsers, setBucketUsers] = useState<string[]>([]);
 
   const bucketName = params.bucketName || "";