public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Explore: Unified Logs Volume and Logs panels (#73825)

Browse Source 
Wrap Logs Volume and Logs panels with PanelChrome instead of Collapse
This commit is contained in:
Haris Rozajac
2023-08-30 12:20:43 +02:00
committed by GitHub
parent f900098cc9
commit 2cf4f641f2
1 changed files with 116 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/explore/Logs/Logs.tsx
+116 -112
View File
@@ -41,7 +41,7 @@ import {
InlineSwitch, InlineSwitch,
withTheme2, withTheme2,
Themeable2, Themeable2,
Collapse, PanelChrome,
} from '@grafana/ui'; } from '@grafana/ui';
import store from 'app/core/store'; import store from 'app/core/store';
import { createAndCopyShortLink } from 'app/core/utils/shortLinks'; import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@@ -121,16 +121,6 @@ interface State {
} }
const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer; const scrollableLogsContainer = config.featureToggles.exploreScrollableLogsContainer;
// We need to override css overflow of divs in Collapse element to enable sticky Logs navigation
const styleOverridesForStickyNavigation = css`
${scrollableLogsContainer && 'margin-bottom: 0px'};
& > div {
overflow: visible;
& > div {
overflow: visible;
}
}
`;
// we need to define the order of these explicitly // we need to define the order of these explicitly
const DEDUP_OPTIONS = [ const DEDUP_OPTIONS = [
@@ -292,11 +282,11 @@ class UnthemedLogs extends PureComponent<Props, State> {
this.setState({ hiddenLogLevels }); this.setState({ hiddenLogLevels });
}; };
onToggleLogsVolumeCollapse = (isOpen: boolean) => { onToggleLogsVolumeCollapse = (collapsed: boolean) => {
this.props.onSetLogsVolumeEnabled(isOpen); this.props.onSetLogsVolumeEnabled(!collapsed);
reportInteraction('grafana_explore_logs_histogram_toggle_clicked', { reportInteraction('grafana_explore_logs_histogram_toggle_clicked', {
datasourceType: this.props.datasourceType, datasourceType: this.props.datasourceType,
type: isOpen ? 'open' : 'close', type: !collapsed ? 'open' : 'close',
}); });
}; };
@@ -540,7 +530,12 @@ class UnthemedLogs extends PureComponent<Props, State> {
timeZone={timeZone} timeZone={timeZone}
/> />
)} )}
<Collapse label="Logs volume" collapsible isOpen={logsVolumeEnabled} onToggle={this.onToggleLogsVolumeCollapse}> <PanelChrome
title="Logs volume"
collapsible
collapsed={!logsVolumeEnabled}
onToggleCollapse={this.onToggleLogsVolumeCollapse}
>
{logsVolumeEnabled && ( {logsVolumeEnabled && (
<LogsVolumePanelList <LogsVolumePanelList
absoluteRange={absoluteRange} absoluteRange={absoluteRange}
@@ -552,16 +547,22 @@ class UnthemedLogs extends PureComponent<Props, State> {
onLoadLogsVolume={loadLogsVolumeData} onLoadLogsVolume={loadLogsVolumeData}
onHiddenSeriesChanged={this.onToggleLogLevel} onHiddenSeriesChanged={this.onToggleLogLevel}
eventBus={this.logsVolumeEventBus} eventBus={this.logsVolumeEventBus}
onClose={() => this.onToggleLogsVolumeCollapse(false)} onClose={() => this.onToggleLogsVolumeCollapse(true)}
/> />
)} )}
</Collapse> </PanelChrome>
<Collapse <PanelChrome
label={ title={
config.featureToggles.logsExploreTableVisualisation
? this.state.visualisationType === 'logs'
? 'Logs'
: 'Table'
: 'Logs'
}
actions={
<> <>
{config.featureToggles.logsExploreTableVisualisation && ( {config.featureToggles.logsExploreTableVisualisation && (
<div className={styles.visualisationType}> <div className={styles.visualisationType}>
{this.state.visualisationType === 'logs' ? 'Logs' : 'Table'}
<RadioButtonGroup <RadioButtonGroup
className={styles.visualisationTypeRadio} className={styles.visualisationTypeRadio}
options={[ options={[
@@ -582,102 +583,101 @@ class UnthemedLogs extends PureComponent<Props, State> {
/> />
</div> </div>
)} )}
{!config.featureToggles.logsExploreTableVisualisation && 'Logs'}
</> </>
} }
loading={loading} loadingState={loading ? LoadingState.Loading : LoadingState.Done}
isOpen
className={styleOverridesForStickyNavigation}
> >
{this.state.visualisationType !== 'table' && ( <div className={styles.stickyNavigation}>
<div className={styles.logOptions}> {this.state.visualisationType !== 'table' && (
<InlineFieldRow> <div className={styles.logOptions}>
<InlineField label="Time" className={styles.horizontalInlineLabel} transparent> <InlineFieldRow>
<InlineSwitch <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
value={showTime} <InlineSwitch
onChange={this.onChangeTime} value={showTime}
className={styles.horizontalInlineSwitch} onChange={this.onChangeTime}
transparent className={styles.horizontalInlineSwitch}
id={`show-time_${exploreId}`} transparent
/> id={`show-time_${exploreId}`}
</InlineField> />
<InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent> </InlineField>
<InlineSwitch <InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
value={showLabels} <InlineSwitch
onChange={this.onChangeLabels} value={showLabels}
className={styles.horizontalInlineSwitch} onChange={this.onChangeLabels}
transparent className={styles.horizontalInlineSwitch}
id={`unique-labels_${exploreId}`} transparent
/> id={`unique-labels_${exploreId}`}
</InlineField> />
<InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent> </InlineField>
<InlineSwitch <InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
value={wrapLogMessage} <InlineSwitch
onChange={this.onChangeWrapLogMessage} value={wrapLogMessage}
className={styles.horizontalInlineSwitch} onChange={this.onChangeWrapLogMessage}
transparent className={styles.horizontalInlineSwitch}
id={`wrap-lines_${exploreId}`} transparent
/> id={`wrap-lines_${exploreId}`}
</InlineField> />
<InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent> </InlineField>
<InlineSwitch <InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
value={prettifyLogMessage} <InlineSwitch
onChange={this.onChangePrettifyLogMessage} value={prettifyLogMessage}
className={styles.horizontalInlineSwitch} onChange={this.onChangePrettifyLogMessage}
transparent className={styles.horizontalInlineSwitch}
id={`prettify_${exploreId}`} transparent
/> id={`prettify_${exploreId}`}
</InlineField> />
<InlineField label="Deduplication" className={styles.horizontalInlineLabel} transparent> </InlineField>
<RadioButtonGroup <InlineField label="Deduplication" className={styles.horizontalInlineLabel} transparent>
options={DEDUP_OPTIONS.map((dedupType) => ({ <RadioButtonGroup
label: capitalize(dedupType), options={DEDUP_OPTIONS.map((dedupType) => ({
value: dedupType, label: capitalize(dedupType),
description: LogsDedupDescription[dedupType], value: dedupType,
}))} description: LogsDedupDescription[dedupType],
value={dedupStrategy} }))}
onChange={this.onChangeDedup} value={dedupStrategy}
className={styles.radioButtons} onChange={this.onChangeDedup}
/> className={styles.radioButtons}
</InlineField> />
</InlineFieldRow> </InlineField>
</InlineFieldRow>
<div> <div>
<InlineField label="Display results" className={styles.horizontalInlineLabel} transparent> <InlineField label="Display results" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup <RadioButtonGroup
disabled={isFlipping} disabled={isFlipping}
options={[ options={[
{ {
label: 'Newest first', label: 'Newest first',
value: LogsSortOrder.Descending, value: LogsSortOrder.Descending,
description: 'Show results newest to oldest', description: 'Show results newest to oldest',
}, },
{ {
label: 'Oldest first', label: 'Oldest first',
value: LogsSortOrder.Ascending, value: LogsSortOrder.Ascending,
description: 'Show results oldest to newest', description: 'Show results oldest to newest',
}, },
]} ]}
value={logsSortOrder} value={logsSortOrder}
onChange={this.onChangeLogsSortOrder} onChange={this.onChangeLogsSortOrder}
className={styles.radioButtons} className={styles.radioButtons}
/> />
</InlineField> </InlineField>
</div>
</div> </div>
</div> )}
)} <div ref={this.topLogsRef} />
<div ref={this.topLogsRef} /> <LogsMetaRow
<LogsMetaRow logRows={logRows}
logRows={logRows} meta={logsMeta || []}
meta={logsMeta || []} dedupStrategy={dedupStrategy}
dedupStrategy={dedupStrategy} dedupCount={dedupCount}
dedupCount={dedupCount} hasUnescapedContent={hasUnescapedContent}
hasUnescapedContent={hasUnescapedContent} forceEscape={forceEscape}
forceEscape={forceEscape} displayedFields={displayedFields}
displayedFields={displayedFields} onEscapeNewlines={this.onEscapeNewlines}
onEscapeNewlines={this.onEscapeNewlines} clearDetectedFields={this.clearDetectedFields}
clearDetectedFields={this.clearDetectedFields} />
/> </div>
<div className={styles.logsSection}> <div className={styles.logsSection}>
{this.state.visualisationType === 'table' && hasData && ( {this.state.visualisationType === 'table' && hasData && (
<div className={styles.logRows} data-testid="logRowsTable"> <div className={styles.logRows} data-testid="logRowsTable">
@@ -757,7 +757,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
clearCache={clearCache} clearCache={clearCache}
/> />
</div> </div>
</Collapse> </PanelChrome>
</> </>
); );
} }
@@ -816,5 +816,9 @@ const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean) => {
visualisationTypeRadio: css` visualisationTypeRadio: css`
margin: 0 0 0 ${theme.spacing(1)}; margin: 0 0 0 ${theme.spacing(1)};
`, `,
stickyNavigation: css`
${scrollableLogsContainer && 'margin-bottom: 0px'}
overflow: visible;
`,
}; };
}; };