mirror of https://github.com/grafana/grafana
PanelChrome: Implement Panel header with error, loading, and streaming data status (#60147)
* dashboards squad mob! 🔱
lastFile:packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
* dashboards squad mob! 🔱
* dashboards squad mob! 🔱
lastFile:packages/grafana-ui/src/components/LoadingBar/LoadingBar.tsx
* user essentials mob! 🔱
* create grafana/ui LoadingBar and set it up in Storybook
* Remove test changes on PanelChrome
* Fix mdx page reference
* dashboards squad mob! 🔱
lastFile:public/api-merged.json
* dashboards squad mob! 🔱
* dashboards squad mob! 🔱
* dashboards squad mob! 🔱
* dashboards squad mob! 🔱
lastFile:public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderState.tsx
* Implemented basic draft of panel header states. Using ToolbarButton instead of IconButton.
* use 'warning' styled Button in ToolbarButton
* make LoadingBar a simple JSX Element; do not use containerWidth; have a wrapper around the loading bar itself;
* fix wrapper around LoadingBar: willChange css prop makes performance of rerendering better
* States: Render general panel query error states and render notices next
to the title
* add streaming to PanelChrome if data is streaming instead of loading
* PanelHeaderState with its own state 'mode'
* clean up useEffect
* notices have their own square space in the size of the panel header
* clean up
* minor fixes
* moving the LoadingBar to core
* LoadingBar is not in grafana/ui
* always have a place for the loading bar in the PanelChrome, otherwise it moves everything when appearing;
remove titleItemsNodes for now - in later development
make no changes to Notice component, not part of this PR
* Revert "moving the LoadingBar to core"
This reverts commit 11f0f4ff2f.
* do not use internal comment as it doesn't do anything
* integrate LoadingBar in PanelChrome from grafana/ui directly
* fix deprecated leftItems comment
* Modify annimation to 1 second
* remove comments
* remove streaming stopped UI because we cannot know when the streaming has stopped
* skip unnecessary test for now
* no point in removing hoverHeader now, even though it's not yet implemented
* small fixes
* error state of the data in a panel is positioned in PanelChrome itself, not in PanelHeaderState
* Fixed loading state jitter
* remove warning state as we have none of it
* streaming cannot be stopped from the icon
* explicit content container width and height
* explicit content container width and height
* edit deprecated comment
* fix LoadingBar to be relative to width of panel; remove explicit width and height on content strict
* no warning state of the data
* status of the panel data given directly to PanelChrome, not a node
* clean up
* clean up console log
Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
* panel title design fits typography h6 styles; render error status only if error or error message are passed to PanelChrome
* add storybook examples; prepare PanelChrome for hoverHeader because this will be a breaking change and it will affect how the storybook example shows up
* show storybook example for streaming panel with title because that's the condition for having a header
* override margin-bottom: 0.45em of h6
Co-authored-by: Alexandra Vargas <alexa1866@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
pull/61025/head
Polina Boneva
3 years ago
committed by
GitHub
parent
88a8cba6b0
commit
3f1908464d
@ -0,0 +1,43 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
import { useStyles2 } from '../../themes'; |
||||
import { ToolbarButton } from '../ToolbarButton/ToolbarButton'; |
||||
|
||||
export interface Props { |
||||
message?: string; |
||||
onClick?: (e: React.SyntheticEvent) => void; |
||||
} |
||||
|
||||
export function PanelStatus({ message, onClick }: Props) { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<ToolbarButton |
||||
onClick={onClick} |
||||
variant={'destructive'} |
||||
className={styles.buttonStyles} |
||||
icon="exclamation-triangle" |
||||
tooltip={message || ''} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
const { headerHeight, padding } = theme.components.panel; |
||||
|
||||
return { |
||||
buttonStyles: css({ |
||||
label: 'panel-header-state-button', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
padding: theme.spacing(padding), |
||||
width: theme.spacing(headerHeight), |
||||
height: theme.spacing(headerHeight), |
||||
borderRadius: 0, |
||||
}), |
||||
}; |
||||
}; |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue