chore: profile config

src/pages/benchmark/components/configure/benchmark.tsx

@@ -0,0 +1,64 @@
+import { Descriptions, DescriptionsProps } from 'antd';
+import React from 'react';
+import { useDetailContext } from '../../config/detail-context';
+import Section from '../summary/section';
+
+const Benchmark: React.FC = () => {
+  const { detailData } = useDetailContext();
+
+  const items: DescriptionsProps['items'] = [
+    {
+      key: '1',
+      label: 'Profile',
+      children: detailData?.profile || '-'
+    },
+    {
+      key: '2',
+      label: 'Dataset',
+      children: detailData?.dataset_name || '-'
+    },
+    {
+      key: '3',
+      label: 'Token Length (In/Out)',
+      children: (
+        <span>
+          {detailData?.dataset_input_tokens || '-'} /{' '}
+          {detailData?.dataset_output_tokens || '-'}
+        </span>
+      )
+    },
+    {
+      key: '5',
+      label: 'Seed',
+      children: detailData?.seed || '-'
+    },
+    {
+      key: '6',
+      label: 'Request Rate',
+      children: detailData?.request_rate || '-'
+    },
+    {
+      key: '7',
+      label: 'Total Requests',
+      children: detailData?.total_requests || '-'
+    }
+  ];
+
+  return (
+    <Section title="Benchmark Parameters">
+      <Descriptions
+        items={items}
+        colon={false}
+        column={3}
+        layout="vertical"
+        styles={{
+          content: {
+            justifyContent: 'flex-start'
+          }
+        }}
+      ></Descriptions>
+    </Section>
+  );
+};
+
+export default Benchmark;

src/pages/benchmark/components/configure/index.tsx

@@ -1,9 +1,23 @@
 import React from 'react';
+import styled from 'styled-components';
 import { useDetailContext } from '../../config/detail-context';
+import Benchmark from './benchmark';
+import Instance from './instance';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
 
 const Configure: React.FC = () => {
   const { detailData } = useDetailContext();
-  return <div>Configure Content</div>;
+  return (
+    <Container>
+      <Instance />
+      <Benchmark />
+    </Container>
+  );
 };
 
 export default Configure;

src/pages/benchmark/components/configure/instance.tsx

@@ -0,0 +1,101 @@
+import StatusTag from '@/components/status-tag';
+import { InstanceStatusMapValue, status } from '@/pages/llmodels/config';
+import { convertFileSize } from '@/utils';
+import { Descriptions } from 'antd';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import { useDetailContext } from '../../config/detail-context';
+import Section from '../summary/section';
+
+const calcTotalVram = (vram: Record<string, number>) => {
+  return _.sum(_.values(vram));
+};
+
+const Instance: React.FC = () => {
+  const { detailData } = useDetailContext();
+
+  const items = useMemo(() => {
+    const { snapshot } = detailData;
+    const [instanceName, instanceData] =
+      Object.entries(snapshot.instances || {})[0] || [];
+    return [
+      {
+        key: '1',
+        label: 'Instance Name',
+        children: (
+          <div className="flex-center gap-8">
+            <span>{instanceName}</span>
+            <StatusTag
+              statusValue={{
+                status: status[instanceData.state],
+                text: InstanceStatusMapValue[instanceData.state],
+                message: detailData.state_message || undefined
+              }}
+            />
+          </div>
+        )
+      },
+      {
+        key: '2',
+        label: 'Worker',
+        children: instanceData?.worker_name || '-'
+        // children:
+        //   instanceData?.ports?.length > 0
+        //     ? `${instanceData.worker_ip}:${instanceData.ports[0]}`
+        //     : instanceData.worker_ip || '-'
+      },
+      {
+        key: '3',
+        label: 'GPU Indexes',
+        children:
+          _.join(
+            instanceData.gpu_indexes?.sort?.((a, b) => a - b),
+            ','
+          ) || '-'
+      },
+      {
+        key: '6',
+        label: 'GPU Type',
+        children: instanceData?.gpu_type || '-'
+      },
+      {
+        key: '4',
+        label: 'Allocated VRAM',
+        children:
+          convertFileSize(
+            instanceData.computed_resource_claim?.vram
+              ? calcTotalVram(instanceData.computed_resource_claim?.vram)
+              : 0,
+            1
+          ) || '-'
+      },
+      {
+        key: '5',
+        label: 'Backend',
+        children: `${instanceData?.backend || '-'} ${
+          instanceData.backend_version
+            ? `(${instanceData.backend_version})`
+            : ''
+        }`
+      }
+    ];
+  }, [detailData]);
+
+  return (
+    <Section title="Model Instance">
+      <Descriptions
+        items={items}
+        colon={false}
+        column={3}
+        layout="vertical"
+        styles={{
+          content: {
+            justifyContent: 'flex-start'
+          }
+        }}
+      ></Descriptions>
+    </Section>
+  );
+};
+
+export default Instance;

src/pages/benchmark/components/environment/gpu-data.tsx

@@ -1,16 +1,28 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import { convertFileSize } from '@/utils';
 import { Descriptions, DescriptionsProps } from 'antd';
 import React from 'react';
+import styled from 'styled-components';
 import { GPUData } from '../../config/detail-types';
 import Section from '../summary/section';
 
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+  .name {
+    font-weight: 500;
+  }
+`;
+
 const Environment: React.FC<GPUData> = (props) => {
   const items: DescriptionsProps['items'] = [
-    {
-      key: '4',
-      label: 'Name',
-      children: props.name
-    },
+    // {
+    //   key: '4',
+    //   label: 'Name',
+    //   children: <AutoTooltip ghost>{props.name}</AutoTooltip>
+    // },
     {
       key: '1',
       label: 'VRAM',
@@ -18,12 +30,12 @@ const Environment: React.FC<GPUData> = (props) => {
     },
     {
       key: '3',
-      label: 'Driver Version',
+      label: 'Driver',
       children: props.driver_version
     },
     {
       key: '2',
-      label: 'Runtime Version',
+      label: 'Runtime',
       children: props.runtime_version
     },
     {
@@ -35,21 +47,36 @@ const Environment: React.FC<GPUData> = (props) => {
       key: '5',
       label: 'Vendor',
       children: props.vendor
+    },
+    {
+      key: '7',
+      label: 'GPU Type',
+      children: props.type
     }
   ];
   return (
-    <Section title={`GPU ${props.index}`}>
-      <Descriptions
-        items={items}
-        colon={false}
-        column={3}
-        layout="vertical"
-        styles={{
-          content: {
-            justifyContent: 'flex-start'
-          }
-        }}
-      ></Descriptions>
+    <Section
+      title={
+        <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+          GPU {props.index}
+        </span>
+      }
+    >
+      <Content>
+        <div className="name">
+          <AutoTooltip ghost>{props.name}</AutoTooltip>
+        </div>
+        <Descriptions
+          items={items}
+          colon={true}
+          column={3}
+          styles={{
+            content: {
+              justifyContent: 'flex-start'
+            }
+          }}
+        ></Descriptions>
+      </Content>
     </Section>
   );
 };

src/pages/benchmark/components/environment/index.tsx

@@ -63,7 +63,14 @@ const Environment: React.FC = () => {
         gpuData={mainWorker.gpuData}
         title={
           <div className="flex-center gap-8">
-            <Tag color="geekblue">Sub</Tag>
+            <Tag
+              style={{
+                backgroundColor: 'var(--ant-color-fill-secondary)',
+                color: 'var(--ant-color-text-tertiary)'
+              }}
+            >
+              Sub
+            </Tag>
             <span>{mainWorker?.workerData?.name}</span>
           </div>
         }

src/pages/benchmark/components/environment/worker-data.tsx

@@ -31,6 +31,10 @@ const Environment: React.FC<{
       <Section
         title={title}
         styles={{
+          wraper: {
+            border: 'none',
+            overflow: 'unset'
+          },
           container: {
             border: 'none',
             paddingInline: 16,

src/pages/benchmark/components/left-actions.tsx

@@ -1,3 +1,4 @@
+import BaseSelect from '@/components/seal-form/base/select';
 import { SearchOutlined, SyncOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
@@ -6,11 +7,19 @@ import React from 'react';
 export interface RightActionsProps {
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   handleSearch: () => void;
+  handleQueryChange: (value: any, option?: any) => void;
+  modelList?: Global.BaseOption<number>[];
+  datasetList?: Global.BaseOption<string>[];
+  gpuVendorList?: Global.BaseOption<string>[];
 }
 
 const RightActions: React.FC<RightActionsProps> = ({
   handleInputChange,
-  handleSearch
+  handleSearch,
+  handleQueryChange,
+  modelList,
+  datasetList,
+  gpuVendorList
 }) => {
   const intl = useIntl();
 
@@ -29,7 +38,42 @@ const RightActions: React.FC<RightActionsProps> = ({
         allowClear
         onChange={handleInputChange}
       ></Input>
-      {/* <CompareConditions></CompareConditions> */}
+      <BaseSelect
+        allowClear
+        placeholder="Filter by model"
+        style={{ width: 150 }}
+        options={modelList}
+        onChange={(value, option) =>
+          handleQueryChange({
+            model_name: value,
+            page: 1
+          })
+        }
+      ></BaseSelect>
+      <BaseSelect
+        allowClear
+        placeholder="Filter by dataset"
+        style={{ width: 150 }}
+        options={datasetList}
+        onChange={(value, option) =>
+          handleQueryChange({
+            dataset_name: value,
+            page: 1
+          })
+        }
+      ></BaseSelect>
+      <BaseSelect
+        allowClear
+        placeholder="Filter by GPU vendor"
+        onChange={(value, option) =>
+          handleQueryChange({
+            gpu_summary: value,
+            page: 1
+          })
+        }
+        style={{ width: 180 }}
+        options={gpuVendorList}
+      ></BaseSelect>
       <Button
         type="text"
         style={{ color: 'var(--ant-color-text-tertiary)' }}

src/pages/benchmark/components/right-actions.tsx

@@ -12,6 +12,7 @@ export interface RightActionsProps {
   handleDeleteByBatch: () => void;
   handleClickPrimary?: () => void;
   handleSettingFields?: () => void;
+  handleExport?: () => void;
   settingButton?: React.ReactNode;
   buttonText?: string;
   rowSelection: {
@@ -23,6 +24,7 @@ const RightActions: React.FC<RightActionsProps> = ({
   handleDeleteByBatch,
   handleClickPrimary,
   handleSettingFields,
+  handleExport,
   settingButton,
   buttonText,
   rowSelection
@@ -36,7 +38,7 @@ const RightActions: React.FC<RightActionsProps> = ({
     },
     {
       label: 'common.button.delete',
-      key: 'start',
+      key: 'delete',
       props: {
         danger: true
       },
@@ -44,7 +46,13 @@ const RightActions: React.FC<RightActionsProps> = ({
     }
   ];
 
-  const handleActionSelect = (val: string) => {};
+  const handleActionSelect = (val: string) => {
+    if (val === 'delete') {
+      handleDeleteByBatch();
+    } else if (val === 'export') {
+      handleExport?.();
+    }
+  };
 
   return (
     <Space size={16}>

src/pages/benchmark/components/summary/basic.tsx

@@ -1,12 +1,10 @@
 import AutoTooltip from '@/components/auto-tooltip';
-import StatusTag from '@/components/status-tag';
 import { useIntl } from '@umijs/max';
 import { Col, Descriptions, DescriptionsProps, Row, Statistic } from 'antd';
 import dayjs from 'dayjs';
 import { round } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-import { BenchmarkStatus, BenchmarkStatusLabelMap } from '../../config';
 import { useDetailContext } from '../../config/detail-context';
 import PercentileResult from './percentile-result';
 import Section from './section';
@@ -158,7 +156,7 @@ const Summary: React.FC = () => {
     <Container>
       <Row gutter={16}>
         {cardFields.map((field) => (
-          <Col span={8} key={field.key} style={{ padding: '8px' }}>
+          <Col span={4} key={field.key} style={{ padding: '8px' }}>
             <Card>
               <Statistic
                 title={field.label}
@@ -180,17 +178,7 @@ const Summary: React.FC = () => {
           </Col>
         ))}
       </Row>
-      <Section>
-        <div className="flex-center section-title gap-8">
-          <span>{detailData.model_instance_name}</span>
-          <StatusTag
-            statusValue={{
-              status: BenchmarkStatus[detailData.state],
-              text: BenchmarkStatusLabelMap[detailData.state],
-              message: detailData.state_message || undefined
-            }}
-          />
-        </div>
+      <Section title="Metadata">
         <Descriptions
           items={items}
           colon={false}
@@ -205,10 +193,7 @@ const Summary: React.FC = () => {
       </Section>
 
       <Box>
-        <Section>
-          <div className="flex-center section-title gap-8">
-            <span>Throughput</span>
-          </div>
+        <Section title="Throughput">
           <Descriptions
             items={throughputFields}
             colon={true}
@@ -220,10 +205,7 @@ const Summary: React.FC = () => {
             }}
           ></Descriptions>
         </Section>
-        <Section>
-          <div className="flex-center section-title gap-8">
-            <span>Latency</span>
-          </div>
+        <Section title="Latency">
           <Descriptions
             items={latencyFields}
             colon={true}

src/pages/benchmark/components/summary/metrics.tsx

@@ -1,7 +1,5 @@
-import _ from 'lodash';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useDetailContext } from '../../config/detail-context';
-import useQueryMtrics from '../../services/use-query-metrics';
 
 const fields = [
   'requests_per_second_mean',
@@ -15,25 +13,7 @@ const fields = [
 ];
 
 const Summary: React.FC = () => {
-  const { detailData, id } = useDetailContext();
-  const {
-    detailData: metricsData,
-    fetchData,
-    cancelRequest
-  } = useQueryMtrics();
-
-  useEffect(() => {
-    if (id) {
-      fetchData({
-        id: id,
-        data: {
-          ..._.pick(detailData, fields)
-        }
-      });
-    } else {
-      cancelRequest();
-    }
-  }, [id]);
+  const { detailData } = useDetailContext();
   return <div></div>;
 };
 

src/pages/benchmark/components/summary/section.tsx

@@ -1,8 +1,14 @@
 import styled from 'styled-components';
 
+const Wrapper = styled.div`
+  border: 1px solid var(--ant-color-border);
+  border-radius: var(--ant-border-radius);
+  overflow: hidden;
+`;
+
 const Container = styled.div`
   padding: 16px;
-  border: 1px solid var(--ant-color-border);
+  // border: 1px solid var(--ant-color-border);
   border-radius: 4px;
   .section-title {
     font-weight: 500;
@@ -17,25 +23,29 @@ const Container = styled.div`
 const Title = styled.div`
   display: flex;
   font-weight: 500;
-  margin-bottom: 12px;
+  // margin-bottom: 12px;
   font-size: 14px;
   gap: 8px;
+  padding: 12px 16px;
   align-items: center;
+  background-color: var(--ant-color-fill-tertiary);
+  border-radius: 4px 4px 0 0;
 `;
 
 const DetailSection: React.FC<{
   children: React.ReactNode;
   title?: React.ReactNode;
   styles?: {
+    wraper?: React.CSSProperties;
     container?: React.CSSProperties;
     title?: React.CSSProperties;
   };
 }> = ({ children, title, styles }) => {
   return (
-    <Container style={styles?.container}>
+    <Wrapper style={styles?.wraper}>
       {title && <Title style={styles?.title}>{title}</Title>}
-      {children}
-    </Container>
+      <Container style={styles?.container}>{children}</Container>
+    </Wrapper>
   );
 };