Parcourir la source

[ui-admin][improvement] Rename AlertComponent to GlobalAlert, MetricsComponent 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
Ananya_Agarwal il y a 1 an
Parent
commit
1826fef256
41 fichiers modifiés avec 63 ajouts et 122 suppressions
  1. 1 1
      desktop/core/src/desktop/js/api/apiUtils.js
  2. 2 2
      desktop/core/src/desktop/js/api/utils.ts
  3. 0 0
      desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss
  4. 5 5
      desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.test.tsx
  5. 3 3
      desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.tsx
  6. 1 1
      desktop/core/src/desktop/js/apps/admin/Metrics/MetricsTable.tsx
  7. 1 1
      desktop/core/src/desktop/js/apps/editor/EditorViewModel.js
  8. 1 1
      desktop/core/src/desktop/js/apps/editor/app.js
  9. 1 1
      desktop/core/src/desktop/js/apps/editor/components/resultGrid/ko.resultDownloadActions.js
  10. 2 2
      desktop/core/src/desktop/js/apps/editor/execution/sqlExecutable.ts
  11. 1 1
      desktop/core/src/desktop/js/apps/editor/notebook.js
  12. 1 1
      desktop/core/src/desktop/js/apps/editor/snippet.js
  13. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/app.js
  14. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/eventListeners.js
  15. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/knockout/Job.js
  16. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/knockout/JobBrowserViewModel.js
  17. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/knockout/Jobs.js
  18. 1 1
      desktop/core/src/desktop/js/apps/jobBrowser/miniJobBrowser.js
  19. 1 1
      desktop/core/src/desktop/js/apps/notebook/NotebookViewModel.js
  20. 1 1
      desktop/core/src/desktop/js/apps/notebook/notebook.js
  21. 1 1
      desktop/core/src/desktop/js/apps/notebook/snippet.js
  22. 1 1
      desktop/core/src/desktop/js/apps/tableBrowser/metastoreTable.js
  23. 2 2
      desktop/core/src/desktop/js/config/hueConfig.ts
  24. 1 1
      desktop/core/src/desktop/js/doc/hueDocument.js
  25. 1 1
      desktop/core/src/desktop/js/doc/hueFileEntry.js
  26. 1 1
      desktop/core/src/desktop/js/hue.js
  27. 1 1
      desktop/core/src/desktop/js/jquery/plugins/jquery.filechooser.js
  28. 1 1
      desktop/core/src/desktop/js/jquery/plugins/jquery.hdfstree.js
  29. 1 1
      desktop/core/src/desktop/js/ko/bindings/charts/ko.leafletMapChart.js
  30. 1 1
      desktop/core/src/desktop/js/ko/bindings/ko.dateRangePicker.js
  31. 1 1
      desktop/core/src/desktop/js/ko/bindings/ko.dropzone.js
  32. 1 1
      desktop/core/src/desktop/js/ko/components/ko.sentryPrivileges.js
  33. 1 1
      desktop/core/src/desktop/js/onePageViewModel.js
  34. 0 0
      desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.scss
  35. 11 11
      desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.test.tsx
  36. 3 3
      desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.tsx
  37. 0 0
      desktop/core/src/desktop/js/reactComponents/GlobalAlert/events.ts
  38. 0 0
      desktop/core/src/desktop/js/reactComponents/GlobalAlert/types.ts
  39. 4 4
      desktop/core/src/desktop/js/reactComponents/imports.js
  40. 1 1
      desktop/core/src/desktop/templates/hue.mako
  41. 3 62
      desktop/core/src/desktop/templates/metrics.mako

+ 1 - 1
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';
 

+ 2 - 2
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';

+ 0 - 0
desktop/core/src/desktop/js/reactComponents/MetricsComponent/MetricsComponent.scss → desktop/core/src/desktop/js/apps/admin/Metrics/Metrics.scss


+ 5 - 5
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();

+ 3 - 3
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;

+ 1 - 1
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 {

+ 1 - 1
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';

+ 1 - 1
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';

+ 1 - 1
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';

+ 2 - 2
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';

+ 1 - 1
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';
 

+ 1 - 1
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

+ 1 - 1
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 => {

+ 1 - 1
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 => {

+ 1 - 1
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';

+ 1 - 1
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';

+ 1 - 1
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';

+ 1 - 1
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';
 

+ 1 - 1
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) {

+ 1 - 1
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';

+ 1 - 1
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,

+ 1 - 1
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';

+ 2 - 2
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;

+ 1 - 1
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';

+ 1 - 1
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) => {

+ 1 - 1
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._ = _;

+ 1 - 1
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';

+ 1 - 1
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';

+ 1 - 1
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 = {

+ 1 - 1
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 = {

+ 1 - 1
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';
 

+ 1 - 1
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';

+ 1 - 1
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() {

+ 0 - 0
desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.scss → desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.scss


+ 11 - 11
desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.test.tsx → desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.test.tsx

@@ -20,7 +20,7 @@ import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import huePubSub from '../../utils/huePubSub';
 
-import AlertComponent, { HueAlert } from './AlertComponent';
+import GlobalAlert, { HueAlert } from './GlobalAlert';
 import {
   GLOBAL_ERROR_TOPIC,
   GLOBAL_INFO_TOPIC,
@@ -28,9 +28,9 @@ import {
   HIDE_GLOBAL_ALERTS_TOPIC
 } from './events';
 
-describe('AlertComponent', () => {
+describe('GlobalAlert', () => {
   it('should show a global error message', async () => {
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
 
     act(() => huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Some error' }));
@@ -41,7 +41,7 @@ describe('AlertComponent', () => {
   });
 
   it('should show multiple global error messages', async () => {
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
 
     act(() => huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Error 1' }));
@@ -54,7 +54,7 @@ describe('AlertComponent', () => {
   });
 
   it("shouldn't show empty error messages", async () => {
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
 
     act(() => huePubSub.publish<HueAlert>('hue.global.error', { message: '' }));
@@ -63,7 +63,7 @@ describe('AlertComponent', () => {
   });
 
   it('should show unique error messages', async () => {
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
 
     act(() => huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Error 1' }));
@@ -78,7 +78,7 @@ describe('AlertComponent', () => {
 
   it('should close alerts when clicked', async () => {
     const user = userEvent.setup();
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
     act(() => huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Error 1' }));
     act(() => huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Error 2' }));
@@ -112,7 +112,7 @@ describe('AlertComponent', () => {
 
   it('should close info alerts automatically after 3 seconds', async () => {
     jest.useFakeTimers();
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
     act(() => huePubSub.publish<HueAlert>(GLOBAL_INFO_TOPIC, { message: 'info' }));
     expect(screen.queryAllByRole('alert')).toHaveLength(1);
@@ -124,7 +124,7 @@ describe('AlertComponent', () => {
 
   it('should close warning alerts when when noStick is set to true', async () => {
     jest.useFakeTimers();
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
     act(() =>
       huePubSub.publish<HueAlert>(GLOBAL_WARNING_TOPIC, { message: 'Some warning', noStick: true })
@@ -138,7 +138,7 @@ describe('AlertComponent', () => {
 
   it('should close error alerts when when noStick is set to true', async () => {
     jest.useFakeTimers();
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
     act(() =>
       huePubSub.publish<HueAlert>(GLOBAL_ERROR_TOPIC, { message: 'Some error', noStick: true })
@@ -151,7 +151,7 @@ describe('AlertComponent', () => {
   });
 
   it('should close all alerts "hide.global.alerts" is published', async () => {
-    render(<AlertComponent />);
+    render(<GlobalAlert />);
     expect(screen.queryAllByRole('alert')).toHaveLength(0);
     act(() => huePubSub.publish<HueAlert>(GLOBAL_INFO_TOPIC, { message: 'Some info' }));
     act(() => huePubSub.publish<HueAlert>(GLOBAL_WARNING_TOPIC, { message: 'Some warning' }));

+ 3 - 3
desktop/core/src/desktop/js/reactComponents/AlertComponent/AlertComponent.tsx → desktop/core/src/desktop/js/reactComponents/GlobalAlert/GlobalAlert.tsx

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 import { AlertProps } from 'antd/lib/alert';
 import Alert from 'cuix/dist/components/Alert/Alert';
 
-import './AlertComponent.scss';
+import './GlobalAlert.scss';
 import {
   GLOBAL_ERROR_TOPIC,
   GLOBAL_INFO_TOPIC,
@@ -43,7 +43,7 @@ const clearCloseTimeout = (alert: VisibleAlert) => {
   }
 };
 
-const AlertComponent: React.FC = () => {
+const GlobalAlert: React.FC = () => {
   const [alerts, setAlerts] = useState<VisibleAlert[]>([]);
   const updateAlerts = (alert: HueAlert, type: alertType) => {
     if (!alert.message) {
@@ -126,4 +126,4 @@ const AlertComponent: React.FC = () => {
   );
 };
 
-export default AlertComponent;
+export default GlobalAlert;

+ 0 - 0
desktop/core/src/desktop/js/reactComponents/AlertComponent/events.ts → desktop/core/src/desktop/js/reactComponents/GlobalAlert/events.ts


+ 0 - 0
desktop/core/src/desktop/js/reactComponents/AlertComponent/types.ts → desktop/core/src/desktop/js/reactComponents/GlobalAlert/types.ts


+ 4 - 4
desktop/core/src/desktop/js/reactComponents/imports.js

@@ -10,15 +10,15 @@ export async function loadComponent(name) {
     case 'StorageBrowserPage':
       return (await import('../apps/storageBrowser/StorageBrowserPage/StorageBrowserPage')).default;
 
-    case 'MetricsComponent':
-      return (await import('./MetricsComponent/MetricsComponent')).default;
+    case 'Metrics':
+      return (await import('../apps/admin/Metrics/Metrics')).default;
 
     // Application global components here
     case 'AppBanner':
       return (await import('./AppBanner/AppBanner')).default;
 
-    case 'AlertComponent':
-      return (await import('./AlertComponent/AlertComponent')).default;
+    case 'GlobalAlert':
+      return (await import('./GlobalAlert/GlobalAlert')).default;
 
     case 'ReactExampleGlobal':
       return (await import('./ReactExampleGlobal/ReactExampleGlobal')).default;

+ 1 - 1
desktop/core/src/desktop/templates/hue.mako

@@ -135,7 +135,7 @@ ${ hueIcons.symbols() }
 
   <div class="main-page">
     <AppBanner data-reactcomponent='AppBanner'></AppBanner>
-    <AlertComponent data-reactcomponent='AlertComponent'></AlertComponent>
+    <GlobalAlert data-reactcomponent='GlobalAlert'></GlobalAlert>
     <WelcomeTour data-reactcomponent='WelcomeTour'></WelcomeTour>
 
     <nav class="navbar navbar-default">

+ 3 - 62
desktop/core/src/desktop/templates/metrics.mako

@@ -40,75 +40,16 @@ else:
 ${ commonheader(_('Metrics'), "about", user, request) | n,unicode }
 %endif
 
-
-<script type="text/javascript">
-  (function () {
-    var MetricsViewModel = function () {
-      var self = this;
-      self.metricsFilter = ko.observable();
-      self.metrics = ko.observableArray();
-      self.selectedMetric = ko.observable('All');
-      self.metricsKeys = ko.pureComputed(function () {
-        return Object.keys(self.metrics()).sort()
-      });
-      self.isMasterEmpty = ko.pureComputed(function () {
-        return self.filteredMetrics().length === 0 || Object.keys(self.filteredMetrics()).filter(function (key) {
-            return self.filteredMetrics()[key] !== null
-          }).length === 0;
-      });
-      self.filteredMetrics = ko.pureComputed(function () {
-        if (self.metricsFilter()) {
-          var lowerQuery = self.metricsFilter().toLowerCase();
-          var result = {};
-          Object.keys(self.metrics()).forEach(function (key) {
-            var filteredSubMetric = {};
-            var atleastOne = false;
-            Object.keys(self.metrics()[key]).forEach(function (subMetricKey) {
-              if (subMetricKey.toLowerCase().indexOf(lowerQuery) !== -1) {
-                filteredSubMetric[subMetricKey] = self.metrics()[key][subMetricKey];
-                atleastOne = true;
-              }
-            });
-            if (atleastOne) {
-              result[key] = filteredSubMetric;
-            } else {
-              result[key] = null;
-            }
-          });
-          return result;
-        }
-        return self.metrics();
-      });
-      var successCallback = function (data) {
-        self.metrics(data.metric);
-      };
-      self.fetchMetrics = function () {
-        window.simpleGet('/desktop/metrics/', {}, {
-          successCallback: successCallback
-        });
-      };
-      self.isUnusedMetric = function (metricKey) {
-        return metricKey.startsWith("auth") || metricKey.startsWith("multiprocessing") || metricKey.startsWith("python.gc");
-      }
-    };
-
-    $(document).ready(function () {
-      var viewModel = new MetricsViewModel();
-      ko.applyBindings(viewModel, $('#metricsComponents')[0]);
-    });
-  })();
-</script>
-
 ${layout.menubar(section='metrics')}
 
 <script type="text/javascript">
   (function () {
-    window.createReactComponents('#MetricsComponent');
+    window.createReactComponents('#Metrics');
   })();
 </script>
 
-<div id="MetricsComponent">
-<MetricsComponent data-reactcomponent='MetricsComponent'></MetricsComponent>
+<div id="Metrics">
+<Metrics data-reactcomponent='Metrics'></Metrics>
 </div>
 
 %if not is_embeddable: