export function useDropTargetMonitor(): [DropTargetMonitor, TargetConnector] {
const manager = useDragDropManager()
const monitor = useMemo(() => new DropTargetMonitorImpl(manager), [manager])
const connector = useMemo(() => new TargetConnector(manager.getBackend()), [
manager,
])
return [monitor, connector]
}
export const useKibanaUiSetting = (key: string, defaultValue?: any) => {
const uiSettingsClient = useMemo(() => getNewPlatform().setup.core.uiSettings, [getNewPlatform]);
const uiSetting$ = useMemo(() => uiSettingsClient.get$(key, defaultValue), [uiSettingsClient]);
const uiSetting = useObservable(uiSetting$);
const setUiSetting = useCallback((value: any) => uiSettingsClient.set(key, value), [
uiSettingsClient,
]);
return [uiSetting, setUiSetting];
};
export function useTransactionOverviewCharts(urlParams: IUrlParams) {
const { serviceName, start, end, transactionType } = urlParams;
const uiFilters = useUiFilters(urlParams);
const { data, error, status } = useFetcher(
() => {
if (serviceName && start && end) {
return loadTransactionCharts({
serviceName,
start,
end,
transactionType,
uiFilters
});
}
},
[serviceName, start, end, transactionType, uiFilters]
);
const memoizedData = useMemo(() => getTransactionCharts(urlParams, data), [
data
]);
return {
data: memoizedData,
status,
error
};
}
export function useTransactionDetailsCharts(urlParams: IUrlParams) {
const {
serviceName,
transactionType,
start,
end,
transactionName,
kuery
} = urlParams;
const { data, error, status } = useFetcher(
() =>
loadTransactionDetailsCharts({
serviceName,
transactionName,
transactionType,
start,
end,
kuery
}),
[serviceName, transactionName, transactionType, start, end, kuery]
);
const memoizedData = useMemo(() => getTransactionCharts(urlParams, data), [
data
]);
return {
data: memoizedData,
status,
error
};
}
export function useTransactionList(urlParams: IUrlParams) {
const { serviceName, transactionType, start, end } = urlParams;
const uiFilters = useUiFilters(urlParams);
const { data = [], error, status } = useFetcher(
() => {
if (serviceName && start && end && transactionType) {
return loadTransactionList({
serviceName,
start,
end,
transactionType,
uiFilters
});
}
},
[serviceName, start, end, transactionType, uiFilters]
);
const memoizedData = useMemo(() => getWithRelativeImpact(data), [data]);
return {
data: memoizedData,
status,
error
};
}
export function useDrop<
DragObject extends DragObjectWithType,
DropResult,
CollectedProps
>(
spec: DropTargetHookSpec<DragObject, DropResult, CollectedProps>,
): [CollectedProps, ConnectDropTarget] {
const specRef = useRef(spec)
invariant(spec.accept != null, 'accept must be defined')
const [monitor, connector] = useDropTargetMonitor()
useDropHandler(specRef, monitor, connector)
const result: CollectedProps = useMonitorOutput(
monitor,
specRef.current.collect || (() => ({} as CollectedProps)),
() => connector.reconnect(),
)
const connectDropTarget = useMemo(() => connector.hooks.dropTarget(), [
connector,
])
useEffect(() => {
connector.dropTargetOptions = spec.options || null
connector.reconnect()
}, [spec.options])
return [result, connectDropTarget]
}
export const useSubscription = <T, TVariables = OperationVariables>(
query: DocumentNode,
options: SubscriptionOptions<T, TVariables> = {},
): {
data: T | { [key: string]: void }
error?: GraphQLError
loading: boolean
} => {
const onSubscriptionData = options.onSubscriptionData
const prevOptions = useRef<typeof options | null>(null)
const client = useApolloClient()
const [data, setData] = useState<T | {}>({})
const [error, setError] = useState<GraphQLError | null>(null)
const [loading, setLoading] = useState<boolean>(true)
const subscriptionOptions = {
query,
variables: options.variables,
fetchPolicy: options.fetchPolicy,
}
useEffect(
() => {
prevOptions.current = subscriptionOptions
const subscription = client
.subscribe<{ data: T }, TVariables>(subscriptionOptions)
.subscribe({
next: ({ data }) => {
setData(data)
if (onSubscriptionData) {
onSubscriptionData({ client, subscriptionData: data })
}
},
error: err => {
setError(err)
setLoading(false)
},
complete: () => {
setLoading(false)
},
})
return () => {
subscription.unsubscribe()
}
},
[isEqual(prevOptions.current, subscriptionOptions) ? prevOptions.current : subscriptionOptions],
)
return useMemo(
() => ({
data,
error,
loading,
}),
[data, error, loading],
)
}
// Enforce easy types here
function useMakeMapState<MappedState, Args extends ValidArgs>(
makeMapState: () => (state: State, ...args: Args) => MappedState,
...args: Args
): MappedState {
const mapState = useMemo(makeMapState, []);
return useMapState(mapState, ...args);
}
/**
* Hook that allows you to define dynamic (or static) css for use in a component.
*
* @param styles The CSS properties to compile
* @param deps list of dependencies (like in useMemo). *Unlike* useMemo and useEffect,
* this defaults to [], meaning your styles won't be recalculated at each render
* (since this is the most common case)
* @returns a function to compile the style that takes in an optional `prop` parameter
* (default `className`).
*
* Examples:
*
* ```
// Normal usage
function Component1() {
const css = useStyle({ margin: '1rem' })
return <div {...css()}>My Component</div>
}
// Pass in props
function Component2({ type }) {
const css = useStyle({
color: type === 'primary' ? 'blue' : 'white'
}, [type])
return <button {...css()}>Click Me</button>
}
// Choose prop name
function CustomLink() {
const css = useStyle({ color: 'gray' })
const activeCss = useStyle({ color: 'black' })
// React Router `Link` component
return <Link {...css()} {...activeCss('activeClassName')}>Click Me</Link>
}
```
*/
export default function useStyle(styles: CSSProperties, deps: unknown[] = []) {
return useMemo(() => {
const rule = StyleSheet.create({ styles });
return (prop = 'className') => ({
[prop]: css(rule.styles),
});
}, deps);
}
const useDragAndDropContainerEvents = ({margin = 20}: {margin?: number} = {}) => {
const {activeKey} = React.useContext(DragAndDropContext)
const isDragging = activeKey !== null
const scrollingTimeoutRef = React.useRef<NodeJS.Timeout>()
const clearScroll = React.useCallback(() => {
if (scrollingTimeoutRef.current !== undefined) {
clearInterval(scrollingTimeoutRef.current)
scrollingTimeoutRef.current = undefined
}
}, [])
React.useEffect(() => {
if (!isDragging) {
clearScroll()
}
}, [clearScroll, isDragging])
return React.useMemo(() => {
const scroll = (containerElement: HTMLElement, {isUpward}: {isUpward: boolean}) => {
clearScroll()
scrollingTimeoutRef.current = setInterval(() => {
containerElement.scrollTo({
top: containerElement.scrollTop + (isUpward ? -1 : 1) * 20
})
}, 50)
}
const onMouseMove = (evt: MouseEvent | React.MouseEvent) => {
if (!isDragging) return
if (evt.currentTarget instanceof HTMLElement) {
const rect = evt.currentTarget.getBoundingClientRect()
const displacementTop = Math.abs(rect.top - evt.clientY)
const displacementBottom = Math.abs(rect.bottom - evt.clientY)
if (displacementTop <= margin) {
scroll(evt.currentTarget, {
isUpward: true
})
} else if (displacementBottom <= margin) {
scroll(evt.currentTarget, {
isUpward: false
})
} else {
clearScroll()
}
}
}
return {
onMouseMove
}
}, [clearScroll, isDragging, margin])
}
