mirror of https://github.com/grafana/grafana
Torkel Ödegaard
6 months ago
parent
48573ea669
commit
113201c0b5
@ -0,0 +1,21 @@ |
||||
import { useEffect } from 'react'; |
||||
|
||||
import { useGrafana } from 'app/core/context/GrafanaContext'; |
||||
|
||||
import { AddonAppDefinition } from '../AppChromeService'; |
||||
|
||||
export function DeclareAddonApp<T>(props: AddonAppDefinition<T>) { |
||||
const { chrome } = useGrafana(); |
||||
|
||||
useEffect(() => { |
||||
//@ts-ignore
|
||||
chrome.addAddonApp(props); |
||||
|
||||
return () => { |
||||
chrome.removeAddonApp(props.id); |
||||
}; |
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [chrome]); |
||||
|
||||
return null; |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
import { Box, Card, FilterInput, Stack, Text } from '@grafana/ui'; |
||||
import { AddonBarPane } from 'app/core/components/AppChrome/AddonBar/AddonBarPane'; |
||||
|
||||
export function DashboardContentPane() { |
||||
return ( |
||||
<AddonBarPane title="Content outline"> |
||||
<Box paddingX={2} grow={1}> |
||||
<Stack direction={'column'} grow={1} gap={1} height={'100%'}> |
||||
<FilterInput placeholder="Search" onChange={() => {}} value={''} /> |
||||
<Text variant="bodySmall" italic> |
||||
Sections |
||||
</Text> |
||||
<Stack direction={'column'} gap={0.5}> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>Interpolation modes</Card.Heading> |
||||
</Card> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>Soft min & max</Card.Heading> |
||||
</Card> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>Multiple Y-Axes</Card.Heading> |
||||
</Card> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>Time series panel & display options</Card.Heading> |
||||
</Card> |
||||
</Stack> |
||||
</Stack> |
||||
</Box> |
||||
</AddonBarPane> |
||||
); |
||||
} |
||||
@ -0,0 +1,24 @@ |
||||
import { Box, Card, FilterInput, Stack, Text } from '@grafana/ui'; |
||||
import { AddonBarPane } from 'app/core/components/AppChrome/AddonBar/AddonBarPane'; |
||||
|
||||
export function DashboardContentPane() { |
||||
return ( |
||||
<AddonBarPane title="Filters"> |
||||
<Box paddingX={2} grow={1}> |
||||
<Stack direction={'column'} grow={1} gap={1} height={'100%'}> |
||||
<Text variant="bodySmall" italic> |
||||
Sections |
||||
</Text> |
||||
<Stack direction={'column'} gap={0.5}> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>job = server</Card.Heading> |
||||
</Card> |
||||
<Card href="link" isCompact> |
||||
<Card.Heading>cluster = US</Card.Heading> |
||||
</Card> |
||||
</Stack> |
||||
</Stack> |
||||
</Box> |
||||
</AddonBarPane> |
||||
); |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
import { DashboardScene } from '../scene/DashboardScene'; |
||||
|
||||
import { ElementEditPane } from './ElementEditPane'; |
||||
import { useEditableElement } from './useEditableElement'; |
||||
|
||||
export function DashboardSettingsPane({ dashboard }: { dashboard: DashboardScene }) { |
||||
const editableElement = useEditableElement(dashboard)!; |
||||
return <ElementEditPane element={editableElement} key={editableElement.getTypeName()} />; |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
import { EditableDashboardElement } from '../scene/types'; |
||||
|
||||
import { ElementEditPane } from './ElementEditPane'; |
||||
|
||||
export function SelectedObjectPane({ editableElement }: { editableElement: EditableDashboardElement }) { |
||||
return <ElementEditPane element={editableElement} key={editableElement.getTypeName()} />; |
||||
} |
||||
Loading…
Reference in new issue