Logs: Make no logs found text more visible in Explore (#61651)

* move scan buttons up

* update test
This commit is contained in:
Sven Grossmann 2023-01-18 09:52:18 +01:00 committed by GitHub
parent 872df59de5
commit a5d577eca1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 146 additions and 18 deletions

View File

@ -7,7 +7,7 @@ import { ExploreId } from 'app/types';
import { Logs } from './Logs';
describe('Logs', () => {
const setup = (propOverrides?: object) => {
const setup = (logs?: LogRowModel[]) => {
const rows = [
makeLog({ uid: '1', timeEpochMs: 1 }),
makeLog({ uid: '2', timeEpochMs: 2 }),
@ -24,7 +24,7 @@ describe('Logs', () => {
onClickFilterOutLabel={() => null}
logsVolumeData={undefined}
loadLogsVolumeData={() => undefined}
logRows={rows}
logRows={logs ?? rows}
timeZone={'utc'}
width={50}
loading={false}
@ -61,6 +61,134 @@ describe('Logs', () => {
expect(logRows[2].textContent).toContain('log message 1');
});
it('should render no logs found', () => {
setup([]);
expect(screen.getByText(/no logs found\./i)).toBeInTheDocument();
expect(
screen.getByRole('button', {
name: /scan for older logs/i,
})
).toBeInTheDocument();
});
it('should render a load more button', () => {
const scanningStarted = jest.fn();
render(
<Logs
exploreId={ExploreId.left}
splitOpen={() => undefined}
logsVolumeEnabled={true}
onSetLogsVolumeEnabled={() => null}
onClickFilterLabel={() => null}
onClickFilterOutLabel={() => null}
logsVolumeData={undefined}
loadLogsVolumeData={() => undefined}
logRows={[]}
onStartScanning={scanningStarted}
timeZone={'utc'}
width={50}
loading={false}
loadingState={LoadingState.Done}
absoluteRange={{
from: toUtc('2019-01-01 10:00:00').valueOf(),
to: toUtc('2019-01-01 16:00:00').valueOf(),
}}
addResultsToCache={() => {}}
onChangeTime={() => {}}
clearCache={() => {}}
getFieldLinks={() => {
return [];
}}
eventBus={new EventBusSrv()}
/>
);
const button = screen.getByRole('button', {
name: /scan for older logs/i,
});
button.click();
expect(scanningStarted).toHaveBeenCalled();
});
it('should render a stop scanning button', () => {
render(
<Logs
exploreId={ExploreId.left}
splitOpen={() => undefined}
logsVolumeEnabled={true}
onSetLogsVolumeEnabled={() => null}
onClickFilterLabel={() => null}
onClickFilterOutLabel={() => null}
logsVolumeData={undefined}
loadLogsVolumeData={() => undefined}
logRows={[]}
scanning={true}
timeZone={'utc'}
width={50}
loading={false}
loadingState={LoadingState.Done}
absoluteRange={{
from: toUtc('2019-01-01 10:00:00').valueOf(),
to: toUtc('2019-01-01 16:00:00').valueOf(),
}}
addResultsToCache={() => {}}
onChangeTime={() => {}}
clearCache={() => {}}
getFieldLinks={() => {
return [];
}}
eventBus={new EventBusSrv()}
/>
);
expect(
screen.getByRole('button', {
name: /stop scan/i,
})
).toBeInTheDocument();
});
it('should render a stop scanning button', () => {
const scanningStopped = jest.fn();
render(
<Logs
exploreId={ExploreId.left}
splitOpen={() => undefined}
logsVolumeEnabled={true}
onSetLogsVolumeEnabled={() => null}
onClickFilterLabel={() => null}
onClickFilterOutLabel={() => null}
logsVolumeData={undefined}
loadLogsVolumeData={() => undefined}
logRows={[]}
scanning={true}
onStopScanning={scanningStopped}
timeZone={'utc'}
width={50}
loading={false}
loadingState={LoadingState.Done}
absoluteRange={{
from: toUtc('2019-01-01 10:00:00').valueOf(),
to: toUtc('2019-01-01 16:00:00').valueOf(),
}}
addResultsToCache={() => {}}
onChangeTime={() => {}}
clearCache={() => {}}
getFieldLinks={() => {
return [];
}}
eventBus={new EventBusSrv()}
/>
);
const button = screen.getByRole('button', {
name: /stop scan/i,
});
button.click();
expect(scanningStopped).toHaveBeenCalled();
});
it('should flip the order', () => {
setup();
const oldestFirstSelection = screen.getByLabelText('Oldest first');

View File

@ -507,6 +507,22 @@ class UnthemedLogs extends PureComponent<Props, State> {
scrollElement={scrollElement}
onLogRowHover={this.onLogRowHover}
/>
{!loading && !hasData && !scanning && (
<div className={styles.noData}>
No logs found.
<Button size="sm" variant="secondary" onClick={this.onClickScan}>
Scan for older logs
</Button>
</div>
)}
{scanning && (
<div className={styles.noData}>
<span>{scanText}</span>
<Button size="sm" variant="secondary" onClick={this.onClickStopScan}>
Stop scan
</Button>
</div>
)}
</div>
<LogsNavigation
logsSortOrder={logsSortOrder}
@ -521,22 +537,6 @@ class UnthemedLogs extends PureComponent<Props, State> {
clearCache={clearCache}
/>
</div>
{!loading && !hasData && !scanning && (
<div className={styles.noData}>
No logs found.
<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>
)}
</Collapse>
</>
);