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

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

@ -4,6 +4,7 @@ import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { locationService, reportInteraction } from '@grafana/runtime';
import { Button, useStyles2 } from '@grafana/ui';
import { H1, H3, P } from '@grafana/ui/src/unstable';
import { Trans } from 'app/core/internationalization';
import { DashboardModel } from 'app/features/dashboard/state';
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={cx(styles.centeredContent, styles.wrapper)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}>
<h1 className={cx(styles.headerSection, styles.headerBig)}>
<Trans i18nKey="dashboard.empty.add-visualization-header">
Start your new dashboard by adding a visualization
</Trans>
</h1>
<div className={cx(styles.bodySection, styles.bodyBig)}>
<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,
markdowns and other widgets.
</Trans>
<div className={styles.headerBig}>
<H1 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-visualization-header">
Start your new dashboard by adding a visualization
</Trans>
</H1>
</div>
<div className={styles.bodyBig}>
<P textAlignment="center" color="secondary">
<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, markdowns and other widgets.
</Trans>
</P>
</div>
<Button
size="lg"
@ -53,11 +58,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</div>
<div className={cx(styles.centeredContent, styles.others)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}>
<Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
</h3>
<div className={cx(styles.bodySection, styles.bodySmall)}>
<Trans i18nKey="dashboard.empty.add-row-body">Group your visualizations into expandable sections.</Trans>
<div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
</H3>
</div>
<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>
<Button
icon="plus"
@ -73,13 +84,17 @@ export const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</Button>
</div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
<h3 className={cx(styles.headerSection, styles.headerSmall)}>
<Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
</h3>
<div className={cx(styles.bodySection, styles.bodySmall)}>
<Trans i18nKey="dashboard.empty.add-import-body">
Import visualizations that are shared with other dashboards.
</Trans>
<div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
</H3>
</div>
<div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-import-body">
Import visualizations that are shared with other dashboards.
</Trans>
</P>
</div>
<Button
icon="plus"
@ -147,28 +162,12 @@ function getStyles(theme: GrafanaTheme2) {
label: 'library-container',
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({
marginBottom: theme.spacing.gridSize * 2,
}),
headerSmall: css({
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({
maxWidth: '75%',
marginBottom: theme.spacing.gridSize * 4,