-
+
);
};
-const connector = connect(null, {
+const mapState = (state: AppState) => ({
+ loadingTenant: state.tenants.tenantDetails.loadingTenant,
+ currentTab: state.tenants.tenantDetails.currentTab,
+ selectedTenant: state.tenants.tenantDetails.currentTenant,
+ selectedNamespace: state.tenants.tenantDetails.currentNamespace,
+});
+
+const connector = connect(mapState, {
setErrorSnackMessage,
+ setTenantDetailsLoad,
+ setTenantName,
+ setTenantInfo,
+ setTenantTab,
});
export default withStyles(styles)(connector(TenantDetails));
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
new file mode 100644
index 000000000..2a57392b7
--- /dev/null
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantLicense.tsx
@@ -0,0 +1,135 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 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 .
+
+import React, { Fragment, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import {
+ containerForHeader,
+ tenantDetailsStyles,
+} from "../../Common/FormComponents/common/styleLibrary";
+import Grid from "@material-ui/core/Grid";
+import api from "../../../../common/api";
+import { ITenant } from "../ListTenants/types";
+import { LicenseInfo } from "../../License/types";
+import { setErrorSnackMessage } from "../../../../actions";
+import SubnetLicenseTenant from "./SubnetLicenseTenant";
+import { AppState } from "../../../../store";
+import { setTenantDetailsLoad } from "../actions";
+import { CircularProgress } from "@material-ui/core";
+
+interface ITenantLicense {
+ classes: any;
+ loadingTenant: boolean;
+ tenant: ITenant | null;
+ setTenantDetailsLoad: typeof setTenantDetailsLoad;
+}
+
+const styles = (theme: Theme) =>
+ createStyles({
+ ...tenantDetailsStyles,
+ loaderAlign: {
+ textAlign: "center",
+ },
+ ...containerForHeader(theme.spacing(4)),
+ });
+
+const TenantLicense = ({
+ classes,
+ tenant,
+ loadingTenant,
+ setTenantDetailsLoad,
+}: ITenantLicense) => {
+ const [licenseInfo, setLicenseInfo] = useState();
+ const [loadingLicenseInfo, setLoadingLicenseInfo] = useState(true);
+ const [loadingActivateProduct, setLoadingActivateProduct] =
+ useState(false);
+
+ const activateProduct = (namespace: string, tenant: string) => {
+ if (loadingActivateProduct) {
+ return;
+ }
+ setLoadingActivateProduct(true);
+ api
+ .invoke(
+ "POST",
+ `/api/v1/subscription/namespaces/${namespace}/tenants/${tenant}/activate`,
+ {}
+ )
+ .then(() => {
+ setLoadingActivateProduct(false);
+ setTenantDetailsLoad(true);
+ setLoadingLicenseInfo(true);
+ })
+ .catch((err) => {
+ setLoadingActivateProduct(false);
+ setErrorSnackMessage(err);
+ });
+ };
+
+ useEffect(() => {
+ if (loadingLicenseInfo) {
+ api
+ .invoke("GET", `/api/v1/subscription/info`)
+ .then((res: LicenseInfo) => {
+ setLicenseInfo(res);
+ setLoadingLicenseInfo(false);
+ })
+ .catch((err: any) => {
+ setLoadingLicenseInfo(false);
+ });
+ }
+ }, [loadingLicenseInfo]);
+
+ return (
+
+
+ {loadingTenant ? (
+
+
+
+ ) : (
+
+ {tenant && (
+
+
+
+
+
+ )}
+
+ )}
+
+ );
+};
+
+const mapState = (state: AppState) => ({
+ loadingTenant: state.tenants.tenantDetails.loadingTenant,
+ tenant: state.tenants.tenantDetails.tenantInfo,
+});
+
+const connector = connect(mapState, {
+ setErrorSnackMessage,
+ setTenantDetailsLoad,
+});
+
+export default withStyles(styles)(connector(TenantLicense));
diff --git a/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
new file mode 100644
index 000000000..201054e21
--- /dev/null
+++ b/portal-ui/src/screens/Console/Tenants/TenantDetails/TenantSummary.tsx
@@ -0,0 +1,446 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2021 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 .
+
+import React, { Fragment, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import get from "lodash/get";
+import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
+import {
+ containerForHeader,
+ tenantDetailsStyles,
+} from "../../Common/FormComponents/common/styleLibrary";
+import Grid from "@material-ui/core/Grid";
+import { Button, CircularProgress } from "@material-ui/core";
+import Paper from "@material-ui/core/Paper";
+import { niceBytes } from "../../../../common/utils";
+import api from "../../../../common/api";
+import { ITenant } from "../ListTenants/types";
+import UsageBarWrapper from "../../Common/UsageBarWrapper/UsageBarWrapper";
+import UpdateTenantModal from "./UpdateTenantModal";
+import { setErrorSnackMessage } from "../../../../actions";
+import { AppState } from "../../../../store";
+
+interface ITenantsSummary {
+ classes: any;
+ match: any;
+ tenant: ITenant | null;
+ logEnabled: boolean;
+ monitoringEnabled: boolean;
+ encryptionEnabled: boolean;
+ adEnabled: boolean;
+ oicEnabled: boolean;
+ loadingTenant: boolean;
+ setErrorSnackMessage: typeof setErrorSnackMessage;
+}
+
+interface ITenantUsage {
+ used: string;
+ disk_used: string;
+}
+
+const styles = (theme: Theme) =>
+ createStyles({
+ ...tenantDetailsStyles,
+ redState: {
+ color: theme.palette.error.main,
+ },
+ yellowState: {
+ color: theme.palette.warning.main,
+ },
+ greenState: {
+ color: theme.palette.success.main,
+ },
+ greyState: {
+ color: "grey",
+ },
+ centerAlign: {
+ textAlign: "center",
+ },
+ ...containerForHeader(theme.spacing(4)),
+ });
+
+const TenantSummary = ({
+ classes,
+ match,
+ tenant,
+ logEnabled,
+ monitoringEnabled,
+ encryptionEnabled,
+ adEnabled,
+ oicEnabled,
+ loadingTenant,
+ setErrorSnackMessage,
+}: ITenantsSummary) => {
+ const [capacity, setCapacity] = useState(0);
+ const [poolCount, setPoolCount] = useState(0);
+ const [instances, setInstances] = useState(0);
+ const [volumes, setVolumes] = useState(0);
+ const [loadingUsage, setLoadingUsage] = useState(true);
+ const [usageError, setUsageError] = useState("");
+ const [usage, setUsage] = useState(0);
+ const [updateMinioVersion, setUpdateMinioVersion] = useState(false);
+
+ const tenantName = match.params["tenantName"];
+ const tenantNamespace = match.params["tenantNamespace"];
+
+ const healthStatusToClass = (health_status: string) => {
+ return health_status === "red"
+ ? classes.redState
+ : health_status === "yellow"
+ ? classes.yellowState
+ : health_status === "green"
+ ? classes.greenState
+ : classes.greyState;
+ };
+
+ useEffect(() => {
+ if (loadingUsage) {
+ api
+ .invoke(
+ "GET",
+ `/api/v1/namespaces/${tenantNamespace}/tenants/${tenantName}/usage`
+ )
+ .then((result: ITenantUsage) => {
+ const usage = get(result, "disk_used", "0");
+ setUsage(parseInt(usage));
+ setUsageError("");
+ setLoadingUsage(false);
+ })
+ .catch((err) => {
+ setUsageError(err);
+ setUsage(0);
+ setLoadingUsage(false);
+ });
+ }
+ }, [tenantName, tenantNamespace, loadingUsage]);
+
+ useEffect(() => {
+ if (tenant) {
+ const res = tenant;
+
+ const resPools = !res.pools ? [] : res.pools;
+
+ let totalInstances = 0;
+ let totalVolumes = 0;
+ let poolNamedIndex = 0;
+ for (let pool of resPools) {
+ const cap =
+ pool.volumes_per_server *
+ pool.servers *
+ pool.volume_configuration.size;
+ pool.label = `pool-${poolNamedIndex}`;
+ if (pool.name === undefined || pool.name === "") {
+ pool.name = pool.label;
+ }
+ pool.capacity = niceBytes(cap + "");
+ pool.volumes = pool.servers * pool.volumes_per_server;
+ totalInstances += pool.servers;
+ totalVolumes += pool.volumes;
+ poolNamedIndex += 1;
+ }
+ setCapacity(res.total_size || 0);
+ setPoolCount(resPools.length);
+ setVolumes(totalVolumes);
+ setInstances(totalInstances);
+ }
+ }, [tenant]);
+
+ return (
+
+ {updateMinioVersion && (
+ {
+ setUpdateMinioVersion(false);
+ }}
+ idTenant={tenantName}
+ namespace={tenantNamespace}
+ />
+ )}
+
+
+
+
+