From c37bda46361f743c1c5a7a280a1d4bde04c42e5b Mon Sep 17 00:00:00 2001
From: SungChul Hong <hsc6263@gmail.com>
Date: Tue, 17 Dec 2024 13:06:55 +0900
Subject: [PATCH] feat: export users and credential to csv

---
 react/src/components/UserCredentialList.tsx | 587 +++++++++++---------
 react/src/components/UserNodeList.tsx       | 318 ++++++-----
 resources/i18n/de.json                      |   4 +-
 resources/i18n/el.json                      |   4 +-
 resources/i18n/en.json                      |   4 +-
 resources/i18n/es.json                      |   4 +-
 resources/i18n/fi.json                      |   2 +
 resources/i18n/fr.json                      |   4 +-
 resources/i18n/id.json                      |   2 +
 resources/i18n/it.json                      |   4 +-
 resources/i18n/ja.json                      |   2 +
 resources/i18n/ko.json                      |   2 +
 resources/i18n/mn.json                      |   2 +
 resources/i18n/ms.json                      |   2 +
 resources/i18n/pl.json                      |   2 +
 resources/i18n/pt-BR.json                   |   2 +
 resources/i18n/pt.json                      |   2 +
 resources/i18n/ru.json                      |   4 +-
 resources/i18n/th.json                      |   2 +
 resources/i18n/tr.json                      |   4 +-
 resources/i18n/vi.json                      |   2 +
 resources/i18n/zh-CN.json                   |   4 +-
 resources/i18n/zh-TW.json                   |   4 +-
 23 files changed, 553 insertions(+), 414 deletions(-)

diff --git a/react/src/components/UserCredentialList.tsx b/react/src/components/UserCredentialList.tsx
index 84e302582..c1ed52526 100644
--- a/react/src/components/UserCredentialList.tsx
+++ b/react/src/components/UserCredentialList.tsx
@@ -3,6 +3,7 @@ import {
   filterNonNullItems,
   transformSorterToOrderString,
 } from '../helper';
+import { exportCSVWithFormattingRules } from '../helper/csv-util';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
 import BAIPropertyFilter from './BAIPropertyFilter';
@@ -21,14 +22,17 @@ import {
   DeleteOutlined,
   InfoCircleOutlined,
   LoadingOutlined,
+  MoreOutlined,
   ReloadOutlined,
   SettingOutlined,
 } from '@ant-design/icons';
 import {
   App,
   Button,
+  Dropdown,
   Popconfirm,
   Radio,
+  TableColumnsType,
   Tag,
   Tooltip,
   Typography,
@@ -150,6 +154,298 @@ const UserCredentialList: React.FC = () => {
       }
     `);
 
+  const columns: TableColumnsType<Keypair> = filterEmptyItem([
+    {
+      key: 'user_id',
+      title: t('credential.UserID'),
+      dataIndex: 'email',
+      fixed: 'left',
+      sorter: true,
+      // TODO: user_id field in keypair_list is used as user's email, but sorting is done by email field
+      render: (value, record) => {
+        return record.user_id;
+      },
+    },
+    {
+      key: 'access_key',
+      title: t('credential.AccessKey'),
+      dataIndex: 'access_key',
+      sorter: true,
+    },
+    {
+      key: 'is_admin',
+      title: t('credential.Permission'),
+      dataIndex: 'is_admin',
+      render: (isAdmin) =>
+        isAdmin ? (
+          <>
+            <Tag color="red">admin</Tag>
+            <Tag color="green">user</Tag>
+          </>
+        ) : (
+          <Tag color="green">user</Tag>
+        ),
+      sorter: true,
+    },
+    {
+      key: 'key_age',
+      title: t('credential.KeyAge'),
+      dataIndex: 'created_at',
+      render: (createdAt) => {
+        return `${dayjs().diff(createdAt, 'day')}${t('credential.Days')}`;
+      },
+      sorter: true,
+    },
+    {
+      key: 'created_at',
+      title: t('credential.CreatedAt'),
+      dataIndex: 'created_at',
+      render: (createdAt) => dayjs(createdAt).format('lll'),
+      sorter: true,
+    },
+    {
+      key: 'resource_policy',
+      title: t('credential.ResourcePolicy'),
+      dataIndex: 'resource_policy',
+      sorter: true,
+    },
+    {
+      key: 'allocation',
+      title: t('credential.Allocation'),
+      render: (value, record) => {
+        return (
+          <Flex direction="column" align="start">
+            <Typography.Text>
+              {record.concurrency_used}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.Sessions')}
+              </Typography.Text>
+            </Typography.Text>
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeSM,
+              }}
+            >
+              {record.rate_limit}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.ReqPer15Min')}
+              </Typography.Text>
+            </Typography.Text>
+            <Typography.Text
+              style={{
+                fontSize: token.fontSizeSM,
+              }}
+            >
+              {record.num_queries}
+              <Typography.Text
+                type="secondary"
+                style={{
+                  marginLeft: token.marginXXS,
+                  fontSize: token.fontSizeSM,
+                }}
+              >
+                {t('credential.Queries')}
+              </Typography.Text>
+            </Typography.Text>
+          </Flex>
+        );
+      },
+    },
+    {
+      key: 'control',
+      title: t('general.Control'),
+      fixed: 'right',
+      render: (value, record) => {
+        return (
+          <Flex gap={token.marginXS}>
+            <Button
+              type="text"
+              icon={
+                <InfoCircleOutlined style={{ color: token.colorSuccess }} />
+              }
+              onClick={() => {
+                startInfoModalOpenTransition(() => {
+                  setKeypairInfoModalFrgmt(record);
+                });
+              }}
+            />
+            <Button
+              type="text"
+              icon={<SettingOutlined style={{ color: token.colorInfo }} />}
+              onClick={() => {
+                startSettingModalOpenTransition(() => {
+                  setKeypairSettingModalFrgmt(record);
+                });
+              }}
+            />
+            {activeType === 'inactive' && (
+              <Tooltip title={t('credential.Active')}>
+                <Popconfirm
+                  title={t('credential.ConfirmUpdateStatusToActive')}
+                  description={record.user_id}
+                  okType="danger"
+                  okText={t('credential.Active')}
+                  placement="left"
+                  onConfirm={() => {
+                    commitModifyKeypair({
+                      variables: {
+                        access_key: record.access_key ?? '',
+                        props: {
+                          is_active: true,
+                        },
+                      },
+                      onCompleted: (res, errors) => {
+                        if (!res?.modify_keypair?.ok || errors) {
+                          message.error(res?.modify_keypair?.msg);
+                          return;
+                        }
+                        message.success(t('environment.SuccessfullyModified'));
+                        startRefreshTransition(() => {
+                          updateFetchKey();
+                        });
+                      },
+                      onError: (error) => {
+                        message.error(error?.message);
+                        console.error(error);
+                      },
+                    });
+                  }}
+                >
+                  <Button type="text" icon={<UndoIcon />} />
+                </Popconfirm>
+              </Tooltip>
+            )}
+            <Tooltip
+              title={
+                activeType === 'active' ? t('credential.Inactive') : undefined
+              }
+            >
+              <Popconfirm
+                title={
+                  activeType === 'active'
+                    ? t('credential.ConfirmUpdateStatusToInActive')
+                    : t('dialog.ask.DoYouWantToProceed')
+                }
+                description={
+                  activeType === 'active'
+                    ? record.user_id
+                    : t('dialog.warning.CannotBeUndone')
+                }
+                okButtonProps={{
+                  loading:
+                    isInFlightCommitModifyKeypair ||
+                    isInFlightCommitDeleteKeypair,
+                }}
+                okType="danger"
+                okText={
+                  activeType === 'active'
+                    ? t('credential.Inactive')
+                    : t('button.Delete')
+                }
+                placement="left"
+                onConfirm={() => {
+                  activeType === 'active'
+                    ? commitModifyKeypair({
+                        variables: {
+                          access_key: record.access_key ?? '',
+                          props: {
+                            is_active: false,
+                          },
+                        },
+                        onCompleted: (res, errors) => {
+                          if (!res?.modify_keypair?.ok || errors) {
+                            message.error(res?.modify_keypair?.msg);
+                            return;
+                          }
+                          message.success(
+                            t('credential.KeySeccessfullyDeleted'),
+                          );
+                          startRefreshTransition(() => {
+                            updateFetchKey();
+                          });
+                        },
+                        onError: (error) => {
+                          message.error(error?.message);
+                          console.error(error);
+                        },
+                      })
+                    : commitDeleteKeypair({
+                        variables: {
+                          access_key: record.access_key ?? '',
+                        },
+                        onCompleted: (res, errors) => {
+                          if (!res?.delete_keypair?.ok || errors) {
+                            message.error(res?.delete_keypair?.msg);
+                            return;
+                          }
+                          message.success(
+                            t('credential.KeySeccessfullyDeleted'),
+                          );
+                          startRefreshTransition(() => {
+                            updateFetchKey();
+                          });
+                        },
+                        onError: (error) => {
+                          message.error(error?.message);
+                          console.error(error);
+                        },
+                      });
+                }}
+              >
+                <Button
+                  type="text"
+                  danger
+                  icon={
+                    activeType === 'active' ? <BanIcon /> : <DeleteOutlined />
+                  }
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Flex>
+        );
+      },
+    },
+  ]);
+
+  const handleExportCSV = () => {
+    if (!keypair_list?.items || _.isEmpty(keypair_list?.items)) {
+      message.error(t('credential.NoDataToExport'));
+      return;
+    }
+
+    const columnKeys = _.without(
+      _.map(columns, (column) => _.toString(column.key)),
+      'control',
+    );
+    const responseData: Partial<Keypair>[] = _.map(
+      keypair_list?.items,
+      (item) => {
+        return _.pick(item, columnKeys);
+      },
+    );
+
+    exportCSVWithFormattingRules(
+      responseData,
+      `${activeType === 'active' ? 'active' : 'inactive'}_credentials_list`,
+      {
+        is_admin: (value) => (value ? 'admin' : 'user'),
+        created_at: (value) => dayjs(value).format('lll'),
+      },
+    );
+  };
+
   return (
     <Flex direction="column" align="stretch">
       <Flex
@@ -228,6 +524,22 @@ const UserCredentialList: React.FC = () => {
           />
         </Flex>
         <Flex gap={'xs'}>
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'export-csv',
+                  label: t('credential.ExportCSV'),
+                  onClick: () => {
+                    handleExportCSV();
+                  },
+                },
+              ],
+            }}
+            placement="bottomRight"
+          >
+            <Button icon={<MoreOutlined />} />
+          </Dropdown>
           <Tooltip title={t('button.Refresh')}>
             <Button
               loading={isPendingRefresh}
@@ -263,277 +575,7 @@ const UserCredentialList: React.FC = () => {
           indicator: <LoadingOutlined />,
         }}
         dataSource={filterNonNullItems(keypair_list?.items)}
-        columns={filterEmptyItem([
-          {
-            key: 'userID',
-            title: t('credential.UserID'),
-            dataIndex: 'email',
-            fixed: 'left',
-            sorter: true,
-            // TODO: user_id field in keypair_list is used as user's email, but sorting is done by email field
-            render: (value, record) => {
-              return record.user_id;
-            },
-          },
-          {
-            key: 'accessKey',
-            title: t('credential.AccessKey'),
-            dataIndex: 'access_key',
-            sorter: true,
-          },
-          {
-            key: 'permission',
-            title: t('credential.Permission'),
-            dataIndex: 'is_admin',
-            render: (isAdmin) =>
-              isAdmin ? (
-                <>
-                  <Tag color="red">admin</Tag>
-                  <Tag color="green">user</Tag>
-                </>
-              ) : (
-                <Tag color="green">user</Tag>
-              ),
-            sorter: true,
-          },
-          {
-            key: 'keyAge',
-            title: t('credential.KeyAge'),
-            dataIndex: 'created_at',
-            render: (createdAt) => {
-              return `${dayjs().diff(createdAt, 'day')}${t('credential.Days')}`;
-            },
-            sorter: true,
-          },
-          {
-            key: 'createdAt',
-            title: t('credential.CreatedAt'),
-            dataIndex: 'created_at',
-            render: (createdAt) => dayjs(createdAt).format('lll'),
-            sorter: true,
-          },
-          {
-            key: 'resourcePolicy',
-            title: t('credential.ResourcePolicy'),
-            dataIndex: 'resource_policy',
-            sorter: true,
-          },
-          {
-            key: 'allocation',
-            title: t('credential.Allocation'),
-            render: (record) => {
-              return (
-                <Flex direction="column" align="start">
-                  <Typography.Text>
-                    {record.concurrency_used}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.Sessions')}
-                    </Typography.Text>
-                  </Typography.Text>
-                  <Typography.Text
-                    style={{
-                      fontSize: token.fontSizeSM,
-                    }}
-                  >
-                    {record.rate_limit}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.ReqPer15Min')}
-                    </Typography.Text>
-                  </Typography.Text>
-                  <Typography.Text
-                    style={{
-                      fontSize: token.fontSizeSM,
-                    }}
-                  >
-                    {record.num_queries}
-                    <Typography.Text
-                      type="secondary"
-                      style={{
-                        marginLeft: token.marginXXS,
-                        fontSize: token.fontSizeSM,
-                      }}
-                    >
-                      {t('credential.Queries')}
-                    </Typography.Text>
-                  </Typography.Text>
-                </Flex>
-              );
-            },
-          },
-          {
-            key: 'control',
-            title: t('general.Control'),
-            fixed: 'right',
-            render: (value, record) => {
-              return (
-                <Flex gap={token.marginXS}>
-                  <Button
-                    type="text"
-                    icon={
-                      <InfoCircleOutlined
-                        style={{ color: token.colorSuccess }}
-                      />
-                    }
-                    onClick={() => {
-                      startInfoModalOpenTransition(() => {
-                        setKeypairInfoModalFrgmt(record);
-                      });
-                    }}
-                  />
-                  <Button
-                    type="text"
-                    icon={
-                      <SettingOutlined style={{ color: token.colorInfo }} />
-                    }
-                    onClick={() => {
-                      startSettingModalOpenTransition(() => {
-                        setKeypairSettingModalFrgmt(record);
-                      });
-                    }}
-                  />
-                  {activeType === 'inactive' && (
-                    <Tooltip title={t('credential.Active')}>
-                      <Popconfirm
-                        title={t('credential.ConfirmUpdateStatusToActive')}
-                        description={record.user_id}
-                        okText={t('credential.Active')}
-                        placement="left"
-                        onConfirm={() => {
-                          commitModifyKeypair({
-                            variables: {
-                              access_key: record.access_key ?? '',
-                              props: {
-                                is_active: true,
-                              },
-                            },
-                            onCompleted: (res, errors) => {
-                              if (!res?.modify_keypair?.ok || errors) {
-                                message.error(res?.modify_keypair?.msg);
-                                return;
-                              }
-                              message.success(
-                                t(
-                                  'credential.KeypairStatusUpdatedSuccessfully',
-                                ),
-                              );
-                              startRefreshTransition(() => {
-                                updateFetchKey();
-                              });
-                            },
-                            onError: (error) => {
-                              message.error(error?.message);
-                              console.error(error);
-                            },
-                          });
-                        }}
-                      >
-                        <Button type="text" icon={<UndoIcon />} />
-                      </Popconfirm>
-                    </Tooltip>
-                  )}
-                  {activeType === 'active' ? (
-                    <Tooltip title={t('credential.Inactive')}>
-                      <Popconfirm
-                        title={t('credential.ConfirmUpdateStatusToInActive')}
-                        description={record.user_id}
-                        okButtonProps={{
-                          loading: isInFlightCommitModifyKeypair,
-                        }}
-                        okType="danger"
-                        okText={t('credential.Inactive')}
-                        placement="left"
-                        onConfirm={() => {
-                          commitModifyKeypair({
-                            variables: {
-                              access_key: record.access_key ?? '',
-                              props: {
-                                is_active: false,
-                              },
-                            },
-                            onCompleted: (res, errors) => {
-                              if (!res?.modify_keypair?.ok || errors) {
-                                message.error(res?.modify_keypair?.msg);
-                                return;
-                              }
-                              message.success(
-                                t(
-                                  'credential.KeypairStatusUpdatedSuccessfully',
-                                ),
-                              );
-                              startRefreshTransition(() => {
-                                updateFetchKey();
-                              });
-                            },
-                            onError: (error) => {
-                              message.error(error?.message);
-                              console.error(error);
-                            },
-                          });
-                        }}
-                      >
-                        <Button type="text" danger icon={<BanIcon />} />
-                      </Popconfirm>
-                    </Tooltip>
-                  ) : (
-                    <Button
-                      type="text"
-                      danger
-                      icon={<DeleteOutlined />}
-                      loading={isInFlightCommitDeleteKeypair}
-                      onClick={() => {
-                        modal.confirm({
-                          title: t('dialog.ask.DoYouWantToDeleteSomething', {
-                            name: record.user_id,
-                          }),
-                          content: t('dialog.warning.CannotBeUndone'),
-                          onOk: () => {
-                            commitDeleteKeypair({
-                              variables: {
-                                access_key: record.access_key ?? '',
-                              },
-                              onCompleted: (res, errors) => {
-                                if (!res?.delete_keypair?.ok || errors) {
-                                  message.error(res?.delete_keypair?.msg);
-                                  return;
-                                }
-                                message.success(
-                                  t('credential.KeypairSuccessfullyDeleted'),
-                                );
-                                startRefreshTransition(() => {
-                                  updateFetchKey();
-                                });
-                              },
-                              onError: (error) => {
-                                message.error(error?.message);
-                                console.error(error);
-                              },
-                            });
-                          },
-                          okButtonProps: {
-                            danger: true,
-                          },
-                          okText: t('button.Delete'),
-                        });
-                      }}
-                    />
-                  )}
-                </Flex>
-              );
-            },
-          },
-        ])}
+        columns={columns}
         showSorterTooltip={false}
         pagination={{
           pageSize: tablePaginationOption.pageSize,
@@ -543,8 +585,7 @@ const UserCredentialList: React.FC = () => {
           showTotal: (total, range) => {
             return `${range[0]}-${range[1]} of ${total} items`;
           },
-          // TODO: need to set more options to export CSV in current page's data
-          pageSizeOptions: ['10', '20', '50'],
+          pageSizeOptions: ['10', '20', '50', '100', '500', '1000'],
           style: { marginRight: token.marginXS },
         }}
         onChange={({ pageSize, current }, filters, sorter) => {
diff --git a/react/src/components/UserNodeList.tsx b/react/src/components/UserNodeList.tsx
index a059893d7..685bce9dc 100644
--- a/react/src/components/UserNodeList.tsx
+++ b/react/src/components/UserNodeList.tsx
@@ -5,19 +5,34 @@ import {
   filterNonNullItems,
   transformSorterToOrderString,
 } from '../helper';
+import { exportCSVWithFormattingRules } from '../helper/csv-util';
 import { useUpdatableState } from '../hooks';
 import { useBAIPaginationOptionState } from '../hooks/reactPaginationQueryOptions';
 import UserInfoModal from './UserInfoModal';
 import UserSettingModal from './UserSettingModal';
 import { UserNodeListModifyMutation } from './__generated__/UserNodeListModifyMutation.graphql';
-import { UserNodeListQuery } from './__generated__/UserNodeListQuery.graphql';
+import {
+  UserNodeListQuery,
+  UserNodeListQuery$data,
+} from './__generated__/UserNodeListQuery.graphql';
 import {
   ReloadOutlined,
   LoadingOutlined,
   InfoCircleOutlined,
   SettingOutlined,
+  MoreOutlined,
 } from '@ant-design/icons';
-import { Tooltip, Button, Table, theme, Radio, Popconfirm, App } from 'antd';
+import {
+  Tooltip,
+  Button,
+  Table,
+  theme,
+  Radio,
+  Popconfirm,
+  App,
+  TableColumnsType,
+  Dropdown,
+} from 'antd';
 import graphql from 'babel-plugin-relay/macro';
 import dayjs from 'dayjs';
 import _ from 'lodash';
@@ -26,6 +41,12 @@ import React, { useState, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLazyLoadQuery, useMutation } from 'react-relay';
 
+type UserNode = NonNullable<
+  NonNullable<
+    NonNullable<UserNodeListQuery$data['user_nodes']>
+  >['edges'][number]
+>['node'];
+
 interface UserNodeListProps {}
 
 const UserNodeList: React.FC<UserNodeListProps> = () => {
@@ -124,6 +145,152 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
       }
     `);
 
+  const columns: TableColumnsType<UserNode> = filterEmptyItem([
+    {
+      key: 'email',
+      title: t('credential.UserID'),
+      dataIndex: 'email',
+      sorter: true,
+    },
+    {
+      key: 'username',
+      title: t('credential.Name'),
+      dataIndex: 'username',
+      sorter: true,
+    },
+    {
+      key: 'role',
+      title: t('credential.Role'),
+      dataIndex: 'role',
+      sorter: true,
+    },
+    {
+      key: 'description',
+      title: t('credential.Description'),
+      dataIndex: 'description',
+    },
+    {
+      key: 'created_at',
+      title: t('credential.CreatedAt'),
+      dataIndex: 'created_at',
+      render: (text) => dayjs(text).format('lll'),
+      sorter: true,
+      defaultSortOrder: 'descend',
+    },
+    activeFilter === 'status != "active"' && {
+      key: 'status',
+      title: t('credential.Status'),
+      dataIndex: 'status',
+      sorter: true,
+    },
+    {
+      key: 'control',
+      title: t('general.Control'),
+      render: (value, record) => {
+        const isActive = record?.status === 'active';
+        return (
+          <Flex gap={token.marginXS}>
+            <Button
+              type="text"
+              icon={
+                <InfoCircleOutlined style={{ color: token.colorSuccess }} />
+              }
+              onClick={() => {
+                startInfoModalOpenTransition(() => {
+                  setEmailForInfoModal(record?.email || null);
+                });
+              }}
+            />
+            <Button
+              type="text"
+              icon={<SettingOutlined style={{ color: token.colorInfo }} />}
+              onClick={() => {
+                startSettingModalOpenTransition(() => {
+                  setEmailForSettingModal(record?.email || null);
+                });
+              }}
+            />
+            <Tooltip
+              title={
+                isActive ? t('credential.Inactive') : t('credential.Active')
+              }
+            >
+              <Popconfirm
+                title={
+                  isActive
+                    ? t('credential.ConfirmUpdateStatusToInActive')
+                    : t('credential.ConfirmUpdateStatusToActive')
+                }
+                placement="left"
+                okType={isActive ? 'danger' : 'primary'}
+                okText={isActive ? t('credential.Inactive') : undefined}
+                description={record?.email}
+                onConfirm={() => {
+                  setPendingUserId(record?.id || '');
+                  commitModifyUser({
+                    variables: {
+                      email: record?.email || '',
+                      props: {
+                        status: isActive ? 'inactive' : 'active',
+                      },
+                    },
+                    onCompleted: () => {
+                      message.success(
+                        t('credential.StatusUpdatedSuccessfully'),
+                      );
+                      startRefreshTransition(() => {
+                        updateFetchKey();
+                      });
+                    },
+                    onError: (error) => {
+                      message.error(error?.message);
+                      console.error(error);
+                    },
+                  });
+                }}
+              >
+                <Button
+                  type="text"
+                  danger={isActive}
+                  icon={isActive ? <BanIcon /> : <UndoIcon />}
+                  disabled={
+                    isInFlightCommitModifyUser && pendingUserId !== record?.id
+                  }
+                  loading={
+                    isInFlightCommitModifyUser && pendingUserId === record?.id
+                  }
+                />
+              </Popconfirm>
+            </Tooltip>
+          </Flex>
+        );
+      },
+    },
+  ]);
+
+  const handleExportCSV = () => {
+    if (!user_nodes?.edges || _.isEmpty(user_nodes?.edges)) {
+      message.error(t('credential.NoDataToExport'));
+      return;
+    }
+
+    const columnKeys = _.without(
+      _.map(columns, (column) => _.toString(column?.key)),
+      'control',
+    );
+    const responseData: Partial<UserNode>[] = _.map(user_nodes?.edges, (e) => {
+      return _.pick(e?.node, columnKeys);
+    });
+
+    exportCSVWithFormattingRules(
+      responseData,
+      `${activeFilter === 'status == "active"' ? 'active' : 'inactive'}_users_list`,
+      {
+        created_at: (value) => dayjs(value).format('lll'),
+      },
+    );
+  };
+
   return (
     <Flex direction="column" align="stretch">
       <Flex
@@ -211,6 +378,22 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
           />
         </Flex>
         <Flex gap="xs">
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'export-csv',
+                  label: t('credential.ExportCSV'),
+                  onClick: () => {
+                    handleExportCSV();
+                  },
+                },
+              ],
+            }}
+            placement="bottomRight"
+          >
+            <Button icon={<MoreOutlined />} />
+          </Dropdown>
           <Tooltip title={t('button.Refresh')}>
             <Button
               loading={isPendingRefresh}
@@ -237,134 +420,7 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
         scroll={{ x: 'max-content' }}
         rowKey={'id'}
         dataSource={_.map(filterNonNullItems(user_nodes?.edges), (e) => e.node)}
-        columns={filterEmptyItem([
-          {
-            key: 'email',
-            title: t('credential.UserID'),
-            dataIndex: 'email',
-            sorter: true,
-          },
-          {
-            key: 'username',
-            title: t('credential.Name'),
-            dataIndex: 'username',
-            sorter: true,
-          },
-          {
-            key: 'role',
-            title: t('credential.Role'),
-            dataIndex: 'role',
-            sorter: true,
-          },
-          {
-            key: 'description',
-            title: t('credential.Description'),
-            dataIndex: 'description',
-          },
-          {
-            title: t('credential.CreatedAt'),
-            dataIndex: 'created_at',
-            render: (text) => dayjs(text).format('lll'),
-            sorter: true,
-            defaultSortOrder: 'descend',
-          },
-          activeFilter === 'status != "active"' && {
-            key: 'status',
-            title: t('credential.Status'),
-            dataIndex: 'status',
-            sorter: true,
-          },
-          {
-            title: t('general.Control'),
-            render: (record) => {
-              const isActive = record?.status === 'active';
-              return (
-                <Flex gap={token.marginXS}>
-                  <Button
-                    type="text"
-                    icon={
-                      <InfoCircleOutlined
-                        style={{ color: token.colorSuccess }}
-                      />
-                    }
-                    onClick={() => {
-                      startInfoModalOpenTransition(() => {
-                        setEmailForInfoModal(record?.email || null);
-                      });
-                    }}
-                  />
-                  <Button
-                    type="text"
-                    icon={
-                      <SettingOutlined style={{ color: token.colorInfo }} />
-                    }
-                    onClick={() => {
-                      startSettingModalOpenTransition(() => {
-                        setEmailForSettingModal(record?.email || null);
-                      });
-                    }}
-                  />
-                  <Tooltip
-                    title={
-                      isActive
-                        ? t('credential.Inactive')
-                        : t('credential.Active')
-                    }
-                  >
-                    <Popconfirm
-                      title={
-                        isActive
-                          ? t('credential.ConfirmUpdateStatusToInActive')
-                          : t('credential.ConfirmUpdateStatusToActive')
-                      }
-                      placement="left"
-                      okType={isActive ? 'danger' : 'primary'}
-                      okText={isActive ? t('credential.Inactive') : undefined}
-                      description={record?.email}
-                      onConfirm={() => {
-                        setPendingUserId(record?.id || '');
-                        commitModifyUser({
-                          variables: {
-                            email: record?.email || '',
-                            props: {
-                              status: isActive ? 'inactive' : 'active',
-                            },
-                          },
-                          onCompleted: () => {
-                            message.success(
-                              t('credential.StatusUpdatedSuccessfully'),
-                            );
-                            startRefreshTransition(() => {
-                              updateFetchKey();
-                            });
-                          },
-                          onError: (error) => {
-                            message.error(error?.message);
-                            console.error(error);
-                          },
-                        });
-                      }}
-                    >
-                      <Button
-                        type="text"
-                        danger={isActive}
-                        icon={isActive ? <BanIcon /> : <UndoIcon />}
-                        disabled={
-                          isInFlightCommitModifyUser &&
-                          pendingUserId !== record?.id
-                        }
-                        loading={
-                          isInFlightCommitModifyUser &&
-                          pendingUserId === record?.id
-                        }
-                      />
-                    </Popconfirm>
-                  </Tooltip>
-                </Flex>
-              );
-            },
-          },
-        ])}
+        columns={columns}
         showSorterTooltip={false}
         sortDirections={['descend', 'ascend', 'descend']}
         pagination={{
@@ -375,7 +431,7 @@ const UserNodeList: React.FC<UserNodeListProps> = () => {
           showTotal(total, range) {
             return `${range[0]}-${range[1]} of ${total} users`;
           },
-          pageSizeOptions: ['10', '20', '50'],
+          pageSizeOptions: ['10', '20', '50', '100', '500', '1000'],
           style: { marginRight: token.marginXS },
         }}
         onChange={({ pageSize, current }, filters, sorter) => {
diff --git a/resources/i18n/de.json b/resources/i18n/de.json
index eb9ee6ffd..8df9c35b1 100644
--- a/resources/i18n/de.json
+++ b/resources/i18n/de.json
@@ -620,7 +620,9 @@
     "ReqPer15Min": "Erforderlich pro 15 Min",
     "Sessions": "Sitzungen",
     "KeypairStatusUpdatedSuccessfully": "Der Schlüsselpaarstatus hat sich geändert.",
-    "KeypairSuccessfullyDeleted": "KeyPair wurde erfolgreich gelöscht."
+    "KeypairSuccessfullyDeleted": "KeyPair wurde erfolgreich gelöscht.",
+    "NoDataToExport": "Die Daten für den CSV-Extrakt sind nicht vorhanden.",
+    "ExportCSV": "CSV exportieren"
   },
   "data": {
     "Folders": "Ordner",
diff --git a/resources/i18n/el.json b/resources/i18n/el.json
index b94603e46..89054055b 100644
--- a/resources/i18n/el.json
+++ b/resources/i18n/el.json
@@ -620,7 +620,9 @@
     "ReqPer15Min": "Απαίτηση ανά 15 λεπτά",
     "Sessions": "Συνεδρίες",
     "KeypairStatusUpdatedSuccessfully": "Η κατάσταση του ζεύγους κλειδιών έχει αλλάξει.",
-    "KeypairSuccessfullyDeleted": "Το KeyPair διαγράφηκε με επιτυχία."
+    "KeypairSuccessfullyDeleted": "Το KeyPair διαγράφηκε με επιτυχία.",
+    "NoDataToExport": "Τα δεδομένα για το απόσπασμα CSV δεν υπάρχουν.",
+    "ExportCSV": "εξαγωγή CSV"
   },
   "data": {
     "Folders": "Φάκελοι",
diff --git a/resources/i18n/en.json b/resources/i18n/en.json
index 278e99d90..200ebff5a 100644
--- a/resources/i18n/en.json
+++ b/resources/i18n/en.json
@@ -747,7 +747,9 @@
     "Sessions": "Sessions",
     "LastUsed": "Last Used",
     "KeypairStatusUpdatedSuccessfully": "The keypair status has changed.",
-    "KeypairSuccessfullyDeleted": "KeyPair is successfully deleted."
+    "KeypairSuccessfullyDeleted": "KeyPair is successfully deleted.",
+    "NoDataToExport": "The data for the CSV extract does not exist.",
+    "ExportCSV": "export CSV"
   },
   "data": {
     "Folders": "Folders",
diff --git a/resources/i18n/es.json b/resources/i18n/es.json
index ea547ff25..622f2446f 100644
--- a/resources/i18n/es.json
+++ b/resources/i18n/es.json
@@ -239,7 +239,9 @@
     "Sessions": "Sesiones",
     "LastUsed": "Último utilizado",
     "KeypairStatusUpdatedSuccessfully": "El estado del par de claves ha cambiado.",
-    "KeypairSuccessfullyDeleted": "KeyPair se eliminó correctamente."
+    "KeypairSuccessfullyDeleted": "KeyPair se eliminó correctamente.",
+    "NoDataToExport": "Los datos para el extracto CSV no existen.",
+    "ExportCSV": "exportar CSV"
   },
   "data": {
     "Allowslettersnumbersand-_": "Permite letras, números y -_",
diff --git a/resources/i18n/fi.json b/resources/i18n/fi.json
index 666844651..518b6ff74 100644
--- a/resources/i18n/fi.json
+++ b/resources/i18n/fi.json
@@ -238,6 +238,8 @@
     "ReqPer15Min": "Req per 15 min",
     "Sessions": "Istunnot",
     "LastUsed": "Viimeksi käytetty",
+    "NoDataToExport": "CSV-otteen tietoja ei ole olemassa.",
+    "ExportCSV": "vie CSV",
     "KeypairStatusUpdatedSuccessfully": "Näppäinparin tila on muuttunut.",
     "KeypairSuccessfullyDeleted": "Avainparin poistaminen onnistui."
   },
diff --git a/resources/i18n/fr.json b/resources/i18n/fr.json
index 8d7f01cb1..1899e0b35 100644
--- a/resources/i18n/fr.json
+++ b/resources/i18n/fr.json
@@ -620,7 +620,9 @@
     "Sessions": "Séances",
     "LastUsed": "Dernière utilisation",
     "KeypairStatusUpdatedSuccessfully": "L'état de la paire de clés a changé.",
-    "KeypairSuccessfullyDeleted": "KeyPair est supprimé avec succès."
+    "KeypairSuccessfullyDeleted": "KeyPair est supprimé avec succès.",
+    "NoDataToExport": "Les données pour l'extrait CSV n'existent pas.",
+    "ExportCSV": "exporter au format CSV"
   },
   "data": {
     "Folders": "Dossiers",
diff --git a/resources/i18n/id.json b/resources/i18n/id.json
index cca836cd4..7ff68aad0 100644
--- a/resources/i18n/id.json
+++ b/resources/i18n/id.json
@@ -620,6 +620,8 @@
     "ReqPer15Min": "Persyaratan per 15 menit",
     "Sessions": "Sesi",
     "LastUsed": "Terakhir digunakan",
+    "NoDataToExport": "Data untuk ekstrak CSV tidak ada.",
+    "ExportCSV": "ekspor CSV",
     "KeypairStatusUpdatedSuccessfully": "Status pasangan kunci telah berubah.",
     "KeypairSuccessfullyDeleted": "KeyPair berhasil dihapus."
   },
diff --git a/resources/i18n/it.json b/resources/i18n/it.json
index fdc9bf19e..0b4560acc 100644
--- a/resources/i18n/it.json
+++ b/resources/i18n/it.json
@@ -621,7 +621,9 @@
     "Sessions": "Sessioni",
     "LastUsed": "Ultimo uso",
     "KeypairStatusUpdatedSuccessfully": "Lo stato della coppia di chiavi è cambiato.",
-    "KeypairSuccessfullyDeleted": "KeyPair è stato eliminato con successo."
+    "KeypairSuccessfullyDeleted": "KeyPair è stato eliminato con successo.",
+    "NoDataToExport": "I dati per l'estrazione CSV non esistono.",
+    "ExportCSV": "esportare CSV"
   },
   "data": {
     "Folders": "cartelle",
diff --git a/resources/i18n/ja.json b/resources/i18n/ja.json
index d01d43802..13506e7d6 100644
--- a/resources/i18n/ja.json
+++ b/resources/i18n/ja.json
@@ -619,6 +619,8 @@
     "ReqPer15Min": "15分あたりの要求",
     "Sessions": "セッション",
     "LastUsed": "最後に使用した",
+    "NoDataToExport": "CSV抽出用のデータが存在しません。",
+    "ExportCSV": "CSVエクスポート",
     "KeypairStatusUpdatedSuccessfully": "キーペアのステータスが変更されました。",
     "KeypairSuccessfullyDeleted": "キーペアは正常に削除されました。"
   },
diff --git a/resources/i18n/ko.json b/resources/i18n/ko.json
index 08549442b..00c919cf9 100644
--- a/resources/i18n/ko.json
+++ b/resources/i18n/ko.json
@@ -734,6 +734,8 @@
     "ReqPer15Min": "15분당 요청 수",
     "Sessions": "세션",
     "LastUsed": "최종 사용일",
+    "NoDataToExport": "CSV 추출을 위한 데이터가 존재하지 않습니다.",
+    "ExportCSV": "CSV로 내보내기",
     "KeypairStatusUpdatedSuccessfully": "키페어 상태가 변경되었습니다.",
     "KeypairSuccessfullyDeleted": "키페어가 정상적으로 삭제되었습니다."
   },
diff --git a/resources/i18n/mn.json b/resources/i18n/mn.json
index 1b437c9d2..966215853 100644
--- a/resources/i18n/mn.json
+++ b/resources/i18n/mn.json
@@ -621,6 +621,8 @@
     "ReqPer15Min": "15 минут тутамд хэрэгцээ",
     "Sessions": "Хурал",
     "LastUsed": "Сүүлд ашигласан",
+    "NoDataToExport": "CSV хандалтын өгөгдөл байхгүй байна.",
+    "ExportCSV": "CSV экспортлох",
     "KeypairStatusUpdatedSuccessfully": "Товчлуурын хослол өөрчлөгдсөн.",
     "KeypairSuccessfullyDeleted": "KeyPair амжилттай устгагдлаа."
   },
diff --git a/resources/i18n/ms.json b/resources/i18n/ms.json
index 07102b662..d67521582 100644
--- a/resources/i18n/ms.json
+++ b/resources/i18n/ms.json
@@ -619,6 +619,8 @@
     "ReqPer15Min": "Req setiap 15 min",
     "Sessions": "Sesi",
     "LastUsed": "Kali terakhir digunakan",
+    "NoDataToExport": "Data untuk ekstrak CSV tidak wujud.",
+    "ExportCSV": "eksport CSV",
     "KeypairStatusUpdatedSuccessfully": "Status pasangan kekunci telah berubah.",
     "KeypairSuccessfullyDeleted": "KeyPair berjaya dipadamkan."
   },
diff --git a/resources/i18n/pl.json b/resources/i18n/pl.json
index b63e19c39..0244c7a71 100644
--- a/resources/i18n/pl.json
+++ b/resources/i18n/pl.json
@@ -619,6 +619,8 @@
     "Queries": "Zapytania",
     "ReqPer15Min": "Zapotrzebowanie na 15 min",
     "Sessions": "Sesje",
+    "NoDataToExport": "Dane do ekstraktu CSV nie istnieją.",
+    "ExportCSV": "eksportuj plik CSV",
     "KeypairStatusUpdatedSuccessfully": "Stan pary kluczy uległ zmianie.",
     "KeypairSuccessfullyDeleted": "KeyPair został pomyślnie usunięty."
   },
diff --git a/resources/i18n/pt-BR.json b/resources/i18n/pt-BR.json
index 2a053719f..303f1c0c3 100644
--- a/resources/i18n/pt-BR.json
+++ b/resources/i18n/pt-BR.json
@@ -619,6 +619,8 @@
     "ReqPer15Min": "Solicitação por 15 min",
     "Sessions": "Sessões",
     "LastUsed": "Usado por último",
+    "NoDataToExport": "Os dados para a extração CSV não existem.",
+    "ExportCSV": "exportar CSV",
     "KeypairStatusUpdatedSuccessfully": "O status do par de chaves mudou.",
     "KeypairSuccessfullyDeleted": "KeyPair foi excluído com sucesso."
   },
diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 0ecddf498..a0a573cb3 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -619,6 +619,8 @@
     "ReqPer15Min": "Solicitação por 15 min",
     "Sessions": "Sessões",
     "LastUsed": "Usado por último",
+    "NoDataToExport": "Os dados para a extração CSV não existem.",
+    "ExportCSV": "exportar CSV",
     "KeypairStatusUpdatedSuccessfully": "O status do par de chaves mudou.",
     "KeypairSuccessfullyDeleted": "KeyPair foi excluído com sucesso."
   },
diff --git a/resources/i18n/ru.json b/resources/i18n/ru.json
index 6f1e10102..daa723177 100644
--- a/resources/i18n/ru.json
+++ b/resources/i18n/ru.json
@@ -620,7 +620,9 @@
     "Sessions": "Сессии",
     "LastUsed": "Последний раз был использован",
     "KeypairStatusUpdatedSuccessfully": "Статус пары ключей изменился.",
-    "KeypairSuccessfullyDeleted": "KeyPair успешно удалена."
+    "KeypairSuccessfullyDeleted": "KeyPair успешно удалена.",
+    "NoDataToExport": "Данные для извлечения CSV не существуют.",
+    "ExportCSV": "экспортировать CSV"
   },
   "data": {
     "Folders": "Папки",
diff --git a/resources/i18n/th.json b/resources/i18n/th.json
index 9d013b651..15e6ed18c 100644
--- a/resources/i18n/th.json
+++ b/resources/i18n/th.json
@@ -742,6 +742,8 @@
     "ReqPer15Min": "ต้องการต่อ 15 นาที",
     "Sessions": "เซสชัน",
     "LastUsed": "ใช้ครั้งล่าสุด",
+    "NoDataToExport": "ไม่มีข้อมูลสำหรับการแยก CSV",
+    "ExportCSV": "ส่งออก CSV",
     "KeypairStatusUpdatedSuccessfully": "สถานะคู่กุญแจเปลี่ยนไป",
     "KeypairSuccessfullyDeleted": "ลบ KeyPair สำเร็จแล้ว"
   },
diff --git a/resources/i18n/tr.json b/resources/i18n/tr.json
index d80b1f4e2..12ca00fd6 100644
--- a/resources/i18n/tr.json
+++ b/resources/i18n/tr.json
@@ -619,7 +619,9 @@
     "ReqPer15Min": "15 dakika başına talep",
     "Sessions": "Oturumlar",
     "KeypairStatusUpdatedSuccessfully": "Anahtar çifti durumu değişti.",
-    "KeypairSuccessfullyDeleted": "KeyPair başarıyla silindi."
+    "KeypairSuccessfullyDeleted": "KeyPair başarıyla silindi.",
+    "NoDataToExport": "CSV ekstresine ilişkin veriler mevcut değil.",
+    "ExportCSV": "CSV'yi dışa aktar"
   },
   "data": {
     "Folders": "klasörler",
diff --git a/resources/i18n/vi.json b/resources/i18n/vi.json
index 2da61188f..bdeb57a7d 100644
--- a/resources/i18n/vi.json
+++ b/resources/i18n/vi.json
@@ -619,6 +619,8 @@
     "ReqPer15Min": "Yêu cầu mỗi 15 phút",
     "Sessions": "Phiên",
     "LastUsed": "Lần sử dụng cuối cùng",
+    "NoDataToExport": "Dữ liệu cho bản trích xuất CSV không tồn tại.",
+    "ExportCSV": "xuất CSV",
     "KeypairStatusUpdatedSuccessfully": "Trạng thái cặp khóa đã thay đổi.",
     "KeypairSuccessfullyDeleted": "KeyPair đã được xóa thành công."
   },
diff --git a/resources/i18n/zh-CN.json b/resources/i18n/zh-CN.json
index ae18d245b..21045be7c 100644
--- a/resources/i18n/zh-CN.json
+++ b/resources/i18n/zh-CN.json
@@ -620,7 +620,9 @@
     "Sessions": "会议",
     "KeypairStatusUpdatedSuccessfully": "密钥对状态已更改。",
     "KeypairSuccessfullyDeleted": "密钥对已成功删除。",
-    "LastUsed": "最后使用"
+    "LastUsed": "最后使用",
+    "NoDataToExport": "CSV 提取的数据不存在。",
+    "ExportCSV": "导出 CSV"
   },
   "data": {
     "Folders": "文件夹",
diff --git a/resources/i18n/zh-TW.json b/resources/i18n/zh-TW.json
index 3d4c4bbac..79540b202 100644
--- a/resources/i18n/zh-TW.json
+++ b/resources/i18n/zh-TW.json
@@ -620,7 +620,9 @@
     "Sessions": "會議",
     "KeypairStatusUpdatedSuccessfully": "密鑰對狀態已變更。",
     "KeypairSuccessfullyDeleted": "密鑰對已成功刪除。",
-    "LastUsed": "最後使用"
+    "LastUsed": "最後使用",
+    "NoDataToExport": "CSV 擷取的資料不存在。",
+    "ExportCSV": "匯出 CSV"
   },
   "data": {
     "Folders": "文件夾",