mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Storybook: Add MDX PanelChrome documentation (#64916)
This commit is contained in:
Alexa V
GitHub
parent
8438716bf5
commit
5bbdc62044
@ -6825,9 +6825,6 @@ exports[`no undocumented stories`] = {
|
||||
"packages/grafana-ui/src/components/PageLayout/PageToolbar.story.tsx:5381": [
|
||||
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/PanelChrome/PanelChrome.story.tsx:5381": [
|
||||
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
|
||||
],
|
||||
"packages/grafana-ui/src/components/QueryField/QueryField.story.tsx:5381": [
|
||||
[0, 0, 0, "No undocumented stories are allowed, please add an .mdx file with some documentation", "5381"]
|
||||
],
|
||||
|
||||
484
packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
Normal file
484
packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
Normal file
@ -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>
|
||||
@ -12,6 +12,8 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
|
||||
import { HorizontalGroup } from '../Layout/Layout';
|
||||
import { Menu } from '../Menu/Menu';
|
||||
|
||||
import mdx from './PanelChrome.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof PanelChrome> = {
|
||||
title: 'Visualizations/PanelChrome',
|
||||
component: PanelChrome,
|
||||
@ -20,7 +22,9 @@ const meta: ComponentMeta<typeof PanelChrome> = {
|
||||
controls: {
|
||||
exclude: ['children'],
|
||||
},
|
||||
docs: {},
|
||||
docs: {
|
||||
page: mdx,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user