Skip to content

Commit

Permalink
refactor: Endpoint list loading state management
Browse files Browse the repository at this point in the history
  • Loading branch information
@yomybaby
yomybaby committed Feb 20, 2025
1 parent f71c345 commit 0122984
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 93 deletions.
7 changes: 4 additions & 3 deletions react/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import AnnouncementAlert from './components/AnnouncementAlert';
import BAICard from './components/BAICard';
import BAIErrorBoundary, { ErrorView } from './components/BAIErrorBoundary';
import {
DefaultProvidersForReactRoot,
Expand All @@ -15,6 +16,7 @@ import VFolderListPage from './pages/VFolderListPage';
import { Skeleton, theme } from 'antd';
import React, { Suspense } from 'react';
import { FC } from 'react';
import { useTranslation } from 'react-i18next';
import {
IndexRouteObject,
RouterProvider,
Expand Down Expand Up @@ -176,14 +178,13 @@ const router = createBrowserRouter([
const [experimentalNeoSessionList] = useBAISettingUserState(
'experimental_neo_session_list',
);
const { t } = useTranslation();

return experimentalNeoSessionList ? (
<BAIErrorBoundary>
<Suspense
fallback={
<Flex direction="column" style={{ maxWidth: 700 }}>
<Skeleton active />
</Flex>
<BAICard title={t('webui.menu.Sessions')} loading />
}
>
<ComputeSessionListPage />
Expand Down
65 changes: 14 additions & 51 deletions react/src/components/EndpointList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,7 @@ import {
filterNonNullItems,
transformSorterToOrderString,
} from '../helper';
import {
useSuspendedBackendaiClient,
useUpdatableState,
useWebUINavigate,
} from '../hooks';
import { useSuspendedBackendaiClient, useWebUINavigate } from '../hooks';
import { useCurrentUserInfo, useCurrentUserRole } from '../hooks/backendai';
import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
// import { getSortOrderByName } from '../hooks/reactPaginationQueryOptions';
Expand All @@ -29,23 +25,16 @@ import {
CheckOutlined,
CloseOutlined,
DeleteOutlined,
LoadingOutlined,
ReloadOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useRafInterval, useToggle } from 'ahooks';
import { useToggle } from 'ahooks';
import { Button, Typography, theme, Radio, App, Tooltip } from 'antd';
import { ColumnType } from 'antd/lib/table';
import graphql from 'babel-plugin-relay/macro';
import { default as dayjs } from 'dayjs';
import _ from 'lodash';
import { InfoIcon } from 'lucide-react';
import React, {
PropsWithChildren,
useState,
useTransition,
startTransition as startTransitionWithoutPendingState,
} from 'react';
import React, { PropsWithChildren, useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { useLazyLoadQuery } from 'react-relay';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -75,8 +64,15 @@ type LifecycleStage = 'created&destroying' | 'destroyed';

interface EndpointListProps extends PropsWithChildren {
style?: React.CSSProperties;
fetchKey?: string;
onDeleted?: (endpoint: Endpoint) => void;
}
const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
const EndpointList: React.FC<EndpointListProps> = ({
style,
fetchKey,
onDeleted,
children,
}) => {
const { t } = useTranslation();
const { token } = theme.useToken();
const { message, modal } = App.useApp();
Expand All @@ -98,11 +94,8 @@ const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
? `lifecycle_stage == "created" | lifecycle_stage == "destroying"`
: `lifecycle_stage == "${selectedLifecycleStage}"`;

const [isRefetchPending, startRefetchTransition] = useTransition();
const [isFilterPending, startFilterTransition] = useTransition();
const [isPendingPageChange, startPageChangeTransition] = useTransition();
const [servicesFetchKey, updateServicesFetchKey] =
useUpdatableState('initial-fetch');
const [optimisticDeletingId, setOptimisticDeletingId] = useState<
string | null
>();
Expand Down Expand Up @@ -212,9 +205,7 @@ const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
row.endpoint_id &&
terminateModelServiceMutation.mutate(row?.endpoint_id, {
onSuccess: (res) => {
startRefetchTransition(() => {
updateServicesFetchKey();
});
onDeleted?.(row);
// FIXME: temporally refer to mutate input to message
if (res.success) {
message.success(
Expand Down Expand Up @@ -318,12 +309,6 @@ const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
const [hiddenColumnKeys, setHiddenColumnKeys] =
useHiddenColumnKeysSetting('EndpointListPage');

useRafInterval(() => {
startTransitionWithoutPendingState(() => {
updateServicesFetchKey();
});
}, 7000);

const { endpoint_list: modelServiceList } =
useLazyLoadQuery<EndpointListQuery>(
graphql`
Expand Down Expand Up @@ -388,7 +373,7 @@ const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
},
{
fetchPolicy: 'network-only',
fetchKey: servicesFetchKey,
fetchKey,
},
);

Expand Down Expand Up @@ -506,34 +491,12 @@ const EndpointList: React.FC<EndpointListProps> = ({ style, children }) => {
</>
)}
</Flex>
<Flex direction="row" gap={'xs'}>
<Flex gap={'xs'}>
<Button
icon={<ReloadOutlined />}
loading={isRefetchPending}
onClick={() => {
startRefetchTransition(() => updateServicesFetchKey());
}}
/>
<Button
type="primary"
onClick={() => {
webuiNavigate('/service/start');
}}
>
{t('modelService.StartService')}
</Button>
</Flex>
</Flex>
</Flex>
<Flex direction="column" align="stretch">
<BAITable
neoStyle
size="small"
loading={{
spinning: isFilterPending || isPendingPageChange,
indicator: <LoadingOutlined />,
}}
loading={isFilterPending || isPendingPageChange}
scroll={{ x: 'max-content' }}
rowKey={'endpoint_id'}
dataSource={filterNonNullItems(modelServiceList?.items)}
Expand Down
85 changes: 46 additions & 39 deletions react/src/pages/ServingPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
import BAICard from '../components/BAICard';
import BAIFetchKeyButton from '../components/BAIFetchKeyButton';
import Flex from '../components/Flex';
import { filterEmptyItem } from '../helper';
import { Card, Skeleton, theme } from 'antd';
import { useUpdatableState, useWebUINavigate } from '../hooks';
import { ReloadOutlined } from '@ant-design/icons';
import { Button, Card, Skeleton, theme } from 'antd';
import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';
import { StringParam, useQueryParam, withDefault } from 'use-query-params';

// FIXME: need to apply filtering type of service later
type TabKey = 'services' | 'chatting'; // "running" | "finished" | "others";

const EndpointListPage = React.lazy(() => import('./EndpointListPage'));
const EndpointList = React.lazy(() => import('../components/EndpointList'));

interface ServingPageProps {}

Expand All @@ -17,34 +21,36 @@ const tabParam = withDefault(StringParam, 'services');
const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
const { t } = useTranslation();
const { token } = theme.useToken();
const [curTabKey, setCurTabKey] = useQueryParam('tab', tabParam, {
updateType: 'replace',
});
const webuiNavigate = useWebUINavigate();

const [fetchKey, updateFetchKey] = useUpdatableState('initial-fetch');

const tabList = filterEmptyItem([
{ key: 'services', label: t('modelService.Services') },
// FIXME: need to apply filtering type of service later
// {
// key: "running",
// label: t("session.Running"),
// },
// {
// key: "finished",
// label: t("session.Finished"),
// },
// {
// key: "others",
// label: t("session.Others"),
// },
]);
return (
<Flex direction="column" align="stretch" gap={'md'}>
<Card
activeTabKey={curTabKey}
onTabChange={(key) => {
setCurTabKey(key as TabKey);
}}
tabList={tabList}
<BAICard
title={t('modelService.Services')}
extra={
<Flex direction="row" gap={'xs'}>
<Flex gap={'xs'}>
<BAIFetchKeyButton
value={fetchKey}
onChange={() => {
updateFetchKey();
// startRefetchTransition(() => updateServicesFetchKey());
}}
autoUpdateDelay={7000}
/>
<Button
type="primary"
onClick={() => {
webuiNavigate('/service/start');
}}
>
{t('modelService.StartService')}
</Button>
</Flex>
</Flex>
}
styles={{
body: {
padding: 0,
Expand All @@ -53,18 +59,19 @@ const ServingPage: React.FC<ServingPageProps> = ({ ...props }) => {
},
}}
>
{curTabKey === 'services' ? (
<Suspense
fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
>
<EndpointListPage
style={{
padding: token.paddingMD,
}}
/>
</Suspense>
) : null}
</Card>
<Suspense
fallback={<Skeleton active style={{ padding: token.paddingMD }} />}
>
<EndpointList
style={{
padding: token.paddingMD,
}}
onDeleted={() => {
updateFetchKey();
}}
/>
</Suspense>
</BAICard>
</Flex>
);
};
Expand Down

0 comments on commit 0122984

Please sign in to comment.