fix: logs viewer do not scroll after opened

plugin.ts

@@ -3,7 +3,7 @@ import { IApi } from '@umijs/max';
 export default (api: IApi) => {
   api.modifyHTML(($) => {
     const info = JSON.parse(process.env.VERSION || '{}');
-    const env = info.version ? 'production' : 'development';
+    const env = process.env.NODE_ENV;
 
     $('html').attr('data-env', env);
 

src/components/logs-viewer/index.tsx

@@ -15,10 +15,16 @@ interface LogsViewerProps {
 }
 const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, url } = props;
-  const { initialize, updateScrollerPosition, scrollEventElement } =
-    useOverlayScroller({
-      theme: 'os-theme-light'
-    });
+  const {
+    initialize,
+    updateScrollerPosition,
+    generateInstance,
+    scrollEventElement,
+    instance,
+    initialized
+  } = useOverlayScroller({
+    theme: 'os-theme-light'
+  });
   const { isClean, parseAnsi } = useParseAnsi();
   const { setChunkFetch } = useSetChunkFetch();
   const chunkRequedtRef = useRef<any>(null);
@@ -62,11 +68,12 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const debounceResetStopScroll = _.debounce(() => {
     stopScroll.current = false;
   }, 30000);
+
   const handleOnWheel = useCallback(
     (e: any) => {
-      const scrollTop = scrollEventElement.scrollTop;
-      const scrollHeight = scrollEventElement.scrollHeight;
-      const clientHeight = scrollEventElement.clientHeight;
+      const scrollTop = scrollEventElement?.scrollTop;
+      const scrollHeight = scrollEventElement?.scrollHeight;
+      const clientHeight = scrollEventElement?.clientHeight;
       if (scrollTop + clientHeight >= scrollHeight) {
         stopScroll.current = false;
       } else {
@@ -74,9 +81,14 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       }
       debounceResetStopScroll();
     },
-    [debounceResetStopScroll]
+    [debounceResetStopScroll, scrollEventElement]
   );
 
+  const debounceUpdateScrollerPosition = _.debounce(() => {
+    generateInstance();
+    updateScrollerPosition(0);
+  }, 200);
+
   useEffect(() => {
     createChunkConnection();
     return () => {
@@ -91,10 +103,19 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   }, [scroller.current, initialize]);
 
   useEffect(() => {
-    if (logs.length && !stopScroll.current) {
+    if (logs.length && !stopScroll.current && instance) {
       updateScrollerPosition(0);
+    } else if (logs.length && !stopScroll.current && scroller.current) {
+      if (!initialized) {
+        initialize(scroller.current);
+      }
+      if (!instance) {
+        debounceUpdateScrollerPosition();
+      } else {
+        updateScrollerPosition(0);
+      }
     }
-  }, [logs, stopScroll.current]);
+  }, [logs, stopScroll.current, instance, scroller.current]);
 
   return (
     <div className="logs-viewer-wrap-w2">

src/components/version-info/index.tsx

@@ -10,8 +10,7 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
   const latestVersion = getAtomStorage(UpdateCheckAtom).latest_version;
   const currentVersion = getAtomStorage(GPUStackVersionAtom)?.version;
 
-  const isProd =
-    document.documentElement.getAttribute('data-env') === 'production';
+  const isProd = currentVersion !== '0.0.0';
 
   const uiVersion = document.documentElement.getAttribute('data-version');
 
@@ -51,7 +50,9 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
       {getAtomStorage(userAtom)?.is_admin && (
         <div className="upgrade">
           <span className="m-l-5">
-            {latestVersion && latestVersion !== currentVersion
+            {latestVersion &&
+            latestVersion !== currentVersion &&
+            latestVersion !== '0.0.0'
               ? intl.formatMessage(
                   { id: 'users.version.update' },
                   { version: latestVersion }

src/global.less

@@ -509,6 +509,28 @@ body {
   border-radius: 8px;
 }
 
+.ant-modal-centered.ant-modal-wrap {
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-size);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-handle-bg);
+      border-radius: 4px;
+    }
+  }
+}
+
 .custome-scrollbar {
   &::-webkit-scrollbar {
     width: var(--scrollbar-size);

src/hooks/use-overlay-scroller.ts

@@ -1,7 +1,7 @@
 import { throttle } from 'lodash';
 import {
-  useOverlayScrollbars,
-  UseOverlayScrollbarsParams
+  UseOverlayScrollbarsParams,
+  useOverlayScrollbars
 } from 'overlayscrollbars-react';
 import React from 'react';
 
@@ -26,6 +26,7 @@ export const overlaySollerOptions: UseOverlayScrollbarsParams = {
 export default function useOverlayScroller(options?: any) {
   const scrollEventElement = React.useRef<any>(null);
   const instanceRef = React.useRef<any>(null);
+  const initialized = React.useRef(false);
   const [initialize, instance] = useOverlayScrollbars({
     options: {
       update: {
@@ -43,6 +44,7 @@ export default function useOverlayScroller(options?: any) {
     },
     defer: true
   });
+
   instanceRef.current = instance?.();
   scrollEventElement.current =
     instanceRef.current?.elements()?.scrollEventElement;
@@ -78,6 +80,12 @@ export default function useOverlayScroller(options?: any) {
     [throttledScroll, scrollauto]
   );
 
+  const generateInstance = () => {
+    instanceRef.current = instance?.();
+    scrollEventElement.current =
+      instanceRef.current?.elements()?.scrollEventElement;
+  };
+
   const createInstance = React.useCallback(
     (el: any) => {
       if (instanceRef.current) {
@@ -85,6 +93,14 @@ export default function useOverlayScroller(options?: any) {
       }
       if (el) {
         initialize(el);
+        initialized.current = true;
+        console.log(
+          'createInstance===2',
+          initialized.current,
+          instanceRef.current,
+          instance?.(),
+          instance
+        );
         instanceRef.current = instance?.();
         scrollEventElement.current =
           instanceRef.current?.elements()?.scrollEventElement;
@@ -97,6 +113,8 @@ export default function useOverlayScroller(options?: any) {
     initialize: createInstance,
     instance: instanceRef.current,
     scrollEventElement: scrollEventElement.current,
+    initialized: initialized.current,
+    generateInstance,
     updateScrollerPosition: throttledUpdateScrollerPosition
   };
 }

src/locales/en-US/users.ts

@@ -26,6 +26,6 @@ export default {
   'users.password.confirm.empty': 'Please confirm the new password.',
   'users.password.confirm.error': 'The two passwords entered do not match.',
   'users.login.title': 'Log in to {name}',
-  'users.version.islatest': '{version} is the latest version',
+  'users.version.islatest': 'GPUStack {version} is the latest version',
   'users.version.update': 'GPUStack {version} is available'
 };

src/locales/zh-CN/users.ts

@@ -25,6 +25,6 @@ export default {
   'users.password.confirm.empty': '请确认新密码',
   'users.password.confirm.error': '两次输入的密码不一致',
   'users.login.title': '登录 {name}',
-  'users.version.islatest': '{version} 已是最新版本',
+  'users.version.islatest': 'GPUStack {version} 已是最新版本',
   'users.version.update': 'GPUStack {version} 版本可供更新'
 };