Explorar el Código

[frontend] Displays the file systems as a menu list in the file chooser modal

Nidhi Bhat G hace 3 años
padre
commit
a173bf2be7

+ 56 - 3
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -1,6 +1,29 @@
-import React from 'react';
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useState, useEffect } from 'react';
 import Modal from 'antd/lib/modal/Modal';
 
+import HdfsIcon from '../../../components/icons/HdfsIcon';
+import S3Icon from '../../../components/icons/S3Icon';
+import AdlsIcon from '../../../components/icons/AdlsIcon';
+
+import { fetchFileSystems } from '../api';
+import { FileSystem } from '../types';
+import FileSystemList from '../FileSystemList/FileSystemList';
 interface FileProps {
   show: boolean;
   onCancel: () => void;
@@ -11,8 +34,16 @@ interface FileProps {
 const defaultProps = { title: 'Choose a file', okText: 'Select' };
 
 const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }) => {
+  const [fileSystemList, setFileSystemList] = useState<Array<FileSystem>>([]);
+
+  const icons = {
+    hdfs: <HdfsIcon />,
+    abfs: <AdlsIcon />,
+    s3: <S3Icon />
+  };
+
   const handleOk = () => {
-    //temporary until the file is selected through the file chooser compoent
+    //temporary until the file is selected through the file chooser component
     onCancel();
   };
 
@@ -20,6 +51,24 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
     onCancel();
   };
 
+  useEffect(() => {
+    if (show) {
+      fetchFileSystems().then(fileSystemResponse => {
+        const fileSystems = Object.keys(fileSystemResponse.filesystems);
+        if (fileSystems !== undefined || fileSystems.length !== 0) {
+          const fileSystemsObj = fileSystems.map(system => {
+            return {
+              label: system,
+              key: system,
+              icon: icons[system]
+            };
+          });
+          setFileSystemList(fileSystemsObj);
+        }
+      });
+    }
+  }, [show]);
+
   return (
     <Modal
       title={title}
@@ -27,7 +76,11 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
       onOk={handleOk}
       onCancel={handleCancel}
       okText={okText}
-    ></Modal>
+      width={930}
+      bodyStyle={{ height: '554px', padding: '0px' }}
+    >
+      <FileSystemList fileSystems={fileSystemList}></FileSystemList>
+    </Modal>
   );
 };
 

+ 18 - 2
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.scss

@@ -1,7 +1,23 @@
-@use '../../../components/styles/colors' as colors;
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../../components/styles/colors';
 
 .file-chooser__button {
-  background-color: colors.$hue-primary-color-dark;
+  background-color: $hue-primary-color-dark;
   color: white;
   margin-left: 40px;
   margin-top: 12px;

+ 16 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.test.tsx

@@ -1,3 +1,19 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';

+ 16 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserWithButton/FileChooserWithButton.tsx

@@ -1,3 +1,19 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
 import React, { useState } from 'react';
 import { Button } from 'antd';
 

+ 38 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/FileSystemList/FileSystemList.scss

@@ -0,0 +1,38 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../../components/styles/colors';
+
+.file-system__panel.ant-menu {
+  height: 554px;
+  width: 187px;
+  background-color: $fluid-gray-100;
+  padding-top: 20px;
+}
+
+.ant-menu-item {
+  display: flex !important;
+  align-items: center;
+}
+
+.ant-menu-item-icon {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.ant-menu-item-selected {
+  background-color: $fluid-gray-300 !important;
+}

+ 35 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/FileSystemList/FileSystemList.tsx

@@ -0,0 +1,35 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { Menu } from 'antd';
+
+import './FileSystemList.scss';
+import { FileSystem } from '../types';
+
+interface FileSystemProps {
+  fileSystems: Array<FileSystem>;
+}
+
+const FileSystemList: React.FC<FileSystemProps> = ({ fileSystems }) => {
+  return (
+    <>
+      <Menu items={fileSystems} className="file-system__panel"></Menu>
+    </>
+  );
+};
+
+export default FileSystemList;

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

@@ -0,0 +1,29 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { post } from '../../api/utils';
+import { CancellablePromise } from '../../api/cancellablePromise';
+
+const FILESYSTEMS_API_URL = '/api/storage/get_filesystems';
+
+export interface FetchFileSystemsResponse {
+  filesystems: Array<string>;
+  status: number;
+}
+
+export const fetchFileSystems = (): CancellablePromise<FetchFileSystemsResponse> => {
+  return post(FILESYSTEMS_API_URL);
+};

+ 22 - 0
desktop/core/src/desktop/js/reactComponents/FileChooser/types.ts

@@ -0,0 +1,22 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// 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: string;
+  icon: JSX.Element;
+}

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 6 - 0
desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -19,6 +19,8 @@
   @import 'node_modules/antd/es/button/style/index.less';
   @import 'node_modules/antd/es/modal/style/index.less';
   @import 'node_modules/antd/es/skeleton/style/index.less';
+  @import 'node_modules/antd/es/menu/style/index.less'; 
+
   /* stylelint-enable no-invalid-position-at-import-rule */
 
   // Required global overrides:
@@ -36,3 +38,7 @@
 body.ant-scrolling-effect {
   width: 100% !important;
 }
+
+
+@import 'antd/es/menu/style/index.less';                               
+@import 'antd/es/style/core/motion.less';

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio