[ui-admin][improvement] Rename AlertComponent to GlobalAlert, Metrics…

…Component to Metrics and create a separate directory for the admin pages (#3767)

* Renaming AlertComponent to GlobalAlert for maintaining consistency

* Creating new files for Metrics within admin  and renaming MetricsComponent to Metrics

* Removing MetricsComponent from js/apps

* There was some extra code from the metricsComponent that was mistakenly left during removing the metrics.mako code (a script). I am doing that cleanup also within a commit in this PR

* Adding the new test for the metrics

* There was some extra code from the metricsComponent that was mistakenly left during removing the metrics.mako code (a script). I am doing that cleanup also within a commit in this PR

* Renaming AlertComponent to GlobalAlert for maintaining consistency

* Creating new files for Metrics within admin  and renaming MetricsComponent to Metrics

* Removing MetricsComponent from js/apps

* There was some extra code from the metricsComponent that was mistakenly left during removing the metrics.mako code (a script). I am doing that cleanup also within a commit in this PR

* Adding the new test for the metrics

* There was some extra code from the metricsComponent that was mistakenly left during removing the metrics.mako code (a script). I am doing that cleanup also within a commit in this PR

desktop/core/src/desktop/js/api/apiUtils.js

@@ -16,7 +16,7 @@
 
 import $ from 'jquery';
 
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import logError from 'utils/logError';
 import huePubSub from 'utils/huePubSub';
 

desktop/core/src/desktop/js/api/utils.ts

@@ -25,8 +25,8 @@ import axios, {
 import qs from 'qs';
 
 import { CancellablePromise } from './cancellablePromise';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
-import { HueAlert } from 'reactComponents/AlertComponent/types';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
+import { HueAlert } from 'reactComponents/GlobalAlert/types';
 import { hueWindow } from 'types/types';
 import huePubSub from 'utils/huePubSub';
 import logError from 'utils/logError';

desktop/core/src/desktop/js/reactComponents/MetricsComponent/MetricsComponent.test.tsx → desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.test.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import { render, waitFor, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import MetricsComponent from './MetricsComponent';
+import Metrics from './Metrics';
 
 // Mock the API call to return sample metrics data
 jest.mock('api/utils', () => ({
@@ -53,9 +53,9 @@ jest.mock('api/utils', () => ({
   )
 }));
 
-describe('MetricsComponent', () => {
+describe('Metrics', () => {
   test('Filtering metrics based on name column value', async () => {
-    render(<MetricsComponent />);
+    render(<Metrics />);
 
     const filterInput = screen.getByPlaceholderText('Filter metrics...');
     fireEvent.change(filterInput, { target: { value: 'value' } });
@@ -74,7 +74,7 @@ describe('MetricsComponent', () => {
   });
 
   test('selecting a specific metric from the dropdown filters the data using click events', async () => {
-    render(<MetricsComponent />);
+    render(<Metrics />);
 
     await waitFor(() => screen.getByText('queries.number'));
 
@@ -124,7 +124,7 @@ describe('MetricsComponent', () => {
         })
       )
     }));
-    render(<MetricsComponent />);
+    render(<Metrics />);
 
     await waitFor(() => {
       expect(screen.queryByText('auth.ldap.auth-time')).not.toBeInTheDocument();

desktop/core/src/desktop/js/reactComponents/MetricsComponent/MetricsComponent.tsx → desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.tsx

@@ -19,11 +19,11 @@ import MetricsTable, { MetricsResponse } from './MetricsTable';
 import { Spin, Input, Select, Alert } from 'antd';
 import { get } from 'api/utils';
 import { SearchOutlined } from '@ant-design/icons';
-import './MetricsComponent.scss';
+import './Metrics.scss';
 
 const { Option } = Select;
 
-const MetricsComponent: React.FC = (): JSX.Element => {
+const Metrics: React.FC = (): JSX.Element => {
   const [metrics, setMetrics] = useState<MetricsResponse>();
   const [filteredKeys, setFilteredKeys] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
@@ -139,4 +139,4 @@ const MetricsComponent: React.FC = (): JSX.Element => {
   );
 };
 
-export default MetricsComponent;
+export default Metrics;

desktop/core/src/desktop/js/reactComponents/MetricsComponent/MetricsTable.tsx → desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx

@@ -17,7 +17,7 @@
 import React from 'react';
 import Table from 'cuix/dist/components/Table/Table';
 import type { ColumnType } from 'antd/es/table';
-import './MetricsComponent.scss';
+import './Metrics.scss';
 import I18n from 'utils/i18n';
 
 interface MetricsValue {

desktop/core/src/desktop/js/apps/editor/EditorViewModel.js

@@ -27,7 +27,7 @@ import Notebook from 'apps/editor/notebook';
 import ChartTransformers from 'apps/notebook/chartTransformers';
 import { CONFIG_REFRESHED_TOPIC, GET_KNOWN_CONFIG_TOPIC } from 'config/events';
 import { findEditorConnector, getLastKnownConfig } from 'config/hueConfig';
-import { GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import { getFromLocalStorage, setInLocalStorage } from 'utils/storageUtils';
 import UUID from 'utils/string/UUID';

desktop/core/src/desktop/js/apps/editor/app.js

@@ -22,7 +22,7 @@ import 'ext/bootstrap-datepicker.min';
 import 'ext/jquery.hotkeys';
 import 'jquery/plugins/jquery.hdfstree';
 
-import { HIDE_GLOBAL_ALERTS_TOPIC } from 'reactComponents/AlertComponent/events';
+import { HIDE_GLOBAL_ALERTS_TOPIC } from 'reactComponents/GlobalAlert/events';
 import { registerHueWorkers } from 'sql/workers/hueWorkerHandler';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';

desktop/core/src/desktop/js/apps/editor/components/resultGrid/ko.resultDownloadActions.js

@@ -20,7 +20,7 @@ import * as ko from 'knockout';
 import { SHOW_DOWNLOAD_RESULT_MODAL_EVENT } from 'apps/editor/components/resultGrid/ko.resultDownloadModal';
 import componentUtils from 'ko/components/componentUtils';
 import DisposableComponent from 'ko/components/DisposableComponent';
-import { GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import I18n from 'utils/i18n';
 import huePubSub from 'utils/huePubSub';
 import html2text from 'utils/html/html2text';

desktop/core/src/desktop/js/apps/editor/execution/sqlExecutable.ts

@@ -39,8 +39,8 @@ import Executor from 'apps/editor/execution/executor';
 import sessionManager from 'apps/editor/execution/sessionManager';
 import dataCatalog from 'catalog/dataCatalog';
 import { ParsedSqlStatement } from 'parse/sqlStatementsParser';
-import { HueAlert } from 'reactComponents/AlertComponent/types';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { HueAlert } from 'reactComponents/GlobalAlert/types';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import { hueWindow } from 'types/types';
 import hueAnalytics from 'utils/hueAnalytics';
 import huePubSub from 'utils/huePubSub';

desktop/core/src/desktop/js/apps/editor/notebook.js

@@ -31,7 +31,7 @@ import {
   ASSIST_IS_DB_PANEL_READY_EVENT,
   ASSIST_SET_DATABASE_EVENT
 } from 'ko/components/assist/events';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 const HISTORY_CLEARED_EVENT = 'query.history.cleared';
 

desktop/core/src/desktop/js/apps/editor/snippet.js

@@ -58,7 +58,7 @@ import {
   ASSIST_GET_SOURCE_EVENT,
   ASSIST_SET_SOURCE_EVENT
 } from 'ko/components/assist/events';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import { EXECUTABLE_UPDATED_TOPIC } from './execution/events';
 
 // TODO: Remove together with ENABLE_HUE_5. Temporary here for debug

desktop/core/src/desktop/js/apps/jobBrowser/app.js

@@ -25,7 +25,7 @@ import './components/impalaQueries/webcomp';
 import './eventListeners';
 import JobBrowserViewModel from './knockout/JobBrowserViewModel';
 import Job from './knockout/Job';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import I18n from 'utils/i18n';
 
 huePubSub.subscribe('app.dom.loaded', app => {

desktop/core/src/desktop/js/apps/jobBrowser/eventListeners.js

@@ -16,7 +16,7 @@
 
 import $ from 'jquery';
 import huePubSub from '../../utils/huePubSub';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 $(document).off('shown', '.jb-logs-link');
 $(document).on('shown', '.jb-logs-link', e => {

desktop/core/src/desktop/js/apps/jobBrowser/knockout/Job.js

@@ -19,7 +19,7 @@ import * as ko from 'knockout';
 import komapping from 'knockout.mapping';
 
 import apiHelper from 'api/apiHelper';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import deleteAllEmptyStringKeys from 'utils/string/deleteAllEmptyStringKeys';

desktop/core/src/desktop/js/apps/jobBrowser/knockout/JobBrowserViewModel.js

@@ -18,7 +18,7 @@ import $ from 'jquery';
 import * as ko from 'knockout';
 
 import { getLastKnownConfig } from 'config/hueConfig';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import { withLocalStorage } from 'utils/storageUtils';

desktop/core/src/desktop/js/apps/jobBrowser/knockout/Jobs.js

@@ -19,7 +19,7 @@ import * as ko from 'knockout';
 import komapping from 'knockout.mapping';
 
 import apiHelper from 'api/apiHelper';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import Job from './Job';

desktop/core/src/desktop/js/apps/jobBrowser/miniJobBrowser.js

@@ -17,7 +17,7 @@
 import $ from 'jquery';
 import * as ko from 'knockout';
 
-import { GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 

desktop/core/src/desktop/js/apps/notebook/NotebookViewModel.js

@@ -35,7 +35,7 @@ import changeURL from 'utils/url/changeURL';
 import changeURLParameter from 'utils/url/changeURLParameter';
 import getParameter from 'utils/url/getParameter';
 import UUID from 'utils/string/UUID';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 export default class NotebookViewModel {
   constructor(options, CoordinatorEditorViewModel, RunningCoordinatorModel) {

desktop/core/src/desktop/js/apps/notebook/notebook.js

@@ -26,7 +26,7 @@ import {
   ASSIST_IS_DB_PANEL_READY_EVENT,
   ASSIST_SET_DATABASE_EVENT
 } from 'ko/components/assist/events';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import hueAnalytics from 'utils/hueAnalytics';
 import huePubSub from 'utils/huePubSub';
 import { getFromLocalStorage } from 'utils/storageUtils';

desktop/core/src/desktop/js/apps/notebook/snippet.js

@@ -42,7 +42,7 @@ import {
   GLOBAL_ERROR_TOPIC,
   GLOBAL_INFO_TOPIC,
   GLOBAL_WARNING_TOPIC
-} from 'reactComponents/AlertComponent/events';
+} from 'reactComponents/GlobalAlert/events';
 import { POST_FROM_LOCATION_WORKER_EVENT } from 'sql/workers/events';
 import {
   ACTIVE_STATEMENT_CHANGED_EVENT,

desktop/core/src/desktop/js/apps/tableBrowser/metastoreTable.js

@@ -22,7 +22,7 @@ import apiHelper from 'api/apiHelper';
 import MetastoreColumn from 'apps/tableBrowser/metastoreColumn';
 import MetastoreTableSamples from 'apps/tableBrowser/metastoreTableSamples';
 import MetastoreTablePartitions from 'apps/tableBrowser/metastoreTablePartitions';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import deXSS from 'utils/html/deXSS';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';

desktop/core/src/desktop/js/config/hueConfig.ts

@@ -33,8 +33,8 @@ import {
   SchedulerInterpreter
 } from './types';
 import huePubSub from 'utils/huePubSub';
-import { GLOBAL_ERROR_TOPIC } from '../reactComponents/AlertComponent/events';
-import { HueAlert } from '../reactComponents/AlertComponent/types';
+import { GLOBAL_ERROR_TOPIC } from '../reactComponents/GlobalAlert/events';
+import { HueAlert } from '../reactComponents/GlobalAlert/types';
 
 interface InterpreterMap {
   [AppType.browser]: BrowserInterpreter;

desktop/core/src/desktop/js/doc/hueDocument.js

@@ -18,7 +18,7 @@ import $ from 'jquery';
 import * as ko from 'knockout';
 
 import apiHelper from 'api/apiHelper';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import escapeOutput from 'utils/html/escapeOutput';
 import highlight from 'utils/html/highlight';
 import huePubSub from 'utils/huePubSub';

desktop/core/src/desktop/js/doc/hueFileEntry.js

@@ -22,7 +22,7 @@ import huePubSub from 'utils/huePubSub';
 import HueDocument from 'doc/hueDocument';
 import { DOCUMENT_TYPE_I18n, DOCUMENT_TYPES } from 'doc/docSupport';
 import { SHOW_DELETE_DOC_MODAL_EVENT } from 'ko/components/ko.deleteDocModal';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 const SORTS = {
   defaultAsc: (a, b) => {

desktop/core/src/desktop/js/hue.js

@@ -76,7 +76,7 @@ import { getLastKnownConfig, refreshConfig } from 'config/hueConfig';
 import { simpleGet } from 'api/apiUtils'; // In analytics.mako, metrics.mako, threads.mako
 import Mustache from 'mustache'; // In hbase/templates/app.mako, jobsub.templates.js, search.ko.js, search.util.js
 import { createReactComponents } from 'reactComponents/createRootElements.js';
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 // TODO: Migrate away
 window._ = _;

desktop/core/src/desktop/js/jquery/plugins/jquery.filechooser.js

@@ -18,7 +18,7 @@ import $ from 'jquery';
 import * as ko from 'knockout';
 import fileuploader from 'ext/fileuploader.custom';
 import qq from 'ext/fileuploader.custom.new.js';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import { hueLocalStorage } from 'utils/storageUtils';

desktop/core/src/desktop/js/jquery/plugins/jquery.hdfstree.js

@@ -16,7 +16,7 @@
 
 import jQuery from 'jquery';
 
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import scrollbarWidth from 'utils/screen/scrollbarWidth';

desktop/core/src/desktop/js/ko/bindings/charts/ko.leafletMapChart.js

@@ -21,7 +21,7 @@ import 'ext/leaflet/leaflet.markercluster';
 import 'ext/leaflet/leaflet.heat';
 import 'ext/leaflet/leaflet.zoombox';
 
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 
 ko.bindingHandlers.leafletMapChart = {

desktop/core/src/desktop/js/ko/bindings/ko.dateRangePicker.js

@@ -17,7 +17,7 @@
 import $ from 'jquery';
 import * as ko from 'knockout';
 
-import { GLOBAL_ERROR_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 
 ko.bindingHandlers.dateRangePicker = {

desktop/core/src/desktop/js/ko/bindings/ko.dropzone.js

@@ -18,7 +18,7 @@ import Dropzone from 'dropzone';
 import $ from 'jquery';
 import * as ko from 'knockout';
 
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 

desktop/core/src/desktop/js/ko/components/ko.sentryPrivileges.js

@@ -19,7 +19,7 @@ import * as ko from 'knockout';
 import koMapping from 'knockout.mapping';
 
 import componentUtils from './componentUtils';
-import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC, GLOBAL_INFO_TOPIC } from 'reactComponents/GlobalAlert/events';
 import huePubSub from 'utils/huePubSub';
 import I18n from 'utils/i18n';
 import UUID from 'utils/string/UUID';

desktop/core/src/desktop/js/onePageViewModel.js

@@ -27,7 +27,7 @@ import waitForVariable from 'utils/timing/waitForVariable';
 import getParameter from 'utils/url/getParameter';
 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/AlertComponent/events';
+import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 
 class OnePageViewModel {
   constructor() {