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

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 { 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} />}
           />
 

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;

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;

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">
-              <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}

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 } 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>

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>
   );

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>

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;

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;

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;