Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Session list NEO
Browse files Browse the repository at this point in the history
yomybaby authored and ironAiken2 committed Dec 10, 2024
1 parent 937ceac commit 1e040af
Showing 4 changed files with 131 additions and 6 deletions.
6 changes: 3 additions & 3 deletions react/src/App.tsx
Original file line number Diff line number Diff line change
@@ -57,8 +57,8 @@ const InteractiveLoginPage = React.lazy(
);
const ImportAndRunPage = React.lazy(() => import('./pages/ImportAndRunPage'));

const ComputeSessionList = React.lazy(
() => import('./components/ComputeSessionList'),
const ComputeSessionListPage = React.lazy(
() => import('./pages/ComputeSessionListPage'),
);
const AgentSummaryPage = React.lazy(() => import('./pages/AgentSummaryPage'));

@@ -139,7 +139,7 @@ const router = createBrowserRouter([
handle: { labelKey: 'webui.menu.Sessions' },
element: (
<BAIErrorBoundary>
<ComputeSessionList />
<ComputeSessionListPage />
</BAIErrorBoundary>
),
},
121 changes: 121 additions & 0 deletions react/src/components/SessionNodes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import { filterEmptyItem, filterNonNullItems } from '../helper';

Check warning on line 1 in react/src/components/SessionNodes.tsx

GitHub Actions / coverage

'filterEmptyItem' is defined but never used
import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
import { useCurrentProjectValue } from '../hooks/useCurrentProject';
import BAIPropertyFilter, { mergeFilterValues } from './BAIPropertyFilter';
import Flex from './Flex';
import { SessionNodesQuery } from './__generated__/SessionNodesQuery.graphql';
import { LoadingOutlined } from '@ant-design/icons';
import { Radio, Table } from 'antd';
import graphql from 'babel-plugin-relay/macro';
import _ from 'lodash';
import React, { useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { useLazyLoadQuery } from 'react-relay';

const SessionNodes = () => {
const currentProject = useCurrentProjectValue();
const { t } = useTranslation();
const {
baiPaginationOption,
tablePaginationOption,
setTablePaginationOption,
} = useBAIPaginationOptionState({
current: 1,
pageSize: 10,
});
const [isPendingPageChange, startPageChangeTransition] = useTransition();
const [filterString, setFilterString] = useState<string>();
const [isPendingFilter, startFilterTransition] = useTransition();
const { compute_session_nodes } = useLazyLoadQuery<SessionNodesQuery>(
graphql`
query SessionNodesQuery(
$projectId: UUID!
$first: Int = 20
$offset: Int = 0
$filter: String
) {
compute_session_nodes(
project_id: $projectId
first: $first
offset: $offset
filter: $filter
) {
edges @required(action: THROW) {
node @required(action: THROW) {
id
name
}
}
count
}
}
`,
{
projectId: currentProject.id,
offset: baiPaginationOption.offset,
first: baiPaginationOption.first,
filter: mergeFilterValues([filterString]),
},
{
fetchPolicy: 'network-only',
},
);
const nodes = filterNonNullItems(
_.map(compute_session_nodes?.edges, (e) => e?.node),
);
return (
<Flex direction="column" align="stretch" gap={'sm'}>
<Flex gap={'sm'} align="start">
<Radio.Group optionType="button" buttonStyle="solid">
<Radio value={'status == "RUNNING"'}>Running</Radio>
<Radio value={'finished'}>Finished</Radio>
</Radio.Group>
<BAIPropertyFilter
filterProperties={[
{
key: 'name',
propertyLabel: t('session.SessionName'),
type: 'string',
},
]}
value={filterString}
onChange={(value) => {
startFilterTransition(() => {
setFilterString(value);
});
}}
/>
</Flex>
<Table
dataSource={nodes}
columns={[
{
title: t('session.SessionName'),
dataIndex: 'name',
},
]}
pagination={{
pageSize: tablePaginationOption.pageSize,
current: tablePaginationOption.current,
total: compute_session_nodes?.count ?? 0,
showTotal: (total) => {
return total;
},
}}
loading={{
spinning: isPendingPageChange || isPendingFilter,
indicator: <LoadingOutlined />,
}}
onChange={({ current, pageSize }) => {
if (_.isNumber(current) && _.isNumber(pageSize)) {
startPageChangeTransition(() => {
setTablePaginationOption({ current, pageSize });
});
}
}}
/>
</Flex>
);
};

export default SessionNodes;
2 changes: 2 additions & 0 deletions react/src/hooks/reactPaginationQueryOptions.tsx
Original file line number Diff line number Diff line change
@@ -281,6 +281,7 @@ export const useBAIPaginationQueryOptions = ({
interface BAIPaginationOption {
limit: number;
offset: number;
first?: number;
// filter?: string;
// order?: string;
}
@@ -304,6 +305,7 @@ export const useBAIPaginationOptionState = (
return {
baiPaginationOption: {
limit: options.pageSize,
first: options.pageSize,
offset:
options.current > 1 ? (options.current - 1) * options.pageSize : 0,
},
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import BAIModal from './BAIModal';
import ContainerLogModalWithLazyQueryLoader from './ComputeSessionNodeItems/ContainerLogModalWithLazyQueryLoader';
import SessionDetailDrawer from './SessionDetailDrawer';
import BAIModal from '../components/BAIModal';
import ContainerLogModalWithLazyQueryLoader from '../components/ComputeSessionNodeItems/ContainerLogModalWithLazyQueryLoader';
import SessionDetailDrawer from '../components/SessionDetailDrawer';
import SessionNodes from '../components/SessionNodes';
import { Skeleton } from 'antd';
import { Suspense, useEffect, useState } from 'react';
import { StringParam, useQueryParam } from 'use-query-params';
@@ -21,6 +22,7 @@ const ComputeSessionList = () => {
}, []);
return (
<>
<SessionNodes />
<SessionDetailDrawer
open={!sessionId}
sessionId={sessionId || undefined}

0 comments on commit 1e040af

Please sign in to comment.