mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Tree navigation in inline editor (#52427)
This commit is contained in:
parent
dfce454eca
commit
b742e80930
@ -103,6 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: ${theme.v1.colors.panelBg};
|
||||
border: 1px solid ${theme.colors.border.strong};
|
||||
box-shadow: 5px 5px 20px -5px #000000;
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
|
@ -1,10 +1,12 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { get as lodashGet } from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useObservable } from 'react-use';
|
||||
|
||||
import { PanelOptionsEditorBuilder, StandardEditorContext } from '@grafana/data';
|
||||
import { GrafanaTheme2, PanelOptionsEditorBuilder, StandardEditorContext } from '@grafana/data';
|
||||
import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
|
||||
import { NestedValueAccess } from '@grafana/data/src/utils/OptionsUIBuilders';
|
||||
import { useStyles2 } from '@grafana/ui';
|
||||
import { FrameState } from 'app/features/canvas/runtime/frame';
|
||||
import { OptionsPaneCategoryDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategoryDescriptor';
|
||||
import { fillOptionsPaneItems } from 'app/features/dashboard/components/PanelEditor/getVisualizationOptions';
|
||||
@ -13,11 +15,14 @@ import { setOptionImmutably } from 'app/features/dashboard/components/PanelEdito
|
||||
import { activePanelSubject, InstanceState } from './CanvasPanel';
|
||||
import { getElementEditor } from './editor/elementEditor';
|
||||
import { getLayerEditor } from './editor/layerEditor';
|
||||
import { getTreeViewEditor } from './editor/treeViewEditor';
|
||||
|
||||
export const InlineEditBody = () => {
|
||||
const activePanel = useObservable(activePanelSubject);
|
||||
const instanceState = activePanel?.panel.context?.instanceState;
|
||||
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
const pane = useMemo(() => {
|
||||
const state: InstanceState = instanceState;
|
||||
if (!state) {
|
||||
@ -25,6 +30,7 @@ export const InlineEditBody = () => {
|
||||
}
|
||||
|
||||
const supplier = (builder: PanelOptionsEditorBuilder<any>, context: StandardEditorContext<any>) => {
|
||||
builder.addNestedOptions(getTreeViewEditor(state));
|
||||
builder.addNestedOptions(getLayerEditor(instanceState));
|
||||
|
||||
const selection = state.selected;
|
||||
@ -51,9 +57,9 @@ export const InlineEditBody = () => {
|
||||
<div>
|
||||
{pane.categories.map((c) => {
|
||||
return (
|
||||
<div key={c.props.id}>
|
||||
<div key={c.props.id} className={styles.wrap}>
|
||||
<h5>{c.props.title}</h5>
|
||||
<div>{c.items.map((s) => s.render())}</div>
|
||||
<div className={styles.item}>{c.items.map((s) => s.render())}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@ -97,3 +103,13 @@ function getOptionsPaneCategoryDescriptor<T = any>(
|
||||
fillOptionsPaneItems(supplier, access, getOptionsPaneCategory, context);
|
||||
return root;
|
||||
}
|
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({
|
||||
wrap: css`
|
||||
border-top: 1px solid ${theme.colors.border.strong};
|
||||
padding: 10px;
|
||||
`,
|
||||
item: css`
|
||||
padding-left: 10px;
|
||||
`,
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user