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,7 +15,8 @@ interface LogsViewerProps {
 }
 const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const { height, url } = props;
-  const { initialize, updateScrollerPosition } = useOverlayScroller({
+  const { initialize, updateScrollerPosition, scrollEventElement } =
+    useOverlayScroller({
       theme: 'os-theme-light'
     });
   const { isClean, parseAnsi } = useParseAnsi();
@@ -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) => {
+      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,8 +17,7 @@ const useParseAnsi = () => {
     return command === 'J' && n === 2;
   }, []);
 
-  const parseAnsi = useCallback(
-    (inputStr: string, setId: () => number, clearScreen: () => void) => {
+  const parseAnsi = useCallback((inputStr: string, setId: () => number) => {
     let cursorRow = 0; // current row
     let cursorCol = 0; // current column
     // screen content array
@@ -146,9 +145,7 @@ const useParseAnsi = () => {
     });
 
     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) => {
-  //   if (el) {
-  //     instanceRef.current?.destroy?.();
-  //     initialize(el);
-  //     instanceRef.current = instance?.();
-  //     scrollEventElement.current =
-  //       instanceRef.current?.elements()?.scrollEventElement;
-  //   }
-  // }, []);
-
-  React.useEffect(() => {
-    return () => {
-      instanceRef.current?.destroy?.();
-    };
-  }, []);
+  const createInstance = React.useCallback(
+    (el: any) => {
+      if (instanceRef.current) {
+        return;
+      }
+      if (el) {
+        initialize(el);
+        instanceRef.current = instance?.();
+        scrollEventElement.current =
+          instanceRef.current?.elements()?.scrollEventElement;
+      }
+    },
+    [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 {
-  InstanceStatusMap,
-  getSourceRepoConfigValue,
-  modelSourceMap
-} from '../config';
+import { 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 (
+              <>
+                {record.core ? (
                   <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>
+                        {item.core ? (
                           <ProgressBar
                             key={index}
                             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>
                             }