gpustack-ui/src/pages/backends/index.tsx

import DeleteModal from '@/components/delete-modal';
import { FilterBar } from '@/components/page-tools';
import { PageActionType } from '@/config/types';
import useTableFetch from '@/hooks/use-table-fetch';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import useMemoizedFn from 'ahooks/lib/useMemoizedFn';
import _ from 'lodash';
import { useState } from 'react';
import { ScrollerContext } from '../_components/infinite-scroller/use-scroller-context';
import {
  createBackend,
  createBackendFromYAML,
  deleteBackend,
  INFERENCE_BACKEND_API,
  queryBackendsList,
  updateBackend,
  updateBackendFromYAML
} from './apis';
import AddModal from './components/add-modal';
import BackendCardList from './components/backend-list';
import VersionInfoModal from './components/version-info-modal';
import { json2Yaml, yaml2Json } from './config';
import { FormData, ListItem } from './config/types';
import useExportYAML from './hooks/use-export-yaml';

const BackendList = () => {
  const intl = useIntl();

  const {
    dataSource,
    rowSelection,
    queryParams,
    modalRef,
    fetchData,
    handleDelete,
    handleDeleteBatch,
    handlePageChange,
    handleTableChange,
    handleSearch,
    handleNameChange,
    handleQueryChange
  } = useTableFetch<ListItem>({
    fetchAPI: queryBackendsList,
    deleteAPI: deleteBackend,
    API: INFERENCE_BACKEND_API,
    watch: false,
    isInfiniteScroll: true,
    contentForDelete: 'backends.title',
    defaultQueryParams: {
      perPage: 24
    }
  });
  const { exportYAML } = useExportYAML();
  const [openModalStatus, setOpenModalStatus] = useState<{
    open: boolean;
    action: PageActionType;
    currentData?: Partial<ListItem>;
  }>({ open: false, action: 'create' });
  const [openVersionInfoModal, setOpenVersionInfoModal] = useState<{
    open: boolean;
    currentData?: Partial<ListItem>;
  }>({ open: false });

  // built_in_version_configs is read-only, but needs to be included when updating
  const handleOnSubmit = async (values: FormData) => {
    try {
      if (openModalStatus.action === 'create') {
        await createBackend({ data: values });
      } else {
        await updateBackend(openModalStatus.currentData!.id!, {
          data: {
            built_in_version_configs:
              openModalStatus.currentData?.built_in_version_configs,
            ..._.omit(values, ['built_in_version_configs']),
            health_check_path: values.health_check_path || null
          }
        });
      }
      setOpenModalStatus({
        open: false,
        action: 'create',
        currentData: undefined
      });
      handleSearch();
    } catch (error) {}
  };

  // built_in_version_configs needs to be included when updating from YAML, but not allowed to be changed
  const handleOnSubmitYaml = async (values: { content: string }) => {
    try {
      if (openModalStatus.action === 'create') {
        await createBackendFromYAML({ data: values });
      } else {
        const jsonData = yaml2Json(values.content);
        const yamlContent = json2Yaml({
          backend_name: openModalStatus.currentData?.backend_name,
          default_version: openModalStatus.currentData?.default_version,
          built_in_version_configs:
            openModalStatus.currentData?.built_in_version_configs,
          ...jsonData
        });
        await updateBackendFromYAML(openModalStatus.currentData!.id!, {
          data: {
            content: yamlContent
          }
        });
      }
      setOpenModalStatus({
        open: false,
        action: 'create',
        currentData: undefined
      });
      handleSearch();
    } catch (error) {}
  };

  const handleAddBackend = () => {
    setOpenModalStatus({
      open: true,
      action: 'create'
    });
  };

  const handleOnSelect = (item: any) => {
    if (item.action === 'edit') {
      setOpenModalStatus({
        open: true,
        action: 'edit',
        currentData: item.data
      });
    } else if (item.action === 'delete') {
      handleDelete(item.data, {
        name: item.data.backend_name
      });
    } else if (item.action === 'export') {
      const currentData = structuredClone(item.data);

      currentData.version_configs = _.mapValues(
        currentData.version_configs,
        (v: any) => {
          return _.omit(v, ['built_in_frameworks']);
        }
      );

      exportYAML(_.omit(currentData, ['id', 'created_at', 'updated_at']));
    } else if (item.action === 'view_versions') {
      setOpenVersionInfoModal({
        open: true,
        currentData: item.data
      });
    }
  };

  const loadMore = useMemoizedFn((nextPage: number) => {
    fetchData({
      ...queryParams,
      page: nextPage
    });
  });

  return (
    <PageContainer
      ghost
      header={{
        title: intl.formatMessage({ id: 'menu.resources.backendsList' }),
        style: {
          paddingInline: 'var(--layout-content-header-inlinepadding)'
        },
        breadcrumb: {}
      }}
      extra={[]}
    >
      <FilterBar
        showDeleteButton={false}
        marginBottom={22}
        marginTop={30}
        width={{
          input: 300
        }}
        inputHolder={intl.formatMessage({ id: 'common.filter.name' })}
        buttonText={intl.formatMessage({ id: 'backend.button.add' })}
        handleDeleteByBatch={handleDeleteBatch}
        handleClickPrimary={handleAddBackend}
        handleSearch={handleSearch}
        handleInputChange={handleNameChange}
        rowSelection={rowSelection}
        showSelect={false}
      ></FilterBar>

      <ScrollerContext.Provider
        value={{
          total: dataSource.totalPage,
          current: queryParams.page!,
          loading: dataSource.loading,
          refresh: loadMore,
          throttleDelay: 300
        }}
      >
        <BackendCardList
          dataList={dataSource.dataList}
          loading={dataSource.loading}
          activeId={false}
          isFirst={!dataSource.loadend}
          onSelect={handleOnSelect}
        ></BackendCardList>
      </ScrollerContext.Provider>
      <AddModal
        action={openModalStatus.action}
        onClose={() => setOpenModalStatus({ open: false, action: 'create' })}
        onSubmit={handleOnSubmit}
        onSubmitYaml={handleOnSubmitYaml}
        currentData={openModalStatus.currentData as ListItem}
        open={openModalStatus.open}
        title={
          openModalStatus.action === 'create'
            ? intl.formatMessage({ id: 'backend.button.add' })
            : intl.formatMessage({ id: 'backend.button.edit' })
        }
      ></AddModal>
      <VersionInfoModal
        open={openVersionInfoModal.open}
        currentData={openVersionInfoModal.currentData as ListItem}
        onClose={() =>
          setOpenVersionInfoModal({
            open: false,
            currentData: undefined
          })
        }
      ></VersionInfoModal>
      <DeleteModal ref={modalRef}></DeleteModal>
    </PageContainer>
  );
};

export default BackendList;