IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

revert visual change

Browse Source
This commit is contained in:
Gábor Farkas
2022-09-06 12:44:10 +02:00
parent be39da3af1
commit 7fda5c197f
2 changed files with 179 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

282
public/app/features/explore/Logs.tsx
View File

@@ -91,16 +91,6 @@ interface State {
forceEscape: boolean; forceEscape: boolean;
} }
// 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;
}
}
`;
class UnthemedLogs extends PureComponent<Props, State> { class UnthemedLogs extends PureComponent<Props, State> {
flipOrderTimer?: number; flipOrderTimer?: number;
cancelFlippingTimer?: number; cancelFlippingTimer?: number;
@@ -336,7 +326,7 @@ class UnthemedLogs extends PureComponent<Props, State> {
return ( return (
<> <>
<Collapse label="Logs volume" collapsible isOpen={logsVolumeEnabled} onToggle={onSetLogsVolumeEnabled}> <Collapse label="Volume" collapsible isOpen={logsVolumeEnabled} onToggle={onSetLogsVolumeEnabled}>
{logsVolumeEnabled && ( {logsVolumeEnabled && (
<LogsVolumePanel <LogsVolumePanel
absoluteRange={absoluteRange} absoluteRange={absoluteRange}
@@ -359,146 +349,144 @@ class UnthemedLogs extends PureComponent<Props, State> {
/> />
)} )}
</Collapse> </Collapse>
<Collapse label="Logs" loading={loading} isOpen className={styleOverridesForStickyNavigation}> <div className={styles.logOptions} ref={this.topLogsRef}>
<div className={styles.logOptions} ref={this.topLogsRef}> <InlineFieldRow>
<InlineFieldRow> <InlineField label="Time" className={styles.horizontalInlineLabel} transparent>
<InlineField label="Time" className={styles.horizontalInlineLabel} transparent> <InlineSwitch
<InlineSwitch value={showTime}
value={showTime} onChange={this.onChangeTime}
onChange={this.onChangeTime} className={styles.horizontalInlineSwitch}
className={styles.horizontalInlineSwitch} transparent
transparent id={`show-time_${exploreId}`}
id={`show-time_${exploreId}`}
/>
</InlineField>
<InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={showLabels}
onChange={this.onChangeLabels}
className={styles.horizontalInlineSwitch}
transparent
id={`unique-labels_${exploreId}`}
/>
</InlineField>
<InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={wrapLogMessage}
onChange={this.onChangeWrapLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id={`wrap-lines_${exploreId}`}
/>
</InlineField>
<InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={prettifyLogMessage}
onChange={this.onChangePrettifyLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id={`prettify_${exploreId}`}
/>
</InlineField>
<InlineField label="Dedup" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup
options={Object.values(LogsDedupStrategy).map((dedupType) => ({
label: capitalize(dedupType),
value: dedupType,
description: LogsDedupDescription[dedupType],
}))}
value={dedupStrategy}
onChange={this.onChangeDedup}
className={styles.radioButtons}
/>
</InlineField>
</InlineFieldRow>
<div>
<InlineField label="Display results" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup
disabled={isFlipping}
options={[
{
label: 'Newest first',
value: LogsSortOrder.Descending,
description: 'Show results newest to oldest',
},
{
label: 'Oldest first',
value: LogsSortOrder.Ascending,
description: 'Show results oldest to newest',
},
]}
value={logsSortOrder}
onChange={this.onChangeLogsSortOrder}
className={styles.radioButtons}
/>
</InlineField>
</div>
</div>
<LogsMetaRow
logRows={logRows}
meta={logsMeta || []}
dedupStrategy={dedupStrategy}
dedupCount={dedupCount}
hasUnescapedContent={hasUnescapedContent}
forceEscape={forceEscape}
showDetectedFields={showDetectedFields}
onEscapeNewlines={this.onEscapeNewlines}
clearDetectedFields={this.clearDetectedFields}
/>
<div className={styles.logsSection}>
<div className={styles.logRows} data-testid="logRows">
<LogRows
logRows={logRows}
deduplicatedRows={dedupedRows}
dedupStrategy={dedupStrategy}
getRowContext={this.props.getRowContext}
onClickFilterLabel={onClickFilterLabel}
onClickFilterOutLabel={onClickFilterOutLabel}
showContextToggle={showContextToggle}
showLabels={showLabels}
showTime={showTime}
enableLogDetails={true}
forceEscape={forceEscape}
wrapLogMessage={wrapLogMessage}
prettifyLogMessage={prettifyLogMessage}
timeZone={timeZone}
getFieldLinks={getFieldLinks}
logsSortOrder={logsSortOrder}
showDetectedFields={showDetectedFields}
onClickShowDetectedField={this.showDetectedField}
onClickHideDetectedField={this.hideDetectedField}
/> />
</div> </InlineField>
<LogsNavigation <InlineField label="Unique labels" className={styles.horizontalInlineLabel} transparent>
logsSortOrder={logsSortOrder} <InlineSwitch
visibleRange={navigationRange ?? absoluteRange} value={showLabels}
absoluteRange={absoluteRange} onChange={this.onChangeLabels}
className={styles.horizontalInlineSwitch}
transparent
id={`unique-labels_${exploreId}`}
/>
</InlineField>
<InlineField label="Wrap lines" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={wrapLogMessage}
onChange={this.onChangeWrapLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id={`wrap-lines_${exploreId}`}
/>
</InlineField>
<InlineField label="Prettify JSON" className={styles.horizontalInlineLabel} transparent>
<InlineSwitch
value={prettifyLogMessage}
onChange={this.onChangePrettifyLogMessage}
className={styles.horizontalInlineSwitch}
transparent
id={`prettify_${exploreId}`}
/>
</InlineField>
<InlineField label="Dedup" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup
options={Object.values(LogsDedupStrategy).map((dedupType) => ({
label: capitalize(dedupType),
value: dedupType,
description: LogsDedupDescription[dedupType],
}))}
value={dedupStrategy}
onChange={this.onChangeDedup}
className={styles.radioButtons}
/>
</InlineField>
</InlineFieldRow>
<div>
<InlineField label="Display results" className={styles.horizontalInlineLabel} transparent>
<RadioButtonGroup
disabled={isFlipping}
options={[
{
label: 'Newest first',
value: LogsSortOrder.Descending,
description: 'Show results newest to oldest',
},
{
label: 'Oldest first',
value: LogsSortOrder.Ascending,
description: 'Show results oldest to newest',
},
]}
value={logsSortOrder}
onChange={this.onChangeLogsSortOrder}
className={styles.radioButtons}
/>
</InlineField>
</div>
</div>
<LogsMetaRow
logRows={logRows}
meta={logsMeta || []}
dedupStrategy={dedupStrategy}
dedupCount={dedupCount}
hasUnescapedContent={hasUnescapedContent}
forceEscape={forceEscape}
showDetectedFields={showDetectedFields}
onEscapeNewlines={this.onEscapeNewlines}
clearDetectedFields={this.clearDetectedFields}
/>
<div className={styles.logsSection}>
<div className={styles.logRows} data-testid="logRows">
<LogRows
logRows={logRows}
deduplicatedRows={dedupedRows}
dedupStrategy={dedupStrategy}
getRowContext={this.props.getRowContext}
onClickFilterLabel={onClickFilterLabel}
onClickFilterOutLabel={onClickFilterOutLabel}
showContextToggle={showContextToggle}
showLabels={showLabels}
showTime={showTime}
enableLogDetails={true}
forceEscape={forceEscape}
wrapLogMessage={wrapLogMessage}
prettifyLogMessage={prettifyLogMessage}
timeZone={timeZone} timeZone={timeZone}
onChangeTime={onChangeTime} getFieldLinks={getFieldLinks}
loading={loading} logsSortOrder={logsSortOrder}
queries={logsQueries ?? []} showDetectedFields={showDetectedFields}
scrollToTopLogs={this.scrollToTopLogs} onClickShowDetectedField={this.showDetectedField}
addResultsToCache={addResultsToCache} onClickHideDetectedField={this.hideDetectedField}
clearCache={clearCache}
/> />
</div> </div>
{!loading && !hasData && !scanning && ( <LogsNavigation
<div className={styles.noData}> logsSortOrder={logsSortOrder}
No logs found. visibleRange={navigationRange ?? absoluteRange}
<Button size="xs" fill="text" onClick={this.onClickScan}> absoluteRange={absoluteRange}
Scan for older logs timeZone={timeZone}
</Button> onChangeTime={onChangeTime}
</div> loading={loading}
)} queries={logsQueries ?? []}
{scanning && ( scrollToTopLogs={this.scrollToTopLogs}
<div className={styles.noData}> addResultsToCache={addResultsToCache}
<span>{scanText}</span> clearCache={clearCache}
<Button size="xs" fill="text" onClick={this.onClickStopScan}> />
Stop scan </div>
</Button> {!loading && !hasData && !scanning && (
</div> <div className={styles.noData}>
)} No logs found.
</Collapse> <Button size="xs" fill="text" onClick={this.onClickScan}>
Scan for older logs
</Button>
</div>
)}
{scanning && (
<div className={styles.noData}>
<span>{scanText}</span>
<Button size="xs" fill="text" onClick={this.onClickStopScan}>
Stop scan
</Button>
</div>
)}
</> </>
); );
} }

75
public/app/features/explore/LogsContainer.tsx
View File

@@ -1,3 +1,4 @@
import { css } from '@emotion/css';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect, ConnectedProps } from 'react-redux'; import { connect, ConnectedProps } from 'react-redux';
@@ -103,6 +104,16 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
return null; 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 ( return (
<> <>
<LogsCrossFadeTransition visible={isLive}> <LogsCrossFadeTransition visible={isLive}>
@@ -122,37 +133,39 @@ class LogsContainer extends PureComponent<LogsContainerProps> {
</Collapse> </Collapse>
</LogsCrossFadeTransition> </LogsCrossFadeTransition>
<LogsCrossFadeTransition visible={!isLive}> <LogsCrossFadeTransition visible={!isLive}>
<Logs <Collapse label="Logs" loading={loading} isOpen className={styleOverridesForStickyNavigation}>
exploreId={exploreId} <Logs
datasourceType={this.props.datasourceInstance?.type} exploreId={exploreId}
logRows={logRows} datasourceType={this.props.datasourceInstance?.type}
logsMeta={logsMeta} logRows={logRows}
logsSeries={logsSeries} logsMeta={logsMeta}
logsVolumeEnabled={this.props.logsVolumeEnabled} logsSeries={logsSeries}
onSetLogsVolumeEnabled={(enabled) => this.props.setLogsVolumeEnabled(exploreId, enabled)} logsVolumeEnabled={this.props.logsVolumeEnabled}
logsVolumeData={logsVolumeData} onSetLogsVolumeEnabled={(enabled) => this.props.setLogsVolumeEnabled(exploreId, enabled)}
logsQueries={logsQueries} logsVolumeData={logsVolumeData}
width={width} logsQueries={logsQueries}
splitOpen={splitOpen} width={width}
loading={loading} splitOpen={splitOpen}
loadingState={loadingState} loading={loading}
loadLogsVolumeData={loadLogsVolumeData} loadingState={loadingState}
onChangeTime={this.onChangeTime} loadLogsVolumeData={loadLogsVolumeData}
onClickFilterLabel={onClickFilterLabel} onChangeTime={this.onChangeTime}
onClickFilterOutLabel={onClickFilterOutLabel} onClickFilterLabel={onClickFilterLabel}
onStartScanning={onStartScanning} onClickFilterOutLabel={onClickFilterOutLabel}
onStopScanning={onStopScanning} onStartScanning={onStartScanning}
absoluteRange={absoluteRange} onStopScanning={onStopScanning}
visibleRange={visibleRange} absoluteRange={absoluteRange}
timeZone={timeZone} visibleRange={visibleRange}
scanning={scanning} timeZone={timeZone}
scanRange={range.raw} scanning={scanning}
showContextToggle={this.showContextToggle} scanRange={range.raw}
getRowContext={this.getLogRowContext} showContextToggle={this.showContextToggle}
getFieldLinks={this.getFieldLinks} getRowContext={this.getLogRowContext}
addResultsToCache={() => addResultsToCache(exploreId)} getFieldLinks={this.getFieldLinks}
clearCache={() => clearCache(exploreId)} addResultsToCache={() => addResultsToCache(exploreId)}
/> clearCache={() => clearCache(exploreId)}
/>
</Collapse>
</LogsCrossFadeTransition> </LogsCrossFadeTransition>
</> </>
); );