123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214 |
- import { css } from '@emotion/css';
- import React, { PureComponent } from 'react';
- import { connect, ConnectedProps } from 'react-redux';
- import {
- AbsoluteTimeRange,
- Field,
- hasLogsContextSupport,
- LoadingState,
- LogRowModel,
- RawTimeRange,
- } from '@grafana/data';
- import { Collapse } from '@grafana/ui';
- import { StoreState } from 'app/types';
- import { ExploreId, ExploreItemState } from 'app/types/explore';
- import { getTimeZone } from '../profile/state/selectors';
- import { LiveLogsWithTheme } from './LiveLogs';
- import { Logs } from './Logs';
- import { splitOpen } from './state/main';
- import { addResultsToCache, clearCache } from './state/query';
- import { updateTimeRange } from './state/time';
- import { LiveTailControls } from './useLiveTailControls';
- import { LogsCrossFadeTransition } from './utils/LogsCrossFadeTransition';
- import { getFieldLinksForExplore } from './utils/links';
- interface LogsContainerProps extends PropsFromRedux {
- width: number;
- exploreId: ExploreId;
- scanRange?: RawTimeRange;
- syncedTimes: boolean;
- loadingState: LoadingState;
- onClickFilterLabel?: (key: string, value: string) => void;
- onClickFilterOutLabel?: (key: string, value: string) => void;
- onStartScanning: () => void;
- onStopScanning: () => void;
- }
- class LogsContainer extends PureComponent<LogsContainerProps> {
- onChangeTime = (absoluteRange: AbsoluteTimeRange) => {
- const { exploreId, updateTimeRange } = this.props;
- updateTimeRange({ exploreId, absoluteRange });
- };
- getLogRowContext = async (row: LogRowModel, options?: any): Promise<any> => {
- const { datasourceInstance, logsQueries } = this.props;
- if (hasLogsContextSupport(datasourceInstance)) {
- // we need to find the query, and we need to be very sure that
- // it's a query from this datasource
- const query = (logsQueries ?? []).find(
- (q) => q.refId === row.dataFrame.refId && q.datasource != null && q.datasource.type === datasourceInstance.type
- );
- return datasourceInstance.getLogRowContext(row, options, query);
- }
- return [];
- };
- showContextToggle = (row?: LogRowModel): boolean => {
- const { datasourceInstance } = this.props;
- if (hasLogsContextSupport(datasourceInstance)) {
- return datasourceInstance.showContextToggle(row);
- }
- return false;
- };
- getFieldLinks = (field: Field, rowIndex: number) => {
- const { splitOpen: splitOpenFn, range } = this.props;
- return getFieldLinksForExplore({ field, rowIndex, splitOpenFn, range });
- };
- render() {
- const {
- loading,
- loadingState,
- logRows,
- logsMeta,
- logsSeries,
- logsQueries,
- onClickFilterLabel,
- onClickFilterOutLabel,
- onStartScanning,
- onStopScanning,
- absoluteRange,
- timeZone,
- visibleRange,
- scanning,
- range,
- width,
- isLive,
- exploreId,
- addResultsToCache,
- clearCache,
- } = this.props;
- if (!logRows) {
- return null;
- }
- // We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
- const styleOverridesForStickyNavigation = css`
- & > div {
- overflow: visible;
- & > div {
- overflow: visible;
- }
- }
- `;
- return (
- <>
- <LogsCrossFadeTransition visible={isLive}>
- <Collapse label="Logs" loading={false} isOpen>
- <LiveTailControls exploreId={exploreId}>
- {(controls) => (
- <LiveLogsWithTheme
- logRows={logRows}
- timeZone={timeZone}
- stopLive={controls.stop}
- isPaused={this.props.isPaused}
- onPause={controls.pause}
- onResume={controls.resume}
- />
- )}
- </LiveTailControls>
- </Collapse>
- </LogsCrossFadeTransition>
- <LogsCrossFadeTransition visible={!isLive}>
- <Collapse label="Logs" loading={loading} isOpen className={styleOverridesForStickyNavigation}>
- <Logs
- exploreId={exploreId}
- datasourceType={this.props.datasourceInstance?.type}
- logRows={logRows}
- logsMeta={logsMeta}
- logsSeries={logsSeries}
- logsQueries={logsQueries}
- width={width}
- loading={loading}
- loadingState={loadingState}
- onChangeTime={this.onChangeTime}
- onClickFilterLabel={onClickFilterLabel}
- onClickFilterOutLabel={onClickFilterOutLabel}
- onStartScanning={onStartScanning}
- onStopScanning={onStopScanning}
- absoluteRange={absoluteRange}
- visibleRange={visibleRange}
- timeZone={timeZone}
- scanning={scanning}
- scanRange={range.raw}
- showContextToggle={this.showContextToggle}
- getRowContext={this.getLogRowContext}
- getFieldLinks={this.getFieldLinks}
- addResultsToCache={() => addResultsToCache(exploreId)}
- clearCache={() => clearCache(exploreId)}
- />
- </Collapse>
- </LogsCrossFadeTransition>
- </>
- );
- }
- }
- function mapStateToProps(state: StoreState, { exploreId }: { exploreId: string }) {
- const explore = state.explore;
- // @ts-ignore
- const item: ExploreItemState = explore[exploreId];
- const {
- logsResult,
- loading,
- scanning,
- datasourceInstance,
- isLive,
- isPaused,
- range,
- absoluteRange,
- logsVolumeDataProvider,
- logsVolumeData,
- } = item;
- const timeZone = getTimeZone(state.user);
- return {
- loading,
- logRows: logsResult?.rows,
- logsMeta: logsResult?.meta,
- logsSeries: logsResult?.series,
- logsQueries: logsResult?.queries,
- visibleRange: logsResult?.visibleRange,
- scanning,
- timeZone,
- datasourceInstance,
- isLive,
- isPaused,
- range,
- absoluteRange,
- logsVolumeDataProvider,
- logsVolumeData,
- };
- }
- const mapDispatchToProps = {
- updateTimeRange,
- splitOpen,
- addResultsToCache,
- clearCache,
- };
- const connector = connect(mapStateToProps, mapDispatchToProps);
- type PropsFromRedux = ConnectedProps<typeof connector>;
- export default connector(LogsContainer);
|