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

Tidy up styling for Getting Started page and use @grafana/ui components

Browse Source
This commit is contained in:
Tom Ratcliffe 2024-03-07 15:11:09 +00:00 committed by Tom Ratcliffe
parent 2e2a5bca11
commit 30a791d77a
2 changed files with 43 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.betterer.results
View File

@ -2235,12 +2235,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "6"], [0, 0, 0, "Styles should be written using objects.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"], [0, 0, 0, "Styles should be written using objects.", "7"],
[0, 0, 0, "Styles should be written using objects.", "8"], [0, 0, 0, "Styles should be written using objects.", "8"],
[0, 0, 0, "Styles should be written using objects.", "9"], [0, 0, 0, "Styles should be written using objects.", "9"]
[0, 0, 0, "Styles should be written using objects.", "10"],
[0, 0, 0, "Styles should be written using objects.", "11"],
[0, 0, 0, "Styles should be written using objects.", "12"],
[0, 0, 0, "Styles should be written using objects.", "13"],
[0, 0, 0, "Styles should be written using objects.", "14"]
], ],
"public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [ "public/app/features/alerting/unified/hooks/useAlertmanagerConfig.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]

125
public/app/features/alerting/unified/home/GettingStarted.tsx
View File

@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, SceneReactObject } from '@grafana/scenes'; import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, SceneReactObject } from '@grafana/scenes';
import { Icon, useStyles2, useTheme2, Stack } from '@grafana/ui'; import { useStyles2, useTheme2, Stack, Text, TextLink } from '@grafana/ui';
export const getOverviewScene = () => { export const getOverviewScene = () => {
return new EmbeddedScene({ return new EmbeddedScene({
@ -26,9 +26,9 @@ export default function GettingStarted() {
return ( return (
<div className={styles.grid}> <div className={styles.grid}>
<ContentBox className={styles.flowBlock}> <ContentBox>
<div> <Stack direction="column" gap={1}>
<h3>How it works</h3> <Text element="h3">How it works</Text>
<ul className={styles.list}> <ul className={styles.list}>
<li> <li>
Grafana alerting periodically queries data sources and evaluates the condition defined in the alert rule Grafana alerting periodically queries data sources and evaluates the condition defined in the alert rule
@ -37,19 +37,24 @@ export default function GettingStarted() {
<li>Firing instances are routed to notification policies based on matching labels</li> <li>Firing instances are routed to notification policies based on matching labels</li>
<li>Notifications are sent out to the contact points specified in the notification policy</li> <li>Notifications are sent out to the contact points specified in the notification policy</li>
</ul> </ul>
</div> <div className={styles.svgContainer}>
<SVG <Stack justifyContent={'center'}>
src={`public/img/alerting/at_a_glance_${theme.name.toLowerCase()}.svg`} <SVG
width={undefined} src={`public/img/alerting/at_a_glance_${theme.name.toLowerCase()}.svg`}
height={undefined} width={undefined}
/> height={undefined}
/>
</Stack>
</div>
</Stack>
</ContentBox> </ContentBox>
<ContentBox className={styles.gettingStartedBlock}> <ContentBox>
<h3>Get started</h3> <Stack direction="column" gap={1}>
<Stack direction="column"> <Text element="h3">Get started</Text>
<ul className={styles.list}> <ul className={styles.list}>
<li> <li>
<strong>Create an alert rule</strong> by adding queries and expressions from multiple data sources. <Text weight="bold">Create an alert rule</Text> by adding queries and expressions from multiple data
sources.
</li> </li>
<li> <li>
<strong>Add labels</strong> to your alert rules <strong>to connect them to notification policies</strong> <strong>Add labels</strong> to your alert rules <strong>to connect them to notification policies</strong>
@ -61,9 +66,9 @@ export default function GettingStarted() {
<strong>Configure notification policies</strong> to route your alert instances to contact points. <strong>Configure notification policies</strong> to route your alert instances to contact points.
</li> </li>
</ul> </ul>
<div> <TextLink href="https://grafana.com/docs/grafana/latest/alerting/" icon="angle-right" inline={false}>
<ArrowLink href="https://grafana.com/docs/grafana/latest/alerting/" title="Read more in the Docs" /> Read more in the docs
</div> </TextLink>
</Stack> </Stack>
</ContentBox> </ContentBox>
</div> </div>
@ -74,48 +79,21 @@ const getWelcomePageStyles = (theme: GrafanaTheme2) => ({
grid: css` grid: css`
display: grid; display: grid;
grid-template-rows: min-content auto auto; grid-template-rows: min-content auto auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr;
gap: ${theme.spacing(2)}; gap: ${theme.spacing(2)};
width: 100%; width: 100%;
${theme.breakpoints.up('lg')} {
grid-template-columns: 3fr 2fr;
}
`, `,
ctaContainer: css` ctaContainer: css`
grid-column: 1 / span 5; grid-column: 1 / span 5;
`, `,
flowBlock: css` svgContainer: css`
grid-column: 1 / span 5; & svg {
max-width: 900px;
display: flex;
flex-wrap: wrap;
gap: ${theme.spacing(1)};
& > div {
flex: 2;
min-width: 350px;
} }
& > svg {
flex: 3;
min-width: 500px;
}
`,
videoBlock: css`
grid-column: 3 / span 3;
// Video required
position: relative;
padding: 56.25% 0 0 0; /* 16:9 */
iframe {
position: absolute;
top: ${theme.spacing(2)};
left: ${theme.spacing(2)};
width: calc(100% - ${theme.spacing(4)});
height: calc(100% - ${theme.spacing(4)});
border: none;
}
`,
gettingStartedBlock: css`
grid-column: 1 / span 2;
justify-content: space-between;
`, `,
list: css` list: css`
margin: ${theme.spacing(0, 2)}; margin: ${theme.spacing(0, 2)};
@ -167,7 +145,7 @@ const getWelcomeHeaderStyles = (theme: GrafanaTheme2) => ({
paddingBottom: theme.spacing(2), paddingBottom: theme.spacing(2),
}), }),
ctaContainer: css` ctaContainer: css`
padding: ${theme.spacing(4, 2)}; padding: ${theme.spacing(2)};
display: flex; display: flex;
gap: ${theme.spacing(4)}; gap: ${theme.spacing(4)};
justify-content: space-between; justify-content: space-between;
@ -200,12 +178,14 @@ function WelcomeCTABox({ title, description, href, hrefText }: WelcomeCTABoxProp
return ( return (
<div className={styles.container}> <div className={styles.container}>
<h3 className={styles.title}>{title}</h3> <Text element="h2" variant="h3">
{title}
</Text>
<div className={styles.desc}>{description}</div> <div className={styles.desc}>{description}</div>
<div className={styles.actionRow}> <div className={styles.actionRow}>
<a href={href} className={styles.link}> <TextLink href={href} inline={false}>
{hrefText} {hrefText}
</a> </TextLink>
</div> </div>
</div> </div>
); );
@ -216,15 +196,15 @@ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({
flex: 1; flex: 1;
min-width: 240px; min-width: 240px;
display: grid; display: grid;
gap: ${theme.spacing(1)}; row-gap: ${theme.spacing(1)};
grid-template-columns: min-content 1fr 1fr 1fr; grid-template-columns: min-content 1fr 1fr 1fr;
grid-template-rows: min-content auto min-content; grid-template-rows: min-content auto min-content;
`,
title: css` & h2 {
margin-bottom: 0; margin-bottom: 0;
grid-column: 2 / span 3; grid-column: 2 / span 3;
grid-row: 1; grid-row: 1;
}
`, `,
desc: css` desc: css`
@ -237,10 +217,6 @@ const getWelcomeCTAButtonStyles = (theme: GrafanaTheme2) => ({
grid-row: 3; grid-row: 3;
max-width: 240px; max-width: 240px;
`, `,
link: css`
color: ${theme.colors.text.link};
`,
}); });
function ContentBox({ children, className }: React.PropsWithChildren<{ className?: string }>) { function ContentBox({ children, className }: React.PropsWithChildren<{ className?: string }>) {
@ -256,20 +232,3 @@ const getContentBoxStyles = (theme: GrafanaTheme2) => ({
border-radius: ${theme.shape.radius.default}; border-radius: ${theme.shape.radius.default};
`, `,
}); });
function ArrowLink({ href, title }: { href: string; title: string }) {
const styles = useStyles2(getArrowLinkStyles);
return (
<a href={href} className={styles.link} rel="noreferrer">
{title} <Icon name="angle-right" size="xl" />
</a>
);
}
const getArrowLinkStyles = (theme: GrafanaTheme2) => ({
link: css`
display: block;
color: ${theme.colors.text.link};
`,
});