From ad2cdd73bec65a287bf1275d14eda07e2f759dc4 Mon Sep 17 00:00:00 2001 From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com> Date: Fri, 29 Oct 2021 18:57:50 -0700 Subject: [PATCH] Updated Liencese Page (#1170) --- portal-ui/public/agpl-logo.svg | 25 + .../FormSwitchWrapper/FormSwitchWrapper.tsx | 8 +- .../src/screens/Console/License/License.tsx | 724 ++++++++++-------- .../src/screens/Console/License/utils.ts | 36 +- 4 files changed, 456 insertions(+), 337 deletions(-) create mode 100644 portal-ui/public/agpl-logo.svg diff --git a/portal-ui/public/agpl-logo.svg b/portal-ui/public/agpl-logo.svg new file mode 100644 index 000000000..64d745ce2 --- /dev/null +++ b/portal-ui/public/agpl-logo.svg @@ -0,0 +1,25 @@ + + + diff --git a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx index a2dd74ac3..cb277cc4e 100644 --- a/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx +++ b/portal-ui/src/screens/Console/Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper.tsx @@ -37,6 +37,7 @@ interface IFormSwitch { index?: number; checked: boolean; switchOnly?: boolean; + indicatorLabels?: string[]; } const styles = (theme: Theme) => @@ -179,6 +180,7 @@ const FormSwitchWrapper = ({ tooltip = "", description = "", classes, + indicatorLabels, }: IFormSwitch) => { const switchComponent = ( @@ -188,7 +190,9 @@ const FormSwitchWrapper = ({ [classes.indicatorLabelOn]: !checked, })} > - OFF + {indicatorLabels && indicatorLabels.length > 1 + ? indicatorLabels[1] + : "OFF"} )} - ON + {indicatorLabels ? indicatorLabels[0] : "ON"} )} diff --git a/portal-ui/src/screens/Console/License/License.tsx b/portal-ui/src/screens/Console/License/License.tsx index 88cbd8680..1b8675c84 100644 --- a/portal-ui/src/screens/Console/License/License.tsx +++ b/portal-ui/src/screens/Console/License/License.tsx @@ -37,6 +37,7 @@ import PageHeader from "../Common/PageHeader/PageHeader"; import ActivationModal from "./ActivationModal"; import LicenseModal from "./LicenseModal"; import api from "../../../common/api"; +import { TenantsIcon } from "../../../icons"; const mapState = (state: AppState) => ({ operatorMode: state.system.operatorMode, @@ -47,9 +48,38 @@ const connector = connect(mapState, null); const styles = (theme: Theme) => createStyles({ pageTitle: { - fontSize: 18, + backgroundColor: "rgb(250,250,252)", + marginTop: 40, + border: "1px solid #EAEDEE", + padding: 25, + fontSize: 16, + fontWeight: "bold", + "& ul": { + listStyleType: "square", + // listStyleType: "none", + "& li": { + float: "left", + fontSize: 14, + marginRight: 40, + }, + "& li::before": { + color: "red", + content: "•", + }, + }, + }, + licDet: { + fontSize: 11, + color: "#5E5E5E", + }, + linkMore: { + marginTop: 10, marginBottom: 20, }, + chooseFlavorText: { + color: "#000000", + fontSize: 14, + }, paper: { padding: "20px 52px 20px 28px", backgroundColor: "#FFFFFF", @@ -59,10 +89,9 @@ const styles = (theme: Theme) => flexWrap: "wrap", flexDirection: "row", padding: "30px 30px 0px 30px", - background: "#032F51", - boxShadow: "0px 3px 7px #00000014", + border: "1px solid #EAEDEE", "& h2": { - color: "#FFF", + // color: "#FFF", flexDirection: "row", }, "& a": { @@ -70,14 +99,18 @@ const styles = (theme: Theme) => flexDirection: "row", }, "& h3": { - color: "#FFFFFF", + // color: "#FFFFFF", marginBottom: "30px", fontWeight: "bold", }, "& h6": { - color: "#FFFFFF !important", + // color: "#FFFFFF !important", }, }, + link: { + textDecoration: "underline !important", + color: theme.palette.info.main, + }, tableContainer: { marginLeft: 28, }, @@ -85,13 +118,10 @@ const styles = (theme: Theme) => textAlign: "center", paddingBottom: 12, borderRadius: "3px 3px 0 0", - marginLeft: 8, maxWidth: "calc(25% - 8px)", }, detailsContainerBorder: { - border: "1px solid #e2e2e2", - borderBottom: 0, - borderRadius: "4px 4px 0px 0px", + borderLeft: "1px solid #e2e2e2", }, detailsContainerBorderHighlighted: { border: "1px solid #B5B5B5", @@ -103,6 +133,11 @@ const styles = (theme: Theme) => marginBottom: 26, paddingTop: 18, }, + currPlan: { + color: "white", + backgroundColor: "#4CCB92", + padding: 4, + }, activePlanHeader: { fontWeight: 700, background: "#D5DDE5", @@ -133,33 +168,35 @@ const styles = (theme: Theme) => detailsCapacityMin: { fontSize: 10, }, + itemContainer: { height: 36, + "& .item:last-child": { + borderRight: "1px solid #e5e5e5", + }, }, itemContainerDetail: { height: 48, }, item: { height: "100%", - borderLeft: "1px solid #e2e2e2", - borderRight: "1px solid #e2e2e2", + borderLeft: "1px solid #e5e5e5", textAlign: "center", fontSize: 10, fontWeight: 700, display: "flex", alignItems: "center", alignContent: "center", - marginLeft: 8, maxWidth: "calc(25% - 8px)", borderTop: "1px solid #e5e5e5", }, + itemFirst: { borderLeft: 0, borderRight: 0, }, itemHighlighted: { - borderLeft: "1px solid #B5B5B5", - borderRight: "1px solid #B5B5B5", + borderLeft: "1px solid #e5e5e5", }, field: { textAlign: "left", @@ -167,9 +204,8 @@ const styles = (theme: Theme) => fontSize: 12, }, checkIcon: { - height: 12, - color: - "transparent linear-gradient(90deg, #073052 0%, #081c42 100%) 0% 0% no-repeat padding-box", + fontSize: 15, + color: "#385973", }, buttonContainer: { paddingTop: 8, @@ -177,17 +213,13 @@ const styles = (theme: Theme) => height: "100%", display: "flex", justifyContent: "center", - borderRadius: "0 0 3px 3px", - border: "1px solid #e2e2e2", - borderTop: 0, - marginLeft: 8, + borderLeft: "1px solid #e2e2e2", maxWidth: "calc(25% - 8px)", }, buttonContainerBlank: { border: 0, }, buttonContainerHighlighted: { - border: "1px solid #B5B5B5", borderTop: 0, }, button: { @@ -259,9 +291,14 @@ const styles = (theme: Theme) => }, }, planItemsPadding: { - padding: "23px 0px", + border: "1px solid #EAEDEE", + borderTop: 0, maxWidth: 1180, }, + planItemsBorder: { + height: 7, + backgroundColor: "#07193E", + }, subnetSubTitle: { fontSize: 12, }, @@ -277,13 +314,23 @@ const styles = (theme: Theme) => clickableBlock: { cursor: "pointer", }, - agplFlavorText: { - color: "white", - }, - chooseFlavorText: { - color: "#777777", - }, + ...containerForHeader(theme.spacing(4)), + mainContainer: { + border: "1px solid #EAEDEE", + padding: 40, + margin: 40, + }, + icon: { + color: theme.palette.primary.main, + fontSize: 16, + fontWeight: "bold", + marginBottom: 20, + "& .MuiSvgIcon-root": { + fontSize: 44, + marginRight: 15, + }, + }, }); interface ILicenseProps { @@ -365,269 +412,297 @@ const License = ({ classes, operatorMode }: ILicenseProps) => { - - - - - {licenseInfo ? ( - - - - - License - - - Commercial License - - - Organization - - - {licenseInfo.organization} - - - Registered Capacity - - - {niceBytes( - (licenseInfo.storage_capacity * 1099511627776) // 1 Terabyte = 1099511627776 Bytes - .toString(10) - )} - - - Expiry Date - - - - {licenseInfo.expires_at} - - +
+ + + + GNU Affero General Public License + + + + + {licenseInfo ? ( + + + + + License + + + Commercial License + + + Organization + + + {licenseInfo.organization} + + + Registered Capacity + + + {niceBytes( + (licenseInfo.storage_capacity * 1099511627776) // 1 Terabyte = 1099511627776 Bytes + .toString(10) + )} + + + Expiry Date + + + + {licenseInfo.expires_at} + + + + + + Subscription Plan + + + {licenseInfo.plan} + + + Requester + + + {licenseInfo.email} + + + verified - - - Subscription Plan - - - {licenseInfo.plan} - - - Requester - - - {licenseInfo.email} - - - verified + ) : ( + + setLicenseModal(false)} /> - - - ) : ( - - setLicenseModal(false)} - /> - - agpl - - - - GNU Affero General Public License - - - -
setLicenseModal(true)} - className={classes.clickableBlock} - > - Version 3 - + + + 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. -
-
-
- )} -
- - {licenseInfo ? ( - - - Login to MinIO SUBNET ! - - - It combines a commercial license with a support experience - unlike any other. - -
- - {operatorMode && ( - - {" "}
-
- - {loadingRefreshLicense && ( - - )} -
- )} -
- ) : ( - - - 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. - -
- -
- )} + + 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. + + +
+ + )} +
+ + {licenseInfo ? ( + + + Login to MinIO SUBNET ! + + + It combines a commercial license with a support + experience unlike any other. + +
+ + {operatorMode && ( + + {" "} +
+
+ + {loadingRefreshLicense && ( + + )} +
+ )} +
+ ) : ( +
+ + 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. + + +
+
+ )} + - - - + +
+
+ + Pricing + + + The MinIO Subscription Network provides exclusive benefits across + licensing, operations and support. See the pricing table below for + more information. + + + +
+
+ +
+ + {operatorMode ? ( { xs={3} className={clsx( classes.detailsContainer, - classes.detailsContainerBorder, - { - [classes.detailsContainerBorderHighlighted]: - details.title !== "Community", - }, - currentPlan ? classes.currentPlanBG : "" + classes.detailsContainerBorder )} > - {currentPlan ? "Current Plan" : "\u00A0"} - + className={classes.planHeader} + > {details.title} - {details.price} + {currentPlan ? ( + + CURRENT PLAN + + ) : ( + details.price + )} { container item xs={3} - className={clsx( - classes.item, - currentPlanID === 0 ? classes.currentPlanBG : "" - )} + className={clsx(classes.item)} > {item.community === "N/A" ? ( @@ -726,7 +793,19 @@ const License = ({ classes, operatorMode }: ILicenseProps) => { ) : item.community === "Yes" ? ( ) : ( - item.community + + {item.communityLink !== undefined && + item.communityLink ? ( + setLicenseModal(true)} + > + {item.community} + + ) : ( + item.community + )} + )} {item.communityDetail !== undefined && ( @@ -754,6 +833,11 @@ const License = ({ classes, operatorMode }: ILicenseProps) => { item.standard )} + {item.standardDetail !== undefined && ( + + {item.standardDetail} + + )} { item.enterprise )} + {item.enterpriseDetail !== undefined && ( + + {item.enterpriseDetail} + + )} ); @@ -795,27 +884,20 @@ const License = ({ classes, operatorMode }: ILicenseProps) => { item xs={3} style={{ textAlign: "center" }} - className={clsx( - classes.buttonContainer, - currentPlanID === index - ? classes.currentPlanBG - : "", - { - [classes.buttonContainerHighlighted]: - button.text === "Subscribe", - } - )} + className={clsx(classes.buttonContainer, { + [classes.buttonContainerHighlighted]: + button.text === "Subscribe", + })} >
); diff --git a/portal-ui/src/screens/Console/License/utils.ts b/portal-ui/src/screens/Console/License/utils.ts index a972bbbb6..34524be28 100644 --- a/portal-ui/src/screens/Console/License/utils.ts +++ b/portal-ui/src/screens/Console/License/utils.ts @@ -18,21 +18,21 @@ export const planDetails = [ { id: 0, title: "Community", - price: "Open Source", - capacityMin: "", + price: "FREE", + capacityMax: "Open Source", }, { id: 1, title: "Standard", - price: "$10/TB/month", - capacityMax: "Up to 10PB. No additional charges for capacity over 10PB", + price: "$10 per TB", + capacityMax: "(Minimum of 100TB)", capacityMin: "", }, { id: 2, title: "Enterprise", - price: "$20/TB/month", - capacityMax: "Up to 5PB. No additional charges for capacity over 5PB", + price: "$20 per TB", + capacityMax: "(Minimum of 100TB)", capacityMin: "", }, ]; @@ -42,6 +42,7 @@ export const planItems = [ id: 0, field: "License", community: "GNU AGPL v3", + communityLink: true, communityDetail: "", standard: "Commercial License", standardDetail: "", @@ -51,7 +52,7 @@ export const planItems = [ { id: 1, field: "Software Release", - community: "Update to latest", + community: "Upstream", standard: "1 Year Long Term Support", enterprise: "5 Years Long Term Support", }, @@ -59,7 +60,7 @@ export const planItems = [ id: 2, field: "SLA", community: "No SLA", - standard: "<24 hours", + standard: "<48 Hours (Local Business Hours)", enterprise: "<1 hour", }, { @@ -67,17 +68,17 @@ export const planItems = [ field: "Support", community: "Community:", communityDetail: "Public Slack Channel + Github Issues", - standard: "24x7 L4 direct engineering", - standardDetail: "Support via SUBNET", - enterprise: "24x7 L4 direct engineering", - enterpriseDetail: "Support via SUBNET", + standard: "L4 Direct Engineering", + standardDetail: " support via SUBNET", + enterprise: "L4 Direct Engineering", + enterpriseDetail: "support via SUBNET", }, { id: 4, field: "Security Updates & Critical Bugs", community: "Self Update", - standard: "Guided Update", - enterprise: "Guided Update", + standard: "Continuous Scan and Alert", + enterprise: "Continuous Scan and Alert", }, { id: 5, @@ -86,6 +87,13 @@ export const planItems = [ standard: "1 per year", enterprise: "Unlimited", }, + { + id: 6, + field: "Health Diagnostics", + community: "N/A", + standard: "24/7/365", + enterprise: "24/7/365", + }, { id: 6, field: "Annual Architecture Review",