diff --git a/public/app/core/logs_model.ts b/public/app/core/logs_model.ts index 2485dbda40a..a65669c088d 100644 --- a/public/app/core/logs_model.ts +++ b/public/app/core/logs_model.ts @@ -35,19 +35,26 @@ export interface LogRow { duplicates?: number; entry: string; key: string; // timestamp + labels - labels: string; + labels: LogsStreamLabels; logLevel: LogLevel; searchWords?: string[]; timestamp: string; // ISO with nanosec precision timeFromNow: string; timeEpochMs: number; timeLocal: string; - uniqueLabels?: string; + uniqueLabels?: LogsStreamLabels; +} + +export enum LogsMetaKind { + Number, + String, + LabelsMap, } export interface LogsMetaItem { label: string; - value: string; + value: string | number | LogsStreamLabels; + kind: LogsMetaKind; } export interface LogsModel { @@ -61,7 +68,7 @@ export interface LogsStream { entries: LogsStreamEntry[]; search?: string; parsedLabels?: LogsStreamLabels; - uniqueLabels?: string; + uniqueLabels?: LogsStreamLabels; } export interface LogsStreamEntry { diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 44380877c34..317017ae072 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -429,8 +429,8 @@ export class Explore extends React.PureComponent { ); }; - onClickTableCell = (columnKey: string, rowValue: string) => { - this.onModifyQueries({ type: 'ADD_FILTER', key: columnKey, value: rowValue }); + onClickLabel = (key: string, value: string) => { + this.onModifyQueries({ type: 'ADD_FILTER', key, value }); }; onModifyQueries = (action, index?: number) => { @@ -931,7 +931,7 @@ export class Explore extends React.PureComponent { isOpen={showingTable} onToggle={this.onClickTableButton} > - +
)} {supportsLogs && ( @@ -941,6 +941,7 @@ export class Explore extends React.PureComponent { loading={logsLoading} position={position} onChangeTime={this.onChangeTime} + onClickLabel={this.onClickLabel} onStartScanning={this.onStartScanning} onStopScanning={this.onStopScanning} range={range} diff --git a/public/app/features/explore/Logs.tsx b/public/app/features/explore/Logs.tsx index 58965df4514..2c78d9782b9 100644 --- a/public/app/features/explore/Logs.tsx +++ b/public/app/features/explore/Logs.tsx @@ -1,9 +1,18 @@ +import _ from 'lodash'; import React, { Fragment, PureComponent } from 'react'; import Highlighter from 'react-highlight-words'; import * as rangeUtil from 'app/core/utils/rangeutil'; import { RawTimeRange } from 'app/types/series'; -import { LogsDedupStrategy, LogsModel, dedupLogRows, filterLogLevels, LogLevel } from 'app/core/logs_model'; +import { + LogsDedupStrategy, + LogsModel, + dedupLogRows, + filterLogLevels, + LogLevel, + LogsStreamLabels, + LogsMetaKind, +} from 'app/core/logs_model'; import { findHighlightChunksInText } from 'app/core/utils/text'; import { Switch } from 'app/core/components/Switch/Switch'; @@ -23,6 +32,51 @@ const graphOptions = { }, }; +function renderMetaItem(value: any, kind: LogsMetaKind) { + if (kind === LogsMetaKind.LabelsMap) { + return ( + + + + ); + } + return value; +} + +class Label extends PureComponent<{ + label: string; + value: string; + onClickLabel?: (label: string, value: string) => void; +}> { + onClickLabel = () => { + const { onClickLabel, label, value } = this.props; + if (onClickLabel) { + onClickLabel(label, value); + } + }; + + render() { + const { label, value } = this.props; + const tooltip = `${label}: ${value}`; + return ( + + {value} + + ); + } +} +class Labels extends PureComponent<{ + labels: LogsStreamLabels; + onClickLabel?: (label: string, value: string) => void; +}> { + render() { + const { labels, onClickLabel } = this.props; + return Object.keys(labels).map(key => ( +