feat: benchmark detail actions

src/pages/benchmark/details.tsx

@@ -1,14 +1,45 @@
+import DeleteModal from '@/components/delete-modal';
+import BaseSelect from '@/components/seal-form/base/select';
 import { useIntl, useNavigate, useSearchParams } from '@umijs/max';
-import React, { useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import React, { useEffect, useRef } from 'react';
 import { PageContainerInner } from '../_components/page-box';
 import PageBreadcrumb from '../_components/page-breadcrumb';
+import { deleteBenchmark } from './apis';
 import DetailContent from './components/detail-content';
+import FadeIn from './components/fade-in';
+import RowActions from './components/row-actions';
+import ViewLogsModal from './components/view-logs-modal';
+import DetailContext from './config/detail-context';
+import { BenchmarkListItem } from './config/types';
+import useViewLogs from './hooks/use-view-logs';
+import useQueryBenchmarkList from './services/use-query-benchmarks';
+import useQueryDetail from './services/use-query-detail';
+import useStopBenchmark from './services/use-stop-benchmark';
 
 const Details: React.FC = () => {
+  const modalRef = useRef<any>(null);
   const navigate = useNavigate();
   const intl = useIntl();
+  const {
+    dataList: benchmarkList,
+    fetchData: fetchBenchmarkList,
+    cancelRequest: cancelBenchmarkRequest
+  } = useQueryBenchmarkList();
+  const { loading, detailData, cancelRequest, fetchData } = useQueryDetail();
+  const { openViewLogsModal, closeViewLogsModal, openViewLogsModalStatus } =
+    useViewLogs();
+  const { handleStopBenchmark } = useStopBenchmark();
   const [searchParams] = useSearchParams();
   const name = searchParams.get('name');
+  const id = searchParams.get('id');
+
+  const handleOnChange = (value: number, option: any) => {
+    navigate(
+      `/models/benchmark/detail?id=${option.value}&name=${option.label}`,
+      { state: 'benchmark-details', replace: true }
+    );
+  };
 
   const breadcrumbItems = [
     {
@@ -16,20 +47,114 @@ const Details: React.FC = () => {
       onClick: () => navigate(-1)
     },
     {
-      title: name
+      title: (
+        <BaseSelect
+          size="small"
+          variant="borderless"
+          options={benchmarkList}
+          value={name}
+          style={{ minWidth: 100 }}
+          popupMatchSelectWidth={false}
+          onChange={handleOnChange}
+        ></BaseSelect>
+      )
     }
   ];
+
+  const handleDelete = (row: BenchmarkListItem) => {
+    modalRef.current?.show({
+      content: 'benchmark.title',
+      operation: 'common.delete.single.confirm',
+      name: row.name,
+      async onOk() {
+        await deleteBenchmark(row.id);
+        fetchBenchmarkList({ page: -1 }).then((items) => {
+          if (items.length === 0) {
+            navigate(-1);
+          } else {
+            handleOnChange(items[0].id, {
+              value: items[0].id,
+              label: items[0].name
+            });
+          }
+        });
+      }
+    });
+  };
+
+  const handleSelect = useMemoizedFn((val: any, row: BenchmarkListItem) => {
+    if (val === 'delete') {
+      handleDelete({ ...row, name: row.name });
+    } else if (val === 'viewlog') {
+      openViewLogsModal(row);
+    } else if (val === 'stop') {
+      handleStopBenchmark(row.id);
+    }
+  });
+
   useEffect(() => {
     document.title = `${intl.formatMessage({ id: 'benchmark.title' })} - ${name}`;
   }, [name, intl]);
 
+  useEffect(() => {
+    fetchBenchmarkList({ page: -1 });
+    return () => {
+      cancelBenchmarkRequest();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      fetchData(id);
+    } else {
+      cancelRequest();
+    }
+  }, [id]);
+
   return (
     <PageContainerInner
       header={{
         title: <PageBreadcrumb items={breadcrumbItems} />
       }}
     >
-      <DetailContent></DetailContent>
+      <DetailContext.Provider
+        value={{
+          detailData: detailData || {},
+          clusterList: [],
+          loading: loading,
+          id: Number(id)
+        }}
+      >
+        <DetailContent
+          tabBarExtraContent={{
+            right: (
+              <FadeIn>
+                <div
+                  style={{
+                    opacity: loading ? 0 : 1,
+                    position: 'relative',
+                    bottom: -2,
+                    right: -1
+                  }}
+                >
+                  <RowActions
+                    page="detail"
+                    record={detailData as any}
+                    handleSelect={handleSelect}
+                  ></RowActions>
+                </div>
+              </FadeIn>
+            )
+          }}
+        ></DetailContent>
+      </DetailContext.Provider>
+      <ViewLogsModal
+        open={openViewLogsModalStatus.open}
+        url={openViewLogsModalStatus.url}
+        tail={openViewLogsModalStatus.tail}
+        onCancel={closeViewLogsModal}
+      ></ViewLogsModal>
+      <DeleteModal ref={modalRef}></DeleteModal>
     </PageContainerInner>
   );
 };