Merge pull request #14999 from grafana/dashboard-component-organization

WIP: Re-organize components under features/dashboard

public/app/core/services/keybindingSrv.ts

@@ -236,7 +236,7 @@ export class KeybindingSrv {
         shareScope.dashboard = dashboard;
 
         appEvents.emit('show-modal', {
-          src: 'public/app/features/dashboard/partials/shareModal.html',
+          src: 'public/app/features/dashboard/components/ShareModal/template.html',
           scope: shareScope,
         });
       }

public/app/features/all.ts

@@ -1,7 +1,7 @@
 import './annotations/all';
 import './templating/all';
 import './plugins/all';
-import './dashboard/all';
+import './dashboard';
 import './playlist/all';
 import './panel/all';
 import './org/all';

public/app/features/dashboard/alerting_srv.ts

@@ -1,13 +0,0 @@
-import coreModule from 'app/core/core_module';
-
-export class AlertingSrv {
-  dashboard: any;
-  alerts: any[];
-
-  init(dashboard, alerts) {
-    this.dashboard = dashboard;
-    this.alerts = alerts || [];
-  }
-}
-
-coreModule.service('alertingSrv', AlertingSrv);

public/app/features/dashboard/all.ts

@@ -1,45 +0,0 @@
-import './dashboard_ctrl';
-import './alerting_srv';
-import './history/history';
-import './dashboard_loader_srv';
-import './dashnav/dashnav';
-import './submenu/submenu';
-import './save_as_modal';
-import './save_modal';
-import './save_provisioned_modal';
-import './shareModalCtrl';
-import './share_snapshot_ctrl';
-import './dashboard_srv';
-import './view_state_srv';
-import './validation_srv';
-import './time_srv';
-import './unsaved_changes_srv';
-import './unsaved_changes_modal';
-import './timepicker/timepicker';
-import './upload';
-import './export/export_modal';
-import './export_data/export_data_modal';
-import './ad_hoc_filters';
-import './repeat_option/repeat_option';
-import './dashgrid/DashboardGridDirective';
-import './dashgrid/RowOptions';
-import './folder_picker/folder_picker';
-import './move_to_folder_modal/move_to_folder';
-import './settings/settings';
-import './panellinks/module';
-import './dashlinks/module';
-
-// angular wrappers
-import { react2AngularDirective } from 'app/core/utils/react2angular';
-import DashboardPermissions from './permissions/DashboardPermissions';
-
-react2AngularDirective('dashboardPermissions', DashboardPermissions, ['dashboardId', 'folder']);
-
-import coreModule from 'app/core/core_module';
-import { FolderDashboardsCtrl } from './folder_dashboards_ctrl';
-import { DashboardImportCtrl } from './dashboard_import_ctrl';
-import { CreateFolderCtrl } from './create_folder_ctrl';
-
-coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl);
-coreModule.controller('DashboardImportCtrl', DashboardImportCtrl);
-coreModule.controller('CreateFolderCtrl', CreateFolderCtrl);

public/app/features/dashboard/components/AdHocFilters/index.ts

@@ -0,0 +1 @@
+export { AdHocFiltersCtrl } from './AdHocFiltersCtrl';

public/app/features/dashboard/export/export_modal.ts → public/app/features/dashboard/components/DashExportModal/DashExportCtrl.ts

@@ -2,7 +2,7 @@ import angular from 'angular';
 import { saveAs } from 'file-saver';
 
 import coreModule from 'app/core/core_module';
-import { DashboardExporter } from './exporter';
+import { DashboardExporter } from './DashboardExporter';
 
 export class DashExportCtrl {
   dash: any;
@@ -66,7 +66,7 @@ export class DashExportCtrl {
 export function dashExportDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/export/export_modal.html',
+    templateUrl: 'public/app/features/dashboard/components/DashExportModal/template.html',
     controller: DashExportCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/specs/exporter.test.ts → public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts

@@ -6,8 +6,8 @@ jest.mock('app/core/store', () => {
 
 import _ from 'lodash';
 import config from 'app/core/config';
-import { DashboardExporter } from '../export/exporter';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardExporter } from './DashboardExporter';
+import { DashboardModel } from '../../dashboard_model';
 
 describe('given dashboard with repeated panels', () => {
   let dash, exported;

public/app/features/dashboard/export/exporter.ts → public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts

@@ -1,6 +1,6 @@
 import config from 'app/core/config';
 import _ from 'lodash';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardModel } from '../../dashboard_model';
 
 export class DashboardExporter {
   constructor(private datasourceSrv) {}

public/app/features/dashboard/components/DashExportModal/index.ts

@@ -0,0 +1,2 @@
+export { DashboardExporter } from './DashboardExporter';
+export { DashExportCtrl } from './DashExportCtrl';

public/app/features/dashboard/dashlinks/module.ts → public/app/features/dashboard/components/DashLinks/DashLinksContainerCtrl.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import _ from 'lodash';
-import { iconMap } from './editor';
+import { iconMap } from './DashLinksEditorCtrl';
 
 function dashLinksContainer() {
   return {

public/app/features/dashboard/dashlinks/editor.ts → public/app/features/dashboard/components/DashLinks/DashLinksEditorCtrl.ts

@@ -11,7 +11,7 @@ export let iconMap = {
   cloud: 'fa-cloud',
 };
 
-export class DashLinkEditorCtrl {
+export class DashLinksEditorCtrl {
   dashboard: any;
   iconMap: any;
   mode: any;
@@ -65,8 +65,8 @@ export class DashLinkEditorCtrl {
 function dashLinksEditor() {
   return {
     restrict: 'E',
-    controller: DashLinkEditorCtrl,
-    templateUrl: 'public/app/features/dashboard/dashlinks/editor.html',
+    controller: DashLinksEditorCtrl,
+    templateUrl: 'public/app/features/dashboard/components/DashLinks/editor.html',
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {

public/app/features/dashboard/components/DashLinks/index.ts

@@ -0,0 +1,2 @@
+export { DashLinksContainerCtrl } from './DashLinksContainerCtrl';
+export { DashLinksEditorCtrl } from './DashLinksEditorCtrl';

public/app/features/dashboard/dashnav/dashnav.ts → public/app/features/dashboard/components/DashNav/DashNavCtrl.ts

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import angular from 'angular';
 import { appEvents, NavModel } from 'app/core/core';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardModel } from '../../dashboard_model';
 
 export class DashNavCtrl {
   dashboard: DashboardModel;
@@ -60,7 +60,7 @@ export class DashNavCtrl {
     modalScope.dashboard = this.dashboard;
 
     appEvents.emit('show-modal', {
-      src: 'public/app/features/dashboard/partials/shareModal.html',
+      src: 'public/app/features/dashboard/components/ShareModal/template.html',
       scope: modalScope,
     });
   }
@@ -107,7 +107,7 @@ export class DashNavCtrl {
 export function dashNavDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/dashnav/dashnav.html',
+    templateUrl: 'public/app/features/dashboard/components/DashNav/template.html',
     controller: DashNavCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/components/DashNav/index.ts

@@ -0,0 +1 @@
+export { DashNavCtrl } from './DashNavCtrl';

public/app/features/dashboard/permissions/DashboardPermissions.tsx → public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx

@@ -8,11 +8,11 @@ import {
   addDashboardPermission,
   removeDashboardPermission,
   updateDashboardPermission,
-} from '../state/actions';
+} from '../../state/actions';
 import PermissionList from 'app/core/components/PermissionList/PermissionList';
 import AddPermission from 'app/core/components/PermissionList/AddPermission';
 import PermissionsInfo from 'app/core/components/PermissionList/PermissionsInfo';
-import { connectWithStore } from '../../../core/utils/connectWithReduxStore';
+import { connectWithStore } from 'app/core/utils/connectWithReduxStore';
 
 export interface Props {
   dashboardId: number;

public/app/features/dashboard/settings/settings.ts → public/app/features/dashboard/components/DashboardSettings/SettingsCtrl.ts

@@ -1,5 +1,5 @@
 import { coreModule, appEvents, contextSrv } from 'app/core/core';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardModel } from '../../dashboard_model';
 import $ from 'jquery';
 import _ from 'lodash';
 import angular from 'angular';
@@ -230,7 +230,7 @@ export class SettingsCtrl {
 export function dashboardSettings() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/settings/settings.html',
+    templateUrl: 'public/app/features/dashboard/components/DashboardSettings/template.html',
     controller: SettingsCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/components/DashboardSettings/index.ts

@@ -0,0 +1 @@
+export { SettingsCtrl } from './SettingsCtrl';

public/app/features/dashboard/export_data/export_data_modal.ts → public/app/features/dashboard/components/ExportDataModal/ExportDataModalCtrl.ts

@@ -31,7 +31,7 @@ export class ExportDataModalCtrl {
 export function exportDataModal() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/export_data/export_data_modal.html',
+    templateUrl: 'public/app/features/dashboard/components/ExportDataModal/template.html',
     controller: ExportDataModalCtrl,
     controllerAs: 'ctrl',
     scope: {

public/app/features/dashboard/components/ExportDataModal/index.ts

@@ -0,0 +1 @@
+export { ExportDataModalCtrl } from './ExportDataModalCtrl';

public/app/features/dashboard/folder_picker/folder_picker.ts → public/app/features/dashboard/components/FolderPicker/FolderPickerCtrl.ts

@@ -168,7 +168,7 @@ export class FolderPickerCtrl {
 export function folderPicker() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/folder_picker/folder_picker.html',
+    templateUrl: 'public/app/features/dashboard/components/FolderPicker/template.html',
     controller: FolderPickerCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/components/FolderPicker/index.ts

@@ -0,0 +1 @@
+export { FolderPickerCtrl } from './FolderPickerCtrl';

public/app/features/dashboard/specs/save_as_modal.test.ts → public/app/features/dashboard/components/SaveModals/SaveDashboardAsModalCtrl.test.ts

@@ -1,4 +1,4 @@
-import { SaveDashboardAsModalCtrl } from '../save_as_modal';
+import { SaveDashboardAsModalCtrl } from './SaveDashboardAsModalCtrl';
 import { describe, it, expect } from 'test/lib/common';
 
 describe('saving dashboard as', () => {

public/app/features/dashboard/specs/save_modal.test.ts → public/app/features/dashboard/components/SaveModals/SaveDashboardModalCtrl.test.ts

@@ -1,4 +1,4 @@
-import { SaveDashboardModalCtrl } from '../save_modal';
+import { SaveDashboardModalCtrl } from './SaveDashboardModalCtrl';
 
 const setup = (timeChanged, variableValuesChanged, cb) => {
   const dash = {

public/app/features/dashboard/specs/save_provisioned_modal.test.ts → public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.test.ts

@@ -1,4 +1,4 @@
-import { SaveProvisionedDashboardModalCtrl } from '../save_provisioned_modal';
+import { SaveProvisionedDashboardModalCtrl } from './SaveProvisionedDashboardModalCtrl';
 
 describe('SaveProvisionedDashboardModalCtrl', () => {
   const json = {

public/app/features/dashboard/components/SaveModals/index.ts

@@ -0,0 +1,2 @@
+export { SaveDashboardAsModalCtrl } from './SaveDashboardAsModalCtrl';
+export { SaveDashboardModalCtrl } from './SaveDashboardModalCtrl';

public/app/features/dashboard/specs/share_modal_ctrl.test.ts → public/app/features/dashboard/components/ShareModal/ShareModalCtrl.test.ts

@@ -1,7 +1,6 @@
-import '../shareModalCtrl';
-import { ShareModalCtrl } from '../shareModalCtrl';
 import config from 'app/core/config';
 import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv';
+import { ShareModalCtrl } from './ShareModalCtrl';
 
 describe('ShareModalCtrl', () => {
   const ctx = {

public/app/features/dashboard/components/ShareModal/index.ts

@@ -0,0 +1,2 @@
+export { ShareModalCtrl } from './ShareModalCtrl';
+export { ShareSnapshotCtrl } from './ShareSnapshotCtrl';

public/app/features/dashboard/submenu/submenu.ts → public/app/features/dashboard/components/SubMenu/SubMenuCtrl.ts

@@ -1,7 +1,7 @@
 import angular from 'angular';
 import _ from 'lodash';
 
-export class SubmenuCtrl {
+export class SubMenuCtrl {
   annotations: any;
   variables: any;
   dashboard: any;
@@ -29,8 +29,8 @@ export class SubmenuCtrl {
 export function submenuDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/submenu/submenu.html',
-    controller: SubmenuCtrl,
+    templateUrl: 'public/app/features/dashboard/components/SubMenu/template.html',
+    controller: SubMenuCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
     scope: {

public/app/features/dashboard/components/SubMenu/index.ts

@@ -0,0 +1 @@
+export { SubMenuCtrl } from './SubMenuCtrl';

public/app/features/dashboard/timepicker/timepicker.ts → public/app/features/dashboard/components/TimePicker/TimePickerCtrl.ts

@@ -159,7 +159,7 @@ export class TimePickerCtrl {
 export function settingsDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/timepicker/settings.html',
+    templateUrl: 'public/app/features/dashboard/components/TimePicker/settings.html',
     controller: TimePickerCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
@@ -172,7 +172,7 @@ export function settingsDirective() {
 export function timePickerDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/timepicker/timepicker.html',
+    templateUrl: 'public/app/features/dashboard/components/TimePicker/template.html',
     controller: TimePickerCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
@@ -185,5 +185,5 @@ export function timePickerDirective() {
 angular.module('grafana.directives').directive('gfTimePickerSettings', settingsDirective);
 angular.module('grafana.directives').directive('gfTimePicker', timePickerDirective);
 
-import { inputDateDirective } from './input_date';
+import { inputDateDirective } from './validation';
 angular.module('grafana.directives').directive('inputDatetime', inputDateDirective);

public/app/features/dashboard/components/TimePicker/index.ts

@@ -0,0 +1 @@
+export { TimePickerCtrl } from './TimePickerCtrl';

public/app/features/dashboard/components/UnsavedChangesModal/index.ts

@@ -0,0 +1 @@
+export { UnsavedChangesModalCtrl } from './UnsavedChangesModalCtrl';

public/app/features/dashboard/specs/history_ctrl.test.ts → public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.test.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
-import { HistoryListCtrl } from 'app/features/dashboard/history/history';
-import { versions, compare, restore } from './history_mocks';
+import { HistoryListCtrl } from './HistoryListCtrl';
+import { versions, compare, restore } from './__mocks__/history';
 import $q from 'q';
 
 describe('HistoryListCtrl', () => {

public/app/features/dashboard/history/history.ts → public/app/features/dashboard/components/VersionHistory/HistoryListCtrl.ts

@@ -1,12 +1,10 @@
-import './history_srv';
-
 import _ from 'lodash';
 import angular from 'angular';
 import moment from 'moment';
 
 import locationUtil from 'app/core/utils/location_util';
-import { DashboardModel } from '../dashboard_model';
-import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './history_srv';
+import { DashboardModel } from '../../dashboard_model';
+import { HistoryListOpts, RevisionsModel, CalculateDiffOptions, HistorySrv } from './HistorySrv';
 
 export class HistoryListCtrl {
   appending: boolean;
@@ -200,7 +198,7 @@ export class HistoryListCtrl {
 export function dashboardHistoryDirective() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/history/history.html',
+    templateUrl: 'public/app/features/dashboard/components/VersionHistory/template.html',
     controller: HistoryListCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/dashboard/specs/history_srv.test.ts → public/app/features/dashboard/components/VersionHistory/HistorySrv.test.ts

@@ -1,7 +1,6 @@
-import '../history/history_srv';
-import { versions, restore } from './history_mocks';
-import { HistorySrv } from '../history/history_srv';
-import { DashboardModel } from '../dashboard_model';
+import { versions, restore } from './__mocks__/history';
+import { HistorySrv } from './HistorySrv';
+import { DashboardModel } from '../../dashboard_model';
 jest.mock('app/core/store');
 
 describe('historySrv', () => {

public/app/features/dashboard/history/history_srv.ts → public/app/features/dashboard/components/VersionHistory/HistorySrv.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
-import { DashboardModel } from '../dashboard_model';
+import { DashboardModel } from '../../dashboard_model';
 
 export interface HistoryListOpts {
   limit: number;

public/app/features/dashboard/components/VersionHistory/index.ts

@@ -0,0 +1,2 @@
+export { HistoryListCtrl } from './HistoryListCtrl';
+export { HistorySrv } from './HistorySrv';

public/app/features/dashboard/dashboard_ctrl.ts

@@ -22,7 +22,6 @@ export class DashboardCtrl {
     private keybindingSrv,
     private timeSrv,
     private variableSrv,
-    private alertingSrv,
     private dashboardSrv,
     private unsavedChangesSrv,
     private dashboardViewStateSrv,
@@ -54,7 +53,6 @@ export class DashboardCtrl {
 
     // init services
     this.timeSrv.init(dashboard);
-    this.alertingSrv.init(dashboard, data.alerts);
     this.annotationsSrv.init(dashboard);
 
     // template values service needs to initialize completely before

public/app/features/dashboard/folder_permissions_ctrl.ts

@@ -1,25 +0,0 @@
-import { FolderPageLoader } from './folder_page_loader';
-
-export class FolderPermissionsCtrl {
-  navModel: any;
-  folderId: number;
-  uid: string;
-  dashboard: any;
-  meta: any;
-
-  /** @ngInject */
-  constructor(private backendSrv, navModelSrv, private $routeParams, $location) {
-    if (this.$routeParams.uid) {
-      this.uid = $routeParams.uid;
-
-      new FolderPageLoader(this.backendSrv).load(this, this.uid, 'manage-folder-permissions').then(folder => {
-        if ($location.path() !== folder.meta.url) {
-          $location.path(`${folder.meta.url}/permissions`).replace();
-        }
-
-        this.dashboard = folder.dashboard;
-        this.meta = folder.meta;
-      });
-    }
-  }
-}

public/app/features/dashboard/index.ts

@@ -0,0 +1,35 @@
+import './dashboard_ctrl';
+import './time_srv';
+import './repeat_option/repeat_option';
+import './dashgrid/DashboardGridDirective';
+import './dashgrid/RowOptions';
+import './panellinks/module';
+
+// Services
+import './services/DashboardViewStateSrv';
+import './services/UnsavedChangesSrv';
+import './services/DashboardLoaderSrv';
+import './services/DashboardSrv';
+
+// Components
+import './components/DashLinks';
+import './components/DashExportModal';
+import './components/DashNav';
+import './components/ExportDataModal';
+import './components/FolderPicker';
+import './components/VersionHistory';
+import './components/DashboardSettings';
+import './components/SubMenu';
+import './components/TimePicker';
+import './components/UnsavedChangesModal';
+import './components/SaveModals';
+import './components/ShareModal';
+import './components/AdHocFilters';
+
+import DashboardPermissions from './components/DashboardPermissions/DashboardPermissions';
+
+// angular wrappers
+import { react2AngularDirective } from 'app/core/utils/react2angular';
+
+react2AngularDirective('dashboardPermissions', DashboardPermissions, ['dashboardId', 'folder']);
+

public/app/features/dashboard/specs/change_tracker.test.ts → public/app/features/dashboard/services/ChangeTracker.test.ts

@@ -1,4 +1,4 @@
-import { ChangeTracker } from 'app/features/dashboard/change_tracker';
+import { ChangeTracker } from './ChangeTracker';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardModel } from '../dashboard_model';
 import { PanelModel } from '../panel_model';

public/app/features/dashboard/change_tracker.ts → public/app/features/dashboard/services/ChangeTracker.ts

@@ -1,6 +1,6 @@
 import angular from 'angular';
 import _ from 'lodash';
-import { DashboardModel } from './dashboard_model';
+import { DashboardModel } from '../dashboard_model';
 
 export class ChangeTracker {
   current: any;

public/app/features/dashboard/dashboard_srv.ts → public/app/features/dashboard/services/DashboardSrv.ts

@@ -1,5 +1,5 @@
 import coreModule from 'app/core/core_module';
-import { DashboardModel } from './dashboard_model';
+import { DashboardModel } from '../dashboard_model';
 import locationUtil from 'app/core/utils/location_util';
 
 export class DashboardSrv {

public/app/features/dashboard/specs/viewstate_srv.test.ts → public/app/features/dashboard/services/DashboardViewStateSrv.test.ts

@@ -1,7 +1,5 @@
-//import { describe, beforeEach, it, expect, angularMocks } from 'test/lib/common';
-import 'app/features/dashboard/view_state_srv';
 import config from 'app/core/config';
-import { DashboardViewState } from '../view_state_srv';
+import { DashboardViewStateSrv } from './DashboardViewStateSrv';
 import { DashboardModel } from '../dashboard_model';
 
 describe('when updating view state', () => {
@@ -33,7 +31,7 @@ describe('when updating view state', () => {
       location.search = jest.fn(() => {
         return { fullscreen: true, edit: true, panelId: 1 };
       });
-      viewState = new DashboardViewState($scope, location, {});
+      viewState = new DashboardViewStateSrv($scope, location, {});
     });
 
     it('should update querystring and view state', () => {
@@ -55,7 +53,7 @@ describe('when updating view state', () => {
 
   describe('to fullscreen false', () => {
     beforeEach(() => {
-      viewState = new DashboardViewState($scope, location, {});
+      viewState = new DashboardViewStateSrv($scope, location, {});
     });
     it('should remove params from query string', () => {
       viewState.update({ fullscreen: true, panelId: 1, edit: true });

public/app/features/dashboard/view_state_srv.ts → public/app/features/dashboard/services/DashboardViewStateSrv.ts

@@ -2,11 +2,11 @@ import angular from 'angular';
 import _ from 'lodash';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
-import { DashboardModel } from './dashboard_model';
+import { DashboardModel } from '../dashboard_model';
 
 // represents the transient view state
 // like fullscreen panel & edit
-export class DashboardViewState {
+export class DashboardViewStateSrv {
   state: any;
   panelScopes: any;
   $scope: any;
@@ -168,7 +168,7 @@ export class DashboardViewState {
 export function dashboardViewStateSrv($location, $timeout) {
   return {
     create: $scope => {
-      return new DashboardViewState($scope, $location, $timeout);
+      return new DashboardViewStateSrv($scope, $location, $timeout);
     },
   };
 }

public/app/features/dashboard/unsaved_changes_srv.ts → public/app/features/dashboard/services/UnsavedChangesSrv.ts

@@ -1,5 +1,5 @@
 import angular from 'angular';
-import { ChangeTracker } from './change_tracker';
+import { ChangeTracker } from './ChangeTracker';
 
 /** @ngInject */
 export function unsavedChangesSrv(this: any, $rootScope, $q, $location, $timeout, contextSrv, dashboardSrv, $window) {

public/app/features/dashboard/utils/panel.ts

@@ -80,7 +80,7 @@ export const editPanelJson = (dashboard: DashboardModel, panel: PanelModel) => {
 
 export const sharePanel = (dashboard: DashboardModel, panel: PanelModel) => {
   appEvents.emit('show-modal', {
-    src: 'public/app/features/dashboard/partials/shareModal.html',
+    src: 'public/app/features/dashboard/components/ShareModal/template.html',
     model: {
       dashboard: dashboard,
       panel: panel,

public/app/features/dashboard/specs/dashboard_import_ctrl.test.ts → public/app/features/manage-dashboards/DashboardImportCtrl.test.ts

@@ -1,5 +1,5 @@
-import { DashboardImportCtrl } from '../dashboard_import_ctrl';
-import config from '../../../core/config';
+import { DashboardImportCtrl } from './DashboardImportCtrl';
+import config from 'app/core/config';
 
 describe('DashboardImportCtrl', () => {
   const ctx: any = {};

public/app/features/dashboard/folder_dashboards_ctrl.ts → public/app/features/manage-dashboards/FolderDashboardsCtrl.ts

@@ -1,4 +1,4 @@
-import { FolderPageLoader } from './folder_page_loader';
+import { FolderPageLoader } from './services/FolderPageLoader';
 import locationUtil from 'app/core/utils/location_util';
 
 export class FolderDashboardsCtrl {

public/app/features/dashboard/move_to_folder_modal/move_to_folder.ts → public/app/features/manage-dashboards/components/MoveToFolderModal/MoveToFolderCtrl.ts

@@ -46,7 +46,7 @@ export class MoveToFolderCtrl {
 export function moveToFolderModal() {
   return {
     restrict: 'E',
-    templateUrl: 'public/app/features/dashboard/move_to_folder_modal/move_to_folder.html',
+    templateUrl: 'public/app/features/manage-dashboards/components/MoveToFolderModal/template.html',
     controller: MoveToFolderCtrl,
     bindToController: true,
     controllerAs: 'ctrl',

public/app/features/manage-dashboards/components/MoveToFolderModal/index.ts

@@ -0,0 +1 @@
+export { MoveToFolderCtrl } from './MoveToFolderCtrl';

public/app/features/manage-dashboards/components/UploadDashboard/index.ts

@@ -0,0 +1 @@
+export { uploadDashboardDirective } from './uploadDashboardDirective';

public/app/features/dashboard/upload.ts → public/app/features/manage-dashboards/components/UploadDashboard/uploadDashboardDirective.ts

@@ -11,7 +11,7 @@ const template = `
 `;
 
 /** @ngInject */
-function uploadDashboardDirective(timer, $location) {
+export function uploadDashboardDirective(timer, $location) {
   return {
     restrict: 'E',
     template: template,

public/app/features/manage-dashboards/index.ts

@@ -1,7 +1,21 @@
-import coreModule from 'app/core/core_module';
+// Services
+export { ValidationSrv } from './services/ValidationSrv';
+
+// Components
+export * from './components/MoveToFolderModal';
+export * from './components/UploadDashboard';
 
+// Controllers
 import { DashboardListCtrl } from './DashboardListCtrl';
 import { SnapshotListCtrl } from './SnapshotListCtrl';
+import { FolderDashboardsCtrl } from './FolderDashboardsCtrl';
+import { DashboardImportCtrl } from './DashboardImportCtrl';
+import { CreateFolderCtrl } from './CreateFolderCtrl';
+
+import coreModule from 'app/core/core_module';
 
 coreModule.controller('DashboardListCtrl', DashboardListCtrl);
 coreModule.controller('SnapshotListCtrl', SnapshotListCtrl);
+coreModule.controller('FolderDashboardsCtrl', FolderDashboardsCtrl);
+coreModule.controller('DashboardImportCtrl', DashboardImportCtrl);
+coreModule.controller('CreateFolderCtrl', CreateFolderCtrl);

style_guides/frontend.md

@@ -0,0 +1,62 @@
+# Frontend Style Guide
+
+Generally we follow the Airbnb  [React Style Guide](https://github.com/airbnb/javascript/tree/master/react).
+
+## Table of Contents
+
+  1. [Basic Rules](#basic-rules)
+  1. [File & Component Organization](#Organization)
+  1. [Naming](#naming)
+  1. [Declaration](#declaration)
+  1. [Props](#props)
+  1. [Refs](#refs)
+  1. [Methods](#methods)
+  1. [Ordering](#ordering)
+
+## Basic rules
+
+* Try to keep files small and focused and break large components up into sub components.
+
+## Organization
+
+* Components and types that needs to be used by external plugins needs to go into @grafana/ui
+* Components should get their own folder under features/xxx/components
+  * Sub components can live in that component folders, so not small component needs their own folder
+  * Place test next to their component file (same dir)
+  * Mocks in __mocks__ dir
+  * Test utils in __tests__ dir
+  * Component sass should live in the same folder as component code
+* State logic & domain models should live in features/xxx/state
+* Containers (pages) can live in feature root features/xxx
+  * up for debate?
+
+## Props
+
+* Name callback props & handlers with a "on"  prefix.
+
+```tsx
+// good
+onChange = () => {
+
+};
+
+render() {
+  return (
+    <MyComponent onChange={this.onChange} />
+  );
+}
+
+// bad
+handleChange = () => {
+
+};
+
+render() {
+  return (
+    <MyComponent changed={this.handleChange} />
+  );
+}
+```
+
+
+