diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx index 548dd2d17..37f5e8514 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/ListTiersConfiguration.tsx @@ -31,7 +31,12 @@ import { tableStyles, typesSelection, } from "../../Common/FormComponents/common/styleLibrary"; -import { AddIcon, TiersIcon, TiersNotAvailableIcon } from "../../../../icons"; +import { + AddIcon, + CircleIcon, + TiersIcon, + TiersNotAvailableIcon, +} from "../../../../icons"; import { ITierElement, ITierResponse } from "./types"; import { ErrorResponseHandler } from "../../../../common/types"; @@ -105,16 +110,57 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => { const [records, setRecords] = useState([]); const [filter, setFilter] = useState(""); const [isLoading, setIsLoading] = useState(true); + const [checkTierStatus, setcheckTierStatus] = useState(false); const [updateCredentialsOpen, setUpdateCredentialsOpen] = useState(false); const [selectedTier, setSelectedTier] = useState({ type: "unsupported", + status: false, }); - const hasSetTier = hasPermission(CONSOLE_UI_RESOURCE, [ IAM_SCOPES.ADMIN_SET_TIER, ]); + useEffect(() => { + if (checkTierStatus) { + records.forEach((tier: ITierElement) => { + var endpoint: string; + switch (tier.type) { + case "minio": + endpoint = tier.minio?.endpoint + "/" + tier.minio?.bucket || ""; + break; + case "s3": + endpoint = tier.s3?.endpoint + "/" + tier.s3?.bucket || ""; + break; + case "gcs": + endpoint = tier.gcs?.endpoint + "/" + tier.gcs?.bucket || ""; + break; + case "azure": + endpoint = tier.azure?.endpoint + "/" + tier.azure?.bucket || ""; + break; + default: + endpoint = ""; + } + const xhr = new XMLHttpRequest(); + xhr.open("HEAD", endpoint); + xhr.send(); + xhr.onreadystatechange = () => { + if (xhr.readyState === 4 || xhr.readyState === 2) { + tier.status = true; + } else { + tier.status = false; + } + }; + xhr.onerror = () => { + tier.status = false; + }; + }); + setRecords(records); + setcheckTierStatus(false); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [checkTierStatus]); + useEffect(() => { if (isLoading) { if (distributedSetup) { @@ -124,6 +170,7 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => { .then((res: ITierResponse) => { setRecords(res.items || []); setIsLoading(false); + setcheckTierStatus(true); }) .catch((err: ErrorResponseHandler) => { dispatch(setErrorSnackMessage(err)); @@ -183,6 +230,41 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => { return ""; }; + const renderTierStatus = (item: boolean) => { + if (item) { + return ( + + + + ); + } + return ( + + + + ); + }; + const renderTierPrefix = (item: ITierElement) => { const prefix = get(item, `${item.type}.prefix`, ""); @@ -344,6 +426,12 @@ const ListTiersConfiguration = ({ classes }: IListTiersConfig) => { renderFunction: renderTierName, renderFullObject: true, }, + { + label: "Status", + elementKey: "status", + renderFunction: renderTierStatus, + width: 50, + }, { label: "Type", elementKey: "type", diff --git a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts index 33b9581dc..8ca1069bf 100644 --- a/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts +++ b/portal-ui/src/screens/Console/Configurations/TiersConfiguration/types.ts @@ -75,6 +75,7 @@ export interface ITierElement { gcs?: ITierGCS; azure?: ITierAzure; minio?: ITierMinio; + status: boolean; } export interface ITierResponse {