mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
5305316f5a
* WIP
* Use splitpanewrapper for drawer
* Get rich history pulling from multiple datasources
* highlight pane
* Fix datasource data handling
* create ds/explore map, move around ds lookup
* Handle no filters
* Fix tests and some errors
* Fix context menu issue
* (Poorly) enable scrolling, fix onClose to function
* Remove highlighting, use legacy key, fix casing
* fix filtering to handle non-simple data
* Fix linter, add translations
* Fixing tests~~
* Move to explore drawer and fix some more tests
* Kinda fix drawer stuff?
* Fix remaining card tests
* Fix test
* Fix tests
* Partially fix starred tab tests
* Fix integration tests
* Fix remaining tests 🤞
* Add a test and a clarifying comment behind a couple hooks
* Remove unused code
* Fix button styling and fix animation (but break width)
* Make Drawer using parent width (100%)
* Fix tests and some small catches
* Add tests for selectExploreDSMaps selector
---------
Co-authored-by: Piotr Jamroz <pm.jamroz@gmail.com>
71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
// Libraries
|
|
import { css, cx, keyframes } from '@emotion/css';
|
|
import { Resizable, ResizeCallback } from 're-resizable';
|
|
import React from 'react';
|
|
|
|
// Services & Utils
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { getDragStyles, useStyles2, useTheme2 } from '@grafana/ui';
|
|
|
|
export interface Props {
|
|
children: React.ReactNode;
|
|
onResize?: ResizeCallback;
|
|
}
|
|
|
|
export function ExploreDrawer(props: Props) {
|
|
const { children, onResize } = props;
|
|
const theme = useTheme2();
|
|
const styles = useStyles2(getStyles);
|
|
const dragStyles = getDragStyles(theme);
|
|
|
|
return (
|
|
<Resizable
|
|
className={cx(styles.fixed, styles.container, styles.drawerActive)}
|
|
defaultSize={{ width: '100%', height: `${theme.components.horizontalDrawer.defaultHeight}px` }}
|
|
handleClasses={{ top: dragStyles.dragHandleHorizontal }}
|
|
enable={{
|
|
top: true,
|
|
right: false,
|
|
bottom: false,
|
|
left: false,
|
|
topRight: false,
|
|
bottomRight: false,
|
|
bottomLeft: false,
|
|
topLeft: false,
|
|
}}
|
|
maxHeight="100vh"
|
|
onResize={onResize}
|
|
>
|
|
{children}
|
|
</Resizable>
|
|
);
|
|
}
|
|
|
|
const drawerSlide = (theme: GrafanaTheme2) => keyframes`
|
|
0% {
|
|
transform: translateY(${theme.components.horizontalDrawer.defaultHeight}px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
`;
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => ({
|
|
// @ts-expect-error csstype doesn't allow !important. see https://github.com/frenic/csstype/issues/114
|
|
fixed: css({
|
|
position: 'absolute !important',
|
|
}),
|
|
container: css({
|
|
bottom: 0,
|
|
background: theme.colors.background.primary,
|
|
borderTop: `1px solid ${theme.colors.border.weak}`,
|
|
boxShadow: theme.shadows.z3,
|
|
zIndex: theme.zIndex.navbarFixed,
|
|
}),
|
|
drawerActive: css({
|
|
opacity: 1,
|
|
animation: `0.5s ease-out ${drawerSlide(theme)}`,
|
|
}),
|
|
});
|