mirrors/object-browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Tier status accessibility (#2409)

Browse Source
This commit is contained in:
jinapurapu
2022-10-27 00:19:20 -07:00
committed by GitHub
parent a53b569d0a
commit a5f89bb6d7
3 changed files with 95 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
portal-ui/src/icons/TierOfflineIcon.tsx Normal file
View File

@@ -0,0 +1,37 @@
// 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 * as React from "react";
import { SVGProps } from "react";
const TierOfflineIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
>
<path
id="offline-icon"
d="M91.4,4.551l-.825-.825-2.44,2.439L85.7,3.726l-.825.825L87.312,6.99,84.873,9.429l.825.825,2.439-2.439,2.44,2.439.825-.825L88.961,6.99Zm-.155,9.44H85.027l-3.89-4.279V4.269L85.027-.01h6.219l3.89,4.279V9.711Z"
transform="translate(-81.136 0.01)"
fill="#c83b51"
fill-rule="evenodd"
/>
</svg>
);
export default TierOfflineIcon;

35
portal-ui/src/icons/TierOnlineIcon.tsx Normal file
View File

@@ -0,0 +1,35 @@
// 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 * as React from "react";
import { SVGProps } from "react";
const TierOnlineIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
>
<path
id="online-icon"
d="M7,14a7.052,7.052,0,0,1-1.411-.142,6.962,6.962,0,0,1-2.5-1.053A7.02,7.02,0,0,1,.55,9.725,6.965,6.965,0,0,1,.142,8.411a7.068,7.068,0,0,1,0-2.821A6.962,6.962,0,0,1,1.2,3.086,7.02,7.02,0,0,1,4.275.55,6.965,6.965,0,0,1,5.589.142a7.068,7.068,0,0,1,2.821,0,6.962,6.962,0,0,1,2.5,1.053,7.02,7.02,0,0,1,2.536,3.08,6.965,6.965,0,0,1,.408,1.314,7.068,7.068,0,0,1,0,2.821,6.962,6.962,0,0,1-1.053,2.5,7.02,7.02,0,0,1-3.08,2.536,6.965,6.965,0,0,1-1.314.408A7.052,7.052,0,0,1,7,14ZM3.958,6h0L2.953,7.008l3.016,3.016L10.995,5,9.99,3.992,5.969,8.013,3.958,6Z"
fill="#4ccb92"
/>
</svg>
);
export default TierOnlineIcon;

46
portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx
View File

@@ -31,12 +31,7 @@ import {
tableStyles,
typesSelection,
} from "../../Common/FormComponents/common/styleLibrary";
import {
AddIcon,
CircleIcon,
TiersIcon,
TiersNotAvailableIcon,
} from "../../../../icons";
import { AddIcon, TiersIcon, TiersNotAvailableIcon } from "../../../../icons";
import { ITierElement, ITierResponse } from "./types";
import { ErrorResponseHandler } from "../../../../common/types";
@@ -65,7 +60,8 @@ import { useNavigate } from "react-router-dom";
import { useAppDispatch } from "../../../../store";
import { hasPermission } from "../../../../common/SecureComponent";
import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
import TierOnlineIcon from "../../../../icons/TierOnlineIcon";
import TierOfflineIcon from "../../../../icons/TierOfflineIcon";
const UpdateTierCredentialsModal = withSuspense(
React.lazy(() => import("./UpdateTierCredentialsModal"))
);
@@ -233,35 +229,38 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
const renderTierStatus = (item: boolean) => {
if (item) {
return (
<Box
<Grid
container
sx={{
display: "flex",
alignItems: "center",
"& .min-icon": {
width: "18px",
height: "22px",
fill: "#4CCB92",
},
justifyItems: "start",
color: "#4CCB92",
fontSize: "8px",
}}
flexDirection={"column"}
display={"flex"}
>
<CircleIcon />
</Box>
<TierOnlineIcon />
ONLINE
</Grid>
);
}
return (
<Box
<Grid
container
sx={{
display: "flex",
alignItems: "center",
"& .min-icon": {
width: "18px",
height: "22px",
fill: "#C83B51",
},
color: "#C83B51",
fontSize: "8px",
}}
flexDirection={"column"}
display={"flex"}
>
<CircleIcon />
</Box>
<TierOfflineIcon />
OFFLINE
</Grid>
);
};
@@ -364,6 +363,7 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => {
overrideClass={classes.searchField}
value={filter}
/>
<div className={classes.rightActionButtons}>
<Button
id={"refresh-list"}