fix(style): hide table cell content if too long

src/components/auto-tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { Tag, Tooltip } from 'antd';
+import { Tag, Tooltip, type TagProps } from 'antd';
 import debounce from 'lodash/debounce';
 import React, {
   useCallback,
@@ -8,12 +8,15 @@ import React, {
   useState
 } from 'react';
 
-interface AutoTooltipProps extends React.ComponentProps<typeof Tag> {
+// type TagProps = React.ComponentProps<typeof Tag>;
+
+interface AutoTooltipProps extends Omit<TagProps, 'title'> {
   children: React.ReactNode;
   maxWidth?: number | string;
   color?: string;
   style?: React.CSSProperties;
   ghost?: boolean;
+  title?: React.ReactNode;
   showTitle?: boolean;
 }
 
@@ -21,6 +24,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   children,
   maxWidth = '100%',
   ghost = false,
+  title,
   showTitle = false,
   ...tagProps
 }) => {
@@ -64,7 +68,7 @@ const AutoTooltip: React.FC<AutoTooltipProps> = ({
   );
 
   return (
-    <Tooltip title={isOverflowing || showTitle ? children : ''}>
+    <Tooltip title={isOverflowing || showTitle ? title || children : ''}>
       {ghost ? (
         <div ref={contentRef} style={tagStyle}>
           {children}

src/components/label-selector/label-item.tsx

@@ -77,6 +77,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
             title={intl.formatMessage({ id: 'resources.table.key.tips' })}
           >
             <SealInput.Input
+              checkStatus="success"
               label={intl.formatMessage({ id: 'common.input.key' })}
               value={label.key}
               onChange={handleOnKeyChange}
@@ -89,6 +90,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
       <div className="label-value">
         {valueAddon ?? (
           <SealInput.Input
+            checkStatus={label.value ? 'success' : ''}
             label={intl.formatMessage({ id: 'common.input.value' })}
             value={label.value}
             onChange={handleOnValueChange}

src/components/logs-viewer/index.less

@@ -26,11 +26,11 @@
   }
 
   .xterm {
-    height: 100% !important;
+    // height: 100% !important;
 
     .xterm-viewport {
       overflow-y: auto !important;
-      // custom scrollbar
+
       &::-webkit-scrollbar {
         width: var(--scrollbar-size);
         height: var(--scrollbar-size);

src/components/logs-viewer/index.tsx

@@ -26,7 +26,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
   const [logs, setLogs] = useState('');
   const size = useSize(scroller);
 
-  const throttleScroll = _.debounce(() => {
+  const throttleScroll = _.throttle(() => {
     termRef.current?.scrollToBottom?.();
   }, 100);
 
@@ -36,6 +36,7 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
       termRef.current?.clear?.();
       cacheDataRef.current = data;
       termRef.current?.write?.(data);
+      setLogs(data);
     }, 100),
     []
   );
@@ -78,11 +79,11 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     termRef.current.open(termwrapRef.current);
 
     // add event
-    termRef.current.onLineFeed((e: any) => {
-      if (cacheDataRef.current) {
-        throttleScroll();
-      }
-    });
+    // termRef.current.onLineFeed((e: any) => {
+    //   if (cacheDataRef.current) {
+    //     throttleScroll();
+    //   }
+    // });
   };
 
   const handleResize = _.throttle(() => {
@@ -111,6 +112,10 @@ const LogsViewer: React.FC<LogsViewerProps> = (props) => {
     }
   }, [size]);
 
+  useEffect(() => {
+    throttleScroll();
+  }, [logs]);
+
   return (
     <div className="logs-viewer-wrap-w2">
       <div className="wrap" style={{ height: height }} ref={scroller}>

src/components/seal-form/seal-input.tsx

@@ -17,6 +17,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     isInFormItems = true,
     variant,
     addAfter,
+    checkStatus,
     trim = true,
     ...rest
   } = props;
@@ -70,7 +71,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
 
   return (
     <Wrapper
-      status={status}
+      status={checkStatus || status}
       label={label || (placeholder as string)}
       isFocus={isFocus}
       required={required}

src/components/seal-form/types.ts

@@ -9,4 +9,5 @@ export interface SealFormItemProps {
   addAfter?: React.ReactNode;
   loading?: React.ReactNode;
   trim?: boolean;
+  checkStatus?: 'success' | 'error' | 'warning' | '';
 }

src/components/seal-table/styles/cell.less

@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: flex-start;
   height: 68px;
+  word-break: break-word;
 
   .cell-content {
     max-width: 100%;

src/global.less

@@ -665,6 +665,10 @@ body {
 
 .ant-modal {
   max-width: 100vw;
+
+  .ant-modal-title {
+    font-weight: var(--font-weight-bold);
+  }
 }
 
 .tooltip-wrapper {

src/pages/llmodels/components/data-form.tsx

@@ -289,9 +289,9 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         replicas: 1,
         source: props.source,
         placement_strategy: 'spread',
-        cpu_offloading: false,
+        cpu_offloading: true,
         scheduleType: 'auto',
-        distributed_inference_across_workers: false
+        distributed_inference_across_workers: true
       }}
     >
       <Form.Item<FormData>

src/pages/llmodels/components/hf-model-file.tsx

@@ -262,7 +262,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
   return (
     <div>
       <TitleWrapper>
-        <span>
+        <span className="title">
           {intl.formatMessage({ id: 'models.available.files' })} (
           {dataSource.fileList.length || 0})
         </span>

src/pages/llmodels/components/instance-item.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import DropdownButtons from '@/components/drop-down-buttons';
 import RowChildren from '@/components/seal-table/components/row-children';
 import SimpleTabel from '@/components/simple-table';
@@ -159,10 +160,16 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     paddingInline: 'var(--ant-table-cell-padding-inline)'
                   }}
                 >
-                  <Tooltip title={renderWorkerInfo(item)}>
-                    <span className="m-r-5">{item.name}</span>
+                  <span className="flex-center">
+                    <AutoTooltip
+                      title={renderWorkerInfo(item)}
+                      ghost
+                      showTitle={true}
+                    >
+                      <span className="m-r-5">{item.name}</span>
+                    </AutoTooltip>
                     <InfoCircleOutlined />
-                  </Tooltip>
+                  </span>
                 </Col>
                 <Col span={6}>
                   <span

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

@@ -519,8 +519,8 @@ const Models: React.FC<ModelsProps> = ({
             span={5}
             render={(text, record: ListItem) => {
               return (
-                <span className="flex" style={{ maxWidth: '100%' }}>
-                  <AutoTooltip className="m-r-5" showTitle={true} ghost>
+                <span className="flex-center" style={{ maxWidth: '100%' }}>
+                  <AutoTooltip className="m-r-5" ghost>
                     {text}
                   </AutoTooltip>
                   <span>