Explore: UI changes for split view and live tailing (#20516)

29b46f7a · Ivana Huckova · GitHub · c6a9a83b · 29b46f7a · 29b46f7a
Commit 29b46f7a authored Nov 22, 2019 by Ivana Huckova Committed by GitHub Nov 22, 2019
10 changed files
--- a/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimePicker.tsx
 // 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 { isDateTime, DateTime, rangeUtil } from '@grafana/data';
-import { 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 { TimeRange, TimeOption, TimeZone, TIME_FORMAT, SelectableValue, dateMath, GrafanaTheme } from '@grafana/data';
-import { 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} />}
          />

--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -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;

--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -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;

--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -278,15 +278,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
              </div>
            )}
-            <div className="explore-toolbar-content-item explore-icon-align">
+            {!isLive && (
-              <ResponsiveButton
+              <div className="explore-toolbar-content-item explore-icon-align">
-                splitted={splitted}
+                <ResponsiveButton
-                title="Clear All"
+                  splitted={splitted}
-                onClick={this.onClearAll}
+                  title="Clear All"
-                iconClassName="fa fa-fw fa-trash icon-margin-right"
+                  onClick={this.onClearAll}
-                disabled={isLive}
+                  iconClassName="fa fa-fw fa-trash icon-margin-right"
-              />
+                />
-            </div>
+              </div>
+            )}
            <div className="explore-toolbar-content-item">
              <RunButton
                refreshInterval={refreshInterval}

--- a/public/app/features/explore/LiveTailButton.tsx
+++ b/public/app/features/explore/LiveTailButton.tsx
 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, stylesFactory, selectThemeVariant } from '@grafana/ui';
-import { useTheme, Tooltip } 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}>
+          <button
-            <i className={'fa fa-stop'} />
+            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>

--- a/public/app/features/explore/TimeSyncButton.tsx
+++ b/public/app/features/explore/TimeSyncButton.tsx
@@ -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>
  );

--- a/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
@@ -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>

--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -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;

--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -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;

--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -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;