fix: failed field auto scroll in view

src/pages/resources/components/add-worker-macos.tsx

@@ -1,110 +0,0 @@
-import { useIntl } from '@umijs/max';
-import { Space, Typography } from 'antd';
-import React, { useMemo } from 'react';
-
-const { Text } = Typography;
-
-interface AddWorkerMacOSProps {
-  token?: string;
-  platform: {
-    os: string;
-    downloadurl: string;
-    supportVersions: string;
-  };
-}
-
-const registerWorkerSteps = [
-  'resources.register.worker.step2',
-  `resources.register.worker.step4`,
-  'resources.register.worker.step5',
-  'resources.register.worker.step6',
-  `resources.register.worker.step7`
-];
-
-const AddWorkerMacOS: React.FC<AddWorkerMacOSProps> = ({ platform }) => {
-  const intl = useIntl();
-  const labels = useMemo(
-    () => ({
-      step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
-      step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
-      step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
-      step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
-      linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
-    }),
-    [intl]
-  );
-  return (
-    <div className="script-install">
-      <h3 className="font-size-14 font-600">
-        1.{' '}
-        {intl.formatMessage(
-          { id: 'resources.register.install.title' },
-          { os: platform.os }
-        )}
-      </h3>
-      <Typography.Paragraph type="secondary" style={{ paddingLeft: 14 }}>
-        <span
-          dangerouslySetInnerHTML={{
-            __html: intl.formatMessage(
-              { id: 'resources.register.download' },
-              {
-                versions: intl.formatMessage({
-                  id: platform.supportVersions
-                }),
-                url: platform.downloadurl
-              }
-            )
-          }}
-        ></span>
-      </Typography.Paragraph>
-      <h3 className="font-size-14 font-600">
-        2. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
-      </h3>
-      <Typography.Paragraph style={{ paddingLeft: 14 }}>
-        <div className="flex">
-          <Typography.Text type="secondary">
-            <span
-              dangerouslySetInnerHTML={{
-                __html: intl.formatMessage({
-                  id: 'resources.register.worker.step1'
-                })
-              }}
-            ></span>
-          </Typography.Text>
-        </div>
-      </Typography.Paragraph>
-      <h3 className="m-t-10 font-size-14 font-600">
-        3. {labels.step2}{' '}
-        <span
-          className="font-size-12"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
-          dangerouslySetInnerHTML={{
-            __html: `${labels.step2Tips}`
-          }}
-        ></span>
-      </h3>
-      <Typography.Paragraph style={{ paddingLeft: 14 }}>
-        <div className="flex">
-          <Space direction="vertical">
-            {registerWorkerSteps.map((step, index) => (
-              <Typography.Text key={index} type="secondary">
-                {index + 1}.{' '}
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: intl.formatMessage(
-                      { id: step },
-                      { url: window.location.origin }
-                    )
-                  }}
-                ></span>
-              </Typography.Text>
-            ))}
-          </Space>
-        </div>
-      </Typography.Paragraph>
-      <h3 className="m-b-0 m-t-10 font-size-14 font-600">4. {labels.step3}</h3>
-    </div>
-  );
-};
-
-export default AddWorkerMacOS;

src/pages/resources/components/container-install.tsx

@@ -1,125 +0,0 @@
-import { GPUStackVersionAtom } from '@/atoms/user';
-import { getAtomStorage } from '@/atoms/utils';
-import HighlightCode from '@/components/highlight-code';
-import CommandViewer from '@/pages/_components/command-viewer';
-import { useIntl } from '@umijs/max';
-import { Radio } from 'antd';
-import React from 'react';
-import { addWorkerGuide, containerInstallOptions } from '../config';
-import './styles/installation.less';
-
-type ViewModalProps = {
-  registrationInfo: {
-    token: string;
-    image: string;
-    server_url: string;
-  };
-};
-
-const npuOptions = [
-  { label: '910B', value: 'npu' },
-  { label: '310P', value: 'npu310p' }
-];
-
-const AddWorker: React.FC<ViewModalProps> = (props) => {
-  const { registrationInfo } = props || {};
-  const intl = useIntl();
-
-  const origin = window.location.origin;
-  const [activeKey, setActiveKey] = React.useState('cuda');
-  const [npuKey, setNpuKey] = React.useState('npu');
-  const versionInfo = getAtomStorage(GPUStackVersionAtom);
-
-  const code = React.useMemo(() => {
-    let version = versionInfo?.version;
-    if (!version || !versionInfo.isProduction) {
-      version = 'main';
-    }
-
-    let commandCode = addWorkerGuide[activeKey];
-
-    if (npuKey === 'npu310p' && activeKey === 'npu') {
-      commandCode = addWorkerGuide[npuKey];
-    }
-
-    const tag = activeKey === 'cuda' ? version : `${version}-${activeKey}`;
-
-    return commandCode?.registerWorker({
-      server: registrationInfo.server_url || origin,
-      tag: tag,
-      image: registrationInfo.image,
-      token: registrationInfo.token || '${token}',
-      workerip: '${workerip}'
-    });
-  }, [
-    versionInfo,
-    activeKey,
-    registrationInfo.token,
-    registrationInfo.server_url,
-    npuKey
-  ]);
-
-  const handleOnChange = (value: string | number) => {
-    setNpuKey(value as string);
-  };
-
-  return (
-    <div className="container-install">
-      <h3 className="m-t-0 font-size-14 font-600">
-        1. {intl.formatMessage({ id: 'resources.worker.add.step2' })}{' '}
-        <span
-          className="font-size-12"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
-          dangerouslySetInnerHTML={{
-            __html: `${intl.formatMessage({
-              id: 'resources.worker.add.step2.tips'
-            })}`
-          }}
-        ></span>
-      </h3>
-      <div className="m-b-16">
-        <Radio.Group
-          block
-          options={containerInstallOptions}
-          defaultValue={activeKey}
-          value={activeKey}
-          optionType="button"
-          buttonStyle="solid"
-          onChange={(e) => setActiveKey(e.target.value)}
-          size="small"
-        />
-      </div>
-      {activeKey === 'npu' && (
-        <div
-          className="m-b-8 text-tertiary"
-          dangerouslySetInnerHTML={{
-            __html: intl.formatMessage({ id: 'resources.worker.cann.tips' })
-          }}
-        ></div>
-      )}
-      {activeKey === 'npu' ? (
-        <CommandViewer
-          headerHeight={32}
-          copyText={code}
-          options={npuOptions}
-          defaultValue="npu"
-          onChange={handleOnChange}
-          lang="bash"
-          code={code.replace(/\\/g, '')}
-        ></CommandViewer>
-      ) : (
-        <HighlightCode
-          theme="dark"
-          code={code.replace(/\\/g, '')}
-          copyValue={code}
-          lang="bash"
-        ></HighlightCode>
-      )}
-      <h3 className="m-b-0 m-t-10 font-size-14 font-600">
-        2. {intl.formatMessage({ id: 'resources.worker.add.step3' })}
-      </h3>
-    </div>
-  );
-};
-
-export default AddWorker;

src/pages/resources/components/gpus.tsx

@@ -18,6 +18,7 @@ const GPUList: React.FC = () => {
     extraStatus,
     handlePageChange,
     handleTableChange,
+    handleQueryChange,
     handleSearch,
     handleNameChange
   } = useTableFetch<GPUDeviceItem>({
@@ -44,6 +45,13 @@ const GPUList: React.FC = () => {
     }
   };
 
+  const handleClusterChange = (value: number) => {
+    handleQueryChange({
+      page: 1,
+      cluster_id: value
+    });
+  };
+
   const renderEmpty = (type?: string) => {
     if (type !== 'Table') return;
     return (
@@ -79,13 +87,16 @@ const GPUList: React.FC = () => {
       <PageBox>
         <FilterBar
           marginBottom={22}
-          marginTop={30}
           buttonText={intl.formatMessage({ id: 'resources.button.create' })}
+          selectHolder={intl.formatMessage({ id: 'clusters.filterBy.cluster' })}
           handleSearch={handleSearch}
           handleInputChange={handleNameChange}
+          handleSelectChange={handleClusterChange}
           showDeleteButton={false}
           showPrimaryButton={false}
-          width={{ input: 300 }}
+          selectOptions={clusterList}
+          showSelect
+          width={{ input: 200 }}
         ></FilterBar>
         <ConfigProvider renderEmpty={renderEmpty}>
           <Table

src/pages/resources/components/script-install.tsx

@@ -1,70 +0,0 @@
-import HighlightCode from '@/components/highlight-code';
-import { useIntl } from '@umijs/max';
-import React, { useMemo } from 'react';
-import { addWorkerGuide } from '../config';
-
-type ViewModalProps = { token: string };
-
-const AddWorker: React.FC<ViewModalProps> = (props) => {
-  const intl = useIntl();
-
-  const origin = window.location.origin;
-
-  const labels = useMemo(
-    () => ({
-      step1: intl.formatMessage({ id: 'resources.worker.add.step1' }),
-      step2: intl.formatMessage({ id: 'resources.worker.add.step2' }),
-      step2Tips: intl.formatMessage({ id: 'resources.worker.add.step2.tips' }),
-      step3: intl.formatMessage({ id: 'resources.worker.add.step3' }),
-      linuxOrMac: intl.formatMessage({ id: 'resources.worker.linuxormaxos' })
-    }),
-    [intl]
-  );
-
-  return (
-    <div className="script-install">
-      <h3 className="font-size-14 font-600">
-        1. <span dangerouslySetInnerHTML={{ __html: labels.step1 }}></span>
-      </h3>
-      <h4 className="font-size-13">{labels.linuxOrMac}</h4>
-      <HighlightCode
-        code={addWorkerGuide.mac.getToken}
-        theme="dark"
-      ></HighlightCode>
-      <h4 className="m-t-6 font-size-13">Windows </h4>
-      <HighlightCode
-        code={addWorkerGuide.win.getToken}
-        theme="dark"
-      ></HighlightCode>
-      <h3 className="m-t-10 font-size-14 font-600">
-        2. {labels.step2}{' '}
-        <span
-          className="font-size-12"
-          style={{ color: 'var(--ant-color-text-tertiary)' }}
-          dangerouslySetInnerHTML={{
-            __html: `${labels.step2Tips}`
-          }}
-        ></span>
-      </h3>
-      <h4 className="font-size-13">{labels.linuxOrMac}</h4>
-      <HighlightCode
-        code={addWorkerGuide.mac.registerWorker({
-          server: origin,
-          token: '${token}'
-        })}
-        theme="dark"
-      ></HighlightCode>
-      <h4 className="m-t-6 font-size-13">Windows</h4>
-      <HighlightCode
-        theme="dark"
-        code={addWorkerGuide.win.registerWorker({
-          server: origin,
-          token: '${token}'
-        })}
-      ></HighlightCode>
-      <h3 className="m-b-0 m-t-10 font-size-14 font-600">3. {labels.step3}</h3>
-    </div>
-  );
-};
-
-export default AddWorker;

src/pages/resources/components/workers.tsx

@@ -226,19 +226,7 @@ const Workers: React.FC = () => {
 
   return (
     <>
-      <PageBox
-        ghost
-        footer={[
-          <TerminalTabs
-            height={300}
-            key="terminal-tabs"
-            terminals={terminals}
-            open={terminalModalStatus.open}
-            currentActive={terminalModalStatus.currentActive}
-            onClose={handleTerminalClose}
-          />
-        ]}
-      >
+      <PageBox>
         <FilterBar
           showSelect={true}
           showPrimaryButton={false}
@@ -291,6 +279,14 @@ const Workers: React.FC = () => {
             setWorkerDetailStatus({ currentData: null, open: false })
           }
         />
+        <TerminalTabs
+          height={300}
+          key="terminal-tabs"
+          terminals={terminals}
+          open={terminalModalStatus.open}
+          currentActive={terminalModalStatus.currentActive}
+          onClose={handleTerminalClose}
+        />
       </PageBox>
     </>
   );