Skip to content

fix(FR-2824): move CSV export to BAITable bottom-right in resource policy lists #7366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graphite-app merged 1 commit into from
May 15, 2026
+125 −250
Merged

fix(FR-2824): move CSV export to BAITable bottom-right in resource policy lists #7366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 42 additions & 84 deletions react/src/components/KeypairResourcePolicyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,17 @@ import { KeypairResourcePolicySettingModalFragment$key } from '../__generated__/
import { localeCompare, numberSorterWithInfinityValue } from '../helper';
import { SIGNED_32BIT_MAX_INT } from '../helper/const-vars';
import { exportCSVWithFormattingRules } from '../helper/csv-util';
import { useHiddenColumnKeysSetting } from '../hooks/useHiddenColumnKeysSetting';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import KeypairResourcePolicyInfoModal from './KeypairResourcePolicyInfoModal';
import KeypairResourcePolicySettingModal from './KeypairResourcePolicySettingModal';
import TableColumnsSettingModal from './TableColumnsSettingModal';
import {
DeleteFilled,
InfoCircleOutlined,
PlusOutlined,
ReloadOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useToggle } from 'ahooks';
import { App, Button, Dropdown, Tooltip } from 'antd';
import { App, Button, Tooltip } from 'antd';
import { AnyObject } from 'antd/es/_util/type';
import type { ColumnsType, ColumnType } from 'antd/es/table';
import {
Expand All @@ -38,7 +36,6 @@ import {
BAIDeleteConfirmModal,
} from 'backend.ai-ui';
import * as _ from 'lodash-es';
import { EllipsisIcon } from 'lucide-react';
import React, { Suspense, useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
Expand All @@ -58,8 +55,6 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
const [keypairResourcePolicyFetchKey, updateKeypairResourcePolicyFetchKey] =
useUpdatableState('initial-fetch');
const [isRefetchPending, startRefetchTransition] = useTransition();
const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
useToggle();
const [isCreatingPolicySetting, setIsCreatingPolicySetting] = useState(false);
const [editingKeypairResourcePolicy, setEditingKeypairResourcePolicy] =
useState<KeypairResourcePolicySettingModalFragment$key | null>();
Expand Down Expand Up @@ -263,21 +258,28 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
},
]);

const [hiddenColumnKeys, setHiddenColumnKeys] = useHiddenColumnKeysSetting(
'KeypairResourcePolicyList',
const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
'table_column_overrides.KeypairResourcePolicyList',
);

const handleExportCSV = () => {
const supportedFields = _.compact(
_.map(columns, (column) => _.toString(column.key)),
);

const handleExportCSV = (selectedExportKeys: string[]) => {
if (selectedExportKeys.length === 0) {
message.error(t('resourcePolicy.NoDataToExport'));
return;
}
if (!keypair_resource_policies) {
message.error(t('resourcePolicy.NoDataToExport'));
return;
}

Comment thread
ironAiken2 marked this conversation as resolved.
const columnKeys = _.map(columns, (column) => _.toString(column.key));
const responseData = _.map(keypair_resource_policies, (policy) => {
return _.pick(
policy,
columnKeys.map((key) => key as keyof KeypairResourcePolicies),
selectedExportKeys.map((key) => key as keyof KeypairResourcePolicies),
);
});

Expand All @@ -301,91 +303,47 @@ const KeypairResourcePolicyList: React.FC<KeypairResourcePolicyListProps> = (
return (
<BAIFlex direction="column" align="stretch" gap="sm" {...props}>
<BAIFlex direction="row" justify="end" wrap="wrap" gap={'xs'}>
<Dropdown
menu={{
items: [
{
key: 'exportCSV',
label: t('resourcePolicy.ExportCSV'),
onClick: () => {
handleExportCSV();
},
},
],
}}
trigger={['click']}
>
<Button icon={<EllipsisIcon />} />
</Dropdown>
<BAIFlex
direction="row"
gap={'xs'}
wrap="wrap"
style={{ flexShrink: 1 }}
>
<BAIFlex gap={'xs'}>
<Tooltip title={t('button.Refresh')}>
<Button
icon={<ReloadOutlined />}
loading={isRefetchPending}
onClick={() => {
startRefetchTransition(() =>
updateKeypairResourcePolicyFetchKey(),
);
}}
/>
</Tooltip>
<BAIFlex gap={'xs'}>
<Tooltip title={t('button.Refresh')}>
<Button
type="primary"
icon={<PlusOutlined />}
icon={<ReloadOutlined />}
loading={isRefetchPending}
onClick={() => {
setIsCreatingPolicySetting(true);
startRefetchTransition(() =>
updateKeypairResourcePolicyFetchKey(),
);
}}
>
{t('button.Create')}
</Button>
</BAIFlex>
/>
</Tooltip>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
setIsCreatingPolicySetting(true);
}}
>
{t('button.Create')}
</Button>
</BAIFlex>
</BAIFlex>
<BAITable
columns={
_.filter(
columns,
(column) => !_.includes(hiddenColumnKeys, _.toString(column?.key)),
) as ColumnType<AnyObject>[]
}
columns={columns as ColumnType<AnyObject>[]}
dataSource={
keypair_resource_policies as readonly AnyObject[] | undefined
}
rowKey="name"
scroll={{ x: 'max-content' }}
pagination={{
extraContent: (
<Button
type="text"
icon={<SettingOutlined />}
onClick={() => {
toggleColumnSettingModal();
}}
/>
),
}}
showSorterTooltip={false}
/>
<TableColumnsSettingModal
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setHiddenColumnKeys(
_.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
);
toggleColumnSettingModal();
tableSettings={{
columnOverrides: columnOverrides,
onColumnOverridesChange: setColumnOverrides,
}}
exportSettings={{
supportedFields,
onExport: async (selectedExportKeys) => {
handleExportCSV(selectedExportKeys);
},
}}
columns={columns}
hiddenColumnKeys={hiddenColumnKeys}
/>
<Suspense>
<KeypairResourcePolicySettingModal
Expand Down
122 changes: 41 additions & 81 deletions react/src/components/ProjectResourcePolicyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,15 @@ import {
} from '../helper';
import { exportCSVWithFormattingRules } from '../helper/csv-util';
import { useSuspendedBackendaiClient } from '../hooks';
import { useHiddenColumnKeysSetting } from '../hooks/useHiddenColumnKeysSetting';
import { useBAISettingUserState } from '../hooks/useBAISetting';
import ProjectResourcePolicySettingModal from './ProjectResourcePolicySettingModal';
import TableColumnsSettingModal from './TableColumnsSettingModal';
import {
DeleteFilled,
PlusOutlined,
ReloadOutlined,
SettingOutlined,
} from '@ant-design/icons';
import { useToggle } from 'ahooks';
import { App, Button, Dropdown, Tooltip } from 'antd';
import { App, Button, Tooltip } from 'antd';
import type { ColumnType } from 'antd/es/table';
import {
filterOutEmpty,
Expand All @@ -38,7 +36,6 @@ import {
} from 'backend.ai-ui';
import dayjs from 'dayjs';
import * as _ from 'lodash-es';
import { EllipsisIcon } from 'lucide-react';
import React, { useState, useTransition } from 'react';
import { useTranslation } from 'react-i18next';
import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
Expand All @@ -60,8 +57,6 @@ const ProjectResourcePolicyList: React.FC<
const [projectResourcePolicyFetchKey, updateProjectResourcePolicyFetchKey] =
useUpdatableState('initial-fetch');
const [isCreatingPolicySetting, setIsCreatingPolicySetting] = useState(false);
const [visibleColumnSettingModal, { toggle: toggleColumnSettingModal }] =
useToggle();
const [editingProjectResourcePolicy, setEditingProjectResourcePolicy] =
useState<ProjectResourcePolicySettingModalFragment$key | null>();
const [deletingPolicyName, setDeletingPolicyName] = useState<string | null>(
Expand Down Expand Up @@ -190,21 +185,28 @@ const ProjectResourcePolicyList: React.FC<
},
]);

const [hiddenColumnKeys, setHiddenColumnKeys] = useHiddenColumnKeysSetting(
'ProjectResourcePolicyList',
const [columnOverrides, setColumnOverrides] = useBAISettingUserState(
'table_column_overrides.ProjectResourcePolicyList',
);

const handleExportCSV = () => {
const supportedFields = _.compact(
_.map(columns, (column) => _.toString(column.key)),
);

const handleExportCSV = (selectedExportKeys: string[]) => {
if (selectedExportKeys.length === 0) {
message.error(t('resourcePolicy.NoDataToExport'));
return;
}
if (!project_resource_policies) {
message.error(t('resourcePolicy.NoDataToExport'));
return;
}

Comment thread
ironAiken2 marked this conversation as resolved.
const columnkeys = _.map(columns, (column) => _.toString(column.key));
const responseData = _.map(project_resource_policies, (policy) => {
return _.pick(
policy,
columnkeys.map((key) => key as keyof ProjectResourcePolicies),
selectedExportKeys.map((key) => key as keyof ProjectResourcePolicies),
);
});
exportCSVWithFormattingRules(
Expand All @@ -221,87 +223,45 @@ const ProjectResourcePolicyList: React.FC<
return (
<BAIFlex direction="column" align="stretch" gap="sm">
<BAIFlex direction="row" justify="end" wrap="wrap" gap={'xs'}>
<BAIFlex
direction="row"
gap={'xs'}
wrap="wrap"
style={{ flexShrink: 1 }}
>
<Dropdown
menu={{
items: [
{
key: 'exportCSV',
label: t('resourcePolicy.ExportCSV'),
onClick: () => {
handleExportCSV();
},
},
],
}}
trigger={['click']}
>
<Button icon={<EllipsisIcon />} />
</Dropdown>
<BAIFlex gap={'xs'}>
<Tooltip title={t('button.Refresh')}>
<Button
icon={<ReloadOutlined />}
loading={isRefetchPending}
onClick={() => {
startRefetchTransition(() =>
updateProjectResourcePolicyFetchKey(),
);
}}
/>
</Tooltip>
<BAIFlex gap={'xs'}>
<Tooltip title={t('button.Refresh')}>
<Button
type="primary"
icon={<PlusOutlined />}
icon={<ReloadOutlined />}
loading={isRefetchPending}
onClick={() => {
setIsCreatingPolicySetting(true);
startRefetchTransition(() =>
updateProjectResourcePolicyFetchKey(),
);
}}
>
{t('button.Create')}
</Button>
</BAIFlex>
/>
</Tooltip>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => {
setIsCreatingPolicySetting(true);
}}
>
{t('button.Create')}
</Button>
</BAIFlex>
</BAIFlex>
<BAITable
rowKey="id"
showSorterTooltip={false}
columns={_.filter(
columns,
(column) => !_.includes(hiddenColumnKeys, _.toString(column?.key)),
)}
columns={columns}
dataSource={filterOutNullAndUndefined(project_resource_policies)}
scroll={{ x: 'max-content' }}
pagination={{
extraContent: (
<Button
type="text"
icon={<SettingOutlined />}
onClick={() => {
toggleColumnSettingModal();
}}
/>
),
tableSettings={{
columnOverrides: columnOverrides,
onColumnOverridesChange: setColumnOverrides,
}}
/>
<TableColumnsSettingModal
open={visibleColumnSettingModal}
onRequestClose={(values) => {
values?.selectedColumnKeys &&
setHiddenColumnKeys(
_.difference(
columns.map((column) => _.toString(column.key)),
values?.selectedColumnKeys,
),
);
toggleColumnSettingModal();
exportSettings={{
supportedFields,
onExport: async (selectedExportKeys) => {
handleExportCSV(selectedExportKeys);
},
}}
columns={columns}
hiddenColumnKeys={hiddenColumnKeys}
/>
<ProjectResourcePolicySettingModal
existingPolicyNames={_.map(project_resource_policies, 'name')}
Expand Down
Loading
Loading