diff --git a/portal-ui/src/screens/Console/License/License.tsx b/portal-ui/src/screens/Console/License/License.tsx index 590299b9c..a19dbb939 100644 --- a/portal-ui/src/screens/Console/License/License.tsx +++ b/portal-ui/src/screens/Console/License/License.tsx @@ -66,7 +66,7 @@ const styles = (theme: Theme) => fontSize: 16, fontWeight: "bold", "& ul": { - marginLeft: "-25px", + marginLeft: "-8px", listStyleType: "square", color: "#1C5A8D", fontSize: "16px", diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx index bf0bb683b..2c88c441e 100644 --- a/portal-ui/src/screens/Console/License/LicensePlans.tsx +++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx @@ -22,16 +22,17 @@ import { Theme, useTheme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import { SubnetInfo } from "./types"; import withStyles from "@mui/styles/withStyles"; -import { Box, Tooltip } from "@mui/material"; +import { Box } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; -import { HelpIconFilled, LicenseDocIcon, OpenSourceIcon } from "../../../icons"; +import { LicenseDocIcon } from "../../../icons"; import { - COMMUNITY_PLAN_FEATURES, - ENTERPRISE_PLAN_FEATURES, - FEATURE_ITEMS, LICENSE_PLANS, - PAID_PLANS, + FEATURE_ITEMS, + COMMUNITY_PLAN_FEATURES, STANDARD_PLAN_FEATURES, + ENTERPRISE_PLAN_FEATURES, + PAID_PLANS, + getRenderValue, } from "./utils"; const styles = (theme: Theme) => createStyles({}); @@ -58,7 +59,6 @@ const PlanHeader = ({ isXsViewActive: boolean; title: string; price?: string; - tooltipText?: string; onClick: any; children: any; }) => { @@ -78,7 +78,6 @@ const PlanHeader = ({ alignItems: "flex-start", justifyContent: "center", flexFlow: "column", - paddingLeft: "26px", borderLeft: "1px solid #eaeaea", "& .plan-header": { display: "flex", @@ -90,7 +89,7 @@ const PlanHeader = ({ "& .title-block": { paddingTop: "20px", display: "flex", - alignItems: "flex-start", + alignItems: "center", flexFlow: "column", width: "100%", @@ -114,15 +113,6 @@ const PlanHeader = ({ }, }, - "& .price-line": { - fontSize: "16px", - fontWeight: 600, - }, - "& .minimum-cost": { - fontSize: "14px", - fontWeight: 400, - marginBottom: "5px", - }, "& .open-source": { fontSize: "14px", display: "flex", @@ -184,17 +174,19 @@ const FeatureTitleRowCmp = (props: { featureLabel: any }) => { const PricingFeatureItem = (props: { featureLabel: any; - label?: string; - detail?: string; + label?: any; + detail?: any; xsLabel?: string; + style?: any; }) => { return ( - +
{props.featureLabel}
-
{props.label || ""}
- {props.detail ?
{props.detail}
: null} +
{getRenderValue(props.label || "")}
+ {getRenderValue(props.detail)} +
{props.xsLabel}
@@ -227,9 +219,6 @@ const LicensePlans = ({ let isXsViewEnterprise = xsPlanView === LICENSE_PLANS.ENTERPRISE; const getCommunityPlanHeader = () => { - const tooltipText = - "Designed for developers who are building open source applications in compliance with the AGPL v3 license and are able to support themselves. The community version of MinIO has all the functionality of the Standard and Enterprise editions."; - return (
Community
- -
- -
-
{isCommunityPlan ? "Current Plan" : ""}
-
- - Open Source -
); }; const getStandardPlanHeader = () => { - const tooltipText = - "Designed for customers who require a commercial license and can mostly self-support but want the peace of mind that comes with the MinIO Subscription Network’s suite of operational capabilities and direct-to-engineer interaction. The Standard version is fully featured but with SLA limitations. "; - return (
Standard
- -
- -
-
{isStandardPlan ? "Current Plan" : ""}
-
$10 per TiB per month
-
(Minimum of 100TiB)
); }; const getEnterpriseHeader = () => { - const tooltipText = - "Designed for mission critical environments where both a license and strict SLAs are required. The Enterprise version is fully featured but comes with additional capabilities. "; - return (
Enterprise
- -
- -
-
{isEnterprisePlan ? "Current Plan" : ""}
-
$20 per TiB per month
-
(Minimum of 100TiB)
); }; @@ -444,7 +404,7 @@ const LicensePlans = ({ borderLeft: "1px solid #eaeaea", }, "& .plan-header": { - height: "153px", + height: "99px", borderBottom: "1px solid #eaeaea", }, "& .feature-title": { @@ -472,20 +432,13 @@ const LicensePlans = ({ "& .feature-item": { display: "flex", flexFlow: "column", - alignItems: "flex-start", + alignItems: "center", justifyContent: "center", minHeight: "60px", - padding: "5px", + padding: "0 15px 0 15px", borderBottom: "1px solid #eaeaea", borderLeft: " 1px solid #eaeaea", - paddingLeft: "26px", fontSize: "14px", - - "@media (max-width: 900px)": { - maxHeight: "30px", - overflow: "hidden", - }, - "& .link-text": { color: "#2781B0", }, @@ -500,8 +453,9 @@ const LicensePlans = ({ flex: 1, display: "flex", flexFlow: "column", - alignItems: "flex-start", + alignItems: "center", justifyContent: "space-around", + textAlign: "center", "@media (max-width: 600px)": { display: "flex", @@ -515,7 +469,7 @@ const LicensePlans = ({ }, "& .plan-feature": { flex: 1, - textAlign: "right", + textAlign: "center", paddingRight: "10px", }, }, @@ -619,13 +573,13 @@ const LicensePlans = ({ textTransform: "uppercase", }} > -
{fi.desc}
+
{getRenderValue(fi.desc)}
); } return ( - -
{fi.desc}
+ +
{getRenderValue(fi.desc)}
); })} @@ -685,6 +639,7 @@ const LicensePlans = ({ label={fi.label} detail={fi.detail} xsLabel={fi.xsLabel} + style={fi.style} /> ); })} @@ -723,6 +678,7 @@ const LicensePlans = ({ label={fi.label} detail={fi.detail} xsLabel={fi.xsLabel} + style={fi.style} /> ); })} @@ -761,7 +717,7 @@ const LicensePlans = ({ return ( -
+
@@ -775,6 +731,7 @@ const LicensePlans = ({ featureLabel={featureLabel} label={fi.label} detail={fi.detail} + style={fi.style} /> ); })} diff --git a/portal-ui/src/screens/Console/License/utils.ts b/portal-ui/src/screens/Console/License/utils.ts deleted file mode 100644 index a5c0a621e..000000000 --- a/portal-ui/src/screens/Console/License/utils.ts +++ /dev/null @@ -1,237 +0,0 @@ -// 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 . - -export const LICENSE_PLANS = { - COMMUNITY: "community", - STANDARD: "standard", - ENTERPRISE: "enterprise", -}; - -export const FEATURE_ITEMS = [ - { - label: "Unit Price", //spacer - isHeader: true, - }, - { - desc: "Features", - featureTitleRow: true, - }, - { - desc: "License", - }, - { - desc: "Software Release", - }, - { - desc: "SLA", - }, - { - desc: "Support", - }, - { - desc: "Critical Security and Bug Detection", - }, - { - desc: "Panic Button", - }, - { - desc: "Health Diagnostics", - }, - { - desc: "Annual Architecture Review", - }, - { - desc: "Annual Performance Review", - }, - { - desc: "Indemnification", - }, - { - desc: "Security and Policy Review", - }, -]; - -export const COMMUNITY_PLAN_FEATURES = [ - { - label: "Community", - isHeader: true, - }, - { - id: "com_feat_title", - featureTitleRow: true, - }, - { - id: "com_license", - label: "GNU AGPL v3", - isOssLicenseLink: true, - }, - { - id: "com_release", - label: "Upstream", - }, - { - id: "com_sla", - label: "No SLA", - }, - { - id: "com_support", - label: "Community:", - detail: "Public Slack Channel + Github Issues", - }, - { - id: "com_security", - label: "Self", - }, - { - id: "com_panic", - xsLabel: "N/A", - }, - { - id: "com_diag", - xsLabel: "N/A", - }, - { - id: "com_arch", - xsLabel: "N/A", - }, - { - id: "com_perf", - xsLabel: "N/A", - }, - { - id: "com_indemnity", - xsLabel: "N/A", - }, - { - id: "com_sec_policy", - xsLabel: "N/A", - }, -]; - -export const STANDARD_PLAN_FEATURES = [ - { - label: "Standard", - isHeader: true, - }, - { - id: "std_feat_title", - featureTitleRow: true, - }, - { - id: "std_license", - label: "Commercial", - }, - { - id: "std_release", - label: "1 Year Long Term Support", - }, - { - id: "std_sla", - label: "<48 Hours", - detail: "(Local Business Hours)", - }, - { - id: "std_support", - label: "L4 Direct Engineering", - detail: "support via SUBNET", - }, - { - id: "std_security", - label: "Continuous Scan and Alert", - }, - { - id: "std_panic", - label: "1 Per year", - }, - { - id: "std_diag", - label: "24/7/365", - }, - { - id: "std_arch", - xsLabel: "N/A", - }, - { - id: "std_perf", - xsLabel: "N/A", - }, - { - id: "std_indemnity", - xsLabel: "N/A", - }, - { - id: "std_sec_policy", - xsLabel: "N/A", - }, -]; - -export const ENTERPRISE_PLAN_FEATURES = [ - { - label: "Enterprise", - isHeader: true, - }, - { - id: "end_feat_title", - featureTitleRow: true, - }, - { - id: "ent_license", - label: "Commercial", - }, - { - id: "ent_release", - label: "5 Years Long Term Support", - }, - { - id: "ent_sla", - label: "<1 hour", - }, - { - id: "ent_support", - label: "L4 Direct Engineering support via", - detail: "SUBNET, Phone, Web Conference", - }, - { - id: "ent_security", - label: "Continuous Scan and Alert", - }, - { - id: "ent_panic", - label: "Unlimited", - }, - { - id: "ent_diag", - label: "24/7/365", - }, - { - id: "ent_arch", - yesIcon: true, - }, - { - id: "ent_perf", - yesIcon: true, - }, - { - id: "ent_indemnity", - yesIcon: true, - }, - { - id: "ent_sec_policy", - yesIcon: true, - }, -]; - -export const PAID_PLANS = [LICENSE_PLANS.STANDARD, LICENSE_PLANS.ENTERPRISE]; diff --git a/portal-ui/src/screens/Console/License/utils.tsx b/portal-ui/src/screens/Console/License/utils.tsx new file mode 100644 index 000000000..c20f0d367 --- /dev/null +++ b/portal-ui/src/screens/Console/License/utils.tsx @@ -0,0 +1,461 @@ +// 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 . + +import { Box } from "@mui/material"; + +export const LICENSE_PLANS = { + COMMUNITY: "community", + STANDARD: "standard", + ENTERPRISE: "enterprise", +}; + +type FeatureItem = { + label?: any; + isHeader?: boolean; + style?: any; + desc?: any; + featureTitleRow?: boolean; +}; + +const FeatureLink = ({ text, anchor }: { text: string; anchor: string }) => { + return ( + + {text} + + ); +}; + +export const FEATURE_ITEMS: FeatureItem[] = [ + { + label: " ", + isHeader: true, + }, + { + desc: "License", + isHeader: false, + }, + { + label: "", + isHeader: false, + style: { + height: "324px", + }, + }, + { + desc: "Features", + featureTitleRow: true, + }, + { + desc: "Unit Price", + }, + { + desc: () => { + return ; + }, + }, + { + desc: "SLA", + }, + { + desc: "Support", + }, + { + desc: "Critical Security and Bug Detection", + }, + { + desc: () => { + return ; + }, + }, + { + desc: () => { + return ; + }, + }, + { + desc: () => { + return ( + + ); + }, + }, + { + desc: () => { + return ( + + ); + }, + }, + { + desc: "Indemnification", + }, + { + desc: () => { + return ( + + ); + }, + }, +]; + +export const COMMUNITY_PLAN_FEATURES = [ + { + label: "Community", + isHeader: true, + }, + { + id: "com_license", + label: "GNU AGPL v3", + isOssLicenseLink: true, + }, + { + label: () => { + return ( + + + Designed for developers who are building open source applications in + compliance with the GNU AGPL v3 license and are able to support + themselves. It is fully featured. If you distribute, host or create + derivative works of the MinIO software over the network, the GNU + AGPL v3 license requires that you also distribute the complete, + corresponding source code of the combined work under the same GNU + AGPL v3 license. This requirement applies whether or not you + modified MinIO. + + + ); + }, + isHeader: false, + style: { + height: "324px", + }, + }, + { + id: "com_feat_title", + featureTitleRow: true, + }, + { + id: "com_license_cost", + }, + { + id: "com_release", + label: "Upstream", + }, + { + id: "com_sla", + label: "No SLA", + }, + { + id: "com_support", + label: "Community:", + detail: "Public Slack Channel + Github Issues", + }, + { + id: "com_security", + label: "Self", + }, + { + id: "com_panic", + xsLabel: "N/A", + }, + { + id: "com_diag", + xsLabel: "N/A", + }, + { + id: "com_arch", + xsLabel: "N/A", + }, + { + id: "com_perf", + xsLabel: "N/A", + }, + { + id: "com_indemnity", + xsLabel: "N/A", + }, + { + id: "com_sec_policy", + xsLabel: "N/A", + }, +]; + +export const STANDARD_PLAN_FEATURES = [ + { + label: "Standard", + isHeader: true, + }, + { + label: () => { + return ( + + Commercial + + ); + }, + isHeader: false, + }, + { + isHeader: false, + label: () => { + return ( + + + Designed for customers who require a commercial license and can + mostly self-support but want the peace of mind that comes with the + MinIO Subscription Network’s suite of operational capabilities and + direct-to-engineer interaction. The Standard version is fully + featured but with SLA limitations. To learn more about the MinIO + Subscription Network click + {" "} + + here + + . + + ); + }, + style: { + height: "324px", + }, + }, + { + id: "std_feat_title", + featureTitleRow: true, + }, + { + id: "std_license_cost", + label: () => ( + + $10 per TiB per month + + ), + detail: () => ( + + (Minimum of 100TiB) + + ), + }, + { + id: "std_release", + label: "1 Year Long Term Support", + }, + { + id: "std_sla", + label: "<48 Hours", + detail: "(Local Business Hours)", + }, + { + id: "std_support", + label: "L4 Direct Engineering", + detail: "support via SUBNET", + }, + { + id: "std_security", + label: "Continuous Scan and Alert", + }, + { + id: "std_panic", + label: "1 Per year", + }, + { + id: "std_diag", + label: "24/7/365", + }, + { + id: "std_arch", + xsLabel: "N/A", + }, + { + id: "std_perf", + xsLabel: "N/A", + }, + { + id: "std_indemnity", + xsLabel: "N/A", + }, + { + id: "std_sec_policy", + xsLabel: "N/A", + }, +]; + +export const ENTERPRISE_PLAN_FEATURES = [ + { + label: "Enterprise", + isHeader: true, + }, + { + label: () => { + return ( + + Commercial + + ); + }, + isHeader: false, + }, + { + isHeader: false, + label: () => { + return ( + + + Designed for mission critical environments where both a license and + strict SLAs are required. The Enterprise version is fully featured + but comes with additional capabilities. To learn more about the + MinIO Subscription Network click + {" "} + + here + + . + + ); + }, + style: { + height: "324px", + }, + }, + { + id: "end_feat_title", + featureTitleRow: true, + }, + { + id: "ent_license_cost", + label: () => ( + + $20 per TiB per month + + ), + detail: () => ( + + (Minimum of 100TiB) + + ), + }, + { + id: "ent_release", + label: "5 Years Long Term Support", + }, + { + id: "ent_sla", + label: "<1 hour", + }, + { + id: "ent_support", + label: "L4 Direct Engineering support via", + detail: "SUBNET, Phone, Web Conference", + }, + { + id: "ent_security", + label: "Continuous Scan and Alert", + }, + { + id: "ent_panic", + label: "Unlimited", + }, + { + id: "ent_diag", + label: "24/7/365", + }, + { + id: "ent_arch", + yesIcon: true, + }, + { + id: "ent_perf", + yesIcon: true, + }, + { + id: "ent_indemnity", + yesIcon: true, + }, + { + id: "ent_sec_policy", + yesIcon: true, + }, +]; + +export const PAID_PLANS = [LICENSE_PLANS.STANDARD, LICENSE_PLANS.ENTERPRISE]; + +export const getRenderValue = (val: any) => { + return typeof val === "function" ? val() : val; +};