mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Explore: UI changes for split view and live tailing (#20516)
This commit is contained in:
parent
c6a9a83bf3
commit
29b46f7a28
@ -1,7 +1,6 @@
|
||||
// Libraries
|
||||
import React, { PureComponent, createRef } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import memoizeOne from 'memoize-one';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// Components
|
||||
@ -11,17 +10,16 @@ import { TimePickerPopover } from './TimePickerPopover';
|
||||
import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
|
||||
|
||||
// Utils & Services
|
||||
import { isDateTime, DateTime } from '@grafana/data';
|
||||
import { rangeUtil } from '@grafana/data';
|
||||
import { isDateTime, DateTime, rangeUtil } from '@grafana/data';
|
||||
import { rawToTimeRange } from './time';
|
||||
import { stylesFactory } from '../../themes/stylesFactory';
|
||||
import { withTheme } from '../../themes/ThemeContext';
|
||||
|
||||
// Types
|
||||
import { TimeRange, TimeOption, TimeZone, TIME_FORMAT, SelectableValue, dateMath } from '@grafana/data';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { TimeRange, TimeOption, TimeZone, TIME_FORMAT, SelectableValue, dateMath, GrafanaTheme } from '@grafana/data';
|
||||
import { Themeable } from '../../types';
|
||||
|
||||
const getStyles = memoizeOne((theme: GrafanaTheme) => {
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
return {
|
||||
timePickerSynced: css`
|
||||
label: timePickerSynced;
|
||||
@ -198,6 +196,7 @@ class UnThemedTimePicker extends PureComponent<Props, State> {
|
||||
)}
|
||||
<ButtonSelect
|
||||
className={classNames('time-picker-button-select', {
|
||||
['explore-active-button-glow']: timeSyncButton && isSynced,
|
||||
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: timeSyncButton,
|
||||
[styles.timePickerSynced]: timeSyncButton ? isSynced : null,
|
||||
})}
|
||||
@ -206,7 +205,7 @@ class UnThemedTimePicker extends PureComponent<Props, State> {
|
||||
options={options}
|
||||
maxMenuHeight={600}
|
||||
onChange={this.onSelectChanged}
|
||||
iconClass={'fa fa-clock-o fa-fw'}
|
||||
iconClass={classNames('fa fa-clock-o fa-fw', isSynced && timeSyncButton && 'icon-brand-gradient')}
|
||||
tooltipContent={<TimePickerTooltipContent timeRange={value} />}
|
||||
/>
|
||||
|
||||
|
@ -187,6 +187,8 @@ $btn-drag-image: '../img/grab_dark.svg';
|
||||
|
||||
$navbar-btn-gicon-brightness: brightness(0.5);
|
||||
|
||||
$btn-active-box-shadow: 0px 0px 4px rgba(255,120,10,0.5);
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$input-bg: $input-black;
|
||||
|
@ -180,6 +180,8 @@ $btn-drag-image: '../img/grab_light.svg';
|
||||
|
||||
$navbar-btn-gicon-brightness: brightness(1.5);
|
||||
|
||||
$btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$input-bg: $white;
|
||||
|
@ -278,15 +278,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="explore-toolbar-content-item explore-icon-align">
|
||||
<ResponsiveButton
|
||||
splitted={splitted}
|
||||
title="Clear All"
|
||||
onClick={this.onClearAll}
|
||||
iconClassName="fa fa-fw fa-trash icon-margin-right"
|
||||
disabled={isLive}
|
||||
/>
|
||||
</div>
|
||||
{!isLive && (
|
||||
<div className="explore-toolbar-content-item explore-icon-align">
|
||||
<ResponsiveButton
|
||||
splitted={splitted}
|
||||
title="Clear All"
|
||||
onClick={this.onClearAll}
|
||||
iconClassName="fa fa-fw fa-trash icon-margin-right"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="explore-toolbar-content-item">
|
||||
<RunButton
|
||||
refreshInterval={refreshInterval}
|
||||
|
@ -1,22 +1,22 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { css } from 'emotion';
|
||||
import memoizeOne from 'memoize-one';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { css } from 'emotion';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import { ResponsiveButton } from './ResponsiveButton';
|
||||
|
||||
import { useTheme, Tooltip } from '@grafana/ui';
|
||||
import { useTheme, Tooltip, stylesFactory, selectThemeVariant } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
|
||||
const getStyles = memoizeOne((theme: GrafanaTheme) => {
|
||||
//Components
|
||||
import { ResponsiveButton } from './ResponsiveButton';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const bgColor = selectThemeVariant({ light: theme.colors.gray5, dark: theme.colors.dark1 }, theme.type);
|
||||
const orangeLighter = tinycolor(theme.colors.orangeDark)
|
||||
.lighten(10)
|
||||
.toString();
|
||||
const pulseTextColor = tinycolor(theme.colors.orangeDark)
|
||||
.desaturate(90)
|
||||
.toString();
|
||||
|
||||
return {
|
||||
noRightBorderStyle: css`
|
||||
label: noRightBorderStyle;
|
||||
@ -33,9 +33,13 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
|
||||
color: ${theme.colors.orangeDark};
|
||||
background: transparent;
|
||||
&:focus {
|
||||
background: transparent;
|
||||
border-color: ${theme.colors.orangeDark};
|
||||
color: ${theme.colors.orangeDark};
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${bgColor};
|
||||
}
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: ${orangeLighter};
|
||||
@ -48,8 +52,12 @@ const getStyles = memoizeOne((theme: GrafanaTheme) => {
|
||||
background: transparent;
|
||||
animation: pulse 3s ease-out 0s infinite normal forwards;
|
||||
&:focus {
|
||||
background: transparent;
|
||||
border-color: ${theme.colors.orangeDark};
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${bgColor};
|
||||
}
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: ${orangeLighter};
|
||||
@ -119,11 +127,15 @@ export function LiveTailButton(props: LiveTailButtonProps) {
|
||||
<ResponsiveButton
|
||||
splitted={splitted}
|
||||
buttonClassName={classNames('btn navbar-button', styles.liveButton, {
|
||||
[`btn--radius-right-0 ${styles.noRightBorderStyle}`]: isLive,
|
||||
[`btn--radius-right-0 explore-active-button-glow ${styles.noRightBorderStyle}`]: isLive,
|
||||
[styles.isLive]: isLive && !isPaused,
|
||||
[styles.isPaused]: isLive && isPaused,
|
||||
})}
|
||||
iconClassName={classNames('fa', isPaused || !isLive ? 'fa-play' : 'fa-pause')}
|
||||
iconClassName={classNames(
|
||||
'fa',
|
||||
isPaused || !isLive ? 'fa-play' : 'fa-pause',
|
||||
isLive && 'icon-brand-gradient'
|
||||
)}
|
||||
onClick={onClickMain}
|
||||
title={'\xa0Live'}
|
||||
/>
|
||||
@ -141,8 +153,11 @@ export function LiveTailButton(props: LiveTailButtonProps) {
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<button className={`btn navbar-button navbar-button--attached ${styles.isLive}`} onClick={stop}>
|
||||
<i className={'fa fa-stop'} />
|
||||
<button
|
||||
className={`btn navbar-button navbar-button--attached explore-active-button-glow ${styles.isLive}`}
|
||||
onClick={stop}
|
||||
>
|
||||
<i className={classNames('fa fa-stop icon-brand-gradient')} />
|
||||
</button>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
|
@ -47,12 +47,12 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
|
||||
<Tooltip content={syncTimesTooltip} placement="bottom">
|
||||
<button
|
||||
className={classNames('btn navbar-button navbar-button--attached', {
|
||||
[styles.timePickerSynced]: isSynced,
|
||||
[`explore-active-button-glow ${styles.timePickerSynced}`]: isSynced,
|
||||
})}
|
||||
aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
|
||||
onClick={() => onClick()}
|
||||
>
|
||||
<i className="fa fa-link" />
|
||||
<i className={classNames('fa fa-link', isSynced && 'icon-brand-gradient')} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
|
@ -15,13 +15,13 @@ exports[`TimeSyncButton should render component 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-label="Synced times"
|
||||
className="btn navbar-button navbar-button--attached css-14r9fpj-timePickerSynced"
|
||||
className="btn navbar-button navbar-button--attached explore-active-button-glow css-14r9fpj-timePickerSynced"
|
||||
onClick={[Function]}
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
>
|
||||
<i
|
||||
className="fa fa-link"
|
||||
className="fa fa-link icon-brand-gradient"
|
||||
/>
|
||||
</button>
|
||||
</PopoverController>
|
||||
|
@ -190,6 +190,8 @@ $btn-drag-image: '../img/grab_dark.svg';
|
||||
|
||||
$navbar-btn-gicon-brightness: brightness(0.5);
|
||||
|
||||
$btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$input-bg: $input-black;
|
||||
|
@ -183,6 +183,8 @@ $btn-drag-image: '../img/grab_light.svg';
|
||||
|
||||
$navbar-btn-gicon-brightness: brightness(1.5);
|
||||
|
||||
$btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$input-bg: $white;
|
||||
|
@ -6,6 +6,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.icon-brand-gradient {
|
||||
text-shadow: none;
|
||||
background: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.icon-margin-left {
|
||||
margin-left: 0.25em;
|
||||
|
||||
@ -14,6 +22,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.explore-active-button-glow {
|
||||
box-shadow: $btn-active-box-shadow;
|
||||
}
|
||||
.explore-ds-picker {
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
|
Loading…
Reference in New Issue
Block a user