diff --git a/portal-ui/src/icons/ArrowRightLink.tsx b/portal-ui/src/icons/ArrowRightLink.tsx new file mode 100644 index 000000000..d66c1a7cf --- /dev/null +++ b/portal-ui/src/icons/ArrowRightLink.tsx @@ -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 . + +import React, { SVGProps } from "react"; + +const ArrowRightLink = (props: SVGProps) => { + return ( + + + + ); +}; + +export default ArrowRightLink; diff --git a/portal-ui/src/icons/HelpIconFilled.tsx b/portal-ui/src/icons/HelpIconFilled.tsx index e497c26a9..c44bb2b30 100644 --- a/portal-ui/src/icons/HelpIconFilled.tsx +++ b/portal-ui/src/icons/HelpIconFilled.tsx @@ -33,7 +33,7 @@ const HelpIconFilled = (props: SVGProps) => ( width="21" height="21" transform="translate(0 -0.159)" - fill="#07193e" + fill={"currentcolor"} /> @@ -47,7 +47,7 @@ const HelpIconFilled = (props: SVGProps) => ( id="Trazado_7048" data-name="Trazado 7048" d="M10.42,0A10.42,10.42,0,1,0,20.84,10.42,10.42,10.42,0,0,0,10.42,0M9.534,18.477a2,2,0,0,1-1.953-1.953h0a1.943,1.943,0,1,1,1.953,1.953m1.309-6.32-.082,1.176H8.3V9.856h.982c1.974,0,3.037-.624,3.037-1.82,0-1.1-1.053-1.7-3.007-1.7-.552,0-1.125.041-1.554.081L7.561,3.73A15.939,15.939,0,0,1,9.626,3.6c3.569,0,5.635,1.647,5.635,4.234,0,2.362-1.575,3.876-4.418,4.326" - fill="#07193e" + fill={"currentcolor"} /> diff --git a/portal-ui/src/icons/LicenseDocIcon.tsx b/portal-ui/src/icons/LicenseDocIcon.tsx new file mode 100644 index 000000000..3a5a25b1a --- /dev/null +++ b/portal-ui/src/icons/LicenseDocIcon.tsx @@ -0,0 +1,54 @@ +// 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 * as React from "react"; +import { SVGProps } from "react"; + +const LicenseDocIcon = (props: SVGProps) => ( + + + + + + + + + + +); + +export default LicenseDocIcon; diff --git a/portal-ui/src/icons/OpenSourceIcon.tsx b/portal-ui/src/icons/OpenSourceIcon.tsx new file mode 100644 index 000000000..5d2cc3ea6 --- /dev/null +++ b/portal-ui/src/icons/OpenSourceIcon.tsx @@ -0,0 +1,36 @@ +// 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 * as React from "react"; +import { SVGProps } from "react"; + +const OpenSourceIcon = (props: SVGProps) => ( + + + +); + +export default OpenSourceIcon; diff --git a/portal-ui/src/icons/VerifiedIcon.tsx b/portal-ui/src/icons/VerifiedIcon.tsx index f970e18c4..fed240ecb 100644 --- a/portal-ui/src/icons/VerifiedIcon.tsx +++ b/portal-ui/src/icons/VerifiedIcon.tsx @@ -35,7 +35,7 @@ const VerifiedIcon = (props: SVGProps) => ( diff --git a/portal-ui/src/icons/index.ts b/portal-ui/src/icons/index.ts index 9004ef4ba..d432c7eff 100644 --- a/portal-ui/src/icons/index.ts +++ b/portal-ui/src/icons/index.ts @@ -175,3 +175,6 @@ export { default as LegalHoldIcon } from "./LegalHoldIcon"; export { default as RetentionIcon } from "./RetentionIcon"; export { default as TagsIcon } from "./TagsIcon"; export { default as AlertCloseIcon } from "./AlertCloseIcon"; +export { default as OpenSourceIcon } from "./OpenSourceIcon"; +export { default as ArrowRightLink } from "./ArrowRightLink"; +export { default as LicenseDocIcon } from "./LicenseDocIcon"; diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx index 2ce96817f..e7372ad4c 100644 --- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx +++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx @@ -1046,6 +1046,16 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
AlertCloseIcon + + +
+ OpenSourceIcon + + + +
+ LicenseDocIcon +

Menu Icons

({ operatorMode: state.system.operatorMode, @@ -53,12 +58,18 @@ const styles = (theme: Theme) => pageTitle: { backgroundColor: "rgb(250,250,252)", marginTop: 40, - border: "1px solid #EAEDEE", - padding: 25, + border: "1px solid #E5E5E5", + paddingTop: 33, + paddingLeft: 28, + paddingBottom: 30, + paddingRight: 28, fontSize: 16, fontWeight: "bold", "& ul": { + marginLeft: "-25px", listStyleType: "square", + color: "#1C5A8D", + fontSize: "16px", "& li": { float: "left", fontSize: 14, @@ -226,175 +237,253 @@ const License = ({ classes, operatorMode }: ILicenseProps) => { return ( - - - {isRegistered && } - {!isRegistered && ( - + + {isRegistered && ( + + )} + + {!isRegistered && ( + + - - Are you already a customer of MinIO? - - - Register this cluster → - + Are you already a customer of ? - -
- - Choosing between GNU AGPL v3 and Commercial License - -
- - If you are building proprietary applications, you may want to - choose the commercial license included as part of the Standard - and Enterprise subscription plans. Applications must otherwise - comply with all the GNU AGPLv3 License & Trademark - obligations. Follow the links below to learn more about the - compliance policy. - - -
-
- - - MinIO License and Support plans + Register this cluster{" "} + + + + +
+ + + + Choosing between GNU AGPL v3 and Commercial License + - - )} +
+ + If you are building proprietary applications, you may want to + choose the commercial license included as part of the Standard + and Enterprise subscription plans. Applications must otherwise + comply with all the GNU AGPLv3 License & Trademark obligations. + Follow the links below to learn more about the compliance + policy. + + +
  • + + Learn more about GNU AGPL v3 + +
    • +
  • + + MinIO Trademark Compliance + +
    • +     +
    +
    - + + MinIO License and Support plans + + + )} - - - - - setLicenseModal(false)} - /> - + + + + + + setLicenseModal(false)} + /> + + + + + - - GNU Affero General Public License - - - - agpl{" "} - - - Version 3. 19 November 2007{" "} - - - - - - The GNU Affero General Public License is a free, copyleft - license for software and other kinds of works, - specifically designed to ensure cooperation with the - Community in the case of network server software. - -
    - - The licenses for most software and other practical works - are designed to take away your freedom to share and change - the works. By contrast, our General Public Licenses are - intended to guarantee your freedom to share and change all - versions of a program--to make sure it remains free - software for all its users. - -
    - +
    GNU Affero General Public License
    +
    + Version 3. 19 November 2007
    - - - + + + agpl + + + + + + The GNU Affero General Public License is a free, copyleft + license for software and other kinds of works, specifically + designed to ensure cooperation with the Community in the + case of network server software. + +
    + + The licenses for most software and other practical works are + designed to take away your freedom to share and change the + works. By contrast, our General Public Licenses are intended + to guarantee your freedom to share and change all versions + of a program--to make sure it remains free software for all + its users. + +
    + +
    +     + - - + + ); }; diff --git a/portal-ui/src/screens/Console/License/LicensePlans.tsx b/portal-ui/src/screens/Console/License/LicensePlans.tsx index 85e984073..3b8b6ee26 100644 --- a/portal-ui/src/screens/Console/License/LicensePlans.tsx +++ b/portal-ui/src/screens/Console/License/LicensePlans.tsx @@ -16,7 +16,6 @@ import React, { Fragment, useEffect, useState } from "react"; import clsx from "clsx"; -import { planDetails, planItems } from "./utils"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; import Button from "@mui/material/Button"; import { Theme, useTheme } from "@mui/material/styles"; @@ -25,20 +24,18 @@ import { SubnetInfo } from "./types"; import withStyles from "@mui/styles/withStyles"; import { Box, Tooltip } from "@mui/material"; import useMediaQuery from "@mui/material/useMediaQuery"; -import HelpIcon from "../../../icons/HelpIcon"; +import { HelpIconFilled, LicenseDocIcon, OpenSourceIcon } from "../../../icons"; +import { + LICENSE_PLANS, + FEATURE_ITEMS, + COMMUNITY_PLAN_FEATURES, + STANDARD_PLAN_FEATURES, + ENTERPRISE_PLAN_FEATURES, + PAID_PLANS, +} from "./utils"; const styles = (theme: Theme) => createStyles({ - planItemsPadding: { - border: "1px solid #EAEDEE", - borderTop: 0, - maxWidth: 1180, - }, - planItemsBorder: { - height: 7, - backgroundColor: "#07193E", - }, - link: { textDecoration: "underline !important", color: theme.palette.info.main, @@ -65,88 +62,6 @@ const styles = (theme: Theme) => paddingTop: 18, lineHeight: 1, }, - currPlan: { - color: "white", - backgroundColor: "#2781B0", - }, - planHeader: { - padding: 8, - }, - detailsPrice: { - fontSize: 13, - fontWeight: 700, - }, - detailsCapacityMax: { - minHeight: 28, - fontSize: 10, - }, - itemContainer: { - height: 36, - "& .item:last-child": { - borderRight: "1px solid #e5e5e5", - }, - }, - itemContainerDetail: { - height: 48, - }, - item: { - height: "100%", - borderLeft: "1px solid #e5e5e5", - textAlign: "center", - fontSize: 10, - fontWeight: 700, - display: "flex", - alignItems: "center", - alignContent: "center", - borderTop: "1px solid #e5e5e5", - }, - - itemFirst: { - borderLeft: 0, - borderRight: 0, - }, - field: { - textAlign: "left", - fontWeight: 400, - fontSize: 12, - }, - checkIcon: { - fontSize: 15, - color: "#385973", - }, - buttonContainer: { - paddingTop: 8, - paddingBottom: 24, - height: "100%", - display: "flex", - justifyContent: "center", - borderLeft: "1px solid #e2e2e2", - }, - buttonContainerBlank: { - border: 0, - }, - buttonContainerHighlighted: { - borderTop: 0, - }, - button: { - textTransform: "none", - fontSize: 15, - fontWeight: 700, - }, - activateLink: { - color: "#1C5A8D", - fontWeight: "bold", - clear: "both", - background: "none", - border: "none", - textDecoration: "underline", - cursor: "pointer", - }, - currentPlanBG: { - background: "#022A4A 0% 0% no-repeat padding-box", - color: "#FFFFFF", - borderTop: "1px solid #52687d", - }, }); interface IRegisterStatus { @@ -160,65 +75,26 @@ interface IRegisterStatus { setActivateProductModal: any; } -const formatLabel = ( - label = "", - isLink = false, - isSmallScreen = false, - setLicenseModal: any -) => { - const lbl = - label === "N/A" ? ( - isSmallScreen ? ( - label - ) : ( - "" - ) - ) : label === "Yes" ? ( - - ) : ( - - {isLink ? ( - - ) : ( - label - )} - - ); - - return lbl; -}; - const PlanHeader = ({ isActive, isXsViewActive, title, - tooltipText = "", onClick, + children, }: { isActive: boolean; isXsViewActive: boolean; title: string; price?: string; - capacity: string; tooltipText?: string; onClick: any; + children: any; }) => { const plan = title.toLowerCase(); return ( - -
    {title}
    - -
    - -
    -     -     -
    {isActive ? "Current Plan" : ""}
    + {children}     ); }; -const LICENSE_PLANS = { - COMMUNITY: "community", - STANDARD: "standard", - ENTERPRISE: "enterprise", +const FeatureTitleRowCmp = (props: { featureLabel: any }) => { + return ( + + +
    {props.featureLabel}
    +     +     + ); +}; + +const PricingFeatureItem = (props: { + featureLabel: any; + label?: string; + detail?: string; + xsLabel?: string; +}) => { + return ( + + +
    {props.featureLabel}
    + +
    {props.label || ""}
    + {props.detail ?
    {props.detail}
    : null} +
    {props.xsLabel}
    +     +     +     + ); }; -const PAID_PLANS = [LICENSE_PLANS.STANDARD, LICENSE_PLANS.ENTERPRISE]; const LicensePlans = ({ licenseInfo, setLicenseModal, @@ -311,13 +246,105 @@ const LicensePlans = ({ const isStandardPlan = currentPlan === LICENSE_PLANS.STANDARD; const isEnterprisePlan = currentPlan === LICENSE_PLANS.ENTERPRISE; + const isPaidPlan = PAID_PLANS.includes(currentPlan); + /*In smaller screen use tabbed view to show features*/ const [xsPlanView, setXsPlanView] = useState(""); let isXsViewCommunity = xsPlanView === LICENSE_PLANS.COMMUNITY; let isXsViewStandard = xsPlanView === LICENSE_PLANS.STANDARD; let isXsViewEnterprise = xsPlanView === LICENSE_PLANS.ENTERPRISE; - const [communityHeader, standardHeader, enterpriseHeader] = planDetails; + 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)
    +     + ); + }; const getButton = ( link: string, @@ -369,341 +396,427 @@ const LicensePlans = ({ setXsPlanView(""); } }, [isSmallScreen, currentPlan]); + + const linkTracker = `?ref=${operatorMode ? "op" : "con"}`; + + const featureList = FEATURE_ITEMS; return ( + /> - + {featureList.map((fi) => { + const featureTitleRow = fi.featureTitleRow; + const isHeader = fi.isHeader; - "@media (max-width: 600px)": { - "& .tool-tip, .plan-price, .plan-capacity": { - display: "none", - }, + if (isHeader) { + if (isPaidPlan) { + return ( + + + + View License agreement
    + for the registered plan. +     +     + ); + } - "& .title": { - fontSize: "16px", - }, - - "& .tool-tip": { - marginLeft: "8px", - "& .min-icon": { - height: "12px", - width: "12px", - }, - }, - }, - }} - > - {/*Spacer*/} - + {fi.label} +     + ); } - /> - - +
    {fi.desc}
    +     + ); } - /> - - -     - -
    Features
    -     - - {planItems.map((item: any, index: number) => { - const clsName = item.className || ""; - const community = item.plans["Community"]; - const standard = item.plans["Standard"]; - const enterprise = item.plans["Enterprise"]; - - const linkTracker = `?ref=${operatorMode ? "op" : "con"}`; return ( - - {item.field} - -
    {item.field}
    -
    - - {formatLabel( - community.label, - community.link, - isSmallScreen, - setLicenseModal - )} - - {community.detail} -
    -     - -
    {item.field}
    -
    - - {formatLabel( - standard.label, - standard.link, - isSmallScreen, - null - )} - - {standard.detail} -
    -     - -
    {item.field}
    -
    - - {formatLabel( - enterprise.label, - enterprise.link, - isSmallScreen, - null - )} - - {enterprise.detail} -
    -     - - {index + 1 === planItems.length ? ( - - {/*Space Col*/} - - {getButton( - `https://slack.min.io${linkTracker}`, - "Join Slack", - "outlined", - LICENSE_PLANS.COMMUNITY - )} - - - {getButton( - `https://min.io/signup${linkTracker}`, - !PAID_PLANS.includes(currentPlan) - ? "Subscribe" - : "Login to SUBNET", - "contained", - LICENSE_PLANS.STANDARD - )} - - - {getButton( - `https://min.io/signup${linkTracker}`, - !PAID_PLANS.includes(currentPlan) - ? "Subscribe" - : "Login to SUBNET", - "contained", - LICENSE_PLANS.ENTERPRISE - )} - - - ) : null} -     + +
    {fi.desc}
    +     ); })}     + {!isPaidPlan ? ( + + {COMMUNITY_PLAN_FEATURES.map((fi, idx) => { + const featureLabel = featureList[idx].desc; + const { featureTitleRow, isHeader, isOssLicenseLink } = fi; + + if (isHeader) { + return getCommunityPlanHeader(); + } + if (featureTitleRow) { + return ( + + ); + } + + if (isOssLicenseLink) { + return ( + + { + e.preventDefault(); + e.stopPropagation(); + setLicenseModal && setLicenseModal(true); + }} + > + GNU AGPL v3 + + + ); + } + return ( + + ); + })} + + {getButton( + `https://slack.min.io${linkTracker}`, + "Join Slack", + "outlined", + LICENSE_PLANS.COMMUNITY + )} + + + ) : null} + + {STANDARD_PLAN_FEATURES.map((fi, idx) => { + const featureLabel = featureList[idx].desc; + const featureTitleRow = fi.featureTitleRow; + const isHeader = fi.isHeader; + + if (isHeader) { + return getStandardPlanHeader(); + } + if (featureTitleRow) { + return ( + + ); + } + return ( + + ); + })} + + + {getButton( + `https://min.io/signup${linkTracker}`, + !PAID_PLANS.includes(currentPlan) + ? "Subscribe" + : "Login to SUBNET", + "contained", + LICENSE_PLANS.STANDARD + )} + + + + {ENTERPRISE_PLAN_FEATURES.map((fi, idx) => { + const featureLabel = featureList[idx].desc; + const { featureTitleRow, isHeader, yesIcon } = fi; + + if (isHeader) { + return getEnterpriseHeader(); + } + + if (featureTitleRow) { + return ( + + ); + } + + if (yesIcon) { + return ( + + +
    + + + +     +     + ); + } + return ( + + ); + })} + + {getButton( + `https://min.io/signup${linkTracker}`, + !PAID_PLANS.includes(currentPlan) + ? "Subscribe" + : "Login to SUBNET", + "contained", + LICENSE_PLANS.ENTERPRISE + )} + +     diff --git a/portal-ui/src/screens/Console/License/utils.ts b/portal-ui/src/screens/Console/License/utils.ts index 0077ffbcc..509ad6583 100644 --- a/portal-ui/src/screens/Console/License/utils.ts +++ b/portal-ui/src/screens/Console/License/utils.ts @@ -14,274 +14,226 @@ // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -export interface IPlanDetails { - id: number; - title: string; - price: string; - capacityMax: string; - capacityMin?: string; -} +export const LICENSE_PLANS = { + COMMUNITY: "community", + STANDARD: "standard", + ENTERPRISE: "enterprise", +}; -export const planDetails: IPlanDetails[] = [ +export const FEATURE_ITEMS = [ { - id: 0, - title: "Community", - price: "Open Source", - capacityMax: "", + label: "Unit Price", //spacer + isHeader: true, }, { - id: 1, - title: "Standard", - price: "$10 per TiB per Month", - capacityMax: "(Minimum of 100TB)", - capacityMin: "", + desc: "Features", + featureTitleRow: true, }, { - id: 2, - title: "Enterprise", - price: "$20 per TiB per Month", - capacityMax: "(Minimum of 100TB)", - capacityMin: "", + 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 interface IPlanItemValue { - label: string; - detail?: string; - link?: boolean; -} - -export interface IPlanItemValues { - [index: string]: IPlanItemValue; -} -export interface IPlanItem { - id: number; - field: string; - plans: IPlanItemValues; - className?: string; -} - -export const planItems: IPlanItem[] = [ +export const COMMUNITY_PLAN_FEATURES = [ { - id: 0, - field: "Unit Price", - className: "unit-price", - plans: { - Community: { - label: "", - detail: "", - }, - Standard: { - label: "$10 per TiB per Month", - detail: "(Minimum of 100TB)", - }, - Enterprise: { - label: "$20 per TiB per Month", - detail: "(Minimum of 100TB)", - }, - }, + label: "Community", + isHeader: true, }, { - id: 1, - field: "License", - className: "license-col", - plans: { - Community: { - label: "GNU AGPL v3", - detail: "Open source", - link: true, - }, - Standard: { - label: "Commercial", - }, - Enterprise: { - label: "Commercial", - }, - }, + id: "com_feat_title", + featureTitleRow: true, }, { - id: 2, - field: "Software Release", - plans: { - Community: { - label: "Upstream", - }, - Standard: { - label: "1 Year Long Term Support", - }, - Enterprise: { - label: "5 Years Long Term Support", - }, - }, + id: "com_license", + label: "GNU AGPL v3", + isOssLicenseLink: true, }, { - id: 3, - field: "SLA", - plans: { - Community: { - label: "No SLA", - }, - Standard: { - label: "<48 Hours", - detail: "(Local Business Hours)", - }, - Enterprise: { - label: "<1 hour", - }, - }, + id: "com_release", + label: "Upstream", }, { - id: 4, - field: "Support", - plans: { - Community: { - label: "Community:", - detail: "Public Slack Channel + Github Issues", - }, - Standard: { - label: "L4 Direct Engineering", - detail: " support via SUBNET", - }, - Enterprise: { - label: "L4 Direct Engineering", - detail: "support via SUBNET", - }, - }, + id: "com_sla", + label: "No SLA", }, { - id: 5, - field: "Critical Security and Bug Detection", - plans: { - Community: { - label: "Self", - }, - Standard: { - label: "Continuous Scan and Alert", - }, - Enterprise: { - label: "Continuous Scan and Alert", - }, - }, + id: "com_support", + label: "Community:", + detail: "Public Slack Channel + Github Issues", }, { - id: 6, - field: "Panic Button", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "1 per year", - }, - Enterprise: { - label: "Unlimited", - }, - }, + id: "com_security", + label: "Self", }, { - id: 7, - field: "Health Diagnostics", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "24/7/365", - }, - Enterprise: { - label: "24/7/365", - }, - }, + id: "com_panic", + xsLabel: "N/A", }, { - id: 8, - field: "Annual Architecture Review", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "N/A", - }, - Enterprise: { - label: "Yes", - }, - }, + id: "com_diag", + xsLabel: "N/A", }, { - id: 9, - field: "Annual Performance Review", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "N/A", - }, - Enterprise: { - label: "Yes", - }, - }, + id: "com_arch", + xsLabel: "N/A", }, { - id: 10, - field: "Indemnification", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "N/A", - }, - Enterprise: { - label: "Yes", - }, - }, + id: "com_perf", + xsLabel: "N/A", }, { - id: 11, - field: "Security and Policy Review", - plans: { - Community: { - label: "N/A", - }, - Standard: { - label: "N/A", - }, - Enterprise: { - label: "Yes", - }, - }, + id: "com_indemnity", + xsLabel: "N/A", + }, + { + id: "com_sec_policy", + xsLabel: "N/A", }, ]; -export interface IPlanButton { - id: number; - text: string; - text2: string; - link: string; - plan: string; -} -export const planButtons: IPlanButton[] = [ +export const STANDARD_PLAN_FEATURES = [ { - id: 0, - text: "Join Slack", - text2: "", - link: "https://slack.min.io", - plan: "Community", + label: "Standard", + isHeader: true, }, { - id: 1, - text: "Subscribe", - text2: "Sign up", - link: "https://min.io/signup", - plan: "Standard", + id: "std_feat_title", + featureTitleRow: true, }, { - id: 2, - text: "Subscribe", - text2: "Sign up", - link: "https://min.io/signup", - plan: "Enterprise", + 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/Support/Register.tsx b/portal-ui/src/screens/Console/Support/Register.tsx index 334578c9e..f90fc5c44 100644 --- a/portal-ui/src/screens/Console/Support/Register.tsx +++ b/portal-ui/src/screens/Console/Support/Register.tsx @@ -58,11 +58,11 @@ import { import { connect } from "react-redux"; import { setErrorSnackMessage } from "../../../actions"; import SettingsIcon from "../../../icons/SettingsIcon"; -import RegisterStatus from "./RegisterStatus"; import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper"; import { AppState } from "../../../store"; import RegisterHelpBox from "./RegisterHelpBox"; +import RegistrationStatusBanner from "./RegistrationStatusBanner"; interface IRegister { classes: any; @@ -203,10 +203,11 @@ const Register = ({ const [loading, setLoading] = useState(false); const [loadingLicenseInfo, setLoadingLicenseInfo] = useState(false); const [clusterRegistered, setClusterRegistered] = useState(false); + const [licenseInfo, setLicenseInfo] = useState(); + const [initialLicenseLoading, setInitialLicenseLoading] = useState(true); const [displaySubnetProxy, setDisplaySubnetProxy] = useState(false); - const clearForm = () => { setSubnetAccessToken(""); setSelectedSubnetOrganization(""); @@ -236,6 +237,7 @@ const Register = ({ api .invoke("GET", `/api/v1/subnet/info`) .then((res: SubnetInfo) => { + setLicenseInfo(res); setClusterRegistered(true); setLoadingLicenseInfo(false); }) @@ -824,7 +826,9 @@ const Register = ({ padding: "43px", }} > - {clusterRegistered && } + {clusterRegistered && ( + + )} {clusterRegistered ? ( { + return ( + + + Register status: + + + + Registered + + + + + + Registered to: + {email} + + + ); +}; +export default RegistrationStatusBanner;