1caa3f2ce8
* Implement License page Fixes #320 * License Assets * Fix endpoint tests Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>
336 lines
11 KiB
TypeScript
336 lines
11 KiB
TypeScript
// This file is part of MinIO Console Server
|
|
// Copyright (c) 2020 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 <http://www.gnu.org/licenses/>.
|
|
|
|
import React from "react";
|
|
import clsx from "clsx";
|
|
import Grid from "@material-ui/core/Grid";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Button from "@material-ui/core/Button";
|
|
import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
|
|
import Typography from "@material-ui/core/Typography";
|
|
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
|
|
import PageHeader from "../Common/PageHeader/PageHeader";
|
|
import { containerForHeader } from "../Common/FormComponents/common/styleLibrary";
|
|
import { planDetails, planItems, planButtons } from "./utils";
|
|
|
|
const styles = (theme: Theme) =>
|
|
createStyles({
|
|
pageTitle: {
|
|
fontSize: 18,
|
|
marginBottom: 20,
|
|
},
|
|
paper: {
|
|
padding: "20px 52px 20px 28px",
|
|
},
|
|
tableContainer: {
|
|
marginLeft: 28,
|
|
},
|
|
detailsContainer: {
|
|
textAlign: "center",
|
|
paddingTop: 18,
|
|
paddingBottom: 12,
|
|
borderRadius: "3px 3px 0 0",
|
|
marginLeft: 8,
|
|
maxWidth: "calc(25% - 8px)",
|
|
},
|
|
detailsContainerBorder: {
|
|
border: "1px solid #e2e2e2",
|
|
borderBottom: 0,
|
|
},
|
|
detailsContainerBorderHighlighted: {
|
|
border: "1px solid #9a93ad",
|
|
borderBottom: 0,
|
|
},
|
|
detailsTitle: {
|
|
fontSize: 17,
|
|
fontWeight: 700,
|
|
marginBottom: 26,
|
|
},
|
|
detailsPrice: {
|
|
fontSize: 12,
|
|
fontWeight: 700,
|
|
marginBottom: 8,
|
|
},
|
|
detailsCapacityMax: {
|
|
minHeight: 28,
|
|
fontSize: 10,
|
|
fontWeight: 700,
|
|
marginBottom: 12,
|
|
padding: "0% 15%",
|
|
color: "#474747",
|
|
},
|
|
detailsCapacityMin: {
|
|
fontSize: 10,
|
|
},
|
|
itemContainer: {
|
|
height: 36,
|
|
borderTop: "1px solid #e5e5e5",
|
|
},
|
|
itemContainerDetail: {
|
|
height: 48,
|
|
borderTop: "1px solid #e5e5e5",
|
|
},
|
|
item: {
|
|
height: "100%",
|
|
borderLeft: "1px solid #e2e2e2",
|
|
borderRight: "1px solid #e2e2e2",
|
|
textAlign: "center",
|
|
fontSize: 10,
|
|
fontWeight: 700,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
alignContent: "center",
|
|
marginLeft: 8,
|
|
maxWidth: "calc(25% - 8px)",
|
|
},
|
|
itemFirst: {
|
|
borderLeft: 0,
|
|
borderRight: 0,
|
|
},
|
|
itemHighlighted: {
|
|
borderLeft: "1px solid #9a93ad",
|
|
borderRight: "1px solid #9a93ad",
|
|
},
|
|
field: {
|
|
textAlign: "left",
|
|
fontWeight: 400,
|
|
},
|
|
checkIcon: {
|
|
height: 12,
|
|
color:
|
|
"transparent linear-gradient(90deg, #073052 0%, #081c42 100%) 0% 0% no-repeat padding-box",
|
|
},
|
|
buttonContainer: {
|
|
paddingTop: 8,
|
|
paddingBottom: 24,
|
|
height: "100%",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
borderRadius: "0 0 3px 3px",
|
|
border: "1px solid #e2e2e2",
|
|
borderTop: 0,
|
|
marginLeft: 8,
|
|
maxWidth: "calc(25% - 8px)",
|
|
},
|
|
buttonContainerBlank: {
|
|
border: 0,
|
|
},
|
|
buttonContainerHighlighted: {
|
|
border: "1px solid #9a93ad",
|
|
borderTop: 0,
|
|
},
|
|
button: {
|
|
textTransform: "none",
|
|
fontSize: 15,
|
|
fontWeight: 700,
|
|
},
|
|
...containerForHeader(theme.spacing(4)),
|
|
});
|
|
|
|
interface ILicense {
|
|
classes: any;
|
|
}
|
|
|
|
const License = ({ classes }: ILicense) => {
|
|
return (
|
|
<React.Fragment>
|
|
<PageHeader label="License" />
|
|
<Grid container>
|
|
<Grid item xs={12} className={classes.container}>
|
|
<Paper className={classes.paper}>
|
|
<Grid container>
|
|
<Grid item xs={12}>
|
|
<Typography
|
|
component="h2"
|
|
variant="h6"
|
|
className={classes.pageTitle}
|
|
>
|
|
Upgrade to commercial license
|
|
</Typography>
|
|
</Grid>
|
|
<Grid container item xs={12} className={classes.tableContainer}>
|
|
<Grid container item xs={12}>
|
|
<Grid item xs={3} className={classes.detailsContainer} />
|
|
{planDetails.map((details: any) => {
|
|
return (
|
|
<Grid
|
|
container
|
|
item
|
|
xs={3}
|
|
className={clsx(
|
|
classes.detailsContainer,
|
|
classes.detailsContainerBorder,
|
|
{
|
|
[classes.detailsContainerBorderHighlighted]:
|
|
details.title !== "Community",
|
|
}
|
|
)}
|
|
>
|
|
<Grid item xs={12} className={classes.detailsTitle}>
|
|
{details.title}
|
|
</Grid>
|
|
<Grid item xs={12} className={classes.detailsPrice}>
|
|
{details.price}
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
className={classes.detailsCapacityMax}
|
|
>
|
|
{details.capacityMax || ""}
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
className={classes.detailsCapacityMin}
|
|
>
|
|
{details.capacityMin}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
{planItems.map((item: any) => {
|
|
return (
|
|
<Grid
|
|
container
|
|
item
|
|
xs={12}
|
|
className={clsx(
|
|
classes.itemContainer,
|
|
item.communityDetail && classes.itemContainerDetail
|
|
)}
|
|
>
|
|
<Grid
|
|
item
|
|
xs={3}
|
|
className={clsx(
|
|
classes.item,
|
|
classes.field,
|
|
classes.itemFirst
|
|
)}
|
|
>
|
|
{item.field}
|
|
</Grid>
|
|
<Grid container item xs={3} className={classes.item}>
|
|
<Grid item xs={12}>
|
|
{item.community === "N/A" ? (
|
|
""
|
|
) : item.community === "Yes" ? (
|
|
<CheckCircleIcon className={classes.checkIcon} />
|
|
) : (
|
|
item.community
|
|
)}
|
|
</Grid>
|
|
{item.communityDetail !== undefined && (
|
|
<Grid item xs={12}>
|
|
{item.communityDetail}
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
<Grid
|
|
container
|
|
item
|
|
xs={3}
|
|
className={clsx(classes.item, classes.itemHighlighted)}
|
|
>
|
|
<Grid item xs={12}>
|
|
{item.standard === "N/A" ? (
|
|
""
|
|
) : item.standard === "Yes" ? (
|
|
<CheckCircleIcon className={classes.checkIcon} />
|
|
) : (
|
|
item.standard
|
|
)}
|
|
</Grid>
|
|
{item.standardDetail !== undefined && (
|
|
<Grid item xs={12}>
|
|
{item.standardDetail}
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
<Grid
|
|
container
|
|
item
|
|
xs={3}
|
|
className={clsx(classes.item, classes.itemHighlighted)}
|
|
>
|
|
<Grid item xs={12}>
|
|
{item.enterprise === "N/A" ? (
|
|
""
|
|
) : item.enterprise === "Yes" ? (
|
|
<CheckCircleIcon className={classes.checkIcon} />
|
|
) : (
|
|
item.enterprise
|
|
)}
|
|
</Grid>
|
|
{item.enterpriseDetail !== undefined && (
|
|
<Grid item xs={12}>
|
|
{item.enterpriseDetail}
|
|
</Grid>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
})}
|
|
<Grid container item xs={12}>
|
|
<Grid
|
|
item
|
|
xs={3}
|
|
className={clsx(
|
|
classes.buttonContainer,
|
|
classes.buttonContainerBlank
|
|
)}
|
|
/>
|
|
{planButtons.map((button: any) => {
|
|
return (
|
|
<Grid
|
|
container
|
|
item
|
|
xs={3}
|
|
className={clsx(classes.buttonContainer, {
|
|
[classes.buttonContainerHighlighted]:
|
|
button.text === "Subscribe",
|
|
})}
|
|
>
|
|
<Button
|
|
variant={
|
|
button.text === "Subscribe"
|
|
? "contained"
|
|
: "outlined"
|
|
}
|
|
color="primary"
|
|
className={classes.button}
|
|
target="_blank"
|
|
href={button.link}
|
|
>
|
|
{button.text}
|
|
</Button>
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
export default withStyles(styles)(License);
|