mirror of https://github.com/grafana/grafana
Provisioning: Update onboarding page (#103436)
* Change feature name * Update feature list * Update connect button * Update enhanced features * Cleanuppull/103424/head^2
Alex Khomenko
2 months ago
committed by
GitHub
parent
49ecd83b87
commit
5e02532073
@ -1,21 +0,0 @@ |
||||
import { Box, Stack, Text } from '@grafana/ui'; |
||||
|
||||
interface FeatureCardProps { |
||||
title: string; |
||||
description: string; |
||||
icon?: React.ReactNode; |
||||
action?: React.ReactNode; |
||||
} |
||||
|
||||
export const FeatureCard = ({ title, description, icon, action }: FeatureCardProps) => ( |
||||
<Box width="25%" padding={2}> |
||||
<div style={{ height: '100%' }}> |
||||
<Stack direction="column" gap={2}> |
||||
{icon} |
||||
<Text variant="h3">{title}</Text> |
||||
<Text variant="body">{description}</Text> |
||||
{action && <Box>{action}</Box>} |
||||
</Stack> |
||||
</div> |
||||
</Box> |
||||
); |
||||
@ -1,105 +1,81 @@ |
||||
import { ReactNode } from 'react'; |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { Stack, Text, Box, LinkButton, Icon } from '@grafana/ui'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { Stack, Text, Box, LinkButton, useStyles2 } from '@grafana/ui'; |
||||
import { Repository } from 'app/api/clients/provisioning'; |
||||
import { Trans } from 'app/core/internationalization'; |
||||
|
||||
import { ConnectRepositoryButton } from '../Shared/ConnectRepositoryButton'; |
||||
|
||||
interface FeatureItemProps { |
||||
children: NonNullable<ReactNode>; |
||||
} |
||||
|
||||
const FeatureItem = ({ children }: FeatureItemProps) => { |
||||
// We use a stack here to ensure the icon and text are aligned correctly.
|
||||
return ( |
||||
<Stack direction="row" gap={1}> |
||||
<Icon name="check" className="text-success" /> |
||||
<Text variant="body">{children}</Text> |
||||
</Stack> |
||||
); |
||||
}; |
||||
|
||||
interface FeaturesListProps { |
||||
repos?: Repository[]; |
||||
hasPublicAccess: boolean; |
||||
hasImageRenderer: boolean; |
||||
hasRequiredFeatures: boolean; |
||||
onSetupFeatures: () => void; |
||||
} |
||||
|
||||
export const FeaturesList = ({ |
||||
repos, |
||||
hasPublicAccess, |
||||
hasImageRenderer, |
||||
hasRequiredFeatures, |
||||
onSetupFeatures, |
||||
}: FeaturesListProps) => { |
||||
const actions = () => { |
||||
if (!hasRequiredFeatures) { |
||||
return ( |
||||
<Box> |
||||
<LinkButton fill="outline" onClick={onSetupFeatures}> |
||||
<Trans i18nKey="provisioning.features-list.actions.set-up-required-feature-toggles"> |
||||
Set up required feature toggles |
||||
</Trans> |
||||
</LinkButton> |
||||
</Box> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Stack direction="row" alignItems="center" gap={2}> |
||||
<ConnectRepositoryButton items={repos} /> |
||||
</Stack> |
||||
); |
||||
}; |
||||
export const FeaturesList = ({ repos, hasRequiredFeatures, onSetupFeatures }: FeaturesListProps) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<Stack direction="column" gap={2}> |
||||
<Stack direction="column" gap={3}> |
||||
<Text variant="h2"> |
||||
<Trans i18nKey="provisioning.features-list.manage-your-dashboards-with-remote-provisioning"> |
||||
Manage your dashboards with remote provisioning |
||||
Get started with GitSync |
||||
</Trans> |
||||
</Text> |
||||
<FeatureItem> |
||||
<Trans i18nKey="provisioning.features-list.manage-dashboards-provision-updates-automatically"> |
||||
Manage dashboards as code and provision updates automatically |
||||
</Trans> |
||||
</FeatureItem> |
||||
<FeatureItem> |
||||
<Trans i18nKey="provisioning.features-list.store-dashboards-in-version-controlled-storage"> |
||||
Store dashboards in version-controlled storage for better organization and history tracking |
||||
</Trans> |
||||
</FeatureItem> |
||||
<FeatureItem> |
||||
<Trans i18nKey="provisioning.features-list.migrate-existing-dashboards-storage-provisioning"> |
||||
Migrate existing dashboards to storage for provisioning |
||||
</Trans> |
||||
</FeatureItem> |
||||
{hasPublicAccess && ( |
||||
<FeatureItem> |
||||
<Trans i18nKey="provisioning.features-list.automatically-provision-and-update-dashboards"> |
||||
Automatically provision and update your dashboards as soon as changes are pushed to your GitHub repository |
||||
<ul className={styles.featuresList}> |
||||
<li> |
||||
<Trans i18nKey="provisioning.features-list.manage-dashboards-provision-updates-automatically"> |
||||
Manage dashboards as code in GitHub and provision updates automatically |
||||
</Trans> |
||||
</FeatureItem> |
||||
)} |
||||
{hasImageRenderer && hasPublicAccess && ( |
||||
<FeatureItem> |
||||
<Trans i18nKey="provisioning.features-list.visual-previews-in-pull-requests"> |
||||
Visual previews in pull requests to review your changes before going live |
||||
</li> |
||||
<li> |
||||
<Trans i18nKey="provisioning.features-list.store-dashboards-in-version-controlled-storage"> |
||||
Store dashboards in version-controlled storage for better organization and history tracking |
||||
</Trans> |
||||
</FeatureItem> |
||||
)} |
||||
|
||||
{false && ( |
||||
// We haven't gotten the design for this quite yet.
|
||||
<LinkButton fill="text" href="#" icon="external-link-alt"> |
||||
<Trans i18nKey="provisioning.features-list.learn-more">Learn more</Trans> |
||||
</LinkButton> |
||||
</li> |
||||
<li> |
||||
<Trans i18nKey="provisioning.features-list.migrate-existing-dashboards-storage-provisioning"> |
||||
Migrate existing dashboards to GitHub for provisioning |
||||
</Trans> |
||||
</li> |
||||
</ul> |
||||
{!hasRequiredFeatures ? ( |
||||
<Box> |
||||
<LinkButton fill="outline" onClick={onSetupFeatures}> |
||||
<Trans i18nKey="provisioning.features-list.actions.set-up-required-feature-toggles"> |
||||
Set up required feature toggles |
||||
</Trans> |
||||
</LinkButton> |
||||
</Box> |
||||
) : ( |
||||
<Stack direction="row" alignItems="center" gap={2}> |
||||
<ConnectRepositoryButton items={repos} /> |
||||
</Stack> |
||||
)} |
||||
|
||||
{actions()} |
||||
</Stack> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
return { |
||||
featuresList: css({ |
||||
listStyleType: 'none', |
||||
paddingLeft: 0, |
||||
marginLeft: theme.spacing(-1), |
||||
'& li': { |
||||
position: 'relative', |
||||
paddingLeft: theme.spacing(4), |
||||
marginBottom: theme.spacing(1), |
||||
'&:before': { |
||||
content: '"✓"', |
||||
position: 'absolute', |
||||
left: theme.spacing(1), |
||||
top: '0', |
||||
color: theme.colors.text.secondary, |
||||
fontWeight: theme.typography.fontWeightBold, |
||||
}, |
||||
}, |
||||
}), |
||||
}; |
||||
}; |
||||
|
||||
@ -0,0 +1,32 @@ |
||||
import { css } from '@emotion/css'; |
||||
|
||||
import { GrafanaTheme2, colorManipulator } from '@grafana/data'; |
||||
import { Icon, IconName, useStyles2 } from '@grafana/ui'; |
||||
|
||||
export interface IconCircleProps { |
||||
icon: IconName; |
||||
color: 'blue' | 'orange' | 'purple'; |
||||
} |
||||
|
||||
export const IconCircle = ({ icon, color }: IconCircleProps) => { |
||||
const styles = useStyles2(getStyles, color); |
||||
|
||||
return ( |
||||
<div className={styles.iconCircle}> |
||||
<Icon name={icon} size="xl" /> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
function getStyles(theme: GrafanaTheme2, color: IconCircleProps['color']) { |
||||
const resolvedColor = theme.visualization.getColorByName(color); |
||||
|
||||
return { |
||||
iconCircle: css({ |
||||
borderRadius: theme.shape.radius.circle, |
||||
padding: theme.spacing(1), |
||||
color: resolvedColor, |
||||
backgroundColor: colorManipulator.alpha(resolvedColor, 0.2), |
||||
}), |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue