Add landing title
This commit is contained in:
idastambuk
@@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { Trans } from '@grafana/i18n';
|
||||
import { config } from '@grafana/runtime';
|
||||
import { Button, useStyles2, Text, Box, Stack, TextLink } from '@grafana/ui';
|
||||
import { Button, useStyles2, Text, Box, Stack, TextLink, Icon } from '@grafana/ui';
|
||||
import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
|
||||
import { DashboardScene } from 'app/features/dashboard-scene/scene/DashboardScene';
|
||||
|
||||
@@ -42,105 +42,134 @@ const InternalDashboardEmpty = ({ onAddVisualization, onAddLibraryPanel, onImpor
|
||||
!dashboardLibraryDatasourceUid,
|
||||
})}
|
||||
>
|
||||
<Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={4}>
|
||||
<Stack direction="column" alignItems="center" gap={2}>
|
||||
{config.featureToggles.dashboardNewLayouts ? (
|
||||
<Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
|
||||
<Box padding={4}>
|
||||
<Box marginBottom={2} paddingX={4} display="flex" justifyContent="center">
|
||||
<Icon name="apps" size="xxl" className={styles.appsIcon} />
|
||||
</Box>
|
||||
<Text element="h1" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.add-visualization-header">
|
||||
Start your new dashboard by adding a visualization
|
||||
</Trans>
|
||||
<Trans i18nKey="dashboard.empty.title">New dashboard</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2} paddingX={4}>
|
||||
<Box marginTop={3} paddingX={4}>
|
||||
<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>
|
||||
<Trans i18nKey="dashboard.empty.description">Add a panel to visualize your data</Trans>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
size="lg"
|
||||
icon="plus"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Create new panel button')}
|
||||
onClick={onAddVisualization}
|
||||
disabled={!onAddVisualization}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
{/* Suggested Dashboards Section */}
|
||||
{config.featureToggles.suggestedDashboards &&
|
||||
config.featureToggles.dashboardLibrary &&
|
||||
dashboardLibraryDatasourceUid && <SuggestedDashboards datasourceUid={dashboardLibraryDatasourceUid} />}
|
||||
|
||||
{/* Basic Provisioned Dashboards Section that don't include community dashboards */}
|
||||
{config.featureToggles.dashboardLibrary &&
|
||||
!config.featureToggles.suggestedDashboards &&
|
||||
dashboardLibraryDatasourceUid && (
|
||||
<BasicProvisionedDashboardsEmptyPage datasourceUid={dashboardLibraryDatasourceUid} />
|
||||
)}
|
||||
|
||||
<Stack direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
|
||||
<Stack direction="column" alignItems="center" gap={1}>
|
||||
<Text element="h3" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2}>
|
||||
<Text element="p" textAlignment="center" color="secondary">
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-body">
|
||||
Add visualizations that are shared with other dashboards.
|
||||
</Trans>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
icon="plus"
|
||||
fill="outline"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Add a panel from the panel library button')}
|
||||
onClick={onAddLibraryPanel}
|
||||
disabled={!onAddLibraryPanel}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
|
||||
<Stack direction="column" alignItems="center" gap={1}>
|
||||
<Text element="h3" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2}>
|
||||
<Text element="p" textAlignment="center" color="secondary">
|
||||
<Trans i18nKey="dashboard.empty.import-a-dashboard-body">
|
||||
Import dashboards from files or{' '}
|
||||
<TextLink external href="https://grafana.com/grafana/dashboards/">
|
||||
grafana.com
|
||||
</TextLink>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
icon="upload"
|
||||
fill="outline"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Import dashboard button')}
|
||||
onClick={onImportDashboard}
|
||||
disabled={!onImportDashboard}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<DashboardExtensionsComponents dashboardLibraryDatasourceUid={dashboardLibraryDatasourceUid} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack alignItems="stretch" justifyContent="center" gap={4} direction="column">
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={4}>
|
||||
<Stack direction="column" alignItems="center" gap={2}>
|
||||
<Text element="h1" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.add-visualization-header">
|
||||
Start your new dashboard by adding a visualization
|
||||
</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2} paddingX={4}>
|
||||
<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>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
size="lg"
|
||||
icon="plus"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Create new panel button')}
|
||||
onClick={onAddVisualization}
|
||||
disabled={!onAddVisualization}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.add-visualization-button">Add visualization</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<DashboardExtensionsComponents dashboardLibraryDatasourceUid={dashboardLibraryDatasourceUid} />
|
||||
|
||||
<Stack direction={{ xs: 'column', md: 'row' }} wrap="wrap" gap={4}>
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
|
||||
<Stack direction="column" alignItems="center" gap={1}>
|
||||
<Text element="h3" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-header">Import panel</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2}>
|
||||
<Text element="p" textAlignment="center" color="secondary">
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-body">
|
||||
Add visualizations that are shared with other dashboards.
|
||||
</Trans>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
icon="plus"
|
||||
fill="outline"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Add a panel from the panel library button')}
|
||||
onClick={onAddLibraryPanel}
|
||||
disabled={!onAddLibraryPanel}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.add-library-panel-button">Add library panel</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
<Box borderRadius="lg" borderColor="strong" borderStyle="dashed" padding={3} flex={1}>
|
||||
<Stack direction="column" alignItems="center" gap={1}>
|
||||
<Text element="h3" textAlignment="center" weight="medium">
|
||||
<Trans i18nKey="dashboard.empty.import-a-dashboard-header">Import a dashboard</Trans>
|
||||
</Text>
|
||||
<Box marginBottom={2}>
|
||||
<Text element="p" textAlignment="center" color="secondary">
|
||||
<Trans i18nKey="dashboard.empty.import-a-dashboard-body">
|
||||
Import dashboards from files or{' '}
|
||||
<TextLink external href="https://grafana.com/grafana/dashboards/">
|
||||
grafana.com
|
||||
</TextLink>
|
||||
.
|
||||
</Trans>
|
||||
</Text>
|
||||
</Box>
|
||||
<Button
|
||||
icon="upload"
|
||||
fill="outline"
|
||||
data-testid={selectors.pages.AddDashboard.itemButton('Import dashboard button')}
|
||||
onClick={onImportDashboard}
|
||||
disabled={!onImportDashboard}
|
||||
>
|
||||
<Trans i18nKey="dashboard.empty.import-dashboard-button">Import dashboard</Trans>
|
||||
</Button>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const DashboardExtensionsComponents = ({
|
||||
dashboardLibraryDatasourceUid,
|
||||
}: {
|
||||
dashboardLibraryDatasourceUid: string | null;
|
||||
}) => (
|
||||
<>
|
||||
{/* Suggested Dashboards Section */}
|
||||
{config.featureToggles.suggestedDashboards &&
|
||||
config.featureToggles.dashboardLibrary &&
|
||||
dashboardLibraryDatasourceUid && <SuggestedDashboards datasourceUid={dashboardLibraryDatasourceUid} />}
|
||||
|
||||
{/* Basic Provisioned Dashboards Section that don't include community dashboards */}
|
||||
{config.featureToggles.dashboardLibrary &&
|
||||
!config.featureToggles.suggestedDashboards &&
|
||||
dashboardLibraryDatasourceUid && (
|
||||
<BasicProvisionedDashboardsEmptyPage datasourceUid={dashboardLibraryDatasourceUid} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
export interface Props {
|
||||
dashboard: DashboardModel | DashboardScene;
|
||||
canCreate: boolean;
|
||||
@@ -190,5 +219,8 @@ function getStyles(theme: GrafanaTheme2) {
|
||||
wrapperMaxWidth: css({
|
||||
maxWidth: '890px',
|
||||
}),
|
||||
appsIcon: css({
|
||||
fill: theme.v1.palette.orange,
|
||||
}),
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user