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

Grafana UI: Create Text component use case example (#68248)

Browse Source
This commit is contained in:
Laura Fernández 2023-05-15 12:27:12 +02:00 committed by GitHub
parent b5f56537c9
commit 07f2aec576
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
View File

@ -4,6 +4,7 @@ import React from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { locationService, reportInteraction } from '@grafana/runtime'; import { locationService, reportInteraction } from '@grafana/runtime';
import { Button, useStyles2 } from '@grafana/ui'; import { Button, useStyles2 } from '@grafana/ui';
import { H1, H3, P } from '@grafana/ui/src/unstable';
import { Trans } from 'app/core/internationalization'; import { Trans } from 'app/core/internationalization';
import { DashboardModel } from 'app/features/dashboard/state'; import { DashboardModel } from 'app/features/dashboard/state';
import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard'; import { onAddLibraryPanel, onCreateNewPanel, onCreateNewRow } from 'app/features/dashboard/utils/dashboard';
@ -25,16 +26,20 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
<div className={styles.centeredContent}> <div className={styles.centeredContent}>
<div className={cx(styles.centeredContent, styles.wrapper)}> <div className={cx(styles.centeredContent, styles.wrapper)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}> <div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}>
<h1 className={cx(styles.headerSection, styles.headerBig)}> <div className={styles.headerBig}>
<H1 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-visualization-header"> <Trans i18nKey="dashboard.empty.add-visualization-header">
Start your new dashboard by adding a visualization Start your new dashboard by adding a visualization
</Trans> </Trans>
</h1> </H1>
<div className={cx(styles.bodySection, styles.bodyBig)}> </div>
<div className={styles.bodyBig}>
<P textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-visualization-body"> <Trans i18nKey="dashboard.empty.add-visualization-body">
Select a data source and then query and visualize your data with charts, stats and tables or create lists, Select a data source and then query and visualize your data with charts, stats and tables or create
markdowns and other widgets. lists, markdowns and other widgets.
</Trans> </Trans>
</P>
</div> </div>
<Button <Button
size="lg" size="lg"
@ -53,11 +58,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</div> </div>
<div className={cx(styles.centeredContent, styles.others)}> <div className={cx(styles.centeredContent, styles.others)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}> <div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}> <div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans> <Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
</h3> </H3>
<div className={cx(styles.bodySection, styles.bodySmall)}> </div>
<Trans i18nKey="dashboard.empty.add-row-body">Group your visualizations into expandable sections.</Trans> <div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-row-body">
Group your visualizations into expandable sections.
</Trans>
</P>
</div> </div>
<Button <Button
icon="plus" icon="plus"
@ -73,13 +84,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Button> </Button>
</div> </div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}> <div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}> <div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans> <Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
</h3> </H3>
<div className={cx(styles.bodySection, styles.bodySmall)}> </div>
<div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-import-body"> <Trans i18nKey="dashboard.empty.add-import-body">
Import visualizations that are shared with other dashboards. Import visualizations that are shared with other dashboards.
</Trans> </Trans>
</P>
</div> </div>
<Button <Button
icon="plus" icon="plus"
@ -147,28 +162,12 @@ function getStyles(theme: GrafanaTheme2) {
label: 'library-container', label: 'library-container',
padding: theme.spacing.gridSize * 3, padding: theme.spacing.gridSize * 3,
}), }),
visualizationContent: css({
gap: theme.spacing.gridSize * 2,
}),
headerSection: css({
label: 'header-section',
fontWeight: theme.typography.fontWeightMedium,
textAlign: 'center',
}),
headerBig: css({ headerBig: css({
marginBottom: theme.spacing.gridSize * 2, marginBottom: theme.spacing.gridSize * 2,
}), }),
headerSmall: css({ headerSmall: css({
marginBottom: theme.spacing.gridSize, marginBottom: theme.spacing.gridSize,
}), }),
bodySection: css({
label: 'body-section',
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.body.fontSize,
lineHeight: theme.typography.body.lineHeight,
color: theme.colors.text.secondary,
textAlign: 'center',
}),
bodyBig: css({ bodyBig: css({
maxWidth: '75%', maxWidth: '75%',
marginBottom: theme.spacing.gridSize * 4, marginBottom: theme.spacing.gridSize * 4,