style: usage download button

src/pages/dashboard/components/usage-inner/index.tsx

@@ -1,7 +1,5 @@
-import PageTools from '@/components/page-tools';
-import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Col, DatePicker, Row, Select } from 'antd';
+import { Col, DatePicker, Row, Select } from 'antd';
 import { FC, memo, useContext, useState } from 'react';
 import styled from 'styled-components';
 import { DashboardContext } from '../../config/dashboard-context';
@@ -51,7 +49,6 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
 
   return (
     <div>
-      <PageTools style={{ margin: '0px 0px' }} left={false} />
       <Row style={{ width: '100%' }} gutter={[0, 20]}>
         <Col
           xs={24}
@@ -59,7 +56,7 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           md={24}
           lg={24}
           xl={16}
-          style={{ paddingRight: paddingRight }}
+          style={{ paddingRight: paddingRight, marginTop: 12 }}
         >
           <div
             style={{
@@ -73,13 +70,6 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
               {intl.formatMessage({ id: 'dashboard.usage' })}
             </TitleWrapper>
             <FilterWrapper>
-              <Button
-                type="text"
-                icon={<ExportOutlined />}
-                onClick={handleExport}
-              >
-                {intl.formatMessage({ id: 'common.button.export' })}
-              </Button>
               <div className="selection">
                 <DatePicker.RangePicker
                   style={{ width: 240 }}
@@ -104,12 +94,13 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
             </FilterWrapper>
           </div>
           <RequestTokenInner
+            onExport={handleExport}
             requestData={requestTokenData.requestData}
             xAxisData={requestTokenData.xAxisData}
             tokenData={requestTokenData.tokenData}
           ></RequestTokenInner>
         </Col>
-        <Col xs={24} sm={24} md={24} lg={24} xl={8}>
+        <Col xs={24} sm={24} md={24} lg={24} xl={8} style={{ marginTop: 12 }}>
           <TitleWrapper>
             {intl.formatMessage({ id: 'dashboard.topusers' })}
           </TitleWrapper>

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -1,11 +1,23 @@
 import CardWrapper from '@/components/card-wrapper';
 import { SimpleCard } from '@/components/card-wrapper/simple-card';
 import MixLineBar from '@/components/echarts/mix-line-bar';
+import { ExportOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
+import styled from 'styled-components';
 import { baseColorMap } from '../../config';
 
+const DownloadButton = styled(Button)`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 10;
+`;
+
 interface RequestTokenInnerProps {
+  onExport?: () => void;
   requestData: {
     name: string;
     color: string;
@@ -50,10 +62,19 @@ const legendData = [
 ];
 
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
-  const { requestData, tokenData, xAxisData } = props;
+  const { requestData, tokenData, xAxisData, onExport } = props;
+  const intl = useIntl();
 
   return (
-    <CardWrapper style={{ width: '100%' }}>
+    <CardWrapper style={{ width: '100%', position: 'relative' }}>
+      <DownloadButton
+        type="text"
+        icon={<ExportOutlined />}
+        size="small"
+        onClick={onExport}
+      >
+        {intl.formatMessage({ id: 'common.button.export' })}
+      </DownloadButton>
       <SimpleCard dataList={dataList} height={80}></SimpleCard>
       <MixLineBar
         chartData={{

src/pages/llmodels/components/deploy-modal.tsx

@@ -196,8 +196,8 @@ const AddModal: FC<AddModalProps> = (props) => {
      *  unitl the evaluate result is ready
      */
     form.current?.setFieldsValue?.({
-      file_name: item.fakeName,
       ...modelInfo,
+      file_name: item.fakeName,
       categories: getCategory(item)
     });
 
@@ -233,9 +233,9 @@ const AddModal: FC<AddModalProps> = (props) => {
         form.current?.getFieldValue?.('backend_parameters') || [];
 
       form.current?.setFieldsValue?.({
-        file_name: item.fakeName,
         ...defaultSpec,
         ...modelInfo,
+        file_name: item.fakeName,
         backend_parameters:
           formBackendParameters.length > 0
             ? formBackendParameters

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

@@ -41,10 +41,6 @@ interface HFModelFileProps {
   ref: any;
   gpuOptions?: any[];
   onSelectFile?: (file: any, evaluate?: boolean) => void;
-  displayEvaluateStatus?: (data: {
-    show?: boolean;
-    flag: Record<string, boolean>;
-  }) => void;
 }
 
 const pattern = /^(.*)-(\d+)-of-(\d+)\.(.*)$/;
@@ -54,7 +50,7 @@ const includeReg = /\.(safetensors|gguf)$/i;
 const filterRegGGUF = /\.(gguf)$/i;
 
 const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
-  const { collapsed, modelSource, isDownload, displayEvaluateStatus } = props;
+  const { collapsed, modelSource, isDownload } = props;
   const intl = useIntl();
   const [isEvaluating, setIsEvaluating] = useState(false);
   const [dataSource, setDataSource] = useState<any>({
@@ -260,12 +256,7 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
         resultList,
         (item: any) => item.path === currentPathRef.current
       );
-      displayEvaluateStatus?.({
+
-        show: false,
-        flag: {
-          file: false
-        }
-      });
       if (currentItem) {
         handleSelectModelFile(currentItem, true);
       }
@@ -273,12 +264,6 @@ const HFModelFile: React.FC<HFModelFileProps> = forwardRef((props, ref) => {
       setIsEvaluating(false);
     } catch (error) {
       setIsEvaluating(false);
-      displayEvaluateStatus?.({
-        show: false,
-        flag: {
-          file: false
-        }
-      });
     }
   };
 

src/pages/llmodels/hooks/index.ts

@@ -630,6 +630,7 @@ export const useSelectModel = (data: { gpuOptions: any[] }) => {
 
     return {
       repo_id: selectModel.name,
+      file_name: '',
       name: name,
       backend: backend
     };