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

* move scan buttons up

* update test

public/app/features/explore/Logs.test.tsx

@@ -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');

public/app/features/explore/Logs.tsx

@@ -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>
       </>
     );