mirror of https://github.com/grafana/grafana
DashboardScene: Simplify controls a bit (#82908)
* DashboardScene: Simplify controls a bit * update tests * more test updates * Update * improvements * Fix * Fix merge * Update * updatepull/83086/head
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
57499845c2
commit
6db2d1a411
@ -1,41 +1,89 @@ |
||||
import { css, cx } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { SceneObjectState, SceneObject, SceneObjectBase, SceneComponentProps } from '@grafana/scenes'; |
||||
import { Box, Stack } from '@grafana/ui'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
import { |
||||
SceneObjectState, |
||||
SceneObject, |
||||
SceneObjectBase, |
||||
SceneComponentProps, |
||||
SceneTimePicker, |
||||
SceneRefreshPicker, |
||||
SceneDebugger, |
||||
} from '@grafana/scenes'; |
||||
import { Box, Stack, useStyles2 } from '@grafana/ui'; |
||||
|
||||
import { getDashboardSceneFor } from '../utils/utils'; |
||||
|
||||
import { DashboardLinksControls } from './DashboardLinksControls'; |
||||
|
||||
interface DashboardControlsState extends SceneObjectState { |
||||
variableControls: SceneObject[]; |
||||
timeControls: SceneObject[]; |
||||
linkControls: DashboardLinksControls; |
||||
timePicker: SceneTimePicker; |
||||
refreshPicker: SceneRefreshPicker; |
||||
hideTimeControls?: boolean; |
||||
} |
||||
export class DashboardControls extends SceneObjectBase<DashboardControlsState> { |
||||
static Component = DashboardControlsRenderer; |
||||
|
||||
public constructor(state: Partial<DashboardControlsState>) { |
||||
super({ |
||||
variableControls: [], |
||||
timePicker: state.timePicker ?? new SceneTimePicker({}), |
||||
refreshPicker: state.refreshPicker ?? new SceneRefreshPicker({}), |
||||
...state, |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function DashboardControlsRenderer({ model }: SceneComponentProps<DashboardControls>) { |
||||
const { variableControls, linkControls, timeControls, hideTimeControls } = model.useState(); |
||||
const { variableControls, refreshPicker, timePicker, hideTimeControls } = model.useState(); |
||||
const dashboard = getDashboardSceneFor(model); |
||||
const { links, meta, editPanel } = dashboard.useState(); |
||||
const styles = useStyles2(getStyles); |
||||
const showDebugger = location.search.includes('scene-debugger'); |
||||
|
||||
return ( |
||||
<Stack |
||||
grow={1} |
||||
direction={{ |
||||
md: 'row', |
||||
xs: 'column', |
||||
}} |
||||
> |
||||
<div className={cx(styles.controls, meta.isEmbedded && styles.embedded)}> |
||||
<Stack grow={1} wrap={'wrap'}> |
||||
{variableControls.map((c) => ( |
||||
<c.Component model={c} key={c.state.key} /> |
||||
))} |
||||
<Box grow={1} /> |
||||
<linkControls.Component model={linkControls} /> |
||||
</Stack> |
||||
<Stack justifyContent={'flex-end'}> |
||||
{!hideTimeControls && timeControls.map((c) => <c.Component model={c} key={c.state.key} />)} |
||||
{!editPanel && <DashboardLinksControls links={links} uid={dashboard.state.uid} />} |
||||
</Stack> |
||||
</Stack> |
||||
{!hideTimeControls && ( |
||||
<Stack justifyContent={'flex-end'}> |
||||
<timePicker.Component model={timePicker} /> |
||||
<refreshPicker.Component model={refreshPicker} /> |
||||
</Stack> |
||||
)} |
||||
{showDebugger && <SceneDebugger scene={model} key={'scene-debugger'} />} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
function getStyles(theme: GrafanaTheme2) { |
||||
return { |
||||
controls: css({ |
||||
display: 'flex', |
||||
alignItems: 'flex-start', |
||||
gap: theme.spacing(1), |
||||
position: 'sticky', |
||||
top: 0, |
||||
background: theme.colors.background.canvas, |
||||
zIndex: theme.zIndex.activePanel, |
||||
padding: theme.spacing(2, 0), |
||||
width: '100%', |
||||
marginLeft: 'auto', |
||||
[theme.breakpoints.down('sm')]: { |
||||
flexDirection: 'column-reverse', |
||||
alignItems: 'stretch', |
||||
}, |
||||
}), |
||||
embedded: css({ |
||||
background: 'unset', |
||||
position: 'unset', |
||||
}), |
||||
}; |
||||
} |
||||
|
||||
Loading…
Reference in new issue