diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
index b2472b4ba..0b7fb6bc2 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketEventsPanel.tsx
@@ -168,31 +168,33 @@ const BucketEventsPanel = ({
customPaperHeight={classes.twHeight}
/>
-
- }
- help={
-
- MinIO bucket notifications allow administrators to send
- notifications to supported external services on certain object
- or bucket events. MinIO supports bucket and object-level S3
- events similar to the Amazon S3 Event Notifications.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {!loadingEvents && (
+
+ }
+ help={
+
+ MinIO bucket notifications allow administrators to send
+ notifications to supported external services on certain object
+ or bucket events. MinIO supports bucket and object-level S3
+ events similar to the Amazon S3 Event Notifications.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+ )}
);
diff --git a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
index e2c09bf72..35c248090 100644
--- a/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
+++ b/portal-ui/src/screens/Console/Buckets/BucketDetails/BucketLifecyclePanel.tsx
@@ -208,31 +208,33 @@ const BucketLifecyclePanel = ({
customPaperHeight={classes.twHeight}
/>
-
- }
- help={
-
- MinIO Object Lifecycle Management allows creating rules for time
- or date based automatic transition or expiry of objects. For
- object transition, MinIO automatically moves the object to a
- configured remote storage tier.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {!loadingLifecycle && (
+
+ }
+ help={
+
+ MinIO Object Lifecycle Management allows creating rules for
+ time or date based automatic transition or expiry of objects.
+ For object transition, MinIO automatically moves the object to
+ a configured remote storage tier.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+ )}
);
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
index 87e76247b..b21e8e6f8 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/ListBuckets.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
-import { Box, Button } from "@mui/material";
+import { Box, Button, LinearProgress } from "@mui/material";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
@@ -28,13 +28,12 @@ import { Bucket, BucketList, HasPermissionResponse } from "../types";
import {
AddIcon,
BucketsIcon,
- TenantsIcon,
WatchIcon,
} from "../../../../icons";
import { AppState } from "../../../../store";
import { addBucketOpen, addBucketReset } from "../actions";
import { setErrorSnackMessage } from "../../../../actions";
-import { containerForHeader } from "../../Common/FormComponents/common/styleLibrary";
+import { containerForHeader, linkStyles } from "../../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
import AddBucket from "./AddBucket";
@@ -127,10 +126,7 @@ const styles = (theme: Theme) =>
constrainedContainer: {
maxWidth: 1180,
},
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
});
interface IListBucketsProps {
@@ -408,53 +404,57 @@ const ListBuckets = ({
-
- {filteredRecords.map((bucket, index) => {
- return (
-
- );
- })}
- {filteredRecords.length == 0 && (
-
-
- }
- title={"Buckets"}
- help={
-
- MinIO uses buckets to organize objects. A bucket is
- similar to a folder or directory in a filesystem, where
- each bucket can hold an arbitrary number of objects.
-
-
- To get started,
- {
- addBucketOpen(true);
- }}
- >
- Create a Bucket.
-
-
- }
+ {loading && }
+ {!loading && (
+
+ {filteredRecords.map((bucket, index) => {
+ return (
+
+ );
+ })}
+ {filteredRecords.length === 0 && (
+
+
+ }
+ title={"Buckets"}
+ help={
+
+ MinIO uses buckets to organize objects. A bucket is
+ similar to a folder or directory in a filesystem,
+ where each bucket can hold an arbitrary number of
+ objects.
+
+
+ To get started,
+
+
+ }
+ />
+
-
- )}
-
+ )}
+
+ )}
diff --git a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
index 520ca6ab7..420c07369 100644
--- a/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
+++ b/portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts
@@ -965,3 +965,13 @@ export const commonDashboardInfocard = {
},
},
};
+
+export const linkStyles = (color: string) => ({
+ link: {
+ textDecoration: "underline",
+ color,
+ backgroundColor: "transparent",
+ border: 0,
+ cursor: "pointer",
+ },
+});
diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
index ef5541730..8e6f6d610 100644
--- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
+++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
@@ -20,13 +20,14 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
-import { IconButton, TextField } from "@mui/material";
+import { IconButton, LinearProgress, TextField } from "@mui/material";
import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button";
import InputAdornment from "@mui/material/InputAdornment";
import {
actionsTray,
containerForHeader,
+ linkStyles,
searchField,
settingsCommon,
typesSelection,
@@ -76,10 +77,7 @@ const styles = (theme: Theme) =>
...settingsCommon.customTitle,
marginTop: 0,
},
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
});
const ListTiersConfiguration = ({
@@ -235,122 +233,127 @@ const ListTiersConfiguration = ({
- {records.length > 0 && (
+ {isLoading && }
+ {!isLoading && (
-
- {
- setSelectedTier(tierData);
- setUpdateCredentialsOpen(true);
- },
- },
- ]}
- columns={[
- {
- label: "Tier Name",
- elementKey: "type",
- renderFunction: renderTierName,
- renderFullObject: true,
- },
- {
- label: "Type",
- elementKey: "type",
- width: 150,
- },
- {
- label: "Endpoint",
- elementKey: "type",
- renderFunction: renderTierEndpoint,
- renderFullObject: true,
- },
- {
- label: "Bucket",
- elementKey: "type",
- renderFunction: renderTierBucket,
- renderFullObject: true,
- },
- {
- label: "Prefix",
- elementKey: "type",
- renderFunction: renderTierPrefix,
- renderFullObject: true,
- },
- {
- label: "Region",
- elementKey: "type",
- renderFunction: renderTierRegion,
- renderFullObject: true,
- },
- ]}
- isLoading={isLoading}
- records={filteredRecords}
- entityName="Tiers"
- idField="service_name"
- customPaperHeight={classes.customConfigurationPage}
- />
-
-
- }
- help={
-
- Tiers are used by the MinIO Object Lifecycle Management
- which allows creating rules for time or date based automatic
- transition or expiry of objects. For object transition,
- MinIO automatically moves the object to a configured remote
- storage tier.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {records.length > 0 && (
+
+
+ {
+ setSelectedTier(tierData);
+ setUpdateCredentialsOpen(true);
+ },
+ },
+ ]}
+ columns={[
+ {
+ label: "Tier Name",
+ elementKey: "type",
+ renderFunction: renderTierName,
+ renderFullObject: true,
+ },
+ {
+ label: "Type",
+ elementKey: "type",
+ width: 150,
+ },
+ {
+ label: "Endpoint",
+ elementKey: "type",
+ renderFunction: renderTierEndpoint,
+ renderFullObject: true,
+ },
+ {
+ label: "Bucket",
+ elementKey: "type",
+ renderFunction: renderTierBucket,
+ renderFullObject: true,
+ },
+ {
+ label: "Prefix",
+ elementKey: "type",
+ renderFunction: renderTierPrefix,
+ renderFullObject: true,
+ },
+ {
+ label: "Region",
+ elementKey: "type",
+ renderFunction: renderTierRegion,
+ renderFullObject: true,
+ },
+ ]}
+ isLoading={isLoading}
+ records={filteredRecords}
+ entityName="Tiers"
+ idField="service_name"
+ customPaperHeight={classes.customConfigurationPage}
+ />
+
+
+ }
+ help={
+
+ Tiers are used by the MinIO Object Lifecycle Management
+ which allows creating rules for time or date based
+ automatic transition or expiry of objects. For object
+ transition, MinIO automatically moves the object to a
+ configured remote storage tier.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+
+ )}
+ {records.length === 0 && (
+
+
+ }
+ help={
+
+ Tiers are used by the MinIO Object Lifecycle Management
+ which allows creating rules for time or date based
+ automatic transition or expiry of objects. For object
+ transition, MinIO automatically moves the object to a
+ configured remote storage tier.
+
+
+ To get started,{" "}
+
+ .
+
+ }
+ />
+
+
+ )}
)}
- {records.length == 0 && (
-
-
- }
- help={
-
- Tiers are used by the MinIO Object Lifecycle Management
- which allows creating rules for time or date based automatic
- transition or expiry of objects. For object transition,
- MinIO automatically moves the object to a configured remote
- storage tier.
-
-
- To get started,{" "}
-
- Add Tier
-
- .
-
- }
- />
-
-
- )}
);
diff --git a/portal-ui/src/screens/Console/Groups/Groups.tsx b/portal-ui/src/screens/Console/Groups/Groups.tsx
index 66081239e..606ccd441 100644
--- a/portal-ui/src/screens/Console/Groups/Groups.tsx
+++ b/portal-ui/src/screens/Console/Groups/Groups.tsx
@@ -22,7 +22,7 @@ import withStyles from "@mui/styles/withStyles";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
-import { Button } from "@mui/material";
+import { Button, LinearProgress } from "@mui/material";
import { AddIcon, GroupsIcon, UsersIcon } from "../../../icons";
import { setErrorSnackMessage } from "../../../actions";
import { GroupsList } from "./types";
@@ -30,6 +30,7 @@ import { stringSort } from "../../../utils/sortFunctions";
import {
actionsTray,
containerForHeader,
+ linkStyles,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import { ErrorResponseHandler } from "../../../common/types";
@@ -80,10 +81,7 @@ const styles = (theme: Theme) =>
},
},
},
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
@@ -230,81 +228,86 @@ const Groups = ({ classes, setErrorSnackMessage }: IGroupsProps) => {
- {records.length > 0 && (
+ {loading && }
+ {!loading && (
-
-
-
-
- }
- help={
-
- A group can have one attached IAM policy, where all users
- with membership in that group inherit that policy. Groups
- support more simplified management of user permissions on
- the MinIO Tenant.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {records.length > 0 && (
+
+
+
+
+
+ }
+ help={
+
+ A group can have one attached IAM policy, where all
+ users with membership in that group inherit that
+ policy. Groups support more simplified management of
+ user permissions on the MinIO Tenant.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+
+ )}
+ {records.length === 0 && (
+
+
+ }
+ help={
+
+ A group can have one attached IAM policy, where all
+ users with membership in that group inherit that
+ policy. Groups support more simplified management of
+ user permissions on the MinIO Tenant.
+
+
+ To get started,{" "}
+
+ .
+
+ }
+ />
+
+
+ )}
)}
- {records.length == 0 && (
-
-
- }
- help={
-
- A group can have one attached IAM policy, where all users
- with membership in that group inherit that policy. Groups
- support more simplified management of user permissions on
- the MinIO Tenant.
-
-
- To get started,{" "}
- {
- setSelectedGroup(null);
- setGroupOpen(true);
- }}
- className={classes.link}
- >
- Create a Group
-
- .
-
- }
- />
-
-
- )}
diff --git a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
index 193248c0e..c66f902c9 100644
--- a/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
+++ b/portal-ui/src/screens/Console/Logs/LogSearch/LogsSearchMain.tsx
@@ -37,7 +37,6 @@ import { ErrorResponseHandler } from "../../../../common/types";
import api from "../../../../common/api";
import TableWrapper from "../../Common/TableWrapper/TableWrapper";
import FilterInputWrapper from "../../Common/FormComponents/FilterInputWrapper/FilterInputWrapper";
-import DateTimePickerWrapper from "../../Common/FormComponents/DateTimePickerWrapper/DateTimePickerWrapper";
import LogSearchFullModal from "./LogSearchFullModal";
import { LogSearchColumnLabels } from "./utils";
import DateRangeSelector from "../../Common/FormComponents/DateRangeSelector/DateRangeSelector";
diff --git a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
index 9acbbe7a3..a14237a7a 100644
--- a/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
+++ b/portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
-import { IconButton, TextField } from "@mui/material";
+import { IconButton, LinearProgress, TextField } from "@mui/material";
import { red } from "@mui/material/colors";
import Grid from "@mui/material/Grid";
import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
@@ -37,6 +37,7 @@ import { setErrorSnackMessage } from "../../../actions";
import {
actionsTray,
containerForHeader,
+ linkStyles,
searchField,
settingsCommon,
} from "../Common/FormComponents/common/styleLibrary";
@@ -73,10 +74,7 @@ const styles = (theme: Theme) =>
lambdaContainer: {
padding: "15px 0",
},
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
});
const ListNotificationEndpoints = ({
@@ -186,91 +184,96 @@ const ListNotificationEndpoints = ({
- {records.length > 0 && (
+ {isLoading && }
+ {!isLoading && (
-
-
-
-
- }
- help={
-
- MinIO bucket notifications allow administrators to send
- notifications to supported external services on certain
- object or bucket events. MinIO supports bucket and
- object-level S3 events similar to the Amazon S3 Event
- Notifications.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {records.length > 0 && (
+
+
+
+
+
+ }
+ help={
+
+ MinIO bucket notifications allow administrators to send
+ notifications to supported external services on certain
+ object or bucket events. MinIO supports bucket and
+ object-level S3 events similar to the Amazon S3 Event
+ Notifications.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+
+ )}
+ {records.length === 0 && (
+
+
+ }
+ help={
+
+ MinIO bucket notifications allow administrators to send
+ notifications to supported external services on certain
+ object or bucket events. MinIO supports bucket and
+ object-level S3 events similar to the Amazon S3 Event
+ Notifications.
+
+
+ To get started,{" "}
+
+ .
+
+ }
+ />
+
+
+ )}
)}
- {records.length == 0 && (
-
-
- }
- help={
-
- MinIO bucket notifications allow administrators to send
- notifications to supported external services on certain
- object or bucket events. MinIO supports bucket and
- object-level S3 events similar to the Amazon S3 Event
- Notifications.
-
-
- To get started,{" "}
- {
- history.push("/notification-endpoints/add");
- }}
- className={classes.link}
- >
- Add a Notification Target
-
- .
-
- }
- />
-
-
- )}
);
diff --git a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
index 5b7bdc8c9..e3f860e60 100644
--- a/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
+++ b/portal-ui/src/screens/Console/Tenants/ListTenants/ListTenants.tsx
@@ -19,7 +19,7 @@ import { connect } from "react-redux";
import Grid from "@mui/material/Grid";
import TextField from "@mui/material/TextField";
import InputAdornment from "@mui/material/InputAdornment";
-import { Box, Button, IconButton } from "@mui/material";
+import { Box, Button, IconButton, LinearProgress } from "@mui/material";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
@@ -29,6 +29,7 @@ import { NewServiceAccount } from "../../Common/CredentialsPrompt/types";
import {
actionsTray,
containerForHeader,
+ linkStyles,
searchField,
} from "../../Common/FormComponents/common/styleLibrary";
import { setErrorSnackMessage } from "../../../../actions";
@@ -104,10 +105,7 @@ const styles = (theme: Theme) =>
paddingTop: 30,
paddingBottom: 30,
},
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
});
const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
@@ -273,43 +271,49 @@ const ListTenants = ({ classes, setErrorSnackMessage }: ITenantsList) => {
+
- {filteredRecords.map((t) => {
- return ;
- })}
- {filteredRecords.length == 0 && (
-
-
- }
- title={"Tenants"}
- help={
-
- Tenant is the logical structure to represent a MinIO
- deployment. A tenant can have different size and
- configurations from other tenants, even a different
- storage class.
-
-
- To get started,
- {
- history.push("/tenants/add");
- }}
- >
- Create a Tenant.
-
-
- }
- />
-
-
+ {isLoading && }
+ {!isLoading && (
+
+ {filteredRecords.map((t) => {
+ return ;
+ })}
+ {filteredRecords.length === 0 && (
+
+
+ }
+ title={"Tenants"}
+ help={
+
+ Tenant is the logical structure to represent a
+ MinIO deployment. A tenant can have different size
+ and configurations from other tenants, even a
+ different storage class.
+
+
+ To get started,
+
+
+ }
+ />
+
+
+ )}
+
)}
diff --git a/portal-ui/src/screens/Console/Users/ListUsers.tsx b/portal-ui/src/screens/Console/Users/ListUsers.tsx
index b00eae2a1..453359837 100644
--- a/portal-ui/src/screens/Console/Users/ListUsers.tsx
+++ b/portal-ui/src/screens/Console/Users/ListUsers.tsx
@@ -14,13 +14,19 @@
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see .
-import React, { Fragment, useCallback, useEffect, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
import { connect } from "react-redux";
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
import api from "../../../common/api";
-import { Button, Grid, InputAdornment, TextField } from "@mui/material";
+import {
+ Button,
+ Grid,
+ InputAdornment,
+ LinearProgress,
+ TextField,
+} from "@mui/material";
import GroupIcon from "@mui/icons-material/Group";
import { User, UsersList } from "./types";
import { usersSort } from "../../../utils/sortFunctions";
@@ -28,6 +34,7 @@ import { AddIcon, UsersIcon } from "../../../icons";
import {
actionsTray,
containerForHeader,
+ linkStyles,
searchField,
} from "../Common/FormComponents/common/styleLibrary";
import { setErrorSnackMessage } from "../../../actions";
@@ -80,10 +87,7 @@ const styles = (theme: Theme) =>
...actionsTray,
...searchField,
...containerForHeader(theme.spacing(4)),
- link: {
- textDecoration: "underline",
- color: theme.palette.info.main,
- },
+ ...linkStyles(theme.palette.info.main),
});
interface IUsersProps {
@@ -94,7 +98,7 @@ interface IUsersProps {
const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
const [records, setRecords] = useState([]);
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(true);
const [addScreenOpen, setAddScreenOpen] = useState(false);
const [deleteOpen, setDeleteOpen] = useState(false);
const [selectedUser, setSelectedUser] = useState(null);
@@ -103,31 +107,15 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
const [checkedUsers, setCheckedUsers] = useState([]);
const [policyOpen, setPolicyOpen] = useState(false);
- const fetchRecords = useCallback(() => {
- setLoading(true);
- api
- .invoke("GET", `/api/v1/users`)
- .then((res: UsersList) => {
- const users = res.users === null ? [] : res.users;
-
- setLoading(false);
- setRecords(users.sort(usersSort));
- })
- .catch((err: ErrorResponseHandler) => {
- setLoading(false);
- setErrorSnackMessage(err);
- });
- }, [setLoading, setRecords, setErrorSnackMessage]);
-
const closeAddModalAndRefresh = () => {
setAddScreenOpen(false);
- fetchRecords();
+ setLoading(true);
};
const closeDeleteModalAndRefresh = (refresh: boolean) => {
setDeleteOpen(false);
if (refresh) {
- fetchRecords();
+ setLoading(true);
}
};
@@ -139,8 +127,21 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
};
useEffect(() => {
- fetchRecords();
- }, [fetchRecords]);
+ if (loading) {
+ api
+ .invoke("GET", `/api/v1/users`)
+ .then((res: UsersList) => {
+ const users = res.users === null ? [] : res.users;
+
+ setLoading(false);
+ setRecords(users.sort(usersSort));
+ })
+ .catch((err: ErrorResponseHandler) => {
+ setLoading(false);
+ setErrorSnackMessage(err);
+ });
+ }
+ }, [loading, setErrorSnackMessage]);
const filteredRecords = records.filter((elementItem) =>
elementItem.accessKey.includes(filter)
@@ -206,7 +207,7 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
selectedGroup={null}
closeModalAndRefresh={() => {
setPolicyOpen(false);
- fetchRecords();
+ setLoading(true);
}}
/>
)}
@@ -278,98 +279,103 @@ const ListUsers = ({ classes, setErrorSnackMessage, history }: IUsersProps) => {
- {records.length > 0 && (
+ {loading && }
+ {!loading && (
-
-
-
-
- }
- help={
-
- A MinIO user consists of a unique access key (username) and
- corresponding secret key (password). Clients must
- authenticate their identity by specifying both a valid
- access key (username) and the corresponding secret key
- (password) of an existing MinIO user.
-
-
- Each user can have one or more assigned policies that
- explicitly list the actions and resources to which that user
- has access. Users can also inherit policies from the groups
- in which they have membership.
-
-
- You can learn more at our{" "}
-
- documentation
-
- .
-
- }
- />
-
+ {records.length > 0 && (
+
+
+
+
+
+ }
+ help={
+
+ A MinIO user consists of a unique access key (username)
+ and corresponding secret key (password). Clients must
+ authenticate their identity by specifying both a valid
+ access key (username) and the corresponding secret key
+ (password) of an existing MinIO user.
+
+
+ Each user can have one or more assigned policies that
+ explicitly list the actions and resources to which that
+ user has access. Users can also inherit policies from
+ the groups in which they have membership.
+
+
+ You can learn more at our{" "}
+
+ documentation
+
+ .
+
+ }
+ />
+
+
+ )}
+ {records.length === 0 && (
+
+
+ }
+ help={
+
+ A MinIO user consists of a unique access key (username)
+ and corresponding secret key (password). Clients must
+ authenticate their identity by specifying both a valid
+ access key (username) and the corresponding secret key
+ (password) of an existing MinIO user.
+
+
+ Each user can have one or more assigned policies that
+ explicitly list the actions and resources to which that
+ user has access. Users can also inherit policies from
+ the groups in which they have membership.
+
+
+ To get started,{" "}
+
+ .
+
+ }
+ />
+
+
+ )}
)}
- {records.length == 0 && (
-
-
- }
- help={
-
- A MinIO user consists of a unique access key (username) and
- corresponding secret key (password). Clients must
- authenticate their identity by specifying both a valid
- access key (username) and the corresponding secret key
- (password) of an existing MinIO user.
-
-
- Each user can have one or more assigned policies that
- explicitly list the actions and resources to which that user
- has access. Users can also inherit policies from the groups
- in which they have membership.
-
-
- To get started,{" "}
- {
- setAddScreenOpen(true);
- setSelectedUser(null);
- }}
- className={classes.link}
- >
- Create a User
-
- .
-
- }
- />
-
-
- )}
);