From e45c1878d1c2815a35631ec471e4c4e458adff00 Mon Sep 17 00:00:00 2001 From: Ram Prasad Agarwal Date: Sat, 26 Apr 2025 10:16:05 +0530 Subject: [PATCH 1/2] [ui-sb] Port sb from mako based to pure frontend --- .../templates/storage_browser.mako | 27 ------------ apps/filebrowser/src/filebrowser/urls.py | 1 - apps/filebrowser/src/filebrowser/views.py | 4 -- .../js/apps/newimporter/ImporterPage.scss | 1 - .../storageBrowser/StorageBrowserPage.scss | 41 ++++++++----------- .../storageBrowser/StorageBrowserPage.tsx | 26 ++++++------ .../src/desktop/js/apps/storageBrowser/app.js | 27 ------------ .../js/components/sidebar/HueSidebar.vue | 6 +-- .../core/src/desktop/js/onePageViewModel.js | 12 +++++- .../LoadingErrorWrapper.scss | 8 +++- .../LoadingErrorWrapper.tsx | 17 ++++---- .../PaginatedTable/PaginatedTable.tsx | 2 +- .../Pagination/Pagination.scss | 4 ++ desktop/core/src/desktop/models.py | 4 +- .../templates/global_js_constants.mako | 1 - desktop/core/src/desktop/templates/hue.mako | 2 +- webpack.config.js | 4 -- 17 files changed, 68 insertions(+), 119 deletions(-) delete mode 100644 apps/filebrowser/src/filebrowser/templates/storage_browser.mako delete mode 100644 desktop/core/src/desktop/js/apps/storageBrowser/app.js diff --git a/apps/filebrowser/src/filebrowser/templates/storage_browser.mako b/apps/filebrowser/src/filebrowser/templates/storage_browser.mako deleted file mode 100644 index 6f604d2e15d..00000000000 --- a/apps/filebrowser/src/filebrowser/templates/storage_browser.mako +++ /dev/null @@ -1,27 +0,0 @@ -## -*- coding: utf-8 -*- -## 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. - -<%! - from desktop.webpack_utils import get_hue_bundles - from webpack_loader.templatetags.webpack_loader import render_bundle -%> - -% for bundle in get_hue_bundles('storageBrowser'): - ${ render_bundle(bundle) | n,unicode } -% endfor - - diff --git a/apps/filebrowser/src/filebrowser/urls.py b/apps/filebrowser/src/filebrowser/urls.py index aadeda9f343..c2ebc778b5d 100644 --- a/apps/filebrowser/src/filebrowser/urls.py +++ b/apps/filebrowser/src/filebrowser/urls.py @@ -25,7 +25,6 @@ # Catch-all for viewing a file (display) or a directory (listdir) re_path(r'^view=(?P.*)$', filebrowser_views.view, name='filebrowser.views.view'), - re_path(r'^new$', filebrowser_views.view_new, name='filebrowser.views.new_view'), re_path(r'^listdir=(?P.*)$', filebrowser_views.listdir, name='listdir'), re_path(r'^display=(?P.*)$', filebrowser_views.display, name='display'), diff --git a/apps/filebrowser/src/filebrowser/views.py b/apps/filebrowser/src/filebrowser/views.py index ac7f6589782..ccc35a0ed9e 100644 --- a/apps/filebrowser/src/filebrowser/views.py +++ b/apps/filebrowser/src/filebrowser/views.py @@ -259,10 +259,6 @@ def download(request, path): return response -def view_new(request): - return render('storage_browser.mako', request, None) - - def view(request, path): """Dispatches viewing of a path to either index() or fileview(), depending on type.""" diff --git a/desktop/core/src/desktop/js/apps/newimporter/ImporterPage.scss b/desktop/core/src/desktop/js/apps/newimporter/ImporterPage.scss index d5fe7dd06ec..a5d50b986f6 100644 --- a/desktop/core/src/desktop/js/apps/newimporter/ImporterPage.scss +++ b/desktop/core/src/desktop/js/apps/newimporter/ImporterPage.scss @@ -27,4 +27,3 @@ overflow: auto; } } - diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss index 57f53290eb9..7e34acdbdaa 100644 --- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss +++ b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss @@ -15,41 +15,34 @@ // limitations under the License. @use 'variables' as vars; - -.hue-storage-browser__root-container { - height: 100%; -} +@use 'mixins'; .hue-storage-browser.antd.cuix { - display: flex; - flex-direction: column; - flex: 1; - height: 100%; - min-width: 300px; + @include mixins.fillAbsolute; + @include mixins.flexRowLayout; - .ant-spin-nested-loading { - height: 100%; - - .ant-spin-container { - height: 100%; - } - } + min-width: 300px; - .hue-storage-browser__tab { - display: flex; + .hue-storage-browser__container { height: 100%; - background-color: vars.$fluidx-gray-100; + overflow: auto; padding: 0 16px; + background-color: vars.$fluidx-gray-100; - .ant-tabs-content-holder { + .hue-storage-browser__tab { display: flex; - flex: 1; + height: 100%; - .ant-tabs-content, - .ant-tabs-tabpane-active { + .ant-tabs-content-holder { display: flex; - flex-direction: column; flex: 1; + + .ant-tabs-content, + .ant-tabs-tabpane-active { + display: flex; + flex-direction: column; + flex: 1; + } } } } diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx index 210c13a5909..557a52fe16e 100644 --- a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx +++ b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx @@ -51,18 +51,20 @@ const StorageBrowserPage = (): JSX.Element => { return (
} /> - - ({ - label: fileSystem.name.toUpperCase(), - key: fileSystem.name, - children: - }))} - /> - +
+ + ({ + label: fileSystem.name.toUpperCase(), + key: fileSystem.name, + children: + }))} + /> + +
); }; diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/app.js b/desktop/core/src/desktop/js/apps/storageBrowser/app.js deleted file mode 100644 index e400f80c126..00000000000 --- a/desktop/core/src/desktop/js/apps/storageBrowser/app.js +++ /dev/null @@ -1,27 +0,0 @@ -// 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 huePubSub from '../../utils/huePubSub'; - -huePubSub.subscribe('app.dom.loaded', app => { - if (app === 'newfilebrowser') { - window.createReactComponents('#embeddable_newfilebrowser'); - return; - } - if (app !== 'filebrowser') { - return; - } - window.createReactComponents('#embeddable_filebrowser'); -}); diff --git a/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue b/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue index db908f77468..0ac06368c25 100644 --- a/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue +++ b/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue @@ -96,7 +96,7 @@ mapreduce: ``, markdown: ``, notebook: ``, - newfilebrowser: ``, + storagebrowser: ``, newimporter: ``, oozie: ``, 'oozie-bundle': ``, @@ -330,9 +330,6 @@ adaptedName = 'hdfs'; } break; - case 'newfilebrowser': - adaptedName = 'newfilebrowser'; - break; case 'jobbrowser': adaptedName = 'yarn'; break; @@ -364,6 +361,7 @@ case 'hbase': case 'importer': case 'newimporter': + case 'storagebrowser': case 'indexes': case 'kafka': break; diff --git a/desktop/core/src/desktop/js/onePageViewModel.js b/desktop/core/src/desktop/js/onePageViewModel.js index abda57c4186..74f6c7e22ea 100644 --- a/desktop/core/src/desktop/js/onePageViewModel.js +++ b/desktop/core/src/desktop/js/onePageViewModel.js @@ -31,6 +31,7 @@ import getSearchParameter from 'utils/url/getSearchParameter'; import { ASSIST_GET_DATABASE_EVENT, ASSIST_GET_SOURCE_EVENT } from 'ko/components/assist/events'; import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events'; import ImporterPage from '../js/apps/newimporter/ImporterPage'; +import StorageBrowserPage from '../js/apps/storageBrowser/StorageBrowserPage'; class OnePageViewModel { constructor() { @@ -764,7 +765,6 @@ class OnePageViewModel { } }, { url: '/filebrowser/view=*', app: 'filebrowser' }, - { url: '/filebrowser/new', app: 'newfilebrowser' }, { url: '/filebrowser/*', app: function () { @@ -797,6 +797,16 @@ class OnePageViewModel { }); } }, + { + url: '/storagebrowser/', + app: function () { + showReactAppPage({ + appName: 'storagebrowser', + component: StorageBrowserPage, + title: 'Storage Browser' + }); + } + }, { url: '/indexer/importer/prefill/*', app: function (ctx) { diff --git a/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.scss b/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.scss index 1963301eb68..46b7a611891 100644 --- a/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.scss +++ b/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.scss @@ -17,6 +17,12 @@ .antd.cuix { .loading-error-wrapper__spinner { // this overrides the max-height: 400px in antd library - max-height: 100% !important; + height: 100%; + + .ant-spin, + .ant-spin-nested-loading { + height: 100%; + max-height: 100%; + } } } diff --git a/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.tsx b/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.tsx index 50614913b15..7e1c42c47c2 100644 --- a/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.tsx +++ b/desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.tsx @@ -45,14 +45,15 @@ const LoadingErrorWrapper = ({ }: LoadingErrorWrapperProps): JSX.Element => { if (loading) { return ( - } - data-testid="loading-error-wrapper__spinner" - className="loading-error-wrapper__spinner" - > - {hideChildren === false && children} - +
+ } + data-testid="loading-error-wrapper__spinner" + > + {hideChildren === false && children} + +
); } diff --git a/desktop/core/src/desktop/js/reactComponents/PaginatedTable/PaginatedTable.tsx b/desktop/core/src/desktop/js/reactComponents/PaginatedTable/PaginatedTable.tsx index 467c6317e4e..35673814150 100644 --- a/desktop/core/src/desktop/js/reactComponents/PaginatedTable/PaginatedTable.tsx +++ b/desktop/core/src/desktop/js/reactComponents/PaginatedTable/PaginatedTable.tsx @@ -50,7 +50,7 @@ export interface PaginatedTableProps { } const TABLE_HEADER_HEIGHT = 47; -const PAGINATION_HEIGHT = 49; +const PAGINATION_HEIGHT = 50; const PaginatedTable = ({ loading = false, diff --git a/desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss b/desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss index a3f03cef195..5c90b8f101f 100644 --- a/desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss +++ b/desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss @@ -35,6 +35,10 @@ .hue-pagination__page-size-menu-btn { background-color: transparent; color: vars.$fluidx-gray-700; + + .icon { + vertical-align: middle; + } } .hue-pagination__rows-stats-display { diff --git a/desktop/core/src/desktop/models.py b/desktop/core/src/desktop/models.py index 5a4c41212ba..5bf2f8f55b8 100644 --- a/desktop/core/src/desktop/models.py +++ b/desktop/core/src/desktop/models.py @@ -2015,11 +2015,11 @@ def _get_browser(self): if ENABLE_NEW_STORAGE_BROWSER.get(): interpreters.append({ - 'type': 'newfilebrowser', + 'type': 'storagebrowser', 'displayName': _('Storage Browser'), 'buttonName': _('Storage Browser'), 'tooltip': _('Storage Browser'), - 'page': '/filebrowser/new' + 'page': '/storagebrowser' }) else: for hdfs_connector in hdfs_connectors: diff --git a/desktop/core/src/desktop/templates/global_js_constants.mako b/desktop/core/src/desktop/templates/global_js_constants.mako index 55bb527707e..0b12cd34967 100644 --- a/desktop/core/src/desktop/templates/global_js_constants.mako +++ b/desktop/core/src/desktop/templates/global_js_constants.mako @@ -72,7 +72,6 @@ oozie_info: { url: '/oozie/list_oozie_info', title: '${_('Oozie')}' }, jobbrowser: { url: '/jobbrowser/apps', title: '${_('Job Browser')}' }, filebrowser: { url: '/filebrowser/view=*', title: '${_('File Browser')}' }, - newfilebrowser: { url: '/filebrowser/new', title: '${_('Storage Browser')}' }, home: { url: '/home*', title: '${_('Home')}' }, catalog: { url: '/catalog', title: '${_('Catalog')}' }, indexer: { url: '/indexer/indexer/', title: '${_('Indexer')}' }, diff --git a/desktop/core/src/desktop/templates/hue.mako b/desktop/core/src/desktop/templates/hue.mako index 9c036d61435..9590bca75a7 100644 --- a/desktop/core/src/desktop/templates/hue.mako +++ b/desktop/core/src/desktop/templates/hue.mako @@ -220,7 +220,7 @@ ${ hueIcons.symbols() }
-
+
diff --git a/webpack.config.js b/webpack.config.js index b79ceeb6c10..40c97915d38 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -33,10 +33,6 @@ const config = { import: './desktop/core/src/desktop/js/apps/tableBrowser/app.js', dependOn: 'hue' }, - storageBrowser: { - import: './desktop/core/src/desktop/js/apps/storageBrowser/app.js', - dependOn: 'hue' - }, jobBrowser: { import: './desktop/core/src/desktop/js/apps/jobBrowser/app.js', dependOn: 'hue' } }, mode: 'development', From 97254b24c7278c32b96f08725ae45db087cb7617 Mon Sep 17 00:00:00 2001 From: Ram Prasad Agarwal Date: Mon, 5 May 2025 14:27:40 +0530 Subject: [PATCH 2/2] remove unwanted code --- desktop/core/src/desktop/templates/hue.mako | 2 -- 1 file changed, 2 deletions(-) diff --git a/desktop/core/src/desktop/templates/hue.mako b/desktop/core/src/desktop/templates/hue.mako index 9590bca75a7..8938bb6f9df 100644 --- a/desktop/core/src/desktop/templates/hue.mako +++ b/desktop/core/src/desktop/templates/hue.mako @@ -220,13 +220,11 @@ ${ hueIcons.symbols() }
-
-