mirror of
https://github.com/grafana/grafana.git
synced 2025-02-16 02:23:31 -06:00
54af57b8e6
* Initial pass to move panel state to it's own, and make it by key not panel.id * Progress * Not making much progress, having panel.key be mutable is causing a lot of issues * Think this is starting to work * Began fixing tests * Add selector * Bug fixes and changes to cleanup, and fixing all flicking when switching library panels * Removed console.log * fixes after merge * fixing tests * fixing tests * Added new test for changePlugin thunk * Initial struture in place * responding to state changes in another part of the state * bha * going in a different direction * This is getting exciting * minor * More structure * More real * Added builder to reduce boiler plate * Lots of progress * Adding more visualizations * More smarts * tweaks * suggestions * Move to separate view * Refactoring to builder concept * Before hover preview test * Increase line width in preview * More suggestions * Removed old elements of onSuggestVisualizations * Don't call suggestion suppliers if there is no data * Restore card styles to only borders * Changing supplier interface to support data vs option suggestion scenario * Renamed functions * Add dynamic width support * not sure about this * Improve suggestions * Improve suggestions * Single grid/list * Store vis select pane & size * Prep for option suggestions * more suggestions * Name/title option for preview cards * Improve barchart suggestions * Support suggestions when there are no data * Minor change * reverted some changes * Improve suggestions for stacking * Removed size option * starting on unit tests, hit cyclic dependency issue * muuu * First test for getting suggestion seems to work, going to bed * add missing file * A basis for more unit tests * More tests * More unit tests * Fixed unit tests * Update * Some extreme scenarios * Added basic e2e test * Added another unit test for changePanelPlugin action * More cleanup * Minor tweak * add wait to e2e test * Renamed function and cleanup of unused function * Adding search support and adding search test to e2e test
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { GrafanaTheme } from '@grafana/data';
|
|
import { useStyles } from '@grafana/ui';
|
|
import { css } from '@emotion/css';
|
|
import { selectors } from '@grafana/e2e-selectors';
|
|
import { VisualizationButton } from './VisualizationButton';
|
|
import { OptionsPaneOptions } from './OptionsPaneOptions';
|
|
import { useSelector } from 'react-redux';
|
|
import { StoreState } from 'app/types';
|
|
import { VisualizationSelectPane } from './VisualizationSelectPane';
|
|
import { usePanelLatestData } from './usePanelLatestData';
|
|
import { OptionPaneRenderProps } from './types';
|
|
|
|
export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
|
|
plugin,
|
|
panel,
|
|
onFieldConfigsChange,
|
|
onPanelOptionsChanged,
|
|
onPanelConfigChange,
|
|
dashboard,
|
|
instanceState,
|
|
}) => {
|
|
const styles = useStyles(getStyles);
|
|
const isVizPickerOpen = useSelector((state: StoreState) => state.panelEditor.isVizPickerOpen);
|
|
const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);
|
|
|
|
return (
|
|
<div className={styles.wrapper} aria-label={selectors.components.PanelEditor.OptionsPane.content}>
|
|
{!isVizPickerOpen && (
|
|
<>
|
|
<div className={styles.vizButtonWrapper}>
|
|
<VisualizationButton panel={panel} />
|
|
</div>
|
|
<div className={styles.optionsWrapper}>
|
|
<OptionsPaneOptions
|
|
panel={panel}
|
|
dashboard={dashboard}
|
|
plugin={plugin}
|
|
instanceState={instanceState}
|
|
data={data}
|
|
onFieldConfigsChange={onFieldConfigsChange}
|
|
onPanelOptionsChanged={onPanelOptionsChanged}
|
|
onPanelConfigChange={onPanelConfigChange}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
{isVizPickerOpen && <VisualizationSelectPane panel={panel} data={data} />}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const getStyles = (theme: GrafanaTheme) => {
|
|
return {
|
|
wrapper: css`
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
`,
|
|
optionsWrapper: css`
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
`,
|
|
vizButtonWrapper: css`
|
|
padding: 0 ${theme.spacing.md} ${theme.spacing.md} 0;
|
|
`,
|
|
legacyOptions: css`
|
|
label: legacy-options;
|
|
.panel-options-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.panel-options-group {
|
|
margin-bottom: 0;
|
|
}
|
|
.panel-options-group__body {
|
|
padding: ${theme.spacing.md} 0;
|
|
}
|
|
|
|
.section {
|
|
display: block;
|
|
margin: ${theme.spacing.md} 0;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
`,
|
|
};
|
|
};
|