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

View File

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