feat: add table column setting to Environments page

lablup · Nov 1, 2024 · bf78ec7 · bf78ec7
1 parent e1fded1
commit bf78ec7
Showing 1 changed file with 43 additions and 3 deletions.
diff --git a/react/src/components/ImageList.tsx b/react/src/components/ImageList.tsx
@@ -11,6 +11,7 @@ import { BaseImageTags, ConstraintTags, LangTags } from './ImageTags';
 import ManageAppsModal from './ManageAppsModal';
 import ManageImageResourceLimitModal from './ManageImageResourceLimitModal';
 import ResourceNumber from './ResourceNumber';
+import TableColumnsSettingModal from './TableColumnsSettingModal';
 import TextHighlighter from './TextHighlighter';
 import {
   ImageListQuery,
@@ -24,8 +25,9 @@ import {
   SettingOutlined,
   VerticalAlignBottomOutlined,
 } from '@ant-design/icons';
+import { useLocalStorageState } from 'ahooks';
 import { App, Button, Input, Table, Tag, theme, Typography } from 'antd';
-import { ColumnsType } from 'antd/es/table';
+import { ColumnsType, ColumnType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
 import { Key, useMemo, useState, useTransition } from 'react';
@@ -61,6 +63,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
   const [installingImages, setInstallingImages] = useState<string[]>([]);
   const { message } = App.useApp();
   const [imageSearch, setImageSearch] = useState('');
+  const [isOpenColumnsSetting, setIsOpenColumnsSetting] = useState(false);
   const [isPendingRefreshTransition, startRefreshTransition] = useTransition();
   const [isPendingSearchTransition, startSearchTransition] = useTransition();
   const baiClient = useSuspendedBackendaiClient();
@@ -310,7 +313,9 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
       sorter: (a, b) =>
         a?.digest && b?.digest ? a.digest.localeCompare(b.digest) : 0,
       render: (text, row) => (
-        <TextHighlighter keyword={imageSearch}>{row.digest}</TextHighlighter>
+        <Typography.Text ellipsis={{ tooltip: true }} style={{ maxWidth: 200 }}>
+          <TextHighlighter keyword={imageSearch}>{row.digest}</TextHighlighter>
+        </Typography.Text>
       ),
     },
     {
@@ -374,6 +379,13 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
     },
   ];
 
+  const [displayedColumnKeys, setDisplayedColumnKeys] = useLocalStorageState(
+    'backendaiwebui.EnvironmentPage.displayedColumnKeys',
+    {
+      defaultValue: columns.map((column) => _.toString(column.key)),
+    },
+  );
+
   const imageFilterValues = useMemo(() => {
     return defaultSortedImages?.map((image) => {
       return {
@@ -505,7 +517,11 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             style: { marginRight: token.marginXS },
           }}
           dataSource={filterNonNullItems(filteredImageData)}
-          columns={columns}
+          columns={
+            columns.filter((column) =>
+              displayedColumnKeys?.includes(_.toString(column.key)),
+            ) as ColumnType<EnvironmentImage>[]
+          }
           loading={isPendingSearchTransition}
           rowSelection={{
             type: 'checkbox',
@@ -531,6 +547,20 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
           showSorterTooltip={false}
           sortDirections={['descend', 'ascend', 'descend']}
         />
+        <Flex
+          justify="end"
+          style={{
+            padding: token.paddingXXS,
+          }}
+        >
+          <Button
+            type="text"
+            icon={<SettingOutlined />}
+            onClick={() => {
+              setIsOpenColumnsSetting(true);
+            }}
+          />
+        </Flex>
       </Flex>
       <ManageImageResourceLimitModal
         open={!!managingResourceLimit}
@@ -562,6 +592,16 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
         setInstallingImages={setInstallingImages}
         selectedRows={selectedRows}
       />
+      <TableColumnsSettingModal
+        open={isOpenColumnsSetting}
+        onRequestClose={(values) => {
+          values?.selectedColumnKeys &&
+            setDisplayedColumnKeys(values?.selectedColumnKeys);
+          setIsOpenColumnsSetting(!isOpenColumnsSetting);
+        }}
+        columns={columns}
+        displayedColumnKeys={displayedColumnKeys ? displayedColumnKeys : []}
+      />
     </>
   );
 };