import { css, cx } from '@emotion/css'; import { dateTimeFormat, systemDateFormats, GrafanaTheme2 } from '@grafana/data'; import { TimeZone } from '@grafana/schema'; import { ScrollContainer, Spinner, useTheme2, clearButtonStyles } from '@grafana/ui'; import { LogsPage } from './LogsNavigation'; type Props = { pages: LogsPage[]; currentPageIndex: number; oldestLogsFirst: boolean; timeZone: TimeZone; loading: boolean; onClick: (page: LogsPage, pageNumber: number) => void; }; export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst, timeZone, loading, onClick }: Props) { const formatTime = (time: number) => { return `${dateTimeFormat(time, { format: systemDateFormats.interval.second, timeZone: timeZone, })}`; }; const createPageContent = (page: LogsPage, index: number) => { if (currentPageIndex === index && loading) { return <Spinner />; } const topContent = formatTime(oldestLogsFirst ? page.logsRange.from : page.logsRange.to); const bottomContent = formatTime(oldestLogsFirst ? page.logsRange.to : page.logsRange.from); return `${topContent} — ${bottomContent}`; }; const theme = useTheme2(); const styles = getStyles(theme, loading); return ( <ScrollContainer> <div className={styles.pagesWrapper} data-testid="logsNavigationPages"> <div className={styles.pagesContainer}> {pages.map((page: LogsPage, index: number) => ( <button type="button" data-testid={`page${index + 1}`} className={cx(clearButtonStyles(theme), styles.page)} key={page.queryRange.to} onClick={() => { onClick(page, index + 1); }} disabled={loading} > <div className={cx(styles.line, { selectedBg: currentPageIndex === index })} /> <div className={cx(styles.time, { selectedText: currentPageIndex === index })}> {createPageContent(page, index)} </div> </button> ))} </div> </div> </ScrollContainer> ); } const getStyles = (theme: GrafanaTheme2, loading: boolean) => { return { pagesWrapper: css({ height: '100%', paddingLeft: theme.spacing(0.5), display: 'flex', flexDirection: 'column', '&::after': { content: "''", display: 'block', background: `repeating-linear-gradient(135deg, ${theme.colors.background.primary}, ${theme.colors.background.primary} 5px, ${theme.colors.background.secondary} 5px, ${theme.colors.background.secondary} 15px)`, width: '3px', height: 'inherit', marginBottom: theme.spacing(1), }, }), pagesContainer: css({ display: 'flex', padding: 0, flexDirection: 'column', }), page: css({ display: 'flex', margin: theme.spacing(2, 0), cursor: loading ? 'auto' : 'pointer', whiteSpace: 'normal', '.selectedBg': { background: theme.colors.primary.main, }, '.selectedText': { color: theme.colors.primary.main, }, }), line: css({ width: '3px', height: '100%', alignItems: 'center', background: theme.colors.text.secondary, }), time: css({ width: '60px', minHeight: '80px', fontSize: theme.v1.typography.size.sm, paddingLeft: theme.spacing(0.5), display: 'flex', alignItems: 'center', }), }; };