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}
                 data-testid="logRows"
                 ref={logsContainerRef}
               >
-              {hasData && (
                 <InfiniteScroll
                   loading={loading}
                   loadMoreLogs={infiniteScrollAvailable ? loadMoreLogs : undefined}
@@ -1022,29 +1022,7 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
                     renderPreview
                   />
                 </InfiniteScroll>
-              )}
               </div>
-          )}
-          {!loading && !hasData && !scanning && (
-            <div className={styles.logRows}>
-              <div className={styles.noData}>
-                <Trans i18nKey="explore.logs.no-logs-found">No logs found.</Trans>
-                <Button size="sm" variant="secondary" 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.noData}>
-                <span>{scanText}</span>
-                <Button size="sm" variant="secondary" onClick={onClickStopScan}>
-                  <Trans i18nKey="explore.logs.stop-scan">Stop scan</Trans>
-                </Button>
-              </div>
-            </div>
-          )}
               <LogsNavigation
                 logsSortOrder={logsSortOrder}
                 visibleRange={navigationRange ?? absoluteRange}
@@ -1057,6 +1035,28 @@ const UnthemedLogs: React.FunctionComponent<Props> = (props: Props) => {
                 addResultsToCache={addResultsToCache}
                 clearCache={clearCache}
               />
+            </>
+          )}
+          {!loading && !hasData && !scanning && (
+            <div className={styles.noDataWrapper}>
+              <div className={styles.noData}>
+                <Trans i18nKey="explore.logs.no-logs-found">No logs found.</Trans>
+                <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.noDataWrapper}>
+              <div className={styles.noData}>
+                <span>{scanText}</span>
+                <Button size="sm" variant="secondary" className={styles.scanButton} onClick={onClickStopScan}>
+                  <Trans i18nKey="explore.logs.stop-scan">Stop scan</Trans>
+                </Button>
+              </div>
+            </div>
+          )}
         </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 }) => {
+    // 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 }));
             }