style: button for empty

src/pages/_components/no-result.tsx

@@ -1,4 +1,4 @@
-import { Empty, EmptyProps, Typography } from 'antd';
+import { Button, Empty, EmptyProps, Typography } from 'antd';
 import _ from 'lodash';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -54,9 +54,19 @@ const NoResult: React.FC<
     loading?: boolean;
     loadend?: boolean;
     dataSource?: any[];
+    buttonText?: React.ReactNode;
+    onClick?: () => void;
   }
 > = (props) => {
-  const { filters, noFoundText, loadend, loading, dataSource } = props;
+  const {
+    filters,
+    noFoundText,
+    loadend,
+    loading,
+    dataSource,
+    buttonText,
+    onClick
+  } = props;
 
   const hasFilters = useMemo(() => {
     const filterValues = _.omit(filters, ['page', 'perPage']);
@@ -70,6 +80,15 @@ const NoResult: React.FC<
     });
   }, [filters]);
 
+  const renderChildren = () => {
+    if (!buttonText || !onClick) return null;
+    return (
+      <Button color="primary" variant="filled" onClick={onClick}>
+        {buttonText}
+      </Button>
+    );
+  };
+
   return (
     <>
       {!loading && loadend && !dataSource?.length ? (
@@ -96,7 +115,7 @@ const NoResult: React.FC<
             </Description>
           }
         >
-          {!hasFilters && props.children}
+          {!hasFilters && renderChildren()}
         </StyledEmpty>
       ) : (
         <span></span>

src/pages/api-keys/index.tsx

@@ -6,7 +6,7 @@ import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { Button, ConfigProvider, Table } from 'antd';
+import { ConfigProvider, Table } from 'antd';
 import { useState } from 'react';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
@@ -111,11 +111,9 @@ const APIKeys: React.FC = () => {
         })}
         title={intl.formatMessage({ id: 'noresult.keys.title' })}
         subTitle={intl.formatMessage({ id: 'noresult.keys.subTitle' })}
-      >
+        onClick={handleAddKey}
-        <Button type="primary" onClick={handleAddKey}>
+        buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
-          {intl.formatMessage({ id: 'noresult.button.add' })}
+      ></NoResult>
-        </Button>
-      </NoResult>
     );
   };
 

src/pages/backends/config/index.ts

@@ -3,7 +3,6 @@ import SGLangLogo from '@/assets/logo/sglang.png';
 import vLLMLogo from '@/assets/logo/vllm.png';
 import VoxBoxLogo from '@/assets/logo/voxbox.png';
 import icons from '@/components/icon-font/icons';
-import { GPUSTACK_API_BASE_URL } from '@/config/settings';
 import { backendOptionsMap } from '@/pages/llmodels/config/backend-parameters';
 import {
   GPUDriverMap,
@@ -191,11 +190,23 @@ export const frameworks = [
   }
 ];
 
-export const yamlTemplate = `# backend configuration template
+export const yamlTemplate = `# ----------------------------------------
+# custom backend configuration template
+# ----------------------------------------
+# backend_name: 
+#   - required
+#   - must be endwith '-custom'
+# version_configs:
+#   - image_name: required
+#   - run_command: required
+#   - custom_framework:
+#       - optional
+#       - choose from: ${Object.values(GPUDriverMap).join(', ')}, CPU
+
 backend_name: vllm-custom
 description: this is my custom vllm backend
 default_version: v0.11.0
-health_check_path: /${GPUSTACK_API_BASE_URL}/models
+health_check_path: /v1/models
 default_backend_param:
   - --host
 default_run_command: vllm serve {{model_path}} --port {{port}} --host {{worker_ip}} --served-model-name {{model_name}}

src/pages/backends/index.tsx

@@ -5,7 +5,6 @@ import { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl } from '@umijs/max';
 import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
-import { Button } from 'antd';
 import _ from 'lodash';
 import { useState } from 'react';
 import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
@@ -209,11 +208,9 @@ const BackendList = () => {
           })}
           title={intl.formatMessage({ id: 'noresult.backend.title' })}
           subTitle={intl.formatMessage({ id: 'noresult.backend.subTitle' })}
-        >
+          onClick={handleAddBackend}
-          <Button type="primary" onClick={handleAddBackend}>
+          buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
-            {intl.formatMessage({ id: 'noresult.button.add' })}
+        ></NoResult>
-          </Button>
-        </NoResult>
       </ScrollerContext.Provider>
       <AddModal
         action={openModalStatus.action}

src/pages/cluster-management/clusters.tsx

@@ -11,7 +11,7 @@ import useTableFetch from '@/hooks/use-table-fetch';
 import useWatchList from '@/hooks/use-watch-list';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button, message } from 'antd';
+import { message } from 'antd';
 import { useAtom } from 'jotai';
 import { useEffect, useState } from 'react';
 import NoResult from '../_components/no-result';
@@ -121,7 +121,7 @@ const Clusters: React.FC = () => {
     });
   };
 
-  const handleClickDropdown = (item: any) => {
+  const handleClickDropdown = () => {
     navigate(`/cluster-management/clusters/create?action=${PageAction.CREATE}`);
   };
 
@@ -331,11 +331,9 @@ const Clusters: React.FC = () => {
                 subTitle={intl.formatMessage({
                   id: 'noresult.cluster.subTitle'
                 })}
-              >
+                onClick={handleClickDropdown}
-                <Button type="primary" onClick={handleClickDropdown}>
+                buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
-                  {intl.formatMessage({ id: 'noresult.button.add' })}
+              ></NoResult>
-                </Button>
-              </NoResult>
             }
             pagination={{
               showSizeChanger: true,

src/pages/cluster-management/credentials.tsx

@@ -7,7 +7,7 @@ import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button, ConfigProvider, Table, message } from 'antd';
+import { ConfigProvider, Table, message } from 'antd';
 import { useAtom } from 'jotai';
 import { useState } from 'react';
 import NoResult from '../_components/no-result';
@@ -164,14 +164,9 @@ const Credentials: React.FC = () => {
         subTitle={intl.formatMessage({
           id: 'noresult.credentials.subTitle'
         })}
-      >
+        onClick={() => handleAddCredential(addActions[0])}
-        <Button
+        buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
-          type="primary"
+      ></NoResult>
-          onClick={() => handleAddCredential(addActions[0])}
-        >
-          {intl.formatMessage({ id: 'noresult.button.add' })}
-        </Button>
-      </NoResult>
     );
   };
 

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

@@ -717,15 +717,11 @@ const Models: React.FC<ModelsProps> = ({
               subTitle={intl.formatMessage({
                 id: 'noresult.deployments.subTitle'
               })}
-            >
+              onClick={() => handleClickDropdown({ key: 'catalog' })}
-              <Button
+              buttonText={intl?.formatMessage?.({
-                type="primary"
+                id: 'models.table.button.deploy'
-                iconPosition="end"
+              })}
-                onClick={() => handleClickDropdown({ key: 'catalog' })}
+            ></NoResult>
-              >
-                {intl?.formatMessage?.({ id: 'models.table.button.deploy' })}
-              </Button>
-            </NoResult>
           }
           pagination={{
             showSizeChanger: true,

src/pages/llmodels/hooks/use-no-resource-result.tsx

@@ -4,7 +4,6 @@ import { PageAction } from '@/config';
 import NoResult from '@/pages/_components/no-result';
 import { useIntl, useNavigate } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button } from 'antd';
 import { useAtom } from 'jotai';
 import React, { useMemo } from 'react';
 
@@ -99,11 +98,9 @@ const useNoResourceResult = (props: {
       noFoundText={statusContent.noFoundText}
       title={title}
       subTitle={statusContent.subTitle}
-    >
+      onClick={statusContent.onClick}
-      <Button type="primary" iconPosition="end" onClick={statusContent.onClick}>
+      buttonText={statusContent.buttonText}
-        {statusContent.buttonText}
+    ></NoResult>
-      </Button>
-    </NoResult>
   );
   return {
     noResourceResult

src/pages/users/index.tsx

@@ -6,7 +6,7 @@ import type { PageActionType } from '@/config/types';
 import useTableFetch from '@/hooks/use-table-fetch';
 import { useIntl, useModel } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
-import { Button, ConfigProvider, message, Table } from 'antd';
+import { ConfigProvider, message, Table } from 'antd';
 import { useMemo, useState } from 'react';
 import NoResult from '../_components/no-result';
 import PageBox from '../_components/page-box';
@@ -150,11 +150,9 @@ const Users: React.FC = () => {
         })}
         title={intl.formatMessage({ id: 'noresult.users.title' })}
         subTitle={intl.formatMessage({ id: 'noresult.users.subTitle' })}
-      >
+        onClick={handleAddUser}
-        <Button type="primary" onClick={handleAddUser}>
+        buttonText={intl.formatMessage({ id: 'noresult.button.add' })}
-          {intl.formatMessage({ id: 'noresult.button.add' })}
+      ></NoResult>
-        </Button>
-      </NoResult>
     );
   };