fix: logs scrollbar ux

src/components/auto-tooltip/index.tsx

@@ -13,6 +13,7 @@ import React, {
 interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   children: React.ReactNode;
   maxWidth?: number | string;
+  minWidth?: number | string;
   color?: string;
   style?: React.CSSProperties;
   ghost?: boolean;
@@ -24,6 +25,7 @@ interface AutoTooltipProps extends Omit<TagProps, 'title'> {
 const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
+  minWidth,
   ghost = false,
   title,
   showTitle = false,
@@ -61,6 +63,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   const tagStyle = useMemo(
     () => ({
       maxWidth,
+      minWidth,
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap' as const,

src/components/logs-viewer/index.tsx

@@ -15,9 +15,10 @@ interface LogsViewerProps {
 }
 const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, url } = props;
-  const { initialize, updateScrollerPosition } = useOverlayScroller({
+  const { initialize, updateScrollerPosition, scrollEventElement } =
-    theme: 'os-theme-light'
+    useOverlayScroller({
-  });
+      theme: 'os-theme-light'
+    });
   const { isClean, parseAnsi } = useParseAnsi();
   const { setChunkFetch } = useSetChunkFetch();
   const chunkRequedtRef = useRef<any>(null);
@@ -25,7 +26,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const cacheDataRef = useRef<any>('');
   const uidRef = useRef<any>(0);
   const [logs, setLogs] = useState<any[]>([]);
-  const autoScroll = useRef(true);
   const stopScroll = useRef(false);
 
   const setId = () => {
@@ -33,10 +33,6 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     return uidRef.current;
   };
 
-  const clearScreen = () => {
-    cacheDataRef.current = '';
-  };
-
   const updateContent = useCallback(
     (data: string) => {
       if (isClean(data)) {
@@ -44,7 +40,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       } else {
         cacheDataRef.current += data;
       }
-      const res = parseAnsi(cacheDataRef.current, setId, clearScreen);
+      const res = parseAnsi(cacheDataRef.current, setId);
       setLogs(res);
     },
     [setLogs, setId]
@@ -65,10 +61,17 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
 
   const debounceResetStopScroll = _.debounce(() => {
     stopScroll.current = false;
-  }, 3000);
+  }, 30000);
   const handleOnWheel = useCallback(
     (e: any) => {
-      stopScroll.current = true;
+      const scrollTop = scrollEventElement.scrollTop;
+      const scrollHeight = scrollEventElement.scrollHeight;
+      const clientHeight = scrollEventElement.clientHeight;
+      if (scrollTop + clientHeight >= scrollHeight) {
+        stopScroll.current = false;
+      } else {
+        stopScroll.current = true;
+      }
       debounceResetStopScroll();
     },
     [debounceResetStopScroll]
@@ -91,7 +94,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     if (logs.length && !stopScroll.current) {
       updateScrollerPosition(0);
     }
-  }, [logs, autoScroll.current, stopScroll.current]);
+  }, [logs, stopScroll.current]);
 
   return (
     <div className="logs-viewer-wrap-w2">

src/components/logs-viewer/parse-ansi.ts

@@ -17,138 +17,135 @@ const useParseAnsi = () => {
     return command === 'J' && n === 2;
   }, []);
 
-  const parseAnsi = useCallback(
+  const parseAnsi = useCallback((inputStr: string, setId: () => number) => {
-    (inputStr: string, setId: () => number, clearScreen: () => void) => {
+    let cursorRow = 0; // current row
-      let cursorRow = 0; // current row
+    let cursorCol = 0; // current column
-      let cursorCol = 0; // current column
+    // screen content array
-      // screen content array
+    let screen = [['']];
-      let screen = [['']];
+    // replace carriage return and newline characters in the text
-      // replace carriage return and newline characters in the text
+    let input = inputStr.replace(/\r\n/g, '\n');
-      let input = inputStr.replace(/\r\n/g, '\n');
 
-      lastIndex.current = 0;
+    lastIndex.current = 0;
 
-      // handle the \r and \n characters in the text
+    // handle the \r and \n characters in the text
-      const handleText = (text: string) => {
+    const handleText = (text: string) => {
-        let processed = '';
+      let processed = '';
-        for (let char of text) {
+      for (let char of text) {
-          if (char === '\r') {
+        if (char === '\r') {
-            cursorCol = 0; // move to the beginning of the line
+          cursorCol = 0; // move to the beginning of the line
-          } else if (char === '\n') {
+        } else if (char === '\n') {
-            cursorRow++; // move to the next line
+          cursorRow++; // move to the next line
-            cursorCol = 0; // move to the beginning of the line
+          cursorCol = 0; // move to the beginning of the line
-            screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
+          screen[cursorRow] = screen[cursorRow] || ['']; // create a new line if it does not exist
-          } else {
+        } else {
-            // add the character to the screen content array
+          // add the character to the screen content array
-            screen[cursorRow][cursorCol] = char;
+          screen[cursorRow][cursorCol] = char;
-            cursorCol++;
+          cursorCol++;
-          }
-        }
-        return processed;
-      };
-
-      let output = ''; // output text
-
-      let match;
-
-      // ANSI color map
-      const colorMap: Record<string, string> = {
-        '30': 'black',
-        '31': 'red',
-        '32': 'green',
-        '33': 'yellow',
-        '34': 'blue',
-        '35': 'magenta',
-        '36': 'cyan',
-        '37': 'white'
-      };
-
-      let currentStyle = ''; // current text style
-
-      // match ANSI control characters
-      while ((match = controlSeqRegex.exec(input)) !== null) {
-        // handle text before the control character
-        let textBeforeControl = input.slice(lastIndex.current, match.index);
-        output += handleText(textBeforeControl); // add the processed text to the output
-        lastIndex.current = controlSeqRegex.lastIndex; // update the last index
-
-        const n = parseInt(match[1], 10) || 1;
-        const m = parseInt(match[2], 10) || 1;
-        const command = match[3];
-        console.log('command', {
-          command,
-          cursorRow,
-          n
-        });
-
-        // handle ANSI control characters
-        switch (command) {
-          case 'A': // up
-            cursorRow = Math.max(0, cursorRow - n);
-            if (cursorRow === 0) {
-              // screen = [['']];
-              // cursorCol = 0;
-            }
-            break;
-          case 'B': // down
-            cursorRow += n;
-            break;
-          case 'C': // right
-            cursorCol += n;
-            break;
-          case 'D': // left
-            cursorCol = Math.max(0, cursorCol - n);
-            break;
-          case 'H': // move the cursor to the specified position (n, m)
-            cursorRow = Math.max(0, n - 1);
-            cursorCol = Math.max(0, m - 1);
-            break;
-          case 'J': // clear the screen
-            if (n === 2) {
-              console.log('clear====');
-              screen = [['']];
-              cursorRow = 0;
-              cursorCol = 0;
-            }
-            break;
-          case 'm': // color
-            if (match[1] === '0') {
-              currentStyle = '';
-            } else if (colorMap[match[1]]) {
-              currentStyle = `color: ${colorMap[match[1]]};`;
-            }
-            break;
-        }
-
-        // check if the row and column are within the screen content array
-        while (screen.length <= cursorRow) {
-          screen.push(['']);
-        }
-        while (screen[cursorRow].length <= cursorCol) {
-          screen[cursorRow].push('');
         }
       }
+      return processed;
+    };
 
-      // handle the remaining text
+    let output = ''; // output text
-      output += handleText(input.slice(lastIndex.current));
 
-      let result = [];
+    let match;
-      for (let row = 0; row < screen.length; row++) {
+
-        let rowContent = screen[row].join('');
+    // ANSI color map
-        result.push({
+    const colorMap: Record<string, string> = {
-          content: removeBrackets(rowContent),
+      '30': 'black',
-          uid: setId()
+      '31': 'red',
-        });
+      '32': 'green',
-      }
+      '33': 'yellow',
-      result.push({
+      '34': 'blue',
-        content: output,
+      '35': 'magenta',
-        uid: setId()
+      '36': 'cyan',
+      '37': 'white'
+    };
+
+    let currentStyle = ''; // current text style
+
+    // match ANSI control characters
+    while ((match = controlSeqRegex.exec(input)) !== null) {
+      // handle text before the control character
+      let textBeforeControl = input.slice(lastIndex.current, match.index);
+      output += handleText(textBeforeControl); // add the processed text to the output
+      lastIndex.current = controlSeqRegex.lastIndex; // update the last index
+
+      const n = parseInt(match[1], 10) || 1;
+      const m = parseInt(match[2], 10) || 1;
+      const command = match[3];
+      console.log('command', {
+        command,
+        cursorRow,
+        n
       });
 
-      return result;
+      // handle ANSI control characters
-    },
+      switch (command) {
-    []
+        case 'A': // up
-  );
+          cursorRow = Math.max(0, cursorRow - n);
+          if (cursorRow === 0) {
+            // screen = [['']];
+            // cursorCol = 0;
+          }
+          break;
+        case 'B': // down
+          cursorRow += n;
+          break;
+        case 'C': // right
+          cursorCol += n;
+          break;
+        case 'D': // left
+          cursorCol = Math.max(0, cursorCol - n);
+          break;
+        case 'H': // move the cursor to the specified position (n, m)
+          cursorRow = Math.max(0, n - 1);
+          cursorCol = Math.max(0, m - 1);
+          break;
+        case 'J': // clear the screen
+          if (n === 2) {
+            console.log('clear====');
+            screen = [['']];
+            cursorRow = 0;
+            cursorCol = 0;
+          }
+          break;
+        case 'm': // color
+          if (match[1] === '0') {
+            currentStyle = '';
+          } else if (colorMap[match[1]]) {
+            currentStyle = `color: ${colorMap[match[1]]};`;
+          }
+          break;
+      }
+
+      // check if the row and column are within the screen content array
+      while (screen.length <= cursorRow) {
+        screen.push(['']);
+      }
+      while (screen[cursorRow].length <= cursorCol) {
+        screen[cursorRow].push('');
+      }
+    }
+
+    // handle the remaining text
+    output += handleText(input.slice(lastIndex.current));
+
+    let result = [];
+    for (let row = 0; row < screen.length; row++) {
+      let rowContent = screen[row].join('');
+      result.push({
+        content: removeBrackets(rowContent),
+        uid: setId()
+      });
+    }
+    result.push({
+      content: output,
+      uid: setId()
+    });
+
+    return result;
+  }, []);
 
   return { parseAnsi, isClean };
 };

src/components/version-info/index.tsx

@@ -61,7 +61,12 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
                   { version: currentVersion }
                 )}
           </span>
-          <Button type="link" href={externalLinks.release} target="_blank">
+          <Button
+            type="link"
+            href={externalLinks.release}
+            target="_blank"
+            style={{ paddingInline: 0 }}
+          >
             {intl.formatMessage({ id: 'common.text.changelog' })}
           </Button>
         </div>

src/hooks/use-overlay-scroller.ts

@@ -56,7 +56,7 @@ export default function useOverlayScroller(options?: any) {
         });
         instanceRef.current?.update?.();
       }, 300),
-    [scrollEventElement, instanceRef]
+    [scrollEventElement.current, instanceRef.current]
   );
 
   const scrollauto = React.useCallback(() => {
@@ -65,7 +65,7 @@ export default function useOverlayScroller(options?: any) {
       behavior: 'auto'
     });
     instanceRef.current?.update?.();
-  }, [scrollEventElement, instanceRef]);
+  }, [scrollEventElement.current, instanceRef.current]);
 
   const throttledUpdateScrollerPosition = React.useCallback(
     (delay?: number) => {
@@ -78,25 +78,25 @@ export default function useOverlayScroller(options?: any) {
     [throttledScroll, scrollauto]
   );
 
-  // const createInstance = React.useCallback((el: any) => {
+  const createInstance = React.useCallback(
-  //   if (el) {
+    (el: any) => {
-  //     instanceRef.current?.destroy?.();
+      if (instanceRef.current) {
-  //     initialize(el);
+        return;
-  //     instanceRef.current = instance?.();
+      }
-  //     scrollEventElement.current =
+      if (el) {
-  //       instanceRef.current?.elements()?.scrollEventElement;
+        initialize(el);
-  //   }
+        instanceRef.current = instance?.();
-  // }, []);
+        scrollEventElement.current =
-
+          instanceRef.current?.elements()?.scrollEventElement;
-  React.useEffect(() => {
+      }
-    return () => {
+    },
-      instanceRef.current?.destroy?.();
+    [initialize, instance]
-    };
+  );
-  }, []);
 
   return {
-    initialize,
+    initialize: createInstance,
     instance: instanceRef.current,
+    scrollEventElement: scrollEventElement.current,
     updateScrollerPosition: throttledUpdateScrollerPosition
   };
 }

src/layouts/rightRender.tsx

@@ -109,7 +109,7 @@ export const getRightRenderContent = (opts: {
     mode: 'vertical',
     expandIcon: false,
     // inlineCollapsed: collapsed,
-    triggerSubMenuAction: 'click',
+    triggerSubMenuAction: 'hover',
     items: [
       {
         key: 'help',

src/locales/en-US/resources.ts

@@ -37,6 +37,7 @@ export default {
   'resources.table.vramutilization': 'VRAM Utilization',
   'resources.table.total': 'Total',
   'resources.table.used': 'Used',
+  'resources.table.allocated': 'Allocated',
   'resources.table.wokers': 'workers',
   'resources.worker.linuxormaxos': 'Linux or MacOS',
   'resources.table.unified': 'Unified Memory',

src/locales/en-US/users.ts

@@ -27,5 +27,5 @@ export default {
   '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.update': 'Version {version} is available'
+  'users.version.update': 'GPUStack {version} is available'
 };

src/locales/zh-CN/resources.ts

@@ -37,6 +37,7 @@ export default {
   'resources.table.utilization': '利用率',
   'resources.table.total': '总量',
   'resources.table.used': '已用',
+  'resources.table.allocated': '已分配',
   'resources.table.wokers': 'workers',
   'resources.table.unified': '统一内存',
   'resources.worker.linuxormaxos': 'Linux 或 MacOS',

src/locales/zh-CN/users.ts

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

src/pages/llmodels/components/table-list.tsx

@@ -39,11 +39,7 @@ import {
   queryModelInstancesList,
   updateModel
 } from '../apis';
-import {
+import { getSourceRepoConfigValue, modelSourceMap } from '../config';
-  InstanceStatusMap,
-  getSourceRepoConfigValue,
-  modelSourceMap
-} from '../config';
 import { FormData, ListItem, ModelInstanceListItem } from '../config/types';
 import DeployModal from './deploy-modal';
 import InstanceItem from './instance-item';
@@ -657,7 +653,6 @@ const Models: React.FC<ModelsProps> = ({
       ></DeployModal>
       <ViewLogsModal
         url={currentInstance.url}
-        autoScroll={currentInstance.status !== InstanceStatusMap.Downloading}
         open={openLogModal}
         onCancel={handleLogModalCancel}
       ></ViewLogsModal>

src/pages/llmodels/components/view-logs-modal.tsx

@@ -66,7 +66,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       <LogsViewer
         height={modalSize.height}
         url={url}
-        autoScroll={props.autoScroll}
         params={{
           follow: true
         }}

src/pages/playground/components/ground-left.tsx

@@ -173,7 +173,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             ]
           : [...formatMessages],
         ...parameters,
-        stream: true
+        stream: true,
+        stream_otpions: {
+          include_usage: true
+        }
       };
       const result: any = await fetchChunkedData({
         data: chatParams,

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -173,7 +173,10 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               ]
             : [...formatMessages],
           ...params,
-          stream: true
+          stream: true,
+          stream_otpions: {
+            include_usage: true
+          }
         };
         // ============== payload end ================
         const result: any = await fetchChunkedData({

src/pages/playground/components/view-code-modal.tsx

@@ -4,7 +4,7 @@ import { BulbOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import _ from 'lodash';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 type ViewModalProps = {
   systemMessage?: string;
@@ -40,8 +40,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   } = props || {};
 
   const intl = useIntl();
-  const editorRef = useRef(null);
-  const [loaded, setLoaded] = useState(false);
   const [codeValue, setCodeValue] = useState('');
   const [lang, setLang] = useState(langMap.shell);
 

src/pages/resources/components/gpus.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import PageTools from '@/components/page-tools';
 import ProgressBar from '@/components/progress-bar';
 import useTableSort from '@/hooks/use-table-sort';
@@ -140,6 +141,16 @@ const GPUList: React.FC = () => {
           title={intl.formatMessage({ id: 'resources.table.workername' })}
           dataIndex="worker_name"
           key="worker_name"
+          width={200}
+          render={(text, record: GPUDeviceItem) => {
+            return (
+              <span style={{ display: 'flex', width: '100%' }}>
+                <AutoTooltip ghost maxWidth={340}>
+                  {text}
+                </AutoTooltip>
+              </span>
+            );
+          }}
         />
         <Column
           title={intl.formatMessage({ id: 'resources.table.vender' })}
@@ -160,7 +171,7 @@ const GPUList: React.FC = () => {
           dataIndex="core"
           key="Core"
           render={(text, record: GPUDeviceItem) => {
-            return <span>{record.core?.total}</span>;
+            return <>{record.core ? <span>{record.core?.total}</span> : '-'}</>;
           }}
         /> */}
         <Column
@@ -169,9 +180,15 @@ const GPUList: React.FC = () => {
           key="gpuUtil"
           render={(text, record: GPUDeviceItem) => {
             return (
-              <ProgressBar
+              <>
-                percent={_.round(record.core?.utilization_rate, 2)}
+                {record.core ? (
-              ></ProgressBar>
+                  <ProgressBar
+                    percent={_.round(record.core?.utilization_rate, 2)}
+                  ></ProgressBar>
+                ) : (
+                  '-'
+                )}
+              </>
             );
           }}
         />
@@ -192,7 +209,10 @@ const GPUList: React.FC = () => {
                     </span>
                     <span>
                       {intl.formatMessage({ id: 'resources.table.used' })}:{' '}
-                      {convertFileSize(record.memory?.used, 0)}
+                      {convertFileSize(
+                        record.memory?.used || record.memory?.allocated,
+                        0
+                      )}
                     </span>
                   </span>
                 }

src/pages/resources/components/workers.tsx

@@ -307,6 +307,14 @@ const Resources: React.FC = () => {
           title={intl.formatMessage({ id: 'common.table.name' })}
           dataIndex="name"
           key="name"
+          width={100}
+          render={(text, record: ListItem) => {
+            return (
+              <AutoTooltip ghost maxWidth={240}>
+                <span>{record.name}</span>
+              </AutoTooltip>
+            );
+          }}
         />
         <Column
           title={intl.formatMessage({ id: 'resources.table.labels' })}
@@ -408,10 +416,14 @@ const Resources: React.FC = () => {
                         >
                           [{item.index}]
                         </span>
-                        <ProgressBar
+                        {item.core ? (
-                          key={index}
+                          <ProgressBar
-                          percent={_.round(item.core?.utilization_rate, 0)}
+                            key={index}
-                        ></ProgressBar>
+                            percent={_.round(item.core?.utilization_rate, 0)}
+                          ></ProgressBar>
+                        ) : (
+                          '-'
+                        )}
                       </span>
                     );
                   }
@@ -455,7 +467,11 @@ const Resources: React.FC = () => {
                                   {intl.formatMessage({
                                     id: 'resources.table.used'
                                   })}
-                                  : {convertFileSize(item.memory?.used, 0)}
+                                  :{' '}
+                                  {convertFileSize(
+                                    item.memory?.used || item.memory?.allocated,
+                                    0
+                                  )}
                                 </span>
                               </span>
                             }