Explore: UX/UI improvements for pausing and resuming of live tailing (#18931)

packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap

@@ -74,6 +74,7 @@ exports[`Render should render with base threshold 1`] = `
                           Object {
                             "background": Object {
                               "dropdown": "#1f1f20",
+                              "logsFresh": "#5794F240",
                               "scrollbar": "#343436",
                               "scrollbar2": "#343436",
                             },
@@ -235,6 +236,7 @@ exports[`Render should render with base threshold 1`] = `
                                 Object {
                                   "background": Object {
                                     "dropdown": "#1f1f20",
+                                    "logsFresh": "#5794F240",
                                     "scrollbar": "#343436",
                                     "scrollbar2": "#343436",
                                   },

packages/grafana-ui/src/themes/dark.ts

@@ -75,6 +75,7 @@ const darkTheme: GrafanaTheme = {
     dropdown: basicColors.dark3,
     scrollbar: basicColors.dark9,
     scrollbar2: basicColors.dark9,
+    logsFresh: '#5794F240',
   },
 };
 

packages/grafana-ui/src/themes/light.ts

@@ -76,6 +76,7 @@ const lightTheme: GrafanaTheme = {
     dropdown: basicColors.white,
     scrollbar: basicColors.gray5,
     scrollbar2: basicColors.gray5,
+    logsFresh: '#d8e7ff',
   },
 };
 

packages/grafana-ui/src/types/theme.ts

@@ -96,6 +96,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
     dropdown: string;
     scrollbar: string;
     scrollbar2: string;
+    logsFresh: string;
   };
   colors: {
     black: string;

public/app/features/explore/LiveLogs.tsx

@@ -10,6 +10,8 @@ import ElapsedTime from './ElapsedTime';
 const getStyles = (theme: GrafanaTheme) => ({
   logsRowsLive: css`
     label: logs-rows-live;
+    font-family: ${theme.typography.fontFamily.monospace};
+    font-size: ${theme.typography.size.sm};
     display: flex;
     flex-flow: column nowrap;
     height: 65vh;
@@ -21,15 +23,29 @@ const getStyles = (theme: GrafanaTheme) => ({
   logsRowFresh: css`
     label: logs-row-fresh;
     color: ${theme.colors.text};
-    background-color: ${selectThemeVariant({ light: theme.colors.gray6, dark: theme.colors.gray1 }, theme.type)};
+    background-color: ${selectThemeVariant(
+      { light: theme.background.logsFresh, dark: theme.background.logsFresh },
+      theme.type
+    )};
+    animation: fade 1s ease-out 1s 1 normal forwards;
+    @keyframes fade {
+      from {
+        background-color: ${selectThemeVariant(
+          { light: theme.background.logsFresh, dark: theme.background.logsFresh },
+          theme.type
+        )};
+      }
+      to {
+        background-color: transparent;
+      }
+    }
   `,
   logsRowOld: css`
     label: logs-row-old;
-    opacity: 0.8;
   `,
   logsRowsIndicator: css`
     font-size: ${theme.typography.size.md};
-    padding: ${theme.spacing.sm} 0;
+    padding-top: ${theme.spacing.sm};
     display: flex;
     align-items: center;
   `,
@@ -186,8 +202,8 @@ class LiveLogs extends PureComponent<Props, State> {
             {isPaused ? 'Resume' : 'Pause'}
           </button>
           <button onClick={this.props.stopLive} className={cx('btn btn-inverse', styles.button)}>
-            <i className={'fa fa-stop'} />
+            <i className={'fa fa-times'} />
-            &nbsp; Stop
+            &nbsp; Exit live mode
           </button>
           {isPaused || (
             <span>