IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

add "direction" prop to Box

Browse Source
This commit is contained in:
Ashley Harrison 2024-02-22 14:46:19 +00:00
parent 06c3f60ebd
commit 99f82a27c7
No known key found for this signature in database
GPG Key ID: AEC29E54E8D7CD90
5 changed files with 83 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Layout/Box/Box.story.tsx
View File

@ -73,6 +73,7 @@ Basic.argTypes = {
paddingBottom: SpacingTokenControl,
paddingLeft: SpacingTokenControl,
paddingRight: SpacingTokenControl,
direction: { control: 'select', options: ['row', 'row-reverse', 'column', 'column-reverse'] },
display: { control: 'select', options: ['flex', 'block', 'inline', 'none'] },
backgroundColor: { control: 'select', options: backgroundOptions },
borderStyle: { control: 'select', options: borderStyleOptions },

9
packages/grafana-ui/src/components/Layout/Box/Box.tsx
View File

@ -4,7 +4,7 @@ import React, { ElementType, forwardRef, PropsWithChildren } from 'react';
import { GrafanaTheme2, ThemeSpacingTokens, ThemeShape, ThemeShadows } from '@grafana/data';
import { useStyles2 } from '../../../themes';
import { AlignItems, FlexProps, JustifyContent } from '../types';
import { AlignItems, Direction, FlexProps, JustifyContent } from '../types';
import { ResponsiveProp, getResponsiveStyle } from '../utils/responsiveness';
type Display = 'flex' | 'block' | 'inline' | 'inline-block' | 'none';
@ -54,6 +54,7 @@ interface BoxProps extends FlexProps, Omit<React.HTMLAttributes<HTMLElement>, 'c
// Flex Props
alignItems?: ResponsiveProp<AlignItems>;
direction?: ResponsiveProp<Direction>;
justifyContent?: ResponsiveProp<JustifyContent>;
gap?: ResponsiveProp<ThemeSpacingTokens>;
@ -91,6 +92,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
borderColor,
borderStyle,
borderRadius,
direction,
justifyContent,
alignItems,
boxShadow,
@ -123,6 +125,7 @@ export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props,
borderColor,
borderStyle,
borderRadius,
direction,
justifyContent,
alignItems,
boxShadow,
@ -188,6 +191,7 @@ const getStyles = (
borderColor: BoxProps['borderColor'],
borderStyle: BoxProps['borderStyle'],
borderRadius: BoxProps['borderRadius'],
direction: BoxProps['direction'],
justifyContent: BoxProps['justifyContent'],
alignItems: BoxProps['alignItems'],
boxShadow: BoxProps['boxShadow'],
@ -247,6 +251,9 @@ const getStyles = (
getResponsiveStyle(theme, backgroundColor, (val) => ({
backgroundColor: customBackgroundColor(val, theme),
})),
getResponsiveStyle(theme, direction, (val) => ({
flexDirection: val,
})),
getResponsiveStyle(theme, grow, (val) => ({
flexGrow: val,
})),

18
public/app/features/admin/migrate-to-cloud/EmptyState/CallToAction.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Box, Button, Stack, Text } from '@grafana/ui';
import { Box, Button, Text } from '@grafana/ui';
import { Trans } from 'app/core/internationalization';
export const CallToAction = () => {
@ -9,15 +9,13 @@ export const CallToAction = () => {
};
return (
<Box padding={5} backgroundColor="secondary">
<Stack gap={2} direction="column" alignItems="center">
<Text variant="h3" textAlignment="center">
<Trans i18nKey="migrate-to-cloud.cta.header">Let us manage your Grafana stack</Trans>
</Text>
<Button onClick={onClickMigrate}>
<Trans i18nKey="migrate-to-cloud.cta.button">Migrate this instance to Cloud</Trans>
</Button>
</Stack>
<Box display="flex" padding={5} gap={2} direction="column" alignItems="center" backgroundColor="secondary">
<Text variant="h3" textAlignment="center">
<Trans i18nKey="migrate-to-cloud.cta.header">Let us manage your Grafana stack</Trans>
</Text>
<Button onClick={onClickMigrate}>
<Trans i18nKey="migrate-to-cloud.cta.button">Migrate this instance to Cloud</Trans>
</Button>
</Box>
);
};

70
public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneLeft.tsx
View File

@ -1,47 +1,45 @@
import React from 'react';
import { Box, Stack } from '@grafana/ui';
import { Box } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { InfoItem } from './InfoItem';
export const InfoPaneLeft = () => {
return (
<Box padding={2} backgroundColor="secondary">
<Stack gap={2} direction="column">
<InfoItem
title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')}
linkHref="https://grafana.com/products/cloud"
>
<Trans i18nKey="migrate-to-cloud.what-is-cloud.body">
Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments.
It&apos;s everything you love about Grafana without the overhead of maintaining, upgrading, and supporting
an installation.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.why-host.title', 'Why host with Grafana?')}
linkTitle={t('migrate-to-cloud.why-host.link-title', 'More questions? Talk to an expert')}
linkHref="https://grafana.com/contact"
>
<Trans i18nKey="migrate-to-cloud.why-host.body">
In addition to the convenience of managed hosting, Grafana Cloud includes many cloud-exclusive features like
SLOs, incident management, machine learning, and powerful observability integrations.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.is-it-secure.title', 'Is it secure?')}
linkTitle={t('migrate-to-cloud.is-it-secure.link-title', 'Grafana Labs Trust Center')}
linkHref="https://trust.grafana.com"
>
<Trans i18nKey="migrate-to-cloud.is-it-secure.body">
Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing
industry-standard security technologies and procedures, we help protect our customers&apos; data from
unauthorized access, use, or disclosure.
</Trans>
</InfoItem>
</Stack>
<Box display="flex" padding={2} gap={2} direction="column" backgroundColor="secondary">
<InfoItem
title={t('migrate-to-cloud.what-is-cloud.title', 'What is Grafana Cloud?')}
linkTitle={t('migrate-to-cloud.what-is-cloud.link-title', 'Learn about cloud features')}
linkHref="https://grafana.com/products/cloud"
>
<Trans i18nKey="migrate-to-cloud.what-is-cloud.body">
Grafana cloud is a fully managed cloud-hosted observability platform ideal for cloud native environments.
It&apos;s everything you love about Grafana without the overhead of maintaining, upgrading, and supporting an
installation.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.why-host.title', 'Why host with Grafana?')}
linkTitle={t('migrate-to-cloud.why-host.link-title', 'More questions? Talk to an expert')}
linkHref="https://grafana.com/contact"
>
<Trans i18nKey="migrate-to-cloud.why-host.body">
In addition to the convenience of managed hosting, Grafana Cloud includes many cloud-exclusive features like
SLOs, incident management, machine learning, and powerful observability integrations.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.is-it-secure.title', 'Is it secure?')}
linkTitle={t('migrate-to-cloud.is-it-secure.link-title', 'Grafana Labs Trust Center')}
linkHref="https://trust.grafana.com"
>
<Trans i18nKey="migrate-to-cloud.is-it-secure.body">
Grafana Labs is committed to maintaining the highest standards of data privacy and security. By implementing
industry-standard security technologies and procedures, we help protect our customers&apos; data from
unauthorized access, use, or disclosure.
</Trans>
</InfoItem>
</Box>
);
};

66
public/app/features/admin/migrate-to-cloud/EmptyState/InfoPaneRight.tsx
View File

@ -1,45 +1,43 @@
import React from 'react';
import { Box, Stack } from '@grafana/ui';
import { Box } from '@grafana/ui';
import { t, Trans } from 'app/core/internationalization';
import { InfoItem } from './InfoItem';
export const InfoPaneRight = () => {
return (
<Box padding={2} backgroundColor="secondary">
<Stack gap={2} direction="column">
<InfoItem
title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')}
linkHref="https://grafana.com/docs/grafana-cloud/connect-externally-hosted/private-data-source-connect"
>
<Trans i18nKey="migrate-to-cloud.pdc.body">
Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC)
allows Grafana Cloud to access your existing data sources over a secure network tunnel.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.pricing.title', 'How much does it cost?')}
linkTitle={t('migrate-to-cloud.pricing.link-title', 'Grafana Cloud pricing')}
linkHref="https://grafana.com/pricing"
>
<Trans i18nKey="migrate-to-cloud.pricing.body">
Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires,
you&apos;ll be billed based on usage over the free plan limits.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.can-i-move.title', 'Can I move this installation to Grafana Cloud?')}
linkTitle={t('migrate-to-cloud.can-i-move.link-title', 'Learn about migrating other settings')}
linkHref="https://grafana.com/docs/grafana-cloud/account-management/migration-guide"
>
<Trans i18nKey="migrate-to-cloud.can-i-move.body">
Once you connect this installation to a cloud stack, you&apos;ll be able to upload data sources and
dashboards.
</Trans>
</InfoItem>
</Stack>
<Box display="flex" direction="column" gap={2} padding={2} backgroundColor="secondary">
<InfoItem
title={t('migrate-to-cloud.pdc.title', 'Not all my data sources are on the public internet')}
linkTitle={t('migrate-to-cloud.pdc.link-title', 'Learn about PDC')}
linkHref="https://grafana.com/docs/grafana-cloud/connect-externally-hosted/private-data-source-connect"
>
<Trans i18nKey="migrate-to-cloud.pdc.body">
Exposing your data sources to the internet can raise security concerns. Private data source connect (PDC)
allows Grafana Cloud to access your existing data sources over a secure network tunnel.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.pricing.title', 'How much does it cost?')}
linkTitle={t('migrate-to-cloud.pricing.link-title', 'Grafana Cloud pricing')}
linkHref="https://grafana.com/pricing"
>
<Trans i18nKey="migrate-to-cloud.pricing.body">
Grafana Cloud has a generous free plan and a 14 day unlimited usage trial. After your trial expires,
you&apos;ll be billed based on usage over the free plan limits.
</Trans>
</InfoItem>
<InfoItem
title={t('migrate-to-cloud.can-i-move.title', 'Can I move this installation to Grafana Cloud?')}
linkTitle={t('migrate-to-cloud.can-i-move.link-title', 'Learn about migrating other settings')}
linkHref="https://grafana.com/docs/grafana-cloud/account-management/migration-guide"
>
<Trans i18nKey="migrate-to-cloud.can-i-move.body">
Once you connect this installation to a cloud stack, you&apos;ll be able to upload data sources and
dashboards.
</Trans>
</InfoItem>
</Box>
);
};