DataTrails: Fixes home page background issue to make Cards work better (#85055)

* DataTrails: Fixes home page background issue to make Cards work better

* Update DataTrailsHome.tsx
This commit is contained in:
Torkel Ödegaard 2024-03-26 10:39:56 +01:00 committed by GitHub
parent dda1531952
commit d039a0a485
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 7 deletions

View File

@ -10,6 +10,7 @@ import { Page } from 'app/core/components/Page/Page';
import { DataTrail } from './DataTrail'; import { DataTrail } from './DataTrail';
import { DataTrailsHome } from './DataTrailsHome'; import { DataTrailsHome } from './DataTrailsHome';
import { MetricsHeader } from './MetricsHeader';
import { getTrailStore } from './TrailStore/TrailStore'; import { getTrailStore } from './TrailStore/TrailStore';
import { HOME_ROUTE, TRAILS_ROUTE } from './shared'; import { HOME_ROUTE, TRAILS_ROUTE } from './shared';
import { getMetricName, getUrlForTrail, newMetricsTrail } from './utils'; import { getMetricName, getUrlForTrail, newMetricsTrail } from './utils';
@ -39,10 +40,13 @@ export class DataTrailsApp extends SceneObjectBase<DataTrailsAppState> {
exact={true} exact={true}
path={HOME_ROUTE} path={HOME_ROUTE}
render={() => ( render={() => (
<Page navId="explore/metrics" layout={PageLayoutType.Custom}> <Page
<div className={styles.customPage}> navId="explore/metrics"
<home.Component model={home} /> layout={PageLayoutType.Standard}
</div> renderTitle={() => <MetricsHeader />}
subTitle=""
>
<home.Component model={home} />
</Page> </Page>
)} )}
/> />

View File

@ -10,7 +10,6 @@ import { Text } from '@grafana/ui/src/components/Text/Text';
import { DataTrail } from './DataTrail'; import { DataTrail } from './DataTrail';
import { DataTrailCard } from './DataTrailCard'; import { DataTrailCard } from './DataTrailCard';
import { DataTrailsApp } from './DataTrailsApp'; import { DataTrailsApp } from './DataTrailsApp';
import { MetricsHeader } from './MetricsHeader';
import { getTrailStore } from './TrailStore/TrailStore'; import { getTrailStore } from './TrailStore/TrailStore';
import { getDatasourceForNewTrail, getUrlForTrail, newMetricsTrail } from './utils'; import { getDatasourceForNewTrail, getUrlForTrail, newMetricsTrail } from './utils';
@ -54,11 +53,11 @@ export class DataTrailsHome extends SceneObjectBase<DataTrailsHomeState> {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<Stack direction={'column'} gap={1} alignItems={'start'}> <Stack direction={'column'} gap={1} alignItems={'start'}>
<MetricsHeader />
<Button icon="plus" size="md" variant="primary" onClick={model.onNewMetricsTrail}> <Button icon="plus" size="md" variant="primary" onClick={model.onNewMetricsTrail}>
New metric exploration New metric exploration
</Button> </Button>
</Stack> </Stack>
<Stack gap={5}> <Stack gap={5}>
<div className={styles.column}> <div className={styles.column}>
<Text variant="h4">Recent metrics</Text> <Text variant="h4">Recent metrics</Text>
@ -105,7 +104,6 @@ function getAppFor(model: SceneObject) {
function getStyles(theme: GrafanaTheme2) { function getStyles(theme: GrafanaTheme2) {
return { return {
container: css({ container: css({
padding: theme.spacing(2),
flexGrow: 1, flexGrow: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',