mirror of https://github.com/grafana/grafana
Admin: Add promotional page for Grafana Enterprise (#21422)
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>pull/21509/head
Emil Tullstedt
6 years ago
committed by
GitHub
parent
32f055111c
commit
29687903f8
@ -0,0 +1,41 @@ |
|||||||
|
package licensing |
||||||
|
|
||||||
|
import ( |
||||||
|
"github.com/grafana/grafana/pkg/api/dtos" |
||||||
|
"github.com/grafana/grafana/pkg/services/hooks" |
||||||
|
"github.com/grafana/grafana/pkg/setting" |
||||||
|
) |
||||||
|
|
||||||
|
type OSSLicensingService struct { |
||||||
|
Cfg *setting.Cfg `inject:""` |
||||||
|
HooksService *hooks.HooksService `inject:""` |
||||||
|
} |
||||||
|
|
||||||
|
func (*OSSLicensingService) HasLicense() bool { |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
func (*OSSLicensingService) Expiry() int64 { |
||||||
|
return 0 |
||||||
|
} |
||||||
|
|
||||||
|
func (l *OSSLicensingService) Init() error { |
||||||
|
l.HooksService.AddIndexDataHook(func(indexData *dtos.IndexViewData) { |
||||||
|
for _, node := range indexData.NavTree { |
||||||
|
if node.Id == "admin" { |
||||||
|
node.Children = append(node.Children, &dtos.NavLink{ |
||||||
|
Text: "Upgrade", |
||||||
|
Id: "upgrading", |
||||||
|
Url: l.Cfg.AppSubUrl + "/admin/upgrading", |
||||||
|
Icon: "fa fa-fw fa-unlock-alt", |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
return nil |
||||||
|
} |
||||||
|
|
||||||
|
func (*OSSLicensingService) HasValidLicense() bool { |
||||||
|
return false |
||||||
|
} |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { stylesFactory, useTheme } from '@grafana/ui'; |
||||||
|
import { css } from 'emotion'; |
||||||
|
import { GrafanaTheme } from '@grafana/data'; |
||||||
|
|
||||||
|
const title = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; |
||||||
|
|
||||||
|
const getStyles = stylesFactory((theme: GrafanaTheme) => { |
||||||
|
const background = theme.colors.panelBg; |
||||||
|
const backgroundUrl = theme.isDark |
||||||
|
? '/public/img/licensing/header_dark.svg' |
||||||
|
: '/public/img/licensing/header_light.svg'; |
||||||
|
const footerBg = theme.isDark ? theme.colors.dark9 : theme.colors.gray6; |
||||||
|
|
||||||
|
return { |
||||||
|
container: css` |
||||||
|
display: grid; |
||||||
|
grid-template-columns: 100%; |
||||||
|
column-gap: 20px; |
||||||
|
row-gap: 40px; |
||||||
|
padding: 42px 20px 0 77px; |
||||||
|
background-color: ${background}; |
||||||
|
@media (min-width: 1050px) { |
||||||
|
grid-template-columns: 50% 50%; |
||||||
|
} |
||||||
|
`,
|
||||||
|
footer: css` |
||||||
|
text-align: center; |
||||||
|
padding: 16px; |
||||||
|
background: ${footerBg}; |
||||||
|
`,
|
||||||
|
header: css` |
||||||
|
height: 137px; |
||||||
|
padding: 40px 0 0 79px; |
||||||
|
position: relative; |
||||||
|
background: url('${backgroundUrl}') right; |
||||||
|
`,
|
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
interface Props { |
||||||
|
header: string; |
||||||
|
subheader?: string; |
||||||
|
editionNotice?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const LicenseChrome: React.FC<Props> = ({ header, editionNotice, subheader, children }) => { |
||||||
|
const theme = useTheme(); |
||||||
|
const styles = getStyles(theme); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div className={styles.header}> |
||||||
|
<h2 style={title}>{header}</h2> |
||||||
|
{subheader && <h3>{subheader}</h3>} |
||||||
|
|
||||||
|
<Circle |
||||||
|
size="128px" |
||||||
|
style={{ |
||||||
|
boxShadow: '0px 0px 24px rgba(24, 58, 110, 0.45)', |
||||||
|
background: '#0A1C36', |
||||||
|
position: 'absolute', |
||||||
|
top: '19px', |
||||||
|
left: '71%', |
||||||
|
}} |
||||||
|
> |
||||||
|
<img |
||||||
|
className="logo-icon" |
||||||
|
src="/public/img/grafana_icon.svg" |
||||||
|
alt="Grafana" |
||||||
|
width="80px" |
||||||
|
style={{ position: 'absolute', left: '23px', top: '20px' }} |
||||||
|
/> |
||||||
|
</Circle> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className={styles.container}>{children}</div> |
||||||
|
|
||||||
|
{editionNotice && <div className={styles.footer}>{editionNotice}</div>} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
interface CircleProps { |
||||||
|
size: string; |
||||||
|
style?: React.CSSProperties; |
||||||
|
} |
||||||
|
|
||||||
|
export const Circle: React.FC<CircleProps> = ({ size, style, children }) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: size, |
||||||
|
height: size, |
||||||
|
position: 'absolute', |
||||||
|
bottom: 0, |
||||||
|
right: 0, |
||||||
|
borderRadius: '50%', |
||||||
|
...style, |
||||||
|
}} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,188 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { css } from 'emotion'; |
||||||
|
import { NavModel } from '@grafana/data'; |
||||||
|
import Page from '../../core/components/Page/Page'; |
||||||
|
import { LicenseChrome } from './LicenseChrome'; |
||||||
|
import { Forms } from '@grafana/ui'; |
||||||
|
import { hot } from 'react-hot-loader'; |
||||||
|
import { StoreState } from '../../types'; |
||||||
|
import { getNavModel } from '../../core/selectors/navModel'; |
||||||
|
import { connect } from 'react-redux'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
navModel: NavModel; |
||||||
|
} |
||||||
|
|
||||||
|
export const UpgradePage: React.FC<Props> = ({ navModel }) => { |
||||||
|
return ( |
||||||
|
<Page navModel={navModel}> |
||||||
|
<Page.Contents> |
||||||
|
<UpgradeInfo |
||||||
|
editionNotice="You are running the open-source version of Grafana. |
||||||
|
You have to install the Enterprise edition in order enable Enterprise features." |
||||||
|
/> |
||||||
|
</Page.Contents> |
||||||
|
</Page> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const titleStyles = { fontWeight: 500, fontSize: '26px', lineHeight: '123%' }; |
||||||
|
|
||||||
|
interface UpgradeInfoProps { |
||||||
|
editionNotice?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const UpgradeInfo: React.FC<UpgradeInfoProps> = ({ editionNotice }) => { |
||||||
|
return ( |
||||||
|
<LicenseChrome header="Grafana Enterprise" subheader="Get your free trial" editionNotice={editionNotice}> |
||||||
|
<FeatureInfo /> |
||||||
|
<ServiceInfo /> |
||||||
|
</LicenseChrome> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const GetEnterprise: React.FC = () => { |
||||||
|
return ( |
||||||
|
<div style={{ marginTop: '60px', marginBottom: '60px' }}> |
||||||
|
<h2 style={titleStyles}>Get Grafana Enterprise</h2> |
||||||
|
<CallToAction /> |
||||||
|
<p style={{ paddingTop: '12px' }}> |
||||||
|
You can use the trial version for free for <strong>30 days</strong>. We will remind you about it{' '} |
||||||
|
<strong>5 days before the trial period ends</strong>. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const CallToAction: React.FC = () => { |
||||||
|
return ( |
||||||
|
<Forms.LinkButton |
||||||
|
variant="primary" |
||||||
|
size="lg" |
||||||
|
href="https://grafana.com/contact?about=grafana-enterprise&utm_source=grafana-upgrade-page" |
||||||
|
> |
||||||
|
Contact us and get a free trial |
||||||
|
</Forms.LinkButton> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const ServiceInfo: React.FC = () => { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<h4>At your service</h4> |
||||||
|
|
||||||
|
<List> |
||||||
|
<Item title="Premium Plugins" image="/public/img/licensing/plugin_enterprise.svg" /> |
||||||
|
<Item title="Critical SLA: 2 hours" image="/public/img/licensing/sla.svg" /> |
||||||
|
<Item title="Unlimited Expert Support" image="/public/img/licensing/customer_support.svg"> |
||||||
|
24x7x365 support via |
||||||
|
<List nested={true}> |
||||||
|
<Item title="Email" /> |
||||||
|
<Item title="Private slack channel" /> |
||||||
|
<Item title="Phone" /> |
||||||
|
</List> |
||||||
|
</Item> |
||||||
|
<Item title="Hand-in-hand support" image="/public/img/licensing/handinhand_support.svg"> |
||||||
|
in the upgrade process |
||||||
|
</Item> |
||||||
|
</List> |
||||||
|
|
||||||
|
<div style={{ marginTop: '20px' }}> |
||||||
|
<strong>Also included:</strong> |
||||||
|
<br /> |
||||||
|
Indemnification, working with Grafana Labs on future prioritization, and training from the core Grafana team. |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const FeatureInfo: React.FC = () => { |
||||||
|
return ( |
||||||
|
<div style={{ paddingRight: '11px' }}> |
||||||
|
<h4>Enhanced Functionality</h4> |
||||||
|
<FeatureListing /> |
||||||
|
|
||||||
|
<GetEnterprise /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const FeatureListing: React.FC = () => { |
||||||
|
return ( |
||||||
|
<List> |
||||||
|
<Item title="Data source permissions" /> |
||||||
|
<Item title="Reporting" /> |
||||||
|
<Item title="SAML Authentication" /> |
||||||
|
<Item title="Enhanced LDAP Integration" /> |
||||||
|
<Item title="Team Sync">LDAP, GitHub OAuth, Auth Proxy</Item> |
||||||
|
<Item title="White labeling" /> |
||||||
|
<Item title="Premium Plugins"> |
||||||
|
<List nested={true}> |
||||||
|
<Item title="Oracle" /> |
||||||
|
<Item title="Splunk" /> |
||||||
|
<Item title="Service Now" /> |
||||||
|
<Item title="Dynatrace" /> |
||||||
|
<Item title="DataDog" /> |
||||||
|
<Item title="AppDynamics" /> |
||||||
|
</List> |
||||||
|
</Item> |
||||||
|
</List> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
interface ListProps { |
||||||
|
nested?: boolean; |
||||||
|
} |
||||||
|
|
||||||
|
const List: React.FC<ListProps> = ({ children, nested }) => { |
||||||
|
const listStyle = css` |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
padding-top: 8px; |
||||||
|
|
||||||
|
> div { |
||||||
|
margin-bottom: ${nested ? 0 : 8}px; |
||||||
|
} |
||||||
|
`;
|
||||||
|
|
||||||
|
return <div className={listStyle}>{children}</div>; |
||||||
|
}; |
||||||
|
|
||||||
|
interface ItemProps { |
||||||
|
title: string; |
||||||
|
image?: string; |
||||||
|
} |
||||||
|
|
||||||
|
const Item: React.FC<ItemProps> = ({ children, title, image }) => { |
||||||
|
const imageUrl = image ? image : '/public/img/licensing/checkmark.svg'; |
||||||
|
const itemStyle = css` |
||||||
|
display: flex; |
||||||
|
|
||||||
|
> img { |
||||||
|
display: block; |
||||||
|
height: 22px; |
||||||
|
flex-grow: 0; |
||||||
|
padding-right: 12px; |
||||||
|
} |
||||||
|
`;
|
||||||
|
const titleStyle = css` |
||||||
|
font-weight: 500; |
||||||
|
line-height: 1.7; |
||||||
|
`;
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={itemStyle}> |
||||||
|
<img src={imageUrl} /> |
||||||
|
<div> |
||||||
|
<div className={titleStyle}>{title}</div> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const mapStateToProps = (state: StoreState) => ({ |
||||||
|
navModel: getNavModel(state.navIndex, 'upgrading'), |
||||||
|
}); |
||||||
|
|
||||||
|
export default hot(module)(connect(mapStateToProps)(UpgradePage)); |
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 6.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
Loading…
Reference in new issue