fix: logs are not fully loaded

config/config.ts

@@ -4,7 +4,6 @@ import { compressionPluginConfig, monacoPluginConfig } from './plugins';
 import proxy from './proxy';
 import routes from './routes';
 import { getBranchInfo } from './utils';
-const CompressionWebpackPlugin = require('compression-webpack-plugin');
 
 const versionInfo = getBranchInfo();
 process.env.VERSION = JSON.stringify(versionInfo);

src/components/logs-viewer/logs-list.tsx

@@ -64,9 +64,9 @@ const LogsList: React.FC<LogsListProps> = forwardRef((props, ref) => {
 
   const handleOnWheel = useCallback(
     (e: any) => {
-      const scrollTop = scrollEventElement?.scrollTop;
+      const scrollTop = scrollEventElement?.current.scrollTop;
-      const scrollHeight = scrollEventElement?.scrollHeight;
+      const scrollHeight = scrollEventElement?.current.scrollHeight;
-      const clientHeight = scrollEventElement?.clientHeight;
+      const clientHeight = scrollEventElement?.current.clientHeight;
 
       stopScroll.current = scrollTop + clientHeight <= scrollHeight;
 

src/components/logs-viewer/virtual-log-list.tsx

@@ -1,4 +1,5 @@
 import useSetChunkFetch from '@/hooks/use-chunk-fetch';
+import { useMemoizedFn } from 'ahooks';
 import { Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
@@ -177,7 +178,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     });
   };
 
-  const handleOnScroll = useCallback(
+  const handleOnScroll = useMemoizedFn(
     async (data: { isTop: boolean; isBottom: boolean }) => {
       const { isTop, isBottom } = data;
       setIsAtTop(isTop);
@@ -225,17 +226,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
       } else if (isBottom && page < totalPage) {
         // getNextPage();
       }
-    },
+    }
-    [
-      loading,
-      logs.length,
-      pageSize,
-      enableScorllLoad,
-      page,
-      totalPage,
-      setScrollPos,
-      createChunkConnection
-    ]
   );
 
   const debouncedScroll = useCallback(

src/components/seal-form/base/select.tsx

@@ -2,52 +2,68 @@ import IconFont from '@/components/icon-font';
 import type { SelectProps } from 'antd';
 import { Select } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
+import styled from 'styled-components';
 import NotFoundContent from '../components/not-found-content';
 
-const BaseSelect: React.FC<SelectProps & { ref?: any }> = forwardRef(
+const Footer = styled.div`
-  (props, ref) => {
+  color: var(--ant-color-text-tertiary);
-    const { notFoundContent, loading, ...restProps } = props;
+  margin-top: 8px;
-    const [isFocus, setIsFocus] = React.useState(false);
+  margin-bottom: 0;
-    const inputRef = React.useRef<any>(null);
+  padding: 8px 12px;
+  border-top: 1px solid var(--ant-color-split);
+`;
 
-    useImperativeHandle(ref, () => ({
+const BaseSelect: React.FC<
-      ...(inputRef.current || ({} as any))
+  SelectProps & { ref?: any; footer?: React.ReactNode }
-    }));
+> = forwardRef((props, ref) => {
+  const { notFoundContent, loading, ...restProps } = props;
+  const [isFocus, setIsFocus] = React.useState(false);
+  const inputRef = React.useRef<any>(null);
 
-    const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
+  useImperativeHandle(ref, () => ({
-      setIsFocus(true);
+    ...(inputRef.current || ({} as any))
-      props.onFocus?.(e);
+  }));
-    };
+
-    const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
+  const handleFocus = (e: React.FocusEvent<HTMLDivElement>) => {
-      setIsFocus(false);
+    setIsFocus(true);
-      props.onBlur?.(e);
+    props.onFocus?.(e);
-    };
+  };
-    const renderSuffixIcon = () => {
+  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {
-      if (props.suffixIcon) {
+    setIsFocus(false);
-        return props.suffixIcon;
+    props.onBlur?.(e);
+  };
+  const renderSuffixIcon = () => {
+    if (props.suffixIcon) {
+      return props.suffixIcon;
+    }
+    if (!props.showSearch) {
+      return <IconFont type="icon-down"></IconFont>;
+    }
+    return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
+  };
+
+  return (
+    <Select
+      {...restProps}
+      notFoundContent={
+        <NotFoundContent loading={loading} notFoundContent={notFoundContent} />
       }
-      if (!props.showSearch) {
+      ref={inputRef}
-        return <IconFont type="icon-down"></IconFont>;
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      suffixIcon={renderSuffixIcon()}
+      popupRender={
+        props.footer
+          ? (originNode) => (
+              <>
+                {originNode}
+                {props.footer && <Footer>{props.footer}</Footer>}
+              </>
+            )
+          : undefined
       }
-      return !isFocus ? <IconFont type="icon-down"></IconFont> : undefined;
+    />
-    };
+  );
-
+});
-    return (
-      <Select
-        {...restProps}
-        notFoundContent={
-          <NotFoundContent
-            loading={loading}
-            notFoundContent={notFoundContent}
-          />
-        }
-        ref={inputRef}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        suffixIcon={renderSuffixIcon()}
-      />
-    );
-  }
-);
 
 export default BaseSelect;

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

@@ -10,7 +10,9 @@ import { SealFormItemProps } from './types';
 import Wrapper from './wrapper';
 import SelectWrapper from './wrapper/select';
 
-const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
+const SealSelect: React.FC<
+  SelectProps & SealFormItemProps & { footer?: React.ReactNode }
+> = (props) => {
   const {
     label,
     placeholder,

src/locales/en-US/models.ts

@@ -267,5 +267,6 @@ export default {
   'models.accessSettings.authed.tips':
     'Accessible to all authenticated platform users.',
   'models.accessSettings.allowedUsers.tips':
-    'Only designated users can access the model.'
+    'Only designated users can access the model.',
+  'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
 };

src/locales/ja-JP/models.ts

@@ -267,7 +267,8 @@ export default {
   'models.accessSettings.authed.tips':
     'Accessible to all authenticated platform users.',
   'models.accessSettings.allowedUsers.tips':
-    'Only designated users can access the model.'
+    'Only designated users can access the model.',
+  'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -358,5 +359,6 @@ export default {
 // 68. 'models.form.backendVersion.deprecated': 'Deprecated',
 // 69. 'models.accessSettings.public.desc': 'Accessible to anyone without authentication.',
 // 70.  'models.accessSettings.authed.tips': 'Accessible to all authenticated platform users.',
-// 71.'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.'
+// 71.'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.',
+// 72. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
 // ========== End of To-Do List ==========

src/locales/ru-RU/models.ts

@@ -272,11 +272,13 @@ export default {
   'models.accessSettings.authed.tips':
     'Accessible to all authenticated platform users.',
   'models.accessSettings.allowedUsers.tips':
-    'Only designated users can access the model.'
+    'Only designated users can access the model.',
+  'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
 // 1. 'models.accessSettings.public.desc': 'Accessible to anyone without authentication.',
 // 2.  'models.accessSettings.authed.tips': 'Accessible to all authenticated platform users.',
-// 3. 'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.'
+// 3. 'models.accessSettings.allowedUsers.tips': 'Only designated users can access the model.',
+// 4. 'models.form.backendVersions.tips': `To use more versions, go to the {link} page and edit the backend to add versions.`
 // ========== End of To-Do List ==========

src/locales/zh-CN/models.ts

@@ -251,5 +251,6 @@ export default {
   'models.form.backendVersion.deprecated': '已弃用',
   'models.accessSettings.public.desc': '任何人无需认证即可访问。',
   'models.accessSettings.authed.tips': '平台内所有已认证用户可访问。',
-  'models.accessSettings.allowedUsers.tips': '仅允许选定的特定用户访问。'
+  'models.accessSettings.allowedUsers.tips': '仅允许选定的特定用户访问。',
+  'models.form.backendVersions.tips': `如需使用更多版本，请前往{link}页面并编辑对应的后端以添加版本。`
 };

src/pages/backends/config/index.ts

@@ -152,37 +152,37 @@ export const frameworks = [
     label: 'CANN',
     value: GPUDriverMap.ASCEND,
     tips: ManufacturerMap[GPUDriverMap.ASCEND],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'DTK',
     value: GPUDriverMap.HYGON,
     tips: ManufacturerMap[GPUDriverMap.HYGON],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'MACA',
     value: GPUDriverMap.METAX,
     tips: ManufacturerMap[GPUDriverMap.METAX],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'CoreX',
     value: GPUDriverMap.ILUVATAR,
     tips: ManufacturerMap[GPUDriverMap.ILUVATAR],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'MUSA',
     value: GPUDriverMap.MOORE_THREADS,
     tips: ManufacturerMap[GPUDriverMap.MOORE_THREADS],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'Neuware',
     value: GPUDriverMap.CAMBRICON,
     tips: ManufacturerMap[GPUDriverMap.CAMBRICON],
-    locale: true
+    tipLocale: true
   },
   {
     label: 'CPU',

src/pages/backends/forms/versions-config.tsx

@@ -163,7 +163,7 @@ const VersionsForm: React.FC<AddModalProps> = ({
       <span>
         {option.label}
         {data.tips ? (
-          data.locale ? (
+          data.tipLocale ? (
             <span className="text-tertiary m-l-4">{` [${intl.formatMessage({ id: data.tips })}]`}</span>
           ) : (
             <span className="text-tertiary m-l-4">{` [${data.tips}]`}</span>

src/pages/cluster-management/components/add-credential.tsx

@@ -8,12 +8,24 @@ import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Form, Typography } from 'antd';
 import React, { useEffect } from 'react';
+import styled from 'styled-components';
 import { ProviderType, ProviderValueMap } from '../config';
 import {
   CredentialFormData as FormData,
   CredentialListItem as ListItem
 } from '../config/types';
 
+const ExtraContent = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  position: absolute;
+  bottom: 6px;
+  right: 32px;
+  z-index: 1;
+  background: var(--ant-color-bg-container);
+  padding-inline: 8px;
+`;
 type AddModalProps = {
   title: string;
   action: PageActionType;
@@ -105,18 +117,17 @@ const AddModal: React.FC<AddModalProps> = ({
                   id: 'clusters.credential.token'
                 })}
                 required={action === PageAction.CREATE}
-                labelExtra={
-                  <Typography.Link
-                    href="https://cloud.digitalocean.com/account/api/tokens"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    style={{ marginLeft: 8, lineHeight: 1 }}
-                  >
-                    {intl.formatMessage({ id: 'clusters.button.genToken' })}{' '}
-                    <ExportOutlined style={{ fontSize: 12 }} />
-                  </Typography.Link>
-                }
               ></SealInput.Password>
+              <ExtraContent>
+                <Typography.Link
+                  href="https://cloud.digitalocean.com/account/api/tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {intl.formatMessage({ id: 'clusters.button.genToken' })}{' '}
+                  <ExportOutlined style={{ transform: 'scale(0.8)' }} />
+                </Typography.Link>
+              </ExtraContent>
             </Form.Item>
           </>
         )}

src/pages/llmodels/forms/backend.tsx

@@ -1,8 +1,8 @@
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
-import { CaretDownOutlined } from '@ant-design/icons';
+import { CaretDownOutlined, InfoCircleOutlined } from '@ant-design/icons';
-import { useIntl } from '@umijs/max';
+import { useIntl, useNavigate } from '@umijs/max';
 import { Form, Select } from 'antd';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -24,6 +24,7 @@ const CaretDownWrapper = styled.span`
 
 const BackendFields: React.FC = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const { onValuesChange, backendOptions, onBackendChange } = useFormContext();
@@ -193,6 +194,27 @@ const BackendFields: React.FC = () => {
             })}
             onChange={handleBackendVersionOnChange}
             label={intl.formatMessage({ id: 'models.form.backendVersion' })}
+            footer={
+              <dl className="flex" style={{ marginBottom: 0 }}>
+                <dt>
+                  <InfoCircleOutlined />
+                </dt>
+                <dd style={{ marginLeft: 8, marginBottom: 0 }}>
+                  {intl.formatMessage(
+                    {
+                      id: 'models.form.backendVersions.tips'
+                    },
+                    {
+                      link: (
+                        <a onClick={() => navigate('/resources/backends')}>
+                          {intl.formatMessage({ id: 'backends.title' })}
+                        </a>
+                      )
+                    }
+                  )}
+                </dd>
+              </dl>
+            }
           >
             {renderVersionOptions(
               backendVersions.builtIn,

src/pages/llmodels/forms/basic.tsx

@@ -1,16 +1,14 @@
-import { clusterSessionAtom } from '@/atoms/clusters';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
-import { modelNameReg, PageAction } from '@/config';
+import { modelNameReg } from '@/config';
 import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import useAppUtils from '@/hooks/use-app-utils';
 import {
   ClusterStatusLabelMap,
   ClusterStatusValueMap
 } from '@/pages/cluster-management/config';
-import { Link, useIntl } from '@umijs/max';
+import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import { useAtom } from 'jotai';
 import { useMemo } from 'react';
 import { sourceOptions } from '../config';
 import { FormData } from '../config/types';
@@ -30,26 +28,6 @@ interface BasicFormProps {
   onSourceChange?: (value: string) => void;
 }
 
-const NotFoundCredentialContent: React.FC = () => {
-  const [, setFromClusterCreation] = useAtom(clusterSessionAtom);
-  const intl = useIntl();
-  const handleOnClick = () => {
-    setFromClusterCreation({
-      firstAddWorker: false,
-      firstAddCluster: true
-    });
-  };
-
-  return (
-    <Link
-      to={`/cluster-management/clusters/create?action=${PageAction.CREATE}`}
-      onClick={handleOnClick}
-    >
-      {intl.formatMessage({ id: 'noresult.resources.gotocluster' })}
-    </Link>
-  );
-};
-
 const BasicForm: React.FC<BasicFormProps> = (props) => {
   const {
     fields = [],
@@ -140,9 +118,6 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
       >
         {
           <SealSelect
-            notFoundContent={
-              <NotFoundCredentialContent></NotFoundCredentialContent>
-            }
             onChange={handleClusterChange}
             label={intl.formatMessage({ id: 'clusters.title' })}
             options={clusterOptions}