AngularJS: Move angular stuff into app/angular (#41415)

* Moving more angular parts

* Moving more angular stuff

* Moving components

* Move more things

public/app/angular/AngularApp.ts

@@ -7,14 +7,13 @@ import 'vendor/angular-other/angular-strap';
 import { config } from 'app/core/config';
 import coreModule, { angularModules } from 'app/core/core_module';
 import { DashboardLoaderSrv } from 'app/features/dashboard/services/DashboardLoaderSrv';
-import { registerAngularDirectives } from 'app/core/core';
-import { initAngularRoutingBridge } from 'app/angular/bridgeReactAngularRouting';
-import { monkeyPatchInjectorWithPreAssignedBindings } from 'app/core/injectorMonkeyPatch';
+import { registerAngularDirectives } from './angular_wrappers';
+import { initAngularRoutingBridge } from './bridgeReactAngularRouting';
+import { monkeyPatchInjectorWithPreAssignedBindings } from './injectorMonkeyPatch';
 import { extend } from 'lodash';
 import { getTimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { getTemplateSrv } from '@grafana/runtime';
-import './panel/all';
-import './partials';
+
 export class AngularApp {
   ngModuleDependencies: any[];
   preBootModules: any[];

public/app/angular/angular_wrappers.ts

@@ -2,10 +2,10 @@ import { react2AngularDirective } from 'app/core/utils/react2angular';
 import { QueryEditor as CloudMonitoringQueryEditor } from 'app/plugins/datasource/cloud-monitoring/components/QueryEditor';
 import { AnnotationQueryEditor as CloudMonitoringAnnotationQueryEditor } from 'app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor';
 import { AnnotationQueryEditor as CloudWatchAnnotationQueryEditor } from 'app/plugins/datasource/cloudwatch/components/AnnotationQueryEditor';
-import PageHeader from './components/PageHeader/PageHeader';
-import EmptyListCTA from './components/EmptyListCTA/EmptyListCTA';
-import { TagFilter } from './components/TagFilter/TagFilter';
-import { MetricSelect } from './components/Select/MetricSelect';
+import PageHeader from '../core/components/PageHeader/PageHeader';
+import EmptyListCTA from '../core/components/EmptyListCTA/EmptyListCTA';
+import { TagFilter } from '../core/components/TagFilter/TagFilter';
+import { MetricSelect } from '../core/components/Select/MetricSelect';
 import {
   ColorPicker,
   DataLinksInlineEditor,
@@ -18,8 +18,8 @@ import {
   UnitPicker,
 } from '@grafana/ui';
 import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';
-import { HelpModal } from './components/help/HelpModal';
-import { Footer } from './components/Footer/Footer';
+import { HelpModal } from '../core/components/help/HelpModal';
+import { Footer } from '../core/components/Footer/Footer';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { SearchField, SearchResults, SearchResultsFilter } from '../features/search';
 import { TimePickerSettings } from 'app/features/dashboard/components/DashboardSettings/TimePickerSettings';

public/app/angular/components/form_dropdown/form_dropdown.ts

@@ -1,5 +1,5 @@
 import { debounce, find, indexOf, map, isObject, escape, unescape } from 'lodash';
-import coreModule from '../../core_module';
+import coreModule from '../../../core/core_module';
 import { ISCEService } from 'angular';
 import { promiseToDigest } from 'app/core/utils/promiseToDigest';
 

public/app/angular/components/query_part_editor.ts

@@ -1,7 +1,7 @@
 import { debounce, each, map, partial, escape, unescape } from 'lodash';
 import $ from 'jquery';
 import coreModule from 'app/core/core_module';
-import { promiseToDigest } from '../../utils/promiseToDigest';
+import { promiseToDigest } from '../../core/utils/promiseToDigest';
 
 const template = `
 <div class="dropdown cascade-open">

public/app/angular/components/spectrum_picker.ts

@@ -3,7 +3,7 @@
  * Allows remaining <spectrum-picker> untouched in outdated plugins.
  * Technically, it's just a wrapper for react component with two-way data binding support.
  */
-import coreModule from '../../core_module';
+import coreModule from '../../core/core_module';
 
 /** @ngInject */
 export function spectrumPicker() {

public/app/angular/filters/filters.ts

@@ -1,6 +1,6 @@
 import { isArray, isNull, isObject, isUndefined } from 'lodash';
 import angular from 'angular';
-import coreModule from '../core_module';
+import coreModule from '../../core/core_module';
 import { getTemplateSrv, TemplateSrv } from 'app/features/templating/template_srv';
 import { dateTime } from '@grafana/data';
 

public/app/angular/index.ts

@@ -0,0 +1,33 @@
+import './panel/all';
+import './partials';
+import './filters/filters';
+import './services/alert_srv';
+import './services/dynamic_directive_srv';
+import './services/ng_react';
+import './services/segment_srv';
+import './services/popover_srv';
+import './services/timer';
+import './dropdown_typeahead';
+import './autofill_event_fix';
+import './metric_segment';
+import './misc';
+import './ng_model_on_blur';
+import './tags';
+import './rebuild_on_change';
+import './give_focus';
+import './diff-view';
+import './array_join';
+import './angular_wrappers';
+
+// components
+import './components/query_part_editor';
+import './components/form_dropdown/form_dropdown';
+import './components/scroll';
+import './components/jsontree';
+import './components/switch';
+import './components/info_popover';
+import './components/spectrum_picker';
+import './components/code_editor/code_editor';
+import './components/sql_part/sql_part_editor';
+
+export { AngularApp } from './AngularApp';

public/app/angular/services.ts

@@ -1,9 +0,0 @@
-import './alert_srv';
-import './util_srv';
-import './context_srv';
-import './timer';
-import './analytics';
-import './popover_srv';
-import './segment_srv';
-import './backend_srv';
-import './dynamic_directive_srv';

public/app/angular/services/dynamic_directive_srv.ts

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import coreModule from '../core_module';
+import coreModule from '../../core/core_module';
 
 class DynamicDirectiveSrv {
   /** @ngInject */

public/app/angular/services/segment_srv.ts

@@ -1,5 +1,5 @@
 import { each, isString, map } from 'lodash';
-import coreModule from '../core_module';
+import coreModule from '../../core/core_module';
 
 /** @ngInject */
 export function uiSegmentSrv(this: any, $sce: any, templateSrv: any) {

public/app/app.ts

@@ -41,7 +41,7 @@ import { setVariableQueryRunner, VariableQueryRunner } from './features/variable
 import { configureStore } from './store/configureStore';
 import { AppWrapper } from './AppWrapper';
 import { interceptLinkClicks } from './core/navigation/patch/interceptLinkClicks';
-import { AngularApp } from './angular/AngularApp';
+import { AngularApp } from './angular';
 import { PanelRenderer } from './features/panel/components/PanelRenderer';
 import { QueryRunner } from './features/query/state/QueryRunner';
 import { getTimeSrv } from './features/dashboard/services/TimeSrv';

public/app/core/components/dashboard_selector.ts

@@ -1,36 +0,0 @@
-import coreModule from 'app/core/core_module';
-import { backendSrv } from '../services/backend_srv';
-
-const template = `
-<select class="gf-form-input" ng-model="ctrl.model" ng-options="f.value as f.text for f in ctrl.options"></select>
-`;
-
-export class DashboardSelectorCtrl {
-  model: any;
-  options: any;
-
-  $onInit() {
-    this.options = [{ value: 0, text: 'Default' }];
-
-    return backendSrv.search({ starred: true }).then((res) => {
-      res.forEach((dash) => {
-        this.options.push({ value: dash.id, text: dash.title });
-      });
-    });
-  }
-}
-
-export function dashboardSelector() {
-  return {
-    restrict: 'E',
-    controller: DashboardSelectorCtrl,
-    bindToController: true,
-    controllerAs: 'ctrl',
-    template: template,
-    scope: {
-      model: '=',
-    },
-  };
-}
-
-coreModule.directive('dashboardSelector', dashboardSelector);

public/app/core/core.ts

@@ -1,61 +1,24 @@
-import '../angular/dropdown_typeahead';
-import '../angular/autofill_event_fix';
-import '../angular/metric_segment';
-import '../angular/misc';
-import '../angular/ng_model_on_blur';
-import '../angular/tags';
-import '../angular/rebuild_on_change';
-import '../angular/give_focus';
-import '../angular/diff-view';
 import './jquery_extended';
-import './components/jsontree/jsontree';
-import './components/code_editor/code_editor';
-import './components/colorpicker/spectrum_picker';
 import './services/search_srv';
-import './services/ng_react';
 import { colors, JsonExplorer } from '@grafana/ui/';
-
-import { infoPopover } from './components/info_popover';
-import { arrayJoin } from '../angular/array_join';
-import { switchDirective } from './components/switch';
-import { dashboardSelector } from './components/dashboard_selector';
-import { queryPartEditorDirective } from './components/query_part/query_part_editor';
-import { sqlPartEditorDirective } from './components/sql_part/sql_part_editor';
-import { formDropdownDirective } from './components/form_dropdown/form_dropdown';
 import 'app/core/services/all';
-import './filters/filters';
 import coreModule from './core_module';
 import appEvents from './app_events';
 import { assignModelProperties } from './utils/model_utils';
 import { contextSrv } from './services/context_srv';
 import { KeybindingSrv } from './services/keybindingSrv';
-import { NavModelSrv } from './nav_model_srv';
-import { geminiScrollbar } from './components/scroll/scroll';
 import { profiler } from './profiler';
-import { registerAngularDirectives } from './angular_wrappers';
 import TimeSeries, { updateLegendValues } from './time_series2';
-import { NavModel } from '@grafana/data';
 
 export {
   profiler,
-  registerAngularDirectives,
-  arrayJoin,
   coreModule,
-  switchDirective,
-  infoPopover,
   appEvents,
-  dashboardSelector,
-  queryPartEditorDirective,
-  sqlPartEditorDirective,
   colors,
-  formDropdownDirective,
   assignModelProperties,
   contextSrv,
   KeybindingSrv,
   JsonExplorer,
-  NavModelSrv,
-  NavModel,
-  geminiScrollbar,
   TimeSeries,
   updateLegendValues,
 };

public/app/core/hooks/useNavModel.ts

@@ -1,7 +1,7 @@
 import { useSelector } from 'react-redux';
 import { StoreState } from 'app/types/store';
 import { getNavModel } from '../selectors/navModel';
-import { NavModel } from '../core';
+import { NavModel } from '@grafana/data';
 
 export const useNavModel = (id: string): NavModel => {
   const navIndex = useSelector((state: StoreState) => state.navIndex);

public/app/core/services/all.ts

@@ -1,8 +1,3 @@
-import './alert_srv';
 import './util_srv';
 import './context_srv';
-import './timer';
-import './popover_srv';
-import './segment_srv';
 import './backend_srv';
-import './dynamic_directive_srv';

public/app/core/services/search_srv.ts

@@ -1,5 +1,4 @@
 import { clone, keys, sortBy, take, values } from 'lodash';
-
 import impressionSrv from 'app/core/services/impression_srv';
 import store from 'app/core/store';
 import { contextSrv } from 'app/core/services/context_srv';

public/app/features/alerting/AlertTabCtrl.ts

@@ -1,7 +1,7 @@
 import { find, map, reduce, remove } from 'lodash';
 import coreModule from 'app/core/core_module';
 import { ThresholdMapper } from './state/ThresholdMapper';
-import { QueryPart } from 'app/core/components/query_part/query_part';
+import { QueryPart } from 'app/angular/components/query_part';
 import alertDef from './state/alertDef';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';

public/app/features/alerting/state/alertDef.ts

@@ -1,5 +1,5 @@
 import { isArray, reduce } from 'lodash';
-import { QueryPartDef, QueryPart } from 'app/core/components/query_part/query_part';
+import { QueryPartDef, QueryPart } from 'app/angular/components/query_part';
 
 const alertQueryDef = new QueryPartDef({
   type: 'query',

public/app/features/org/UserInvitePage.tsx

@@ -1,10 +1,11 @@
 import React, { FC } from 'react';
 import { connect } from 'react-redux';
 import UserInviteForm from './UserInviteForm';
-import { contextSrv, NavModel } from 'app/core/core';
+import { contextSrv } from 'app/core/core';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { StoreState } from 'app/types/store';
 import Page from 'app/core/components/Page/Page';
+import { NavModel } from '@grafana/data';
 
 interface Props {
   navModel: NavModel;

public/app/features/plugins/AppRootPage.tsx

@@ -6,7 +6,7 @@ import { createHtmlPortalNode, InPortal, OutPortal, HtmlPortalNode } from 'react
 import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
 import { importAppPlugin } from './plugin_loader';
-import { getNotFoundNav, getWarningNav, getExceptionNav } from 'app/core/nav_model_srv';
+import { getNotFoundNav, getWarningNav, getExceptionNav } from 'app/angular/services/nav_model_srv';
 import { appEvents } from 'app/core/core';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';

public/app/features/plugins/PluginPage.tsx

@@ -26,7 +26,7 @@ import Page from 'app/core/components/Page/Page';
 import { getPluginSettings } from './PluginSettingsCache';
 import { importAppPlugin, importDataSourcePlugin } from './plugin_loader';
 import { importPanelPluginFromMeta } from './importPanelPlugin';
-import { getNotFoundNav } from 'app/core/nav_model_srv';
+import { getNotFoundNav } from 'app/angular/services/nav_model_srv';
 import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { AppConfigCtrlWrapper } from './wrappers/AppConfigWrapper';
 import { PluginDashboards } from './PluginDashboards';

public/app/features/plugins/plugin_page_ctrl.ts

@@ -3,9 +3,9 @@ import { find } from 'lodash';
 
 import { getPluginSettings } from './PluginSettingsCache';
 import { PluginMeta, AppEvents } from '@grafana/data';
-import { NavModelSrv } from 'app/core/core';
 import { GrafanaRootScope } from 'app/routes/GrafanaCtrl';
 import { promiseToDigest } from '../../core/utils/promiseToDigest';
+import { NavModelSrv } from 'app/angular/services/nav_model_srv';
 
 export class AppPageCtrl {
   page: any;

public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/partListUtils.tsx

@@ -5,7 +5,7 @@ import InfluxQueryModel from '../../influx_query_model';
 import { unwrap } from './unwrap';
 import queryPart from '../../query_part';
 import { toSelectableValue } from './toSelectableValue';
-import { QueryPartDef } from '../../../../../core/components/query_part/query_part';
+import { QueryPartDef } from 'app/angular/components/query_part';
 
 type Categories = Record<string, QueryPartDef[]>;
 

public/app/plugins/datasource/influxdb/query_part.ts

@@ -1,5 +1,5 @@
 import { map, clone } from 'lodash';
-import { QueryPartDef, QueryPart, functionRenderer, suffixRenderer } from 'app/core/components/query_part/query_part';
+import { QueryPartDef, QueryPart, functionRenderer, suffixRenderer } from 'app/angular/components/query_part';
 
 const index: any[] = [];
 const categories: any = {

public/app/plugins/datasource/mysql/query_ctrl.ts

@@ -2,7 +2,7 @@ import { clone, filter, find, findIndex, indexOf, map } from 'lodash';
 import appEvents from 'app/core/app_events';
 import { MysqlMetaQuery } from './meta_query';
 import { QueryCtrl } from 'app/plugins/sdk';
-import { SqlPart } from 'app/core/components/sql_part/sql_part';
+import { SqlPart } from 'app/angular/components/sql_part/sql_part';
 import MySQLQueryModel from './mysql_query_model';
 import sqlPart from './sql_part';
 import { auto } from 'angular';

public/app/plugins/datasource/mysql/sql_part.ts

@@ -1,4 +1,4 @@
-import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part';
+import { SqlPartDef, SqlPart } from 'app/angular/components/sql_part/sql_part';
 
 const index: any[] = [];
 

public/app/plugins/datasource/postgres/query_ctrl.ts

@@ -2,7 +2,7 @@ import { clone, filter, find, findIndex, indexOf, map } from 'lodash';
 import appEvents from 'app/core/app_events';
 import { PostgresMetaQuery } from './meta_query';
 import { QueryCtrl } from 'app/plugins/sdk';
-import { SqlPart } from 'app/core/components/sql_part/sql_part';
+import { SqlPart } from 'app/angular/components/sql_part/sql_part';
 import PostgresQueryModel from './postgres_query_model';
 import sqlPart from './sql_part';
 import { auto } from 'angular';

public/app/plugins/datasource/postgres/sql_part.ts

@@ -1,4 +1,4 @@
-import { SqlPartDef, SqlPart } from 'app/core/components/sql_part/sql_part';
+import { SqlPartDef, SqlPart } from 'app/angular/components/sql_part/sql_part';
 
 const index: any[] = [];