mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
GettingStarted: Improve styling and add tracking (#80410)
* refactor: remove icons and related styling * refactor: remove cut off on the left side * fix: aria-labels * feat: add tracking * refactor: adjust button position * refactor: move previous button back * refactor: use emotion object syntax * feat: add tracking * refactor: remove console.log()
This commit is contained in:
Laura Benz
GitHub
parent
ed196e67a8
commit
0e4c6742c8
@ -6051,19 +6051,6 @@ exports[`better eslint`] = {
|
||||
"public/app/plugins/panel/geomap/utils/tooltip.ts:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/gettingstarted/GettingStarted.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "2"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "3"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "4"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "5"],
|
||||
[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.", "8"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "9"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "10"]
|
||||
],
|
||||
"public/app/plugins/panel/gettingstarted/components/DocsCard.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"],
|
||||
@ -6086,8 +6073,7 @@ exports[`better eslint`] = {
|
||||
[0, 0, 0, "Styles should be written using objects.", "5"]
|
||||
],
|
||||
"public/app/plugins/panel/gettingstarted/components/sharedStyles.ts:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/plugins/panel/heatmap/HeatmapPanel.tsx:5381": [
|
||||
[0, 0, 0, "Do not use any type assertions.", "0"],
|
||||
|
||||
@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { PanelProps } from '@grafana/data';
|
||||
import { config } from '@grafana/runtime';
|
||||
import { config, reportInteraction } from '@grafana/runtime';
|
||||
import { Button, Spinner, stylesFactory } from '@grafana/ui';
|
||||
import { contextSrv } from 'app/core/core';
|
||||
import { backendSrv } from 'app/core/services/backend_srv';
|
||||
@ -53,12 +53,14 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
}
|
||||
|
||||
onForwardClick = () => {
|
||||
reportInteraction('grafana_getting_started_button_to_advanced_tutorials');
|
||||
this.setState((prevState) => ({
|
||||
currentStep: prevState.currentStep + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
onPreviousClick = () => {
|
||||
reportInteraction('grafana_getting_started_button_to_basic_tutorials');
|
||||
this.setState((prevState) => ({
|
||||
currentStep: prevState.currentStep - 1,
|
||||
}));
|
||||
@ -69,6 +71,8 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
const dashboard = getDashboardSrv().getCurrent();
|
||||
const panel = dashboard?.getPanelById(id);
|
||||
|
||||
reportInteraction('grafana_getting_started_remove_panel');
|
||||
|
||||
dashboard?.removePanel(panel!);
|
||||
|
||||
backendSrv.put('/api/user/helpflags/1', undefined, { showSuccessAlert: false }).then((res) => {
|
||||
@ -97,7 +101,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
<Button
|
||||
className={cx(styles.backForwardButtons, styles.previous)}
|
||||
onClick={this.onPreviousClick}
|
||||
aria-label="To advanced tutorials"
|
||||
aria-label="To basic tutorials"
|
||||
icon="angle-left"
|
||||
variant="secondary"
|
||||
/>
|
||||
@ -109,7 +113,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
<Button
|
||||
className={cx(styles.backForwardButtons, styles.forward)}
|
||||
onClick={this.onForwardClick}
|
||||
aria-label="To basic tutorials"
|
||||
aria-label="To advanced tutorials"
|
||||
icon="angle-right"
|
||||
variant="secondary"
|
||||
/>
|
||||
@ -124,86 +128,83 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
|
||||
const getStyles = stylesFactory(() => {
|
||||
const theme = config.theme2;
|
||||
return {
|
||||
container: css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
// background: url(public/img/getting_started_bg_${theme.colors.mode}.svg) no-repeat;
|
||||
background-size: cover;
|
||||
padding: ${theme.spacing(4)} ${theme.spacing(2)} 0;
|
||||
`,
|
||||
content: css`
|
||||
label: content;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
container: css({
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
backgroundSize: 'cover',
|
||||
padding: `${theme.spacing(4)} ${theme.spacing(2)} 0`,
|
||||
}),
|
||||
content: css({
|
||||
label: 'content',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
|
||||
${theme.breakpoints.down('xxl')} {
|
||||
margin-left: ${theme.spacing(3)};
|
||||
justify-content: flex-start;
|
||||
}
|
||||
`,
|
||||
header: css`
|
||||
label: header;
|
||||
margin-bottom: ${theme.spacing(3)};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
[theme.breakpoints.down('xxl')]: {
|
||||
marginLeft: theme.spacing(3),
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
}),
|
||||
header: css({
|
||||
label: 'header',
|
||||
marginBottom: theme.spacing(3),
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
|
||||
${theme.breakpoints.down('lg')} {
|
||||
flex-direction: row;
|
||||
}
|
||||
`,
|
||||
headerLogo: css`
|
||||
height: 58px;
|
||||
padding-right: ${theme.spacing(2)};
|
||||
display: none;
|
||||
[theme.breakpoints.down('lg')]: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
}),
|
||||
headerLogo: css({
|
||||
height: '58px',
|
||||
paddingRight: theme.spacing(2),
|
||||
display: 'none',
|
||||
|
||||
${theme.breakpoints.up('md')} {
|
||||
display: block;
|
||||
}
|
||||
`,
|
||||
heading: css`
|
||||
label: heading;
|
||||
margin-right: ${theme.spacing(3)};
|
||||
margin-bottom: ${theme.spacing(3)};
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
[theme.breakpoints.up('md')]: {
|
||||
display: 'block',
|
||||
},
|
||||
}),
|
||||
heading: css({
|
||||
label: 'heading',
|
||||
marginRight: theme.spacing(3),
|
||||
marginBottom: theme.spacing(3),
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
|
||||
${theme.breakpoints.up('md')} {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
backForwardButtons: css`
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
`,
|
||||
previous: css`
|
||||
left: 10px;
|
||||
|
||||
${theme.breakpoints.down('md')} {
|
||||
left: 0;
|
||||
}
|
||||
`,
|
||||
forward: css`
|
||||
right: 10px;
|
||||
|
||||
${theme.breakpoints.down('md')} {
|
||||
right: 0;
|
||||
}
|
||||
`,
|
||||
dismiss: css`
|
||||
align-self: flex-end;
|
||||
text-decoration: underline;
|
||||
margin-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
loading: css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
`,
|
||||
loadingText: css`
|
||||
margin-right: ${theme.spacing(1)};
|
||||
`,
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginBottom: 0,
|
||||
},
|
||||
}),
|
||||
backForwardButtons: css({
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
transform: 'translateY(-50%)',
|
||||
}),
|
||||
previous: css({
|
||||
left: '10px',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
left: 0,
|
||||
},
|
||||
}),
|
||||
forward: css({
|
||||
right: '10px',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
right: 0,
|
||||
},
|
||||
}),
|
||||
dismiss: css({
|
||||
alignSelf: 'flex-end',
|
||||
textDecoration: 'underline',
|
||||
marginBottom: theme.spacing(1),
|
||||
}),
|
||||
loading: css({
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
}),
|
||||
loadingText: css({
|
||||
marginRight: theme.spacing(1),
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
@ -2,11 +2,12 @@ import { css } from '@emotion/css';
|
||||
import React from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { reportInteraction } from '@grafana/runtime';
|
||||
import { Icon, useStyles2 } from '@grafana/ui';
|
||||
|
||||
import { Card } from '../types';
|
||||
|
||||
import { cardContent, cardStyle, iconStyle } from './sharedStyles';
|
||||
import { cardContent, cardStyle } from './sharedStyles';
|
||||
|
||||
interface Props {
|
||||
card: Card;
|
||||
@ -14,17 +15,17 @@ interface Props {
|
||||
|
||||
export const DocsCard = ({ card }: Props) => {
|
||||
const styles = useStyles2(getStyles, card.done);
|
||||
const iconStyles = useStyles2(iconStyle, card.done);
|
||||
|
||||
return (
|
||||
<div className={styles.card}>
|
||||
<div className={cardContent}>
|
||||
<a href={`${card.href}?utm_source=grafana_gettingstarted`} className={styles.url}>
|
||||
<a
|
||||
href={`${card.href}?utm_source=grafana_gettingstarted`}
|
||||
className={styles.url}
|
||||
onClick={() => reportInteraction('grafana_getting_started_docs', { title: card.title, link: card.href })}
|
||||
>
|
||||
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
|
||||
<h4 className={styles.title}>{card.title}</h4>
|
||||
<div>
|
||||
<Icon className={iconStyles} name={card.icon} size="xxl" />
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
@ -32,6 +33,7 @@ export const DocsCard = ({ card }: Props) => {
|
||||
className={styles.learnUrl}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onClick={() => reportInteraction('grafana_getting_started_docs', { title: card.title, link: card.learnHref })}
|
||||
>
|
||||
Learn how in the docs <Icon name="external-link-alt" />
|
||||
</a>
|
||||
|
||||
@ -60,11 +60,7 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
overflow-y: hidden;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
${theme.breakpoints.down('xxl')} {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
justify-content: flex-start;
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
||||
@ -2,12 +2,13 @@ import { css } from '@emotion/css';
|
||||
import React, { MouseEvent } from 'react';
|
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { Icon, useStyles2 } from '@grafana/ui';
|
||||
import { reportInteraction } from '@grafana/runtime';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
import store from 'app/core/store';
|
||||
|
||||
import { TutorialCardType } from '../types';
|
||||
|
||||
import { cardContent, cardStyle, iconStyle } from './sharedStyles';
|
||||
import { cardContent, cardStyle } from './sharedStyles';
|
||||
|
||||
interface Props {
|
||||
card: TutorialCardType;
|
||||
@ -15,7 +16,6 @@ interface Props {
|
||||
|
||||
export const TutorialCard = ({ card }: Props) => {
|
||||
const styles = useStyles2(getStyles, card.done);
|
||||
const iconStyles = useStyles2(iconStyle, card.done);
|
||||
|
||||
return (
|
||||
<a
|
||||
@ -30,7 +30,6 @@ export const TutorialCard = ({ card }: Props) => {
|
||||
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
|
||||
<h4 className={styles.cardTitle}>{card.title}</h4>
|
||||
<div className={styles.info}>{card.info}</div>
|
||||
<Icon className={iconStyles} name={card.icon} size="xxl" />
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
@ -42,6 +41,7 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
|
||||
if (!isSet) {
|
||||
store.set(card.key, true);
|
||||
}
|
||||
reportInteraction('grafana_getting_started_tutorial', { title: card.title });
|
||||
};
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
|
||||
|
||||
@ -34,14 +34,6 @@ export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
|
||||
`;
|
||||
};
|
||||
|
||||
export const iconStyle = (theme: GrafanaTheme2, complete: boolean) => css`
|
||||
color: ${complete ? theme.v1.palette.blue95 : theme.colors.text.secondary};
|
||||
|
||||
${theme.breakpoints.down('sm')} {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const cardContent = css`
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user