apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues 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
pull/72747/head
Haris Rozajac 2 years ago committed by GitHub
parent f900098cc9
commit 2cf4f641f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 117 additions and 113 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 230
      public/app/features/explore/Logs/Logs.tsx

230
public/app/features/explore/Logs/Logs.tsx
Unescape 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>
<InlineField label="Display results" className={styles.horizontalInlineLabel} transparent> <div>
<RadioButtonGroup <InlineField label="Display results" className={styles.horizontalInlineLabel} transparent>
disabled={isFlipping} <RadioButtonGroup
options={[ disabled={isFlipping}
{ options={[
label: 'Newest first', {
value: LogsSortOrder.Descending, label: 'Newest first',
description: 'Show results newest to oldest', value: LogsSortOrder.Descending,
}, description: 'Show results newest to oldest',
{ },
label: 'Oldest first', {
value: LogsSortOrder.Ascending, label: 'Oldest first',
description: 'Show results oldest to newest', value: LogsSortOrder.Ascending,
}, description: 'Show results oldest to newest',
]} },
value={logsSortOrder} ]}
onChange={this.onChangeLogsSortOrder} value={logsSortOrder}
className={styles.radioButtons} onChange={this.onChangeLogsSortOrder}
/> 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;
`,
}; };
}; };

Write Preview
Loading…
Cancel
Save