Explorar o código

[ui-storagebrowser] moves the HDFS config to /fileSystem API (#3987)

Ram Prasad Agarwal hai 9 meses
pai
achega
42307bf4f6

+ 4 - 5
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx

@@ -22,12 +22,13 @@ import DataBrowserIcon from '@cloudera/cuix-core/icons/react/DataBrowserIcon';
 import { i18nReact } from '../../utils/i18nReact';
 import CommonHeader from '../../reactComponents/CommonHeader/CommonHeader';
 import StorageBrowserTab from './StorageBrowserTab/StorageBrowserTab';
-import { ApiFileSystem, FILESYSTEMS_API_URL } from '../../reactComponents/FileChooser/api';
+import { FILESYSTEMS_API_URL } from '../../reactComponents/FileChooser/api';
 
 import './StorageBrowserPage.scss';
 import useLoadData from '../../utils/hooks/useLoadData/useLoadData';
 import LoadingErrorWrapper from '../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
 import { getFileSystemAndPath } from '../../reactComponents/PathBrowser/PathBrowser.util';
+import { FileSystem } from '../../reactComponents/FileChooser/types';
 
 const StorageBrowserPage = (): JSX.Element => {
   const urlSearchParams = new URLSearchParams(window.location.search);
@@ -36,7 +37,7 @@ const StorageBrowserPage = (): JSX.Element => {
 
   const { t } = i18nReact.useTranslation();
 
-  const { data, loading, error, reloadData } = useLoadData<ApiFileSystem[]>(FILESYSTEMS_API_URL);
+  const { data, loading, error, reloadData } = useLoadData<FileSystem[]>(FILESYSTEMS_API_URL);
 
   const errorConfig = [
     {
@@ -58,9 +59,7 @@ const StorageBrowserPage = (): JSX.Element => {
           items={data?.map(fs => ({
             label: fs.file_system.toUpperCase(),
             key: fs.file_system,
-            children: (
-              <StorageBrowserTab homeDir={fs.user_home_directory} fileSystem={fs.file_system} />
-            )
+            children: <StorageBrowserTab fileSystem={fs} />
           }))}
         />
       </LoadingErrorWrapper>

+ 12 - 12
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx

@@ -22,7 +22,7 @@ import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
 import PathBrowser from '../../../reactComponents/PathBrowser/PathBrowser';
 import StorageDirectoryPage from '../StorageDirectoryPage/StorageDirectoryPage';
 import { FILE_STATS_API_URL } from '../../../reactComponents/FileChooser/api';
-import { BrowserViewType, FileStats } from '../../../reactComponents/FileChooser/types';
+import { BrowserViewType, FileStats, FileSystem } from '../../../reactComponents/FileChooser/types';
 import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
 
 import './StorageBrowserTab.scss';
@@ -32,8 +32,7 @@ import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/Lo
 import { getFileSystemAndPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 
 interface StorageBrowserTabProps {
-  homeDir: string;
-  fileSystem: string;
+  fileSystem: FileSystem;
   testId?: string;
 }
 
@@ -41,16 +40,13 @@ const defaultProps = {
   testId: 'hue-storage-browser-tab-content'
 };
 
-const StorageBrowserTab = ({
-  homeDir,
-  fileSystem,
-  testId
-}: StorageBrowserTabProps): JSX.Element => {
+const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.Element => {
   const urlPathname = window.location.pathname;
   const urlSearchParams = new URLSearchParams(window.location.search);
   const urlFilePath = decodeURIComponent(urlSearchParams.get('path') ?? '');
   const { fileSystem: urlFileSystem } = getFileSystemAndPath(urlFilePath);
-  const initialFilePath = urlFileSystem === fileSystem ? urlFilePath : homeDir;
+  const initialFilePath =
+    urlFileSystem === fileSystem.file_system ? urlFilePath : fileSystem.user_home_directory;
 
   const [filePath, setFilePath] = useState<string>(initialFilePath);
   const fileName = filePath.split('/').pop() ?? '';
@@ -84,12 +80,12 @@ const StorageBrowserTab = ({
       enabled: error?.response?.status === 404,
       message: t('Error: Path "{{path}}" not found.', { path: filePath }),
       action: t('Go to home directory'),
-      onClick: () => setFilePath(homeDir)
+      onClick: () => setFilePath(fileSystem.user_home_directory)
     },
     {
       enabled: !!error && error?.response?.status !== 404,
       message: t('An error occurred while fetching filesystem "{{fileSystem}}".', {
-        fileSystem: fileSystem.toUpperCase()
+        fileSystem: fileSystem.file_system.toUpperCase()
       }),
       action: t('Retry'),
       onClick: reloadData
@@ -118,7 +114,11 @@ const StorageBrowserTab = ({
           />
         </div>
         {fileStats?.type === BrowserViewType.dir && !loading && (
-          <StorageDirectoryPage fileStats={fileStats} onFilePathChange={setFilePath} />
+          <StorageDirectoryPage
+            fileStats={fileStats}
+            onFilePathChange={setFilePath}
+            config={fileSystem.config}
+          />
         )}
         {fileStats?.type === BrowserViewType.file && !loading && (
           <StorageFilePage fileName={fileName} fileStats={fileStats} onReload={reloadData} />

+ 9 - 20
desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.tsx

@@ -37,7 +37,7 @@ import huePubSub from '../../../../utils/huePubSub';
 import './StorageBrowserActions.scss';
 import {
   FileStats,
-  ListDirectory,
+  FileSystem,
   StorageDirectoryTableData
 } from '../../../../reactComponents/FileChooser/types';
 import { ActionType, getEnabledActions } from './StorageBrowserActions.util';
@@ -53,13 +53,7 @@ import ChangeOwnerAndGroupModal from './ChangeOwnerAndGroupModal/ChangeOwnerAndG
 import ChangePermissionModal from './ChangePermissionModal/ChangePermissionModal';
 
 interface StorageBrowserRowActionsProps {
-  // TODO: move relevant keys to hue_config
-  superUser?: ListDirectory['superuser'];
-  superGroup?: ListDirectory['supergroup'];
-  users?: ListDirectory['users'];
-  groups?: ListDirectory['groups'];
-  isFsSuperUser?: ListDirectory['is_fs_superuser'];
-  isTrashEnabled?: boolean;
+  config: FileSystem['config'];
   currentPath: FileStats['path'];
   selectedFiles: StorageDirectoryTableData[];
   onSuccessfulAction: () => void;
@@ -81,12 +75,7 @@ const iconsMap: Record<ActionType, JSX.Element> = {
 };
 
 const StorageBrowserActions = ({
-  superUser,
-  superGroup,
-  users,
-  groups,
-  isFsSuperUser,
-  isTrashEnabled,
+  config,
   currentPath,
   selectedFiles,
   onSuccessfulAction,
@@ -124,7 +113,7 @@ const StorageBrowserActions = ({
   };
 
   const actionItems: MenuItemType[] = useMemo(() => {
-    const enabledActions = getEnabledActions(t, selectedFiles, isFsSuperUser);
+    const enabledActions = getEnabledActions(t, selectedFiles, config?.is_hdfs_superuser);
     return enabledActions.map(action => ({
       key: String(action.type),
       label: t(action.label),
@@ -181,7 +170,7 @@ const StorageBrowserActions = ({
       )}
       {selectedAction === ActionType.Delete && (
         <DeletionModal
-          isTrashEnabled={isTrashEnabled}
+          isTrashEnabled={config?.is_trash_enabled}
           files={selectedFiles}
           onSuccess={onApiSuccess}
           onError={onApiError}
@@ -212,10 +201,10 @@ const StorageBrowserActions = ({
       {selectedAction === ActionType.ChangeOwnerAndGroup && (
         <ChangeOwnerAndGroupModal
           files={selectedFiles}
-          superUser={superUser}
-          superGroup={superGroup}
-          users={users}
-          groups={groups}
+          superUser={config?.superuser}
+          superGroup={config?.supergroup}
+          users={config?.users}
+          groups={config?.groups}
           onSuccess={onApiSuccess}
           onError={onApiError}
           onClose={closeModal}

+ 5 - 7
desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryPage.tsx

@@ -34,7 +34,8 @@ import {
   ListDirectory,
   FileStats,
   BrowserViewType,
-  StorageDirectoryTableData
+  StorageDirectoryTableData,
+  FileSystem
 } from '../../../reactComponents/FileChooser/types';
 import Pagination from '../../../reactComponents/Pagination/Pagination';
 import StorageBrowserActions from './StorageBrowserActions/StorageBrowserActions';
@@ -57,6 +58,7 @@ import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/Lo
 
 interface StorageDirectoryPageProps {
   fileStats: FileStats;
+  config: FileSystem['config'];
   onFilePathChange: (path: string) => void;
   className?: string;
   rowClassName?: string;
@@ -71,6 +73,7 @@ const defaultProps = {
 
 const StorageDirectoryPage = ({
   fileStats,
+  config,
   onFilePathChange,
   className,
   rowClassName,
@@ -283,13 +286,8 @@ const StorageDirectoryPage = ({
         />
         <div className="hue-storage-browser__actions-bar-right">
           <StorageBrowserActions
+            config={config}
             currentPath={fileStats.path}
-            isTrashEnabled={filesData?.is_trash_enabled}
-            isFsSuperUser={filesData?.is_fs_superuser}
-            superUser={filesData?.superuser}
-            superGroup={filesData?.supergroup}
-            users={filesData?.users}
-            groups={filesData?.groups}
             selectedFiles={selectedFiles}
             setLoadingFiles={setLoadingFiles}
             onSuccessfulAction={reloadData}

+ 21 - 17
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -22,7 +22,7 @@ import HdfsIcon from '../../../components/icons/HdfsIcon';
 import S3Icon from '../../../components/icons/S3Icon';
 import AdlsIcon from '../../../components/icons/AdlsIcon';
 
-import { ApiFileSystem, FILESYSTEMS_API_URL } from '../api';
+import { FILESYSTEMS_API_URL } from '../api';
 import { FileSystem } from '../types';
 import './FileChooserModal.scss';
 import PathBrowser from '../../PathBrowser/PathBrowser';
@@ -35,6 +35,13 @@ interface FileProps {
   okText?: string;
 }
 
+interface FileChooserMenu {
+  label: string;
+  key: number;
+  icon: React.ReactNode;
+  user_home_dir: string;
+}
+
 const defaultProps = { title: 'Choose a file', okText: 'Select' };
 
 const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }) => {
@@ -50,27 +57,24 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
   const handleOk = onCancel;
   const handleCancel = onCancel;
 
-  const { data: fileSystemsData, loading: loadingFilesSystem } =
-    useLoadData<ApiFileSystem[]>(FILESYSTEMS_API_URL);
+  const { data, loading } = useLoadData<FileSystem[]>(FILESYSTEMS_API_URL);
 
-  const fileSystemList: FileSystem[] | undefined = useMemo(
+  const fileSystemList: FileChooserMenu[] | undefined = useMemo(
     () =>
-      fileSystemsData?.map((system, index) => {
-        return {
-          label: system.file_system,
-          key: index,
-          icon: icons[system.file_system],
-          user_home_dir: system.user_home_directory
-        };
-      }),
-    [fileSystemsData]
+      data?.map((system, index) => ({
+        label: system.file_system,
+        key: index,
+        icon: icons[system.file_system],
+        user_home_dir: system.user_home_directory
+      })),
+    [data]
   );
 
   useEffect(() => {
-    if (fileSystemsData && fileSystemsData?.length !== 0) {
-      setFilePath(fileSystemsData[0].user_home_directory);
+    if (data && data?.length !== 0) {
+      setFilePath(data[0].user_home_directory);
     }
-  }, [fileSystemsData]);
+  }, [data]);
 
   return (
     <Modal
@@ -82,7 +86,7 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
       width={930}
       className="hue-file-chooser__modal"
     >
-      <Spin spinning={loadingFilesSystem}>
+      <Spin spinning={loading}>
         <Row>
           <Col span={5}>
             <Menu

+ 0 - 5
desktop/core/src/desktop/js/reactComponents/FileChooser/api.ts

@@ -39,8 +39,3 @@ export const BULK_MOVE_API_URL = '/api/v1/storage/move/bulk';
 export const BULK_CHANGE_OWNER_API_URL = '/api/v1/storage/chown/bulk';
 export const BULK_CHANGE_PERMISSION_API_URL = '/api/v1/storage/chmod/bulk';
 export const UPLOAD_AVAILABLE_SPACE_URL = '/api/v1/taskserver/upload/available_space';
-
-export interface ApiFileSystem {
-  file_system: string;
-  user_home_directory: string;
-}

+ 10 - 5
desktop/core/src/desktop/js/reactComponents/FileChooser/types.ts

@@ -14,12 +14,17 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-//TODO: the interface will change based on the new api to accomodate errors
 export interface FileSystem {
-  label: string;
-  key: number;
-  icon: JSX.Element;
-  user_home_dir: string;
+  file_system: string;
+  user_home_directory: string;
+  config?: {
+    is_trash_enabled: boolean;
+    is_hdfs_superuser: boolean;
+    groups: string[];
+    users: string[];
+    superuser: string;
+    supergroup: string;
+  };
 }
 
 export interface FileStats {