IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

updated live tail button - responsive fold

Browse Source
This commit is contained in:
Łukasz Siatka
2019-10-07 23:30:07 +02:00
committed by Lukas Siatka
parent 33f8b36b44
commit f8cef9b900
2 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/app/features/explore/LiveTailButton.tsx
View File

@@ -5,7 +5,7 @@ import memoizeOne from 'memoize-one';
import tinycolor from 'tinycolor2';
import { CSSTransition } from 'react-transition-group';
import { GrafanaTheme, useTheme } from '@grafana/ui';
import { GrafanaTheme, useTheme, Tooltip } from '@grafana/ui';
const getStyles = memoizeOne((theme: GrafanaTheme) => {
const orangeLighter = tinycolor(theme.colors.orangeDark)
@@ -91,6 +91,10 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
};
});
const defaultZoomOutTooltip = () => {
return <>Live tailing</>;
};
type LiveTailButtonProps = {
start: () => void;
stop: () => void;
@@ -108,17 +112,19 @@ export function LiveTailButton(props: LiveTailButtonProps) {
return (
<>
<button
className={classNames('btn navbar-button', styles.liveButton, {
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
[styles.isLive]: isLive && !isPaused,
[styles.isPaused]: isLive && isPaused,
})}
onClick={onClickMain}
>
<i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
&nbsp; Live tailing
</button>
<Tooltip content={defaultZoomOutTooltip} placement="bottom">
<button
className={classNames('btn navbar-button', styles.liveButton, {
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
[styles.isLive]: isLive && !isPaused,
[styles.isPaused]: isLive && isPaused,
})}
onClick={onClickMain}
>
<i className={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')} />
<span>&nbsp; Live tailing</span>
</button>
</Tooltip>
<CSSTransition
mountOnEnter={true}
unmountOnExit={true}