IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

LogContext: Add header and close button to modal (#56283)

Browse Source 
* added context header

* Rename to Log Context

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Sven Grossmann 2022-10-10 09:33:18 +02:00 committed by GitHub
parent 4cdbfb7606
commit 1bcce79d4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
public/app/features/logs/components/LogRowContext.tsx
View File

@ -3,7 +3,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import usePrevious from 'react-use/lib/usePrevious';
import { DataQueryError, GrafanaTheme2, LogRowModel, LogsSortOrder, textUtil } from '@grafana/data';
import { Alert, Button, ClickOutsideWrapper, CustomScrollbar, List, useStyles2 } from '@grafana/ui';
import { Alert, Button, ClickOutsideWrapper, CustomScrollbar, IconButton, List, useStyles2 } from '@grafana/ui';
import { LogMessageAnsi } from './LogMessageAnsi';
import { HasMoreContextRows, LogRowContextQueryErrors, LogRowContextRows } from './LogRowContextProvider';
@ -53,6 +53,10 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
width: 75%;
`;
return {
sizes: css`
width: calc(100% + ${theme.spacing()});
left: -${theme.spacing()};
`,
commonStyles: css`
position: absolute;
height: ${contextHeight}px;
@ -62,14 +66,46 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
box-shadow: 0 0 10px ${theme.v1.palette.black};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)};
width: 100%;
font-family: ${theme.typography.fontFamily};
`,
header: css`
height: ${headerHeight}px;
padding: 0 10px;
display: flex;
align-items: center;
background: ${theme.colors.background.canvas};
`,
top: css`
border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)};
box-shadow: 0 0 10px ${theme.v1.palette.black};
clip-path: inset(0px -10px -10px -10px);
`,
title: css`
position: absolute;
top: -${contextHeight + headerHeight}px;
z-index: ${theme.zIndex.modal};
height: ${headerHeight}px;
background: ${theme.colors.background.secondary};
border: 1px solid ${theme.colors.background.secondary};
border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0;
box-shadow: 0 0 10px ${theme.v1.palette.black};
clip-path: inset(-10px -10px 0px -10px);
font-family: ${theme.typography.fontFamily};
display: flex;
flex-direction: row;
align-items: center;
padding: ${theme.spacing()};
> h5 {
margin: 0;
flex: 1;
}
`,
actions: css`
align-items: center;
display: flex;
`,
headerButton: css`
margin-left: 8px;
@ -77,11 +113,13 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
logs: css`
height: ${logsHeight}px;
padding: 10px;
font-family: ${theme.typography.fontFamilyMonospace};
.scrollbar-view {
overscroll-behavior: contain;
}
`,
afterContext,
beforeContext,
};
@ -154,7 +192,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
groupPosition,
logsSortOrder,
}) => {
const { commonStyles, logs } = useStyles2(getLogRowContextStyles);
const { commonStyles, logs, sizes } = useStyles2(getLogRowContextStyles);
const [scrollTop, setScrollTop] = useState(0);
const [scrollHeight, setScrollHeight] = useState(0);
@ -209,7 +247,7 @@ export const LogRowContextGroup: React.FunctionComponent<LogRowContextGroupProps
};
return (
<div className={cx(commonStyles, className)}>
<div className={cx(commonStyles, sizes, className)}>
{/* When displaying "after" context */}
{shouldScrollToBottom && !error && <LogRowContextGroupHeader {...headerProps} />}
<div className={logs}>
@ -262,7 +300,9 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
document.removeEventListener('keydown', handleEscKeyDown, false);
};
}, [onOutsideClick]);
const { afterContext, beforeContext } = useStyles2((theme) => getLogRowContextStyles(theme, wrapLogMessage));
const { afterContext, beforeContext, title, top, actions, sizes } = useStyles2((theme) =>
getLogRowContextStyles(theme, wrapLogMessage)
);
return (
<ClickOutsideWrapper onClick={onOutsideClick}>
@ -274,7 +314,7 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
rows={context.after}
error={errors && errors.after}
row={row}
className={afterContext}
className={cx(afterContext, top)}
shouldScrollToBottom
canLoadMoreRows={hasMoreContextRows ? hasMoreContextRows.after : false}
onLoadMoreContext={onLoadMoreContext}
@ -295,6 +335,12 @@ export const LogRowContext: React.FunctionComponent<LogRowContextProps> = ({
logsSortOrder={logsSortOrder}
/>
)}
<div className={cx(title, sizes)}>
<h5>Log context</h5>
<div className={actions}>
<IconButton size="lg" name="times" onClick={onOutsideClick} />
</div>
</div>
</div>
</ClickOutsideWrapper>
);