mirror of https://github.com/grafana/grafana
Storybook: Add MDX PanelChrome documentation (#64916)
Alexa V
2 years ago
committed by
GitHub
parent
8438716bf5
commit
5bbdc62044
@ -0,0 +1,484 @@ |
||||
import { Meta, Canvas, Story, Preview, Props } from '@storybook/addon-docs/blocks'; |
||||
import { PanelChrome } from './PanelChrome'; |
||||
import { LoadingIndicator } from './LoadingIndicator'; |
||||
|
||||
import { action } from '@storybook/addon-actions'; |
||||
import { DashboardStoryCanvas } from '../../utils/storybook/DashboardStoryCanvas'; |
||||
import { HorizontalGroup } from '../Layout/Layout'; |
||||
import { LoadingState } from '@grafana/data'; |
||||
import { Button } from '../Button/Button.tsx'; |
||||
import { Menu } from '../Menu/Menu'; |
||||
|
||||
<Meta title="MDX|PanelChrome" component={PanelChrome} /> |
||||
|
||||
# PanelChrome |
||||
|
||||
Component used for rendering content wrapped in the same style as grafana panels |
||||
|
||||
### Basic Usage: Title, Description and Content |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
</Canvas> |
||||
|
||||
### Menu: Standard & Hover |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
hoverHeader={<true || false>} |
||||
menu={() => ( |
||||
<Menu> |
||||
<Menu.Item label="View" icon="eye" /> |
||||
<Menu.Item label="Edit" icon="edit" /> |
||||
<Menu.Item label="Share" icon="share-alt" /> |
||||
<Menu.Divider /> |
||||
<Menu.Item label="Remove" icon="trash-alt" /> |
||||
</Menu> |
||||
)} |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
|
||||
<HorizontalGroup spacing="md" align="flex-start" wrap> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
menu={() => ( |
||||
<Menu> |
||||
<Menu.Item label="View" icon="eye" /> |
||||
<Menu.Item label="Edit" icon="edit" /> |
||||
<Menu.Item label="Share" icon="share-alt" /> |
||||
<Menu.Divider /> |
||||
<Menu.Item label="Remove" icon="trash-alt" /> |
||||
</Menu> |
||||
)} |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
|
||||
> |
||||
|
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content with fixed header |
||||
</div> |
||||
); |
||||
}} |
||||
|
||||
</PanelChrome> |
||||
|
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
menu={() => ( |
||||
<Menu> |
||||
<Menu.Item label="View" icon="eye" /> |
||||
<Menu.Item label="Edit" icon="edit" /> |
||||
<Menu.Item label="Share" icon="share-alt" /> |
||||
<Menu.Divider /> |
||||
<Menu.Item label="Remove" icon="trash-alt" /> |
||||
</Menu> |
||||
)} |
||||
hoverHeader={true} |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
|
||||
> |
||||
|
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content with hoverHeader=true |
||||
</div> |
||||
); |
||||
}} |
||||
|
||||
</PanelChrome> |
||||
</HorizontalGroup> |
||||
</Canvas> |
||||
|
||||
### States: Loading , Streaming, Error |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
loadingState={<Loading.Loading || Loading.Streaming>} |
||||
statusMessage='Error text' |
||||
statusMessageOnClick={action('ErrorIndicator: onClick fired')} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
|
||||
<HorizontalGroup spacing="md" align="flex-start" wrap> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
loadingState={LoadingState.Loading} |
||||
width={400} |
||||
height={200} |
||||
|
||||
> |
||||
|
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Data is loading |
||||
</div> |
||||
); |
||||
}} |
||||
|
||||
</PanelChrome> |
||||
|
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
loadingState={LoadingState.Streaming} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
|
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Data is Streaming |
||||
</div> |
||||
); |
||||
}} |
||||
|
||||
</PanelChrome> |
||||
|
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
statusMessage='Error text' |
||||
statusMessageOnClick={action('ErrorIndicator: onClick fired')} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
|
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
There is an error |
||||
</div> |
||||
); |
||||
}} |
||||
|
||||
</PanelChrome> |
||||
</HorizontalGroup> |
||||
</Canvas> |
||||
|
||||
### Extra options? Title Items |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
titleItems={ |
||||
<div> |
||||
<Button fill="text" icon="github" variant="secondary" tooltip="extra content to render" /> |
||||
<Button fill="text" icon="sliders-v-alt" variant="secondary" tooltip="extra content2 to render" /> |
||||
</div> |
||||
} |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
description="Here I will put a description that explains a bit more this panel" |
||||
titleItems={ |
||||
<div> |
||||
<Button fill="text" icon="github" variant="secondary" tooltip="extra content to render" /> |
||||
<Button fill="text" icon="sliders-v-alt" variant="secondary" tooltip="extra content2 to render" /> |
||||
</div> |
||||
} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
</Canvas> |
||||
|
||||
### Migration from old PanelChrome (before v9.4.0) |
||||
|
||||
#### Before |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
leftItems={[<PanelChrome.LoadingIndicator loading={isRefreshing} onCancel={onCancelQuery} key="loading-indicator" />]} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
leftItems={[ |
||||
<PanelChrome.LoadingIndicator |
||||
loading={true} |
||||
onCancel={action('CancelQuery: onClick fired')} |
||||
key="loading-indicator" |
||||
/>, |
||||
]} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
</Canvas> |
||||
#### After |
||||
|
||||
```tsx |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
loadingState={LoadingState.Loading} |
||||
onCancelQuery={onCancelQuery} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'white', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
New panel with old API |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
``` |
||||
|
||||
<Canvas> |
||||
<PanelChrome |
||||
title="My awesome panel title" |
||||
loadingState={LoadingState.Loading} |
||||
onCancelQuery={action('CancelQuery: onClick fired')} |
||||
width={400} |
||||
height={200} |
||||
> |
||||
{(innerwidth, innerheight) => { |
||||
return ( |
||||
<div |
||||
style={{ |
||||
width: innerwidth, |
||||
height: innerheight, |
||||
background: 'gray', |
||||
display: 'flex', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
Content |
||||
</div> |
||||
); |
||||
}} |
||||
</PanelChrome> |
||||
</Canvas> |
||||
Loading…
Reference in new issue