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

Alerting: Add legend for mixed in Loki alert history and use highlight instead of scroll (#71131)

Browse Source 
* Add legend for mixed in Loki alert history

* Highlight row in the log list while hovering in the timeline instead of srcolling into it

* update some of the styles

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>
This commit is contained in:
Sonia Aguilar 2023-07-07 09:10:10 +02:00 committed by GitHub
parent bde9478c5e
commit 00e9185b1a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/features/alerting/unified/components/rules/state-history/LogRecordViewer.tsx
View File

@ -55,6 +55,7 @@ export const LogRecordViewerByTimestamp = React.memo(
key={key}
data-testid={key}
ref={(element) => element && timestampRefs.set(key, element)}
className={styles.listItemWrapper}
>
<Timestamp time={key} />
<div className={styles.logsContainer}>
@ -170,11 +171,17 @@ const getStyles = (theme: GrafanaTheme2) => ({
`,
timestampWrapper: css`
color: ${theme.colors.text.secondary};
padding: ${theme.spacing(1)} 0;
`,
timestampText: css`
color: ${theme.colors.text.primary};
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightBold};
`,
listItemWrapper: css`
background: transparent;
outline: 1px solid transparent;
transition: background 150ms, outline 150ms;
padding: ${theme.spacing(1)} ${theme.spacing(1.5)};
`,
});

1
public/app/features/alerting/unified/components/rules/state-history/LogTimelineViewer.tsx
View File

@ -43,6 +43,7 @@ export const LogTimelineViewer = React.memo(({ frames, timeRange, onPointerMove
{ label: 'Pending', color: theme.colors.warning.main, yAxis: 1 },
{ label: 'Alerting', color: theme.colors.error.main, yAxis: 1 },
{ label: 'NoData', color: theme.colors.info.main, yAxis: 1 },
{ label: 'Mixed', color: theme.colors.text.secondary, yAxis: 1 },
]}
>
{(builder) => {

23
public/app/features/alerting/unified/components/rules/state-history/LokiStateHistory.tsx
View File

@ -66,14 +66,24 @@ const LokiStateHistory = ({ ruleUID }: Props) => {
setValue('query', '');
}, [setInstancesFilter, setValue]);
const refToHighlight = useRef<HTMLElement | undefined>(undefined);
const onTimelinePointerMove = useCallback(
(seriesIdx: number, pointIdx: number) => {
const timestamp = frameSubsetTimestamps[pointIdx];
// remove the highlight from the previous refToHighlight
refToHighlight.current?.classList.remove(styles.highlightedLogRecord);
const refToScroll = logsRef.current.get(timestamp);
refToScroll?.scrollIntoView({ behavior: 'smooth', block: 'start' });
const timestamp = frameSubsetTimestamps[pointIdx];
const newTimestampRef = logsRef.current.get(timestamp);
// now we have the new ref, add the styles
newTimestampRef?.classList.add(styles.highlightedLogRecord);
// keeping this here (commented) in case we decide we want to go back to this
// newTimestampRef?.scrollIntoView({ behavior: 'smooth', block: 'center' });
refToHighlight.current = newTimestampRef;
},
[frameSubsetTimestamps]
[frameSubsetTimestamps, styles.highlightedLogRecord]
);
if (isLoading) {
@ -259,6 +269,11 @@ export const getStyles = (theme: GrafanaTheme2) => ({
display: grid;
grid-template-columns: max-content auto;
`,
// we need !important here to override the list item default styles
highlightedLogRecord: css`
background: ${theme.colors.primary.transparent} !important;
outline: 1px solid ${theme.colors.primary.shade} !important;
`,
});
export default LokiStateHistory;