Explore: fix logs no results and scanning states (#98605)

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

@@ -968,13 +968,13 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
               />
             </div>
           )}
-          {visualisationType === 'logs' && (
+          {visualisationType === 'logs' && hasData && (
-            <div
+            <>
-              className={config.featureToggles.logsInfiniteScrolling ? styles.scrollableLogRows : styles.logRows}
+              <div
-              data-testid="logRows"
+                className={config.featureToggles.logsInfiniteScrolling ? styles.scrollableLogRows : styles.logRows}
-              ref={logsContainerRef}
+                data-testid="logRows"
-            >
+                ref={logsContainerRef}
-              {hasData && (
+              >
                 <InfiniteScroll
                   loading={loading}
                   loadMoreLogs={infiniteScrollAvailable ? loadMoreLogs : undefined}
@@ -1022,41 +1022,41 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
                     renderPreview
                   />
                 </InfiniteScroll>
-              )}
+              </div>
-            </div>
+              <LogsNavigation
+                logsSortOrder={logsSortOrder}
+                visibleRange={navigationRange ?? absoluteRange}
+                absoluteRange={absoluteRange}
+                timeZone={timeZone}
+                onChangeTime={onChangeTime}
+                loading={loading}
+                queries={logsQueries ?? []}
+                scrollToTopLogs={scrollToTopLogs}
+                addResultsToCache={addResultsToCache}
+                clearCache={clearCache}
+              />
+            </>
           )}
           {!loading && !hasData && !scanning && (
-            <div className={styles.logRows}>
+            <div className={styles.noDataWrapper}>
               <div className={styles.noData}>
                 <Trans i18nKey="explore.logs.no-logs-found">No logs found.</Trans>
-                <Button size="sm" variant="secondary" onClick={onClickScan}>
+                <Button size="sm" variant="secondary" className={styles.scanButton} onClick={onClickScan}>
                   <Trans i18nKey="explore.logs.scan-for-older-logs">Scan for older logs</Trans>
                 </Button>
               </div>
             </div>
           )}
           {scanning && (
-            <div className={styles.logRows}>
+            <div className={styles.noDataWrapper}>
               <div className={styles.noData}>
                 <span>{scanText}</span>
-                <Button size="sm" variant="secondary" onClick={onClickStopScan}>
+                <Button size="sm" variant="secondary" className={styles.scanButton} onClick={onClickStopScan}>
                   <Trans i18nKey="explore.logs.stop-scan">Stop scan</Trans>
                 </Button>
               </div>
             </div>
           )}
-          <LogsNavigation
-            logsSortOrder={logsSortOrder}
-            visibleRange={navigationRange ?? absoluteRange}
-            absoluteRange={absoluteRange}
-            timeZone={timeZone}
-            onChangeTime={onChangeTime}
-            loading={loading}
-            queries={logsQueries ?? []}
-            scrollToTopLogs={scrollToTopLogs}
-            addResultsToCache={addResultsToCache}
-            clearCache={clearCache}
-          />
         </div>
       </PanelChrome>
     </>
@@ -1067,10 +1067,17 @@ export const Logs = withTheme2(UnthemedLogs);
 
 const getStyles = (theme: GrafanaTheme2, wrapLogMessage: boolean, tableHeight: number) => {
   return {
+    noDataWrapper: css({
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      paddingBottom: theme.spacing(2),
+    }),
     noData: css({
-      '& > *': {
+      display: 'inline-block',
-        marginLeft: '0.5em',
+    }),
-      },
+    scanButton: css({
+      marginLeft: theme.spacing(1),
     }),
     logOptions: css({
       display: 'flex',

public/app/features/explore/state/query.test.ts

@@ -323,7 +323,7 @@ describe('running queries', () => {
       cleanSupplementaryQueryAction({ exploreId, type: SupplementaryQueryType.LogsSample }),
     ]);
   });
-  it('should cancel running query when a new query is issued', async () => {
+  it('should cancel running queries when a new query is issued', async () => {
     const initialState = {
       ...makeExplorePaneState(),
     };
@@ -333,6 +333,23 @@ describe('running queries', () => {
 
     expect(dispatchedActions).toContainEqual(cancelQueriesAction({ exploreId }));
   });
+  it('should not cancel running queries when scanning', async () => {
+    const initialState = {
+      ...makeExplorePaneState(),
+      explore: {
+        panes: {
+          [exploreId]: {
+            scanning: true,
+          },
+        },
+      },
+    };
+    const dispatchedActions = await thunkTester(initialState)
+      .givenThunk(runQueries)
+      .whenThunkIsDispatched({ exploreId });
+
+    expect(dispatchedActions).not.toContainEqual(cancelQueriesAction({ exploreId }));
+  });
 });
 
 describe('changeQueries', () => {

public/app/features/explore/state/query.ts

@@ -528,7 +528,10 @@ interface RunQueriesOptions {
 export const runQueries = createAsyncThunk<void, RunQueriesOptions>(
   'explore/runQueries',
   async ({ exploreId, preserveCache }, { dispatch, getState }) => {
-    dispatch(cancelQueries(exploreId));
+    // Running cancel queries when Explore is scanning will cancel the scanning state
+    if (!getState().explore?.panes[exploreId]?.scanning) {
+      dispatch(cancelQueries(exploreId));
+    }
 
     const { defaultCorrelationEditorDatasource, scopedVars, showCorrelationEditorLinks } = await getCorrelationsData(
       getState(),
@@ -658,11 +661,12 @@ export const runQueries = createAsyncThunk<void, RunQueriesOptions>(
 
           // Keep scanning for results if this was the last scanning transaction
           if (exploreState!.scanning) {
+            console.log(data.series);
             if (data.state === LoadingState.Done && data.series.length === 0) {
               const range = getShiftedTimeRange(-1, exploreState!.range);
               dispatch(updateTime({ exploreId, absoluteRange: range }));
               dispatch(runQueries({ exploreId }));
-            } else {
+            } else if (data.series[0]?.length > 0 || data.state === LoadingState.Done) {
               // We can stop scanning if we have a result
               dispatch(scanStopAction({ exploreId }));
             }