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

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

Browse Source
This commit is contained in:
Ivana Huckova 2019-09-09 19:09:06 +02:00 committed by GitHub
parent 8c79085351
commit 14a740572d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

1
packages/grafana-ui/src/themes/dark.ts
View File

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

1
packages/grafana-ui/src/themes/light.ts
View File

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

1
packages/grafana-ui/src/types/theme.ts
View File

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

26
public/app/features/explore/LiveLogs.tsx
View File

@ -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'} />
&nbsp; Stop
<i className={'fa fa-times'} />
&nbsp; Exit live mode
</button>
{isPaused || (
<span>