Changed Styles & some routes for console menu (#2428)
Changed styles for menu Changed Settings page title Changed Service Account option to be Access Keys Changed all Service Accounts labels to be Access keys in console Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
This commit is contained in:
@@ -126,8 +126,8 @@ export const IAM_PAGES = {
|
||||
GROUPS: "/identity/groups",
|
||||
GROUPS_ADD: "/identity/groups/create-group",
|
||||
GROUPS_VIEW: "/identity/groups/:groupName",
|
||||
ACCOUNT: "/identity/account",
|
||||
ACCOUNT_ADD: "/identity/account/new-account",
|
||||
ACCOUNT: "/access-keys",
|
||||
ACCOUNT_ADD: "/access-keys/new-account",
|
||||
USER_SA_ACCOUNT_ADD: "/identity/users/new-user-sa/:userName",
|
||||
|
||||
POLICIES: "/identity/policies",
|
||||
|
||||
@@ -40,14 +40,11 @@ const ServiceAccountCredentialsIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
</defs>
|
||||
<g
|
||||
id="New_Service_Account_Created"
|
||||
data-name="New Service Account Created"
|
||||
data-name="New Access Key Created"
|
||||
clipPath="url(#clip-New_Service_Account_Created)"
|
||||
>
|
||||
<rect width="256" height="256" fill="#fff" />
|
||||
<g
|
||||
id="Create_Service_Account_Icon"
|
||||
data-name="Create Service Account Icon"
|
||||
>
|
||||
<g id="Create_Service_Account_Icon" data-name="Create Access Key Icon">
|
||||
<rect
|
||||
id="Rectángulo_1006"
|
||||
data-name="Rectángulo 1006"
|
||||
|
||||
@@ -138,7 +138,7 @@ const Account = () => {
|
||||
const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => {
|
||||
setDeleteMultipleOpen(false);
|
||||
if (refresh) {
|
||||
dispatch(setSnackBarMessage(`Service accounts deleted successfully.`));
|
||||
dispatch(setSnackBarMessage(`Access keys deleted successfully.`));
|
||||
setSelectedSAs([]);
|
||||
setLoading(true);
|
||||
}
|
||||
@@ -206,11 +206,11 @@ const Account = () => {
|
||||
open={changePasswordModalOpen}
|
||||
closeModal={() => setChangePasswordModalOpen(false)}
|
||||
/>
|
||||
<PageHeader label="Service Accounts" />
|
||||
<PageHeader label="Access Keys" />
|
||||
<PageLayout>
|
||||
<Grid item={true} xs={12} className={classes.actionsTray}>
|
||||
<SearchBox
|
||||
placeholder={"Search Service Accounts"}
|
||||
placeholder={"Search Access Keys"}
|
||||
onChange={setFilter}
|
||||
overrideClass={classes.searchField}
|
||||
value={filter}
|
||||
@@ -254,7 +254,7 @@ const Account = () => {
|
||||
onClick={() => {
|
||||
navigate(`${IAM_PAGES.ACCOUNT_ADD}`);
|
||||
}}
|
||||
label={`Create service account`}
|
||||
label={`Create access key`}
|
||||
icon={<AddIcon />}
|
||||
variant={"callAction"}
|
||||
/>
|
||||
@@ -265,9 +265,9 @@ const Account = () => {
|
||||
<TableWrapper
|
||||
isLoading={loading}
|
||||
records={filteredRecords}
|
||||
entityName={"Service Accounts"}
|
||||
entityName={"Access Keys"}
|
||||
idField={""}
|
||||
columns={[{ label: "Service Account", elementKey: "" }]}
|
||||
columns={[{ label: "Access Key", elementKey: "" }]}
|
||||
itemActions={tableActions}
|
||||
selectedItems={selectedSAs}
|
||||
onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
|
||||
@@ -276,20 +276,23 @@ const Account = () => {
|
||||
</Grid>
|
||||
<Grid item xs={12} marginTop={"15px"}>
|
||||
<HelpBox
|
||||
title={"Learn more about SERVICE ACCOUNTS"}
|
||||
title={"Learn more about ACCESS KEYS"}
|
||||
iconComponent={<AccountIcon />}
|
||||
help={
|
||||
<Fragment>
|
||||
MinIO service accounts are child identities of an authenticated
|
||||
MinIO user, including externally managed identities. Each
|
||||
service account inherits its privileges based on the policies
|
||||
attached to it’s parent user or those groups in which the parent
|
||||
user has membership. Service accounts also support an optional
|
||||
inline policy which further restricts access to a subset of
|
||||
actions and resources available to the parent user.
|
||||
MinIO access keys are child identities of an authenticated MinIO
|
||||
user, including externally managed identities. Each access key
|
||||
inherits its privileges based on the policies attached to it’s
|
||||
parent user or those groups in which the parent user has
|
||||
membership. Access Keys also support an optional inline policy
|
||||
which further restricts access to a subset of actions and
|
||||
resources available to the parent user.
|
||||
<br />
|
||||
<br />
|
||||
You can learn more at our{" "}
|
||||
{
|
||||
// TODO: Change this link once it is called access keys
|
||||
}
|
||||
<a
|
||||
href="https://min.io/docs/minio/linux/administration/identity-access-management/minio-user-management.html?ref=con#service-accounts"
|
||||
target="_blank"
|
||||
|
||||
@@ -80,18 +80,18 @@ const AddServiceAccountHelpBox = () => {
|
||||
}}
|
||||
>
|
||||
<HelpIconFilled />
|
||||
<div>Learn more about Service Accounts</div>
|
||||
<div>Learn more about Access Keys</div>
|
||||
</Box>
|
||||
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
<FeatureItem
|
||||
icon={<ServiceAccountIcon />}
|
||||
description={`Create Service Accounts`}
|
||||
description={`Create Access Keys`}
|
||||
/>
|
||||
<Box sx={{ paddingTop: "20px" }}>
|
||||
Service Accounts inherit the policies explicitly attached to the
|
||||
parent user, and the policies attached to each group in which the
|
||||
parent user has membership.
|
||||
Access Keys inherit the policies explicitly attached to the parent
|
||||
user, and the policies attached to each group in which the parent
|
||||
user has membership.
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
@@ -102,13 +102,13 @@ const AddServiceAccountHelpBox = () => {
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
Randomized access credentials are recommended, and provided by
|
||||
default. You may use your own custom Access Key and Secret Key by
|
||||
replacing the default values. After creation of any Service Account,
|
||||
you will be given the opportunity to view and download the account
|
||||
replacing the default values. After creation of any Access Key, you
|
||||
will be given the opportunity to view and download the account
|
||||
credentials.
|
||||
</Box>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
Service Accounts support programmatic access by applications. You
|
||||
cannot use a Service Account to log into the MinIO Console.
|
||||
Access Keys support programmatic access by applications. You cannot
|
||||
use a Access Key to log into the MinIO Console.
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
@@ -118,14 +118,13 @@ const AddServiceAccountHelpBox = () => {
|
||||
/>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
You can specify an optional JSON-formatted IAM policy to further
|
||||
restrict Service Account access to a subset of the actions and
|
||||
resources explicitly allowed for the parent user. Additional access
|
||||
beyond that of the parent user cannot be implemented through these
|
||||
restrict Access Key access to a subset of the actions and resources
|
||||
explicitly allowed for the parent user. Additional access beyond
|
||||
that of the parent user cannot be implemented through these
|
||||
policies.
|
||||
</Box>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
You cannot modify the optional Service Account IAM policy after
|
||||
saving.
|
||||
You cannot modify the optional Access Key IAM policy after saving.
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -149,12 +149,12 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
closeModal={() => {
|
||||
closeCredentialsModal();
|
||||
}}
|
||||
entity="Service Account"
|
||||
entity="Access Key"
|
||||
/>
|
||||
)}
|
||||
<Grid item xs={12}>
|
||||
<PageHeader
|
||||
label={<BackLink to={IAM_PAGES.ACCOUNT} label={"Service Accounts"} />}
|
||||
label={<BackLink to={IAM_PAGES.ACCOUNT} label={"Access Keys"} />}
|
||||
/>
|
||||
<PageLayout>
|
||||
<Box
|
||||
@@ -171,7 +171,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
>
|
||||
<Box>
|
||||
<SectionTitle icon={<ServiceAccountCredentialsIcon />}>
|
||||
Create Service Account
|
||||
Create Access Key
|
||||
</SectionTitle>
|
||||
|
||||
<form
|
||||
@@ -256,7 +256,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
}}
|
||||
label={"Restrict beyond user policy"}
|
||||
tooltip={
|
||||
"You can specify an optional JSON-formatted IAM policy to further restrict Service Account access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
|
||||
"You can specify an optional JSON-formatted IAM policy to further restrict Access Key access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
@@ -271,7 +271,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
<div>
|
||||
<PanelTitle>
|
||||
Current User Policy - edit the JSON to remove
|
||||
permissions for this service account
|
||||
permissions for this Access Key
|
||||
</PanelTitle>
|
||||
</div>
|
||||
<Grid item xs={12} className={classes.formScrollable}>
|
||||
|
||||
@@ -72,7 +72,7 @@ const DeleteServiceAccount = ({
|
||||
|
||||
return (
|
||||
<ConfirmDialog
|
||||
title={`Delete Service Account`}
|
||||
title={`Delete Access Key`}
|
||||
confirmText={"Delete"}
|
||||
isOpen={deleteOpen}
|
||||
titleIcon={<ConfirmDeleteIcon />}
|
||||
@@ -81,7 +81,7 @@ const DeleteServiceAccount = ({
|
||||
onClose={onClose}
|
||||
confirmationContent={
|
||||
<DialogContentText>
|
||||
Are you sure you want to delete service account{" "}
|
||||
Are you sure you want to delete Access Key{" "}
|
||||
<b className={classes.wrapText}>{selectedServiceAccount}</b>?
|
||||
</DialogContentText>
|
||||
}
|
||||
|
||||
@@ -112,7 +112,7 @@ const ServiceAccountPolicy = ({
|
||||
|
||||
return (
|
||||
<ModalWrapper
|
||||
title="Service Account Policy"
|
||||
title="Access Key Policy"
|
||||
modalOpen={open}
|
||||
onClose={() => {
|
||||
closeModalAndRefresh();
|
||||
@@ -129,7 +129,7 @@ const ServiceAccountPolicy = ({
|
||||
<Grid container>
|
||||
<Grid item xs={12} className={classes.codeMirrorContainer}>
|
||||
<CodeMirrorWrapper
|
||||
label={`Service Account Policy`}
|
||||
label={`Access Key Policy`}
|
||||
value={policyDefinition}
|
||||
onBeforeChange={(editor, data, value) => {
|
||||
setPolicyDefinition(value);
|
||||
|
||||
@@ -68,7 +68,7 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<PageHeader label={"Configurations"} />
|
||||
<PageHeader label={"Settings"} />
|
||||
|
||||
<PageLayout>
|
||||
<Grid item xs={12}>
|
||||
@@ -76,7 +76,10 @@ const ConfigurationOptions = ({ classes }: IConfigurationOptions) => {
|
||||
id="settings-container"
|
||||
className={classes.settingsOptionsContainer}
|
||||
>
|
||||
<ScreenTitle icon={<SettingsIcon />} title={"Configuration:"} />
|
||||
<ScreenTitle
|
||||
icon={<SettingsIcon />}
|
||||
title={"MinIO Configuration:"}
|
||||
/>
|
||||
<VerticalTabs
|
||||
selectedTab={selConfigTab}
|
||||
isRouteTabs
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
// Copyright (c) 2022 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
|
||||
@@ -14,7 +14,7 @@
|
||||
// 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, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, Fragment } from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
@@ -23,21 +23,24 @@ import LogoutIcon from "../../../icons/LogoutIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import List from "@mui/material/List";
|
||||
import {
|
||||
LogoutItemIconStyle,
|
||||
menuItemContainerStyles,
|
||||
menuItemIconStyles,
|
||||
menuItemMiniStyles,
|
||||
menuItemTextStyles,
|
||||
} from "./MenuStyleUtils";
|
||||
import MenuItem from "./MenuItem";
|
||||
|
||||
import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
|
||||
import MenuSectionHeader from "./MenuSectionHeader";
|
||||
|
||||
const ConsoleMenuList = ({
|
||||
menuItems,
|
||||
isOpen,
|
||||
displayHeaders = false,
|
||||
}: {
|
||||
menuItems: any[];
|
||||
isOpen: boolean;
|
||||
displayHeaders?: boolean;
|
||||
}) => {
|
||||
const stateClsName = isOpen ? "wide" : "mini";
|
||||
const { pathname = "" } = useLocation();
|
||||
@@ -58,6 +61,7 @@ const ConsoleMenuList = ({
|
||||
}, [groupToSelect]);
|
||||
|
||||
let basename = document.baseURI.replace(window.location.origin, "");
|
||||
let header = "";
|
||||
|
||||
return (
|
||||
<Box
|
||||
@@ -76,6 +80,9 @@ const ConsoleMenuList = ({
|
||||
|
||||
"&.mini": {
|
||||
marginLeft: "10px",
|
||||
"& .menuHeader": {
|
||||
display: "none",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -100,7 +107,16 @@ const ConsoleMenuList = ({
|
||||
<React.Fragment>
|
||||
{(menuItems || []).map((menuGroup: any, index) => {
|
||||
if (menuGroup) {
|
||||
let grHeader = null;
|
||||
|
||||
if (menuGroup.group !== header && displayHeaders) {
|
||||
grHeader = <MenuSectionHeader label={menuGroup.group} />;
|
||||
header = menuGroup.group;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{grHeader}
|
||||
<MenuItem
|
||||
stateClsName={stateClsName}
|
||||
page={menuGroup}
|
||||
@@ -114,6 +130,7 @@ const ConsoleMenuList = ({
|
||||
previewMenuGroup={previewMenuGroup}
|
||||
setPreviewMenuGroup={setPreviewMenuGroup}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
@@ -148,13 +165,13 @@ const ConsoleMenuList = ({
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
...menuItemIconStyles,
|
||||
...LogoutItemIconStyle,
|
||||
}}
|
||||
>
|
||||
<LogoutIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary="Logout"
|
||||
primary="Sign Out"
|
||||
id={"logout"}
|
||||
sx={{ ...menuItemTextStyles }}
|
||||
className={stateClsName}
|
||||
|
||||
@@ -38,14 +38,8 @@ const LicenseBadge = () => {
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
border: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: -19,
|
||||
top: -29,
|
||||
top: 1,
|
||||
transform: "translateX(5px)",
|
||||
zIndex: 400,
|
||||
border: 0,
|
||||
}}
|
||||
@@ -55,15 +49,14 @@ const LicenseBadge = () => {
|
||||
>
|
||||
<CircleIcon
|
||||
style={{
|
||||
fill: "#c83b51",
|
||||
border: "1px solid #002148",
|
||||
fill: "#FF3958",
|
||||
border: "1px solid #FF3958",
|
||||
borderRadius: "100%",
|
||||
width: 12,
|
||||
height: 12,
|
||||
width: 8,
|
||||
height: 8,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
// Copyright (c) 2022 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
|
||||
@@ -116,7 +116,11 @@ const Menu = ({ classes }: IMenuProps) => {
|
||||
isOpen={sidebarOpen}
|
||||
/>
|
||||
|
||||
<ConsoleMenuList menuItems={allowedMenuItems} isOpen={sidebarOpen} />
|
||||
<ConsoleMenuList
|
||||
menuItems={allowedMenuItems}
|
||||
isOpen={sidebarOpen}
|
||||
displayHeaders={!operatorMode && !directPVMode}
|
||||
/>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -150,7 +150,6 @@ const MenuItem = ({
|
||||
<Suspense fallback={<div>...</div>}>
|
||||
<page.icon />
|
||||
</Suspense>
|
||||
{page.badge ? <page.badge /> : null}
|
||||
</ListItemIcon>
|
||||
</Tooltip>
|
||||
)}
|
||||
@@ -159,23 +158,24 @@ const MenuItem = ({
|
||||
className={stateClsName}
|
||||
sx={{ ...menuItemTextStyles }}
|
||||
primary={page.name}
|
||||
secondary={page.badge ? <page.badge /> : null}
|
||||
/>
|
||||
)}
|
||||
|
||||
{hasChildren ? (
|
||||
isActiveGroup || previewMenuGroup === page.id ? (
|
||||
<MenuCollapsedIcon
|
||||
height={15}
|
||||
width={15}
|
||||
className="group-icon"
|
||||
style={{ color: "white" }}
|
||||
/>
|
||||
) : (
|
||||
<MenuExpandedIcon
|
||||
height={15}
|
||||
width={15}
|
||||
className="group-icon"
|
||||
style={{ color: "white" }}
|
||||
style={{ color: "#8399AB" }}
|
||||
/>
|
||||
) : (
|
||||
<MenuCollapsedIcon
|
||||
height={15}
|
||||
width={15}
|
||||
className="group-icon"
|
||||
style={{ color: "#8399AB" }}
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
|
||||
39
portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx
Normal file
39
portal-ui/src/screens/Console/Menu/MenuSectionHeader.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 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";
|
||||
|
||||
interface IMenuSectionHeader {
|
||||
label: string;
|
||||
}
|
||||
|
||||
const MenuSectionHeader = ({ label }: IMenuSectionHeader) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontSize: 18,
|
||||
color: "#fff",
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
}}
|
||||
className={"menuHeader"}
|
||||
>
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuSectionHeader;
|
||||
@@ -1,5 +1,5 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
// Copyright (c) 2022 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
|
||||
@@ -15,43 +15,95 @@
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
export const menuItemContainerStyles: any = {
|
||||
paddingLeft: 0,
|
||||
paddingBottom: "18px",
|
||||
"&.active div:nth-of-type(1)": {
|
||||
border: "2px solid #ffffff",
|
||||
padding: "12px 0",
|
||||
"div:nth-of-type(2)": {
|
||||
flexGrow: 0,
|
||||
marginRight: "15px",
|
||||
},
|
||||
|
||||
"&.active": {
|
||||
background:
|
||||
"transparent linear-gradient(270deg, #00000000 0%, #051d39 53%, #54545400 100%) 0% 0% no-repeat padding-box",
|
||||
backgroundBlendMode: "multiply",
|
||||
|
||||
"& span": {
|
||||
color: "#fff",
|
||||
},
|
||||
"& svg": {
|
||||
fill: "#fff",
|
||||
},
|
||||
|
||||
"& div:nth-of-type(1)": {
|
||||
border: "1px solid #fff",
|
||||
},
|
||||
|
||||
"&:hover, &:focus": {
|
||||
background: "none",
|
||||
"& div:nth-of-type(1)": {
|
||||
background: "none",
|
||||
"& svg": {
|
||||
fill: "#ffffff",
|
||||
fill: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
export const menuItemIconStyles: any = {
|
||||
width: 37,
|
||||
minWidth: 37,
|
||||
height: 37,
|
||||
width: 30,
|
||||
minWidth: 30,
|
||||
height: 30,
|
||||
background: "#00274D",
|
||||
border: "1px solid #002148",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderRadius: "50%",
|
||||
justifyContent: "center",
|
||||
"& svg": {
|
||||
width: 12,
|
||||
height: 12,
|
||||
fill: "#8399AB",
|
||||
},
|
||||
"&.active": {
|
||||
"& span": {
|
||||
color: "#fff",
|
||||
},
|
||||
"& svg": {
|
||||
fill: "#fff",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const LogoutItemIconStyle: any = {
|
||||
width: 40,
|
||||
minWidth: 40,
|
||||
height: 40,
|
||||
background: "#00274D",
|
||||
border: "2px solid #002148",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderRadius: "50%",
|
||||
justifyContent: "center",
|
||||
|
||||
"& svg": {
|
||||
width: 16,
|
||||
height: 16,
|
||||
fill: "#8399AB",
|
||||
},
|
||||
"&.active": {
|
||||
"& span": {
|
||||
color: "#fff",
|
||||
},
|
||||
"& svg": {
|
||||
fill: "#fff",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const menuItemTextStyles: any = {
|
||||
color: "#BCC7D1",
|
||||
color: "#8399AB",
|
||||
fontSize: "14px",
|
||||
marginLeft: "11px",
|
||||
marginLeft: "18px",
|
||||
display: "flex",
|
||||
position: "relative",
|
||||
|
||||
"& span": {
|
||||
fontSize: "14px",
|
||||
},
|
||||
@@ -90,11 +142,16 @@ export const menuItemStyle: any = {
|
||||
borderRadius: "2px",
|
||||
marginTop: "2px",
|
||||
"&.active": {
|
||||
backgroundColor: "hsla(0,0%,100%,.1)",
|
||||
".menu-icon": {
|
||||
border: "1px solid hsla(0,0%,100%,.1)",
|
||||
border: "1px solid #fff",
|
||||
borderRadius: "50%",
|
||||
background: "#072549",
|
||||
"& svg": {
|
||||
fill: "#fff",
|
||||
},
|
||||
},
|
||||
"& span": {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
"& .menu-icon": {
|
||||
@@ -103,9 +160,13 @@ export const menuItemStyle: any = {
|
||||
minWidth: "28px",
|
||||
height: "28px",
|
||||
background: "none",
|
||||
"& svg": {
|
||||
width: "12px",
|
||||
height: "12px",
|
||||
fill: "#8399AB",
|
||||
},
|
||||
},
|
||||
"&:hover, &:focus": {
|
||||
background: "hsla(0,0%,100%,.25)",
|
||||
"& .menu-icon": {
|
||||
background: "#072549",
|
||||
borderRadius: "50%",
|
||||
|
||||
@@ -71,7 +71,14 @@ const MenuToggle = ({ isOpen, onToggle }: MenuToggleProps) => {
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
boxShadow: "0 3px 10px -6px #426198",
|
||||
"&::after": {
|
||||
width: "80%",
|
||||
height: "1px",
|
||||
display: "block",
|
||||
content: "' '",
|
||||
backgroundColor: "#0F446C",
|
||||
margin: "0px auto",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
|
||||
@@ -43,7 +43,7 @@ const AddUserServiceAccount = ({
|
||||
closeModalAndRefresh,
|
||||
user,
|
||||
}: IAddUserServiceAccountProps) => {
|
||||
return <Fragment>zxzzzz</Fragment>;
|
||||
return <Fragment />;
|
||||
};
|
||||
|
||||
export default withStyles(styles)(AddUserServiceAccount);
|
||||
|
||||
@@ -80,18 +80,18 @@ const AddUserServiceAccountHelpBox = () => {
|
||||
}}
|
||||
>
|
||||
<HelpIconFilled />
|
||||
<div>Learn more about Service Accounts</div>
|
||||
<div>Learn more about Access Keys</div>
|
||||
</Box>
|
||||
<Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
<FeatureItem
|
||||
icon={<ServiceAccountIcon />}
|
||||
description={`Create Service Accounts`}
|
||||
description={`Create Access Keys`}
|
||||
/>
|
||||
<Box sx={{ paddingTop: "20px" }}>
|
||||
Service Accounts inherit the policies explicitly attached to the
|
||||
parent user, and the policies attached to each group in which the
|
||||
parent user has membership.
|
||||
Access Keys inherit the policies explicitly attached to the parent
|
||||
user, and the policies attached to each group in which the parent
|
||||
user has membership.
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
@@ -102,13 +102,13 @@ const AddUserServiceAccountHelpBox = () => {
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
Randomized access credentials are recommended, and provided by
|
||||
default. You may use your own custom Access Key and Secret Key by
|
||||
replacing the default values. After creation of any Service Account,
|
||||
you will be given the opportunity to view and download the account
|
||||
replacing the default values. After creation of any Access Key, you
|
||||
will be given the opportunity to view and download the account
|
||||
credentials.
|
||||
</Box>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
Service Accounts support programmatic access by applications. You
|
||||
cannot use a Service Account to log into the MinIO Console.
|
||||
Access Keys support programmatic access by applications. You cannot
|
||||
use a Access Key to log into the MinIO Console.
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ paddingBottom: "20px" }}>
|
||||
@@ -118,14 +118,13 @@ const AddUserServiceAccountHelpBox = () => {
|
||||
/>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
You can specify an optional JSON-formatted IAM policy to further
|
||||
restrict Service Account access to a subset of the actions and
|
||||
resources explicitly allowed for the parent user. Additional access
|
||||
beyond that of the parent user cannot be implemented through these
|
||||
restrict Access Key access to a subset of the actions and resources
|
||||
explicitly allowed for the parent user. Additional access beyond
|
||||
that of the parent user cannot be implemented through these
|
||||
policies.
|
||||
</Box>
|
||||
<Box sx={{ paddingTop: "10px" }}>
|
||||
You cannot modify the optional Service Account IAM policy after
|
||||
saving.
|
||||
You cannot modify the optional Access Key IAM policy after saving.
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
@@ -169,7 +169,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
closeModal={() => {
|
||||
closeCredentialsModal();
|
||||
}}
|
||||
entity="Service Account"
|
||||
entity="Access Key"
|
||||
/>
|
||||
)}
|
||||
<Grid item xs={12}>
|
||||
@@ -196,7 +196,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
>
|
||||
<Box>
|
||||
<SectionTitle icon={<ServiceAccountCredentialsIcon />}>
|
||||
{`Create Service Account for ${userName}`}
|
||||
{`Create Access Key for ${userName}`}
|
||||
</SectionTitle>
|
||||
<form
|
||||
noValidate
|
||||
@@ -280,7 +280,7 @@ const AddServiceAccount = ({ classes }: IAddServiceAccountProps) => {
|
||||
}}
|
||||
label={"Restrict beyond user policy"}
|
||||
tooltip={
|
||||
"You can specify an optional JSON-formatted IAM policy to further restrict Service Account access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
|
||||
"You can specify an optional JSON-formatted IAM policy to further restrict Access Key access to a subset of the actions and resources explicitly allowed for the parent user. Additional access beyond that of the parent user cannot be implemented through these policies."
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
@@ -52,7 +52,7 @@ const DeleteMultipleSAs = ({
|
||||
};
|
||||
return (
|
||||
<ConfirmDialog
|
||||
title={`Delete Service Accounts`}
|
||||
title={`Delete Access Keys`}
|
||||
confirmText={"Delete"}
|
||||
isOpen={deleteOpen}
|
||||
titleIcon={<ConfirmDeleteIcon />}
|
||||
@@ -62,7 +62,7 @@ const DeleteMultipleSAs = ({
|
||||
confirmationContent={
|
||||
<DialogContentText>
|
||||
Are you sure you want to delete the selected {selectedSAs.length}{" "}
|
||||
service accounts?{" "}
|
||||
Access Keys?{" "}
|
||||
</DialogContentText>
|
||||
}
|
||||
/>
|
||||
|
||||
@@ -139,21 +139,21 @@ const DeleteUser = ({
|
||||
{hasSA ? (
|
||||
<Fragment>
|
||||
<WarningMessage
|
||||
label="Click on a user to view the full listing of asociated Service Accounts. All Service Accounts associated with a user will be deleted along with the user. Are you sure you want to continue?"
|
||||
title="Warning: One or more users selected has associated Service Accounts. "
|
||||
label="Click on a user to view the full listing of asociated Access Keys. All Access Keys associated with a user will be deleted along with the user. Are you sure you want to continue?"
|
||||
title="Warning: One or more users selected has associated Access Keys. "
|
||||
/>
|
||||
<TableWrapper
|
||||
itemActions={tableActions}
|
||||
columns={[
|
||||
{ label: "Username", elementKey: "userName" },
|
||||
{
|
||||
label: "# Associated Service Accounts",
|
||||
label: "# Associated Access Keys",
|
||||
elementKey: "numSAs",
|
||||
},
|
||||
]}
|
||||
isLoading={loadingSA}
|
||||
records={userSAList}
|
||||
entityName="User Service Accounts"
|
||||
entityName="User Access Keys"
|
||||
idField="userName"
|
||||
customPaperHeight="250"
|
||||
/>
|
||||
|
||||
@@ -140,7 +140,7 @@ const UserServiceAccountsPanel = ({
|
||||
const closeDeleteMultipleModalAndRefresh = (refresh: boolean) => {
|
||||
setDeleteMultipleOpen(false);
|
||||
if (refresh) {
|
||||
dispatch(setSnackBarMessage(`Service accounts deleted successfully.`));
|
||||
dispatch(setSnackBarMessage(`Access Keys deleted successfully.`));
|
||||
setSelectedSAs([]);
|
||||
setLoading(true);
|
||||
}
|
||||
@@ -213,7 +213,7 @@ const UserServiceAccountsPanel = ({
|
||||
closeModal={() => {
|
||||
closeCredentialsModal();
|
||||
}}
|
||||
entity="Service Account"
|
||||
entity="Access Key"
|
||||
/>
|
||||
)}
|
||||
{policyOpen && (
|
||||
@@ -224,7 +224,7 @@ const UserServiceAccountsPanel = ({
|
||||
/>
|
||||
)}
|
||||
<div className={classes.actionsTray}>
|
||||
<PanelTitle>Service Accounts</PanelTitle>
|
||||
<PanelTitle>Access Keys</PanelTitle>
|
||||
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
|
||||
<TooltipWrapper tooltip={"Delete Selected"}>
|
||||
<Button
|
||||
@@ -249,10 +249,10 @@ const UserServiceAccountsPanel = ({
|
||||
matchAll
|
||||
errorProps={{ disabled: true }}
|
||||
>
|
||||
<TooltipWrapper tooltip={"Create service account"}>
|
||||
<TooltipWrapper tooltip={"Create Access Key"}>
|
||||
<Button
|
||||
id={"create-service-account"}
|
||||
label={"Create service account"}
|
||||
label={"Create Access Key"}
|
||||
variant="callAction"
|
||||
icon={<AddIcon />}
|
||||
onClick={() => {
|
||||
@@ -270,9 +270,9 @@ const UserServiceAccountsPanel = ({
|
||||
<TableWrapper
|
||||
isLoading={loading}
|
||||
records={records}
|
||||
entityName={"Service Accounts"}
|
||||
entityName={"Access Keys"}
|
||||
idField={""}
|
||||
columns={[{ label: "Service Account", elementKey: "" }]}
|
||||
columns={[{ label: "Access Key", elementKey: "" }]}
|
||||
itemActions={tableActions}
|
||||
selectedItems={selectedSAs}
|
||||
onSelect={(e) => selectSAs(e, setSelectedSAs, selectedSAs)}
|
||||
|
||||
@@ -68,6 +68,7 @@ export const validRoutes = (
|
||||
const ldapIsEnabled = (features && features.includes("ldap-idp")) || false;
|
||||
let consoleMenus: IMenuItem[] = [
|
||||
{
|
||||
group: "User",
|
||||
name: "Buckets",
|
||||
id: "buckets",
|
||||
component: NavLink,
|
||||
@@ -77,6 +78,38 @@ export const validRoutes = (
|
||||
children: [],
|
||||
},
|
||||
{
|
||||
group: "User",
|
||||
component: NavLink,
|
||||
id: "nav-accesskeys",
|
||||
to: IAM_PAGES.ACCOUNT,
|
||||
name: "Access Keys",
|
||||
icon: AccountsMenuIcon,
|
||||
forceDisplay: true,
|
||||
},
|
||||
{
|
||||
group: "User",
|
||||
type: "item",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.DOCUMENTATION,
|
||||
name: "Documentation",
|
||||
icon: DocumentationIcon,
|
||||
forceDisplay: true,
|
||||
onClick: (
|
||||
e:
|
||||
| React.MouseEvent<HTMLLIElement>
|
||||
| React.MouseEvent<HTMLAnchorElement>
|
||||
| React.MouseEvent<HTMLDivElement>
|
||||
) => {
|
||||
e.preventDefault();
|
||||
window.open(
|
||||
"https://min.io/docs/minio/linux/index.html?ref=con",
|
||||
"_blank"
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
group: "Administrator",
|
||||
name: "Identity",
|
||||
id: "identity",
|
||||
icon: IdentityMenuIcon,
|
||||
@@ -101,14 +134,6 @@ export const validRoutes = (
|
||||
icon: GroupsMenuIcon,
|
||||
fsHidden: ldapIsEnabled,
|
||||
},
|
||||
{
|
||||
component: NavLink,
|
||||
id: "serviceaccounts",
|
||||
to: IAM_PAGES.ACCOUNT,
|
||||
name: "Service Accounts",
|
||||
icon: AccountsMenuIcon,
|
||||
forceDisplay: true,
|
||||
},
|
||||
{
|
||||
name: "Policies",
|
||||
component: NavLink,
|
||||
@@ -120,6 +145,7 @@ export const validRoutes = (
|
||||
},
|
||||
|
||||
{
|
||||
group: "Administrator",
|
||||
name: "Monitoring",
|
||||
id: "tools",
|
||||
icon: MonitoringMenuIcon,
|
||||
@@ -169,6 +195,7 @@ export const validRoutes = (
|
||||
],
|
||||
},
|
||||
{
|
||||
group: "Administrator",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.NOTIFICATIONS_ENDPOINTS,
|
||||
name: "Notifications",
|
||||
@@ -176,6 +203,7 @@ export const validRoutes = (
|
||||
id: "lambda",
|
||||
},
|
||||
{
|
||||
group: "Administrator",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.TIERS,
|
||||
name: "Tiers",
|
||||
@@ -183,6 +211,7 @@ export const validRoutes = (
|
||||
id: "tiers",
|
||||
},
|
||||
{
|
||||
group: "Administrator",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.SITE_REPLICATION,
|
||||
name: "Site Replication",
|
||||
@@ -190,13 +219,15 @@ export const validRoutes = (
|
||||
id: "sitereplication",
|
||||
},
|
||||
{
|
||||
group: "Administrator",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.SETTINGS,
|
||||
name: "Configurations",
|
||||
name: "Settings",
|
||||
id: "configurations",
|
||||
icon: SettingsIcon,
|
||||
},
|
||||
{
|
||||
group: "Subscription",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.LICENSE,
|
||||
name: "License",
|
||||
@@ -206,6 +237,7 @@ export const validRoutes = (
|
||||
forceDisplay: true,
|
||||
},
|
||||
{
|
||||
group: "Subscription",
|
||||
name: "Support",
|
||||
id: "support",
|
||||
icon: SupportMenuIcon,
|
||||
@@ -248,26 +280,6 @@ export const validRoutes = (
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "item",
|
||||
component: NavLink,
|
||||
to: IAM_PAGES.DOCUMENTATION,
|
||||
name: "Documentation",
|
||||
icon: DocumentationIcon,
|
||||
forceDisplay: true,
|
||||
onClick: (
|
||||
e:
|
||||
| React.MouseEvent<HTMLLIElement>
|
||||
| React.MouseEvent<HTMLAnchorElement>
|
||||
| React.MouseEvent<HTMLDivElement>
|
||||
) => {
|
||||
e.preventDefault();
|
||||
window.open(
|
||||
"https://min.io/docs/minio/linux/index.html?ref=con",
|
||||
"_blank"
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
let operatorMenus: IMenuItem[] = [
|
||||
|
||||
@@ -48,6 +48,11 @@ export const watchElement = monitoringChildren
|
||||
|
||||
export const bucketsElement = sidebarItem.withAttribute("href", "/buckets");
|
||||
|
||||
export const serviceAcctsElement = sidebarItem.withAttribute(
|
||||
"href",
|
||||
IAM_PAGES.ACCOUNT
|
||||
);
|
||||
|
||||
export const identityElement = Selector(".MuiPaper-root")
|
||||
.find("ul")
|
||||
.child("#identity");
|
||||
@@ -59,9 +64,7 @@ export const usersElement = identityChildren
|
||||
export const groupsElement = identityChildren
|
||||
.find("a")
|
||||
.withAttribute("href", IAM_PAGES.GROUPS);
|
||||
export const serviceAcctsElement = identityChildren
|
||||
.find("a")
|
||||
.withAttribute("href", IAM_PAGES.ACCOUNT);
|
||||
|
||||
export const iamPoliciesElement = identityChildren
|
||||
.find("a")
|
||||
.withAttribute("href", IAM_PAGES.POLICIES);
|
||||
|
||||
Reference in New Issue
Block a user