Logs panel: Set default scrolling for ascending order to bottom (#37634)

* LogsPanel: When ascending order, scroll to bottom

* Add tests

* Refactor style

* Update scroll position when logs change

public/app/plugins/panel/logs/LogsPanel.test.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentProps } from 'react';
 import { render, screen } from '@testing-library/react';
-import { LoadingState, MutableDataFrame, FieldType } from '@grafana/data';
+import { LoadingState, MutableDataFrame, FieldType, LogsSortOrder } from '@grafana/data';
 import { LogsPanel } from './LogsPanel';
 
 type LogsPanelProps = ComponentProps<typeof LogsPanel>;
@@ -38,6 +38,22 @@ describe('LogsPanel', () => {
       expect(screen.getByText(/common_app/i)).toBeInTheDocument();
       expect(screen.getByText(/common_job/i)).toBeInTheDocument();
     });
+    it('shows common labels on top when descending sort order', () => {
+      const { container } = setup({
+        data: { series: seriesWithCommonLabels },
+        options: { showCommonLabels: true, sortOrder: LogsSortOrder.Descending },
+      });
+
+      expect(container.firstChild?.childNodes[0].textContent).toMatch(/^Common labels:common_appcommon_job/);
+    });
+    it('shows common labels on bottom when ascending sort order', () => {
+      const { container } = setup({
+        data: { series: seriesWithCommonLabels },
+        options: { showCommonLabels: true, sortOrder: LogsSortOrder.Ascending },
+      });
+
+      expect(container.firstChild?.childNodes[0].textContent).toMatch(/Common labels:common_appcommon_job$/);
+    });
     it('does not show common labels when showCommonLabels is set to false', () => {
       setup({ data: { series: seriesWithCommonLabels }, options: { showCommonLabels: false } });
 

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef, useLayoutEffect, useState } from 'react';
 import { css } from '@emotion/css';
 import { LogRows, CustomScrollbar, LogLabels, useStyles2 } from '@grafana/ui';
-import { PanelProps, Field, Labels, GrafanaTheme2 } from '@grafana/data';
+import { PanelProps, Field, Labels, GrafanaTheme2, LogsSortOrder } from '@grafana/data';
 import { Options } from './types';
 import { dataFrameToLogsModel, dedupLogRows } from 'app/core/logs_model';
 import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
@@ -24,7 +24,10 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
   },
   title,
 }) => {
-  const style = useStyles2(getStyles(title));
+  const isAscending = sortOrder === LogsSortOrder.Ascending;
+  const style = useStyles2(getStyles(title, isAscending));
+  const [scrollTop, setScrollTop] = useState(0);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
 
   // Important to memoize stuff here, as panel rerenders a lot for example when resizing.
   const [logRows, deduplicatedRows, commonLabels] = useMemo(() => {
@@ -35,6 +38,14 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
     return [logRows, deduplicatedRows, commonLabels];
   }, [data, dedupStrategy]);
 
+  useLayoutEffect(() => {
+    if (isAscending && logsContainerRef.current) {
+      setScrollTop(logsContainerRef.current.offsetHeight);
+    } else {
+      setScrollTop(0);
+    }
+  }, [isAscending, logRows]);
+
   const getFieldLinks = useCallback(
     (field: Field, rowIndex: number) => {
       return getFieldLinksForExplore({ field, rowIndex, range: data.timeRange });
@@ -50,15 +61,17 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
     );
   }
 
-  return (
-    <CustomScrollbar autoHide>
-      <div className={style.container}>
-        {showCommonLabels && (
+  const renderCommonLabels = () => (
     <div className={style.labelContainer}>
       <span className={style.label}>Common labels:</span>
       <LogLabels labels={commonLabels ? (commonLabels.value as Labels) : { labels: '(no common labels)' }} />
     </div>
-        )}
+  );
+
+  return (
+    <CustomScrollbar autoHide scrollTop={scrollTop}>
+      <div className={style.container} ref={logsContainerRef}>
+        {showCommonLabels && !isAscending && renderCommonLabels()}
         <LogRows
           logRows={logRows}
           deduplicatedRows={deduplicatedRows}
@@ -71,20 +84,22 @@ export const LogsPanel: React.FunctionComponent<LogsPanelProps> = ({
           getFieldLinks={getFieldLinks}
           logsSortOrder={sortOrder}
           enableLogDetails={enableLogDetails}
+          previewLimit={isAscending ? logRows.length : undefined}
         />
+        {showCommonLabels && isAscending && renderCommonLabels()}
       </div>
     </CustomScrollbar>
   );
 };
 
-const getStyles = (title: string) => (theme: GrafanaTheme2) => ({
+const getStyles = (title: string, isAscending: boolean) => (theme: GrafanaTheme2) => ({
   container: css`
     margin-bottom: ${theme.spacing(1.5)};
     //We can remove this hot-fix when we fix panel menu with no title overflowing top of all panels
     margin-top: ${theme.spacing(!title ? 2.5 : 0)};
   `,
   labelContainer: css`
-    margin: ${theme.spacing(0, 0, 0.5, 0.5)};
+    margin: ${isAscending ? theme.spacing(0.5, 0, 0.5, 0) : theme.spacing(0, 0, 0.5, 0.5)};
     display: flex;
     align-items: center;
   `,