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

GLDS: Text component (#71439)

Browse Source
This commit is contained in:
Laura Fernández
2023-07-20 12:59:42 +02:00
committed by GitHub
parent 1c3606cebe
commit 47f70bdb00
25 changed files with 185 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { config, locationService, reportInteraction } from '@grafana/runtime';
import { Button, useStyles2 } from '@grafana/ui';
import { H1, H3, P } from '@grafana/ui/src/unstable';
import { Text } 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';
@@ -28,19 +28,19 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
<div className={cx(styles.centeredContent, styles.wrapper)}>
<div className={cx(styles.containerBox, styles.centeredContent, styles.visualizationContainer)}>
<div className={styles.headerBig}>
<H1 textAlignment="center" weight="medium">
<Text element="h1" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-visualization-header">
Start your new dashboard by adding a visualization
</Trans>
</H1>
</Text>
</div>
<div className={styles.bodyBig}>
<P textAlignment="center" color="secondary">
<Text element="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>
</Text>
</div>
<Button
size="lg"
@@ -61,14 +61,14 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
{config.featureToggles.vizAndWidgetSplit && (
<div className={cx(styles.containerBox, styles.centeredContent, styles.widgetContainer)}>
<div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-widget-header">Add a widget</Trans>
</H3>
</Text>
</div>
<div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-widget-body">Create lists, markdowns and other widgets</Trans>
</P>
</Text>
</div>
<Button
icon="plus"
@@ -86,16 +86,16 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
)}
<div className={cx(styles.containerBox, styles.centeredContent, styles.rowContainer)}>
<div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-row-header">Add a row</Trans>
</H3>
</Text>
</div>
<div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-row-body">
Group your visualizations into expandable sections.
</Trans>
</P>
</Text>
</div>
<Button
icon="plus"
@@ -112,16 +112,16 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
</div>
<div className={cx(styles.containerBox, styles.centeredContent, styles.libraryContainer)}>
<div className={styles.headerSmall}>
<H3 textAlignment="center" weight="medium">
<Text element="h3" textAlignment="center" weight="medium">
<Trans i18nKey="dashboard.empty.add-import-header">Import panel</Trans>
</H3>
</Text>
</div>
<div className={styles.bodySmall}>
<P textAlignment="center" color="secondary">
<Text element="p" textAlignment="center" color="secondary">
<Trans i18nKey="dashboard.empty.add-import-body">
Import visualizations that are shared with other dashboards.
</Trans>
</P>
</Text>
</div>
<Button
icon="plus"