feat(log-autoscroll): add scrolling to the end of the page

Author: Aleh Yablonski

src/ui/components/layouts/Page/Page.tsx

@@ -9,11 +9,12 @@ interface PageProps {
     children: React.ReactNode;
     header?: string | React.ReactNode;
     className?: string;
+    id?: string;
 }
 
-export const Page = ({children, header, className}: PageProps) => {
+export const Page = ({children, header, className, id}: PageProps) => {
     return (
-        <Flex direction="column" gap={4} className={classNames(styles.page, className)}>
+        <Flex direction="column" gap={4} className={classNames(styles.page, className)} id={id}>
             {header && <Text variant="header-1">{header}</Text>}
             {children}
         </Flex>

src/ui/containers/Instance/pages/BuildLogs/BuildLogs.module.scss

@@ -19,3 +19,10 @@
 .output {
     margin: 0;
 }
+
+.scrollToUpButton {
+    position: fixed;
+    bottom: 60px;
+    right: var(--g-spacing-4);
+    color: var(--g-color-text-misc);
+}

src/ui/containers/Instance/pages/BuildLogs/BuildLogs.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
 import {idle, useQueryData} from '@gravity-ui/data-source';
-import {Flex, Text, sp} from '@gravity-ui/uikit';
+import {ArrowUp} from '@gravity-ui/icons';
+import {Button, Flex, Icon, Text, Tooltip, sp} from '@gravity-ui/uikit';
 import {useParams} from 'react-router-dom';
 
 import type {ListLogsResponse} from '../../../../../shared/api/listLogs';
@@ -14,6 +15,8 @@ import {i18nInstance} from '../../../../i18n-common/i18nInstance';
 import {generateInstanceHref} from '../../../../utils/common';
 import {InstanceLayout} from '../../layouts/InstanceLayout';
 
+import {BUILD_LOGS_PAGE_ID} from './constants';
+import {useAutoscrollingBehavior} from './hooks';
 import {i18n} from './i18n';
 
 import * as styles from './BuildLogs.module.scss';
@@ -41,8 +44,14 @@ interface LogsContentProps {
 }
 
 const LogsContent = ({instance, listLogs}: LogsContentProps) => {
+    const logsContainerRef = React.useRef<HTMLDivElement>(null);
+    const LogsBottomRef = React.useRef<HTMLAnchorElement | HTMLDivElement>(null);
+
+    const {isScrollTopButtonVisible} = useAutoscrollingBehavior(listLogs, LogsBottomRef);
+
     const renderLog = (item: Output, index: number) => {
         const {command, duration, stdout, stderr} = item;
+        const isLastLog = index === (listLogs?.logs?.length || 0) - 1;
 
         return (
             <React.Fragment key={`log-${index}`}>
@@ -80,6 +89,7 @@ const LogsContent = ({instance, listLogs}: LogsContentProps) => {
                         <hr />
                     </div>
                 )}
+                {isLastLog && <div ref={LogsBottomRef as React.RefObject<HTMLDivElement>} />}
             </React.Fragment>
         );
     };
@@ -105,16 +115,48 @@ const LogsContent = ({instance, listLogs}: LogsContentProps) => {
         });
 
         return (
-            <a className={styles.instanceLink} href={href}>
+            <a
+                ref={LogsBottomRef as React.RefObject<HTMLAnchorElement>}
+                className={styles.instanceLink}
+                href={href}
+            >
                 {i18nInstance('go-to-instance')}
             </a>
         );
     };
 
+    const renderScrollToTopButton = () => {
+        const handleScrollToTop = () => {
+            logsContainerRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+            });
+        };
+
+        if (!isScrollTopButtonVisible) {
+            return null;
+        }
+
+        return (
+            <Tooltip content={i18n('return-to-start-of-logs')} placement="left" openDelay={0}>
+                <Button
+                    view="raised"
+                    pin="circle-circle"
+                    size="xl"
+                    className={styles.scrollToUpButton}
+                    onClick={handleScrollToTop}
+                >
+                    <Icon data={ArrowUp} size={24} />
+                </Button>
+            </Tooltip>
+        );
+    };
+
     return (
-        <div>
+        <div ref={logsContainerRef} id="logs">
             {listLogs?.logs?.map(renderLog)}
             {renderInstanceLink()}
+            {renderScrollToTopButton()}
         </div>
     );
 };
@@ -135,6 +177,7 @@ export const InstanceBuildLogsPage = () => {
                     listLogs: listLogsQuery.data,
                 })}
                 className={styles.buildLogs}
+                id={BUILD_LOGS_PAGE_ID}
             >
                 <DataLoader
                     status={instanceQuery.status}

src/ui/containers/Instance/pages/BuildLogs/constants.ts

@@ -0,0 +1,6 @@
+export const BUILD_LOGS_PAGE_ID = 'build-logs-page';
+
+export const SCROLL_TO_TOP_THRESHOLD = 400;
+
+// Scroll behavior constants
+export const SCROLL_BOTTOM_TOLERANCE = 20;

src/ui/containers/Instance/pages/BuildLogs/hooks.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type {ListLogsResponse} from '../../../../../shared/api/listLogs';
+
+import {BUILD_LOGS_PAGE_ID, SCROLL_BOTTOM_TOLERANCE, SCROLL_TO_TOP_THRESHOLD} from './constants';
+
+export const useAutoscrollingBehavior = (
+    listLogs: ListLogsResponse | undefined,
+    logsBottomRef: React.RefObject<HTMLAnchorElement | HTMLDivElement>,
+) => {
+    const [isScrollTopButtonVisible, setIsScrollTopButtonVisible] = React.useState(false);
+    const [shouldAutoscroll, setShouldAutoscroll] = React.useState(true);
+
+    // Автоскролл к концу логов при появлении новых
+    React.useEffect(() => {
+        if (logsBottomRef.current && shouldAutoscroll) {
+            logsBottomRef.current.scrollIntoView({behavior: 'auto', block: 'center'});
+        }
+    }, [listLogs?.logs, shouldAutoscroll, logsBottomRef]);
+
+    React.useEffect(() => {
+        const page = document.getElementById(BUILD_LOGS_PAGE_ID);
+        if (!page) return;
+
+        const handleScroll = () => {
+            const {scrollTop, scrollHeight, clientHeight} = page;
+            const logsPageHeight = scrollHeight - clientHeight;
+            // проверяем, находится ли пользователь в самом низу страницы с погрешностью SCROLL_BOTTOM_TOLERANCE
+            const isAtBottom = logsPageHeight - scrollTop < SCROLL_BOTTOM_TOLERANCE;
+
+            // отображать кнопку возврата к началу страницы если пользователь не в самом начале страницы
+            setIsScrollTopButtonVisible(scrollTop > SCROLL_TO_TOP_THRESHOLD);
+            setShouldAutoscroll(isAtBottom);
+        };
+
+        page.addEventListener('scroll', handleScroll);
+
+        return () => page.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    return {
+        isScrollTopButtonVisible,
+    };
+};

src/ui/containers/Instance/pages/BuildLogs/i18n/en.json

@@ -1,4 +1,5 @@
 {
   "title": "Build logs",
-  "command-finished": "Command finished in {{duration}}s"
+  "command-finished": "Command finished in {{duration}}s",
+  "return-to-start-of-logs": "Return to start of logs"
 }

src/ui/containers/Instance/pages/BuildLogs/i18n/ru.json

@@ -1,4 +1,5 @@
 {
   "title": "Логи сборки",
-  "command-finished": "Команда завершена за {{duration}}с"
+  "command-finished": "Команда завершена за {{duration}}с",
+  "return-to-start-of-logs": "Вернуться к началу логов"
 }