Merge pull request #14869 from grafana/clean-ups-and-moves

Clean ups and moves

public/app/features/alerting/AlertTab.tsx

@@ -6,7 +6,7 @@ import { AngularComponent, getAngularLoader } from 'app/core/services/AngularLoa
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
 
 
 // Components
 // Components
-import { EditorTabBody, EditorToolbarView } from '../dashboard/dashgrid/EditorTabBody';
+import { EditorTabBody, EditorToolbarView } from '../dashboard/panel_editor/EditorTabBody';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import StateHistory from './StateHistory';
 import StateHistory from './StateHistory';
 import 'app/features/alerting/AlertTabCtrl';
 import 'app/features/alerting/AlertTabCtrl';

public/app/features/dashboard/dashgrid/DashboardPanel.tsx

@@ -9,7 +9,7 @@ import { AddPanelPanel } from './AddPanelPanel';
 import { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
 import { PanelChrome } from './PanelChrome';
-import { PanelEditor } from './PanelEditor';
+import { PanelEditor } from '../panel_editor/PanelEditor';
 
 
 import { PanelModel } from '../panel_model';
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { DashboardModel } from '../dashboard_model';

public/app/features/dashboard/dashgrid/KeyboardNavigation.tsx

-import React, { KeyboardEvent, Component } from 'react';
-
-interface State {
-  selected: number;
-}
-
-export interface KeyboardNavigationProps {
-  onKeyDown: (evt: KeyboardEvent<EventTarget>, maxSelectedIndex: number, onEnterAction: () => void) => void;
-  onMouseEnter: (select: number) => void;
-  selected: number;
-}
-
-interface Props {
-  render: (injectProps: any) => void;
-}
-
-class KeyboardNavigation extends Component<Props, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      selected: 0,
-    };
-  }
-
-  goToNext = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected >= maxSelectedIndex ? 0 : this.state.selected + 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  goToPrev = (maxSelectedIndex: number) => {
-    const nextIndex = this.state.selected <= 0 ? maxSelectedIndex : this.state.selected - 1;
-    this.setState({
-      selected: nextIndex,
-    });
-  };
-
-  onKeyDown = (evt: KeyboardEvent, maxSelectedIndex: number, onEnterAction: any) => {
-    if (evt.key === 'ArrowDown') {
-      evt.preventDefault();
-      this.goToNext(maxSelectedIndex);
-    }
-    if (evt.key === 'ArrowUp') {
-      evt.preventDefault();
-      this.goToPrev(maxSelectedIndex);
-    }
-    if (evt.key === 'Enter' && onEnterAction) {
-      onEnterAction();
-    }
-  };
-
-  onMouseEnter = (mouseEnterIndex: number) => {
-    this.setState({
-      selected: mouseEnterIndex,
-    });
-  };
-
-  render() {
-    const injectProps = {
-      onKeyDown: this.onKeyDown,
-      onMouseEnter: this.onMouseEnter,
-      selected: this.state.selected,
-    };
-
-    return <>{this.props.render({ ...injectProps })}</>;
-  }
-}
-
-export default KeyboardNavigation;

public/app/features/dashboard/dashgrid/PanelLoader.ts

-import angular from 'angular';
-import coreModule from 'app/core/core_module';
-
-export interface AttachedPanel {
-  destroy();
-}
-
-export class PanelLoader {
-  /** @ngInject */
-  constructor(private $compile, private $rootScope) {}
-
-  load(elem, panel, dashboard): AttachedPanel {
-    const template = '<plugin-component type="panel" class="panel-height-helper"></plugin-component>';
-    const panelScope = this.$rootScope.$new();
-    panelScope.panel = panel;
-    panelScope.dashboard = dashboard;
-
-    const compiledElem = this.$compile(template)(panelScope);
-    const rootNode = angular.element(elem);
-    rootNode.append(compiledElem);
-
-    return {
-      destroy: () => {
-        panelScope.$destroy();
-        compiledElem.remove();
-      },
-    };
-  }
-}
-
-coreModule.service('panelLoader', PanelLoader);

public/app/features/plugins/all.ts

 import './plugin_edit_ctrl';
 import './plugin_edit_ctrl';
 import './plugin_page_ctrl';
 import './plugin_page_ctrl';
 import './import_list/import_list';
 import './import_list/import_list';
-import './ds_edit_ctrl';
 import './datasource_srv';
 import './datasource_srv';
 import './plugin_component';
 import './plugin_component';
-import './VariableQueryComponentLoader';
+import './variableQueryEditorLoader';

public/app/features/plugins/ds_dashboards_ctrl.ts

-import { coreModule } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-export class DataSourceDashboardsCtrl {
-  datasourceMeta: any;
-  navModel: any;
-  current: any;
-
-  /** @ngInject */
-  constructor(private backendSrv, private $routeParams) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-
-    if (this.$routeParams.id) {
-      this.getDatasourceById(this.$routeParams.id);
-    }
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv
-      .get('/api/datasources/' + id)
-      .then(ds => {
-        this.current = ds;
-      })
-      .then(this.getPluginInfo.bind(this));
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-dashboards');
-  }
-
-  getPluginInfo() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-}
-
-coreModule.controller('DataSourceDashboardsCtrl', DataSourceDashboardsCtrl);

public/app/features/plugins/ds_edit_ctrl.ts

-import _ from 'lodash';
-import config from 'app/core/config';
-import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/store/store';
-import { getNavModel } from 'app/core/selectors/navModel';
-import { buildNavModel } from './state/navModel';
-
-let datasourceTypes = [];
-
-const defaults = {
-  name: '',
-  type: 'graphite',
-  url: '',
-  access: 'proxy',
-  jsonData: {},
-  secureJsonFields: {},
-  secureJsonData: {},
-};
-
-let datasourceCreated = false;
-
-export class DataSourceEditCtrl {
-  isNew: boolean;
-  datasources: any[];
-  current: any;
-  types: any;
-  testing: any;
-  datasourceMeta: any;
-  editForm: any;
-  gettingStarted: boolean;
-  navModel: any;
-
-  /** @ngInject */
-  constructor(private $q, private backendSrv, private $routeParams, private $location, private datasourceSrv) {
-    const state = store.getState();
-    this.navModel = getNavModel(state.navIndex, 'datasources');
-    this.datasources = [];
-
-    this.loadDatasourceTypes().then(() => {
-      if (this.$routeParams.id) {
-        this.getDatasourceById(this.$routeParams.id);
-      } else {
-        this.initNewDatasourceModel();
-      }
-    });
-  }
-
-  initNewDatasourceModel() {
-    this.isNew = true;
-    this.current = _.cloneDeep(defaults);
-
-    // We are coming from getting started
-    if (this.$location.search().gettingstarted) {
-      this.gettingStarted = true;
-      this.current.isDefault = true;
-    }
-
-    this.typeChanged();
-  }
-
-  loadDatasourceTypes() {
-    if (datasourceTypes.length > 0) {
-      this.types = datasourceTypes;
-      return this.$q.when(null);
-    }
-
-    return this.backendSrv.get('/api/plugins', { enabled: 1, type: 'datasource' }).then(plugins => {
-      datasourceTypes = plugins;
-      this.types = plugins;
-    });
-  }
-
-  getDatasourceById(id) {
-    this.backendSrv.get('/api/datasources/' + id).then(ds => {
-      this.isNew = false;
-      this.current = ds;
-
-      if (datasourceCreated) {
-        datasourceCreated = false;
-        this.testDatasource();
-      }
-
-      return this.typeChanged();
-    });
-  }
-
-  userChangedType() {
-    // reset model but keep name & default flag
-    this.current = _.defaults(
-      {
-        id: this.current.id,
-        name: this.current.name,
-        isDefault: this.current.isDefault,
-        type: this.current.type,
-      },
-      _.cloneDeep(defaults)
-    );
-    this.typeChanged();
-  }
-
-  updateNav() {
-    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-settings');
-  }
-
-  typeChanged() {
-    return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => {
-      this.datasourceMeta = pluginInfo;
-      this.updateNav();
-    });
-  }
-
-  updateFrontendSettings() {
-    return this.backendSrv.get('/api/frontend/settings').then(settings => {
-      config.datasources = settings.datasources;
-      config.defaultDatasource = settings.defaultDatasource;
-      this.datasourceSrv.init();
-    });
-  }
-
-  testDatasource() {
-    return this.datasourceSrv.get(this.current.name).then(datasource => {
-      if (!datasource.testDatasource) {
-        return;
-      }
-
-      this.testing = { done: false, status: 'error' };
-
-      // make test call in no backend cache context
-      return this.backendSrv
-        .withNoBackendCache(() => {
-          return datasource
-            .testDatasource()
-            .then(result => {
-              this.testing.message = result.message;
-              this.testing.status = result.status;
-            })
-            .catch(err => {
-              if (err.statusText) {
-                this.testing.message = 'HTTP Error ' + err.statusText;
-              } else {
-                this.testing.message = err.message;
-              }
-            });
-        })
-        .finally(() => {
-          this.testing.done = true;
-        });
-    });
-  }
-
-  saveChanges() {
-    if (!this.editForm.$valid) {
-      return;
-    }
-
-    if (this.current.readOnly) {
-      return;
-    }
-
-    if (this.current.id) {
-      return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(result => {
-        this.current = result.datasource;
-        this.updateNav();
-        return this.updateFrontendSettings().then(() => {
-          return this.testDatasource();
-        });
-      });
-    } else {
-      return this.backendSrv.post('/api/datasources', this.current).then(result => {
-        this.current = result.datasource;
-        this.updateFrontendSettings();
-
-        datasourceCreated = true;
-        this.$location.path('datasources/edit/' + result.id);
-      });
-    }
-  }
-
-  confirmDelete() {
-    this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => {
-      this.$location.path('datasources');
-    });
-  }
-
-  delete(s) {
-    appEvents.emit('confirm-modal', {
-      title: 'Delete',
-      text: 'Are you sure you want to delete this datasource?',
-      yesText: 'Delete',
-      icon: 'fa-trash',
-      onConfirm: () => {
-        this.confirmDelete();
-      },
-    });
-  }
-}
-
-coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
-
-coreModule.directive('datasourceHttpSettings', () => {
-  return {
-    scope: {
-      current: '=',
-      suggestUrl: '@',
-      noDirectAccess: '@',
-    },
-    templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html',
-    link: {
-      pre: ($scope, elem, attrs) => {
-        // do not show access option if direct access is disabled
-        $scope.showAccessOption = $scope.noDirectAccess !== 'true';
-        $scope.showAccessHelp = false;
-        $scope.toggleAccessHelp = () => {
-          $scope.showAccessHelp = !$scope.showAccessHelp;
-        };
-
-        $scope.getSuggestUrls = () => {
-          return [$scope.suggestUrl];
-        };
-      },
-    },
-  };
-});