Merge pull request #15023 from grafana/improve-organization

More file re-organization & clean-up

public/app/core/controllers/all.ts

@@ -1,4 +1,3 @@
-import './inspect_ctrl';
 import './json_editor_ctrl';
 import './login_ctrl';
 import './invited_ctrl';

public/app/core/controllers/inspect_ctrl.ts

@@ -1,71 +0,0 @@
-import angular from 'angular';
-import _ from 'lodash';
-import $ from 'jquery';
-import coreModule from '../core_module';
-
-export class InspectCtrl {
-  /** @ngInject */
-  constructor($scope, $sanitize) {
-    const model = $scope.inspector;
-
-    $scope.init = function() {
-      $scope.editor = { index: 0 };
-
-      if (!model.error) {
-        return;
-      }
-
-      if (_.isString(model.error.data)) {
-        $scope.response = $('<div>' + model.error.data + '</div>').text();
-      } else if (model.error.data) {
-        if (model.error.data.response) {
-          $scope.response = $sanitize(model.error.data.response);
-        } else {
-          $scope.response = angular.toJson(model.error.data, true);
-        }
-      } else if (model.error.message) {
-        $scope.message = model.error.message;
-      }
-
-      if (model.error.config && model.error.config.params) {
-        $scope.request_parameters = _.map(model.error.config.params, (value, key) => {
-          return { key: key, value: value };
-        });
-      }
-
-      if (model.error.stack) {
-        $scope.editor.index = 3;
-        $scope.stack_trace = model.error.stack;
-        $scope.message = model.error.message;
-      }
-
-      if (model.error.config && model.error.config.data) {
-        $scope.editor.index = 2;
-
-        if (_.isString(model.error.config.data)) {
-          $scope.request_parameters = this.getParametersFromQueryString(model.error.config.data);
-        } else {
-          $scope.request_parameters = _.map(model.error.config.data, (value, key) => {
-            return { key: key, value: angular.toJson(value, true) };
-          });
-        }
-      }
-    };
-  }
-  getParametersFromQueryString(queryString) {
-    const result = [];
-    const parameters = queryString.split('&');
-    for (let i = 0; i < parameters.length; i++) {
-      const keyValue = parameters[i].split('=');
-      if (keyValue[1].length > 0) {
-        result.push({
-          key: keyValue[0],
-          value: (window as any).unescape(keyValue[1]),
-        });
-      }
-    }
-    return result;
-  }
-}
-
-coreModule.controller('InspectCtrl', InspectCtrl);

public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import _ from 'lodash';
 import config from 'app/core/config';
-import { PanelModel } from '../panel_model';
-import { DashboardModel } from '../dashboard_model';
+import { PanelModel } from '../../panel_model';
+import { DashboardModel } from '../../dashboard_model';
 import store from 'app/core/store';
 import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 import { updateLocation } from 'app/core/actions';
 import { store as reduxStore } from 'app/store/store';
 
-export interface AddPanelPanelProps {
+export interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
 }
 
-export interface AddPanelPanelState {
+export interface State {
   copiedPanelPlugins: any[];
 }
 
-export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelPanelState> {
+export class AddPanelWidget extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.handleCloseAddPanel = this.handleCloseAddPanel.bind(this);
@@ -133,15 +133,15 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
     }
 
     return (
-      <div className="panel-container add-panel-container">
-        <div className="add-panel">
-          <div className="add-panel__header grid-drag-handle">
+      <div className="panel-container add-panel-widget-container">
+        <div className="add-panel-widget">
+          <div className="add-panel-widget__header grid-drag-handle">
             <i className="gicon gicon-add-panel" />
-            <button className="add-panel__close" onClick={this.handleCloseAddPanel}>
+            <button className="add-panel-widget__close" onClick={this.handleCloseAddPanel}>
               <i className="fa fa-close" />
             </button>
           </div>
-          <div className="add-panel-btn-container">
+          <div className="add-panel-widget__btn-container">
             <button className="btn-success btn btn-large" onClick={this.onCreateNewPanel}>
               Edit Panel
             </button>

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -1,12 +1,12 @@
-.add-panel-container {
+.add-panel-widget-container {
   height: 100%;
 }
 
-.add-panel {
+.add-panel-widget {
   height: 100%;
 }
 
-.add-panel__header {
+.add-panel-widget__header {
   top: 0;
   position: absolute;
   padding: 0 15px;
@@ -26,7 +26,7 @@
   }
 }
 
-.add-panel__close {
+.add-panel-widget__close {
   margin-left: auto;
   background-color: transparent;
   border: 0;
@@ -34,7 +34,7 @@
   margin-right: -10px;
 }
 
-.add-panel-btn-container {
+.add-panel-widget__btn-container {
   display: flex;
   justify-content: center;
   align-items: center;

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

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

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

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

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

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { importPluginModule } from 'app/features/plugins/plugin_loader';
 
-import { AddPanelPanel } from './AddPanelPanel';
+import { AddPanelWidget } from '../components/AddPanelWidget';
 import { getPanelPluginNotFound } from './PanelPluginNotFound';
 import { DashboardRow } from './DashboardRow';
 import { PanelChrome } from './PanelChrome';
@@ -53,7 +53,7 @@ export class DashboardPanel extends PureComponent<Props, State> {
   }
 
   renderAddPanel() {
-    return <AddPanelPanel panel={this.props.panel} dashboard={this.props.dashboard} />;
+    return <AddPanelWidget panel={this.props.panel} dashboard={this.props.dashboard} />;
   }
 
   onPluginTypeChanged = (plugin: PanelPlugin) => {

public/app/features/dashboard/index.ts

@@ -2,7 +2,6 @@ import './dashboard_ctrl';
 import './time_srv';
 import './repeat_option/repeat_option';
 import './dashgrid/DashboardGridDirective';
-import './dashgrid/RowOptions';
 import './panellinks/module';
 
 // Services
@@ -25,6 +24,7 @@ import './components/UnsavedChangesModal';
 import './components/SaveModals';
 import './components/ShareModal';
 import './components/AdHocFilters';
+import './components/RowOptions';
 
 import DashboardPermissions from './components/DashboardPermissions/DashboardPermissions';
 

public/app/features/dashboard/partials/folder_permissions.html

@@ -1,7 +0,0 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-  <dashboard-permissions ng-if="ctrl.dashboard && ctrl.meta"
-    dashboardId="ctrl.dashboard.id"
-  />
-</div>

public/app/features/dashboard/partials/folder_settings.html

@@ -1,23 +0,0 @@
-<page-header model="ctrl.navModel"></page-header>
-
-<div class="page-container page-body">
-	<h2 class="page-sub-heading">Folder Settings</h2>
-
-	<div class="section gf-form-group">
-		<form name="folderSettingsForm" ng-submit="ctrl.save()">
-			<div class="gf-form">
-				<label class="gf-form-label width-7">Name</label>
-				<input type="text" class="gf-form-input width-30" ng-model='ctrl.title' ng-change="ctrl.titleChanged()"></input>
-			</div>
-			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-disabled="!ctrl.canSave || !ctrl.hasChanged">
-					<i class="fa fa-save"></i>Save
-				</button>
-				<button class="btn btn-danger" ng-click="ctrl.delete($event)" ng-disabled="!ctrl.canSave">
-					<i class="fa fa-trash"></i>
-					Delete
-				</button>
-			</div>
-		</form>
-	</div>
-</div>

public/app/features/dashboard/partials/inspector.html

@@ -1,82 +0,0 @@
-<div class="modal-body" ng-controller="InspectCtrl" ng-init="init()">
-	<div class="modal-header">
-		<h2 class="modal-header-title">
-			<i class="fa fa-info-circle"></i>
-			<span class="p-l-1">Inspector</span>
-		</h2>
-
-		<ul class="gf-tabs">
-			<li class="gf-tabs-item" ng-repeat="tab in ['Panel Description', 'Request', 'Response', 'JS Error']">
-				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
-					{{::tab}}
-				</a>
-			</li>
-		</ul>
-
-		<a class="modal-header-close" ng-click="dismiss();">
-			<i class="fa fa-remove"></i>
-		</a>
-	</div>
-
-	<div class="modal-content">
-		<div ng-if="editor.index == 0" ng-bind-html="panelInfoHtml">
-		</div>
-
-		<div ng-if="editor.index == 1">
-			<h5 class="section-heading">Request details</h5>
-			<table class="filter-table gf-form-group">
-				<tr>
-					<td>Url</td>
-					<td>{{inspector.error.config.url}}</td>
-				</tr>
-				<tr>
-					<td>Method</td>
-					<td>{{inspector.error.config.method}}</td>
-				</tr>
-				<tr ng-repeat="(key, value) in inspector.error.config.headers">
-					<td>
-						{{key}}
-					</td>
-					<td>
-						{{value}}
-					</td>
-				</tr>
-			</table>
-
-			<h5 class="section-heading">Request parameters</h5>
-			<table class="filter-table">
-				<tr ng-repeat="param in request_parameters">
-					<td>
-						{{param.key}}
-					</td>
-					<td>
-						{{param.value}}
-					</td>
-				</tr>
-			</table>
-		</div>
-
-		<div ng-if="editor.index == 2">
-			<h5 ng-show="message">{{message}}</h5>
- 			<pre class="small">
-{{response}}
-			</pre>
-		</div>
-
-		<div ng-if="editor.index == 3">
-
-			<label>Message:</label>
-<pre>
-{{message}}
-</pre>
-
-			<label>Stack trace:</label>
-<pre>
-{{stack_trace}}
-</pre>
-
-		</div>
-
-	</div>
-</div>
-

public/app/features/folders/CreateFolderCtrl.ts

@@ -1,7 +1,7 @@
 import appEvents from 'app/core/app_events';
 import locationUtil from 'app/core/utils/location_util';
 
-export class CreateFolderCtrl {
+export default class CreateFolderCtrl {
   title = '';
   navModel: any;
   titleTouched = false;
@@ -38,3 +38,4 @@ export class CreateFolderCtrl {
       });
   }
 }
+

public/app/features/folders/FolderDashboardsCtrl.ts

@@ -1,7 +1,7 @@
 import { FolderPageLoader } from './services/FolderPageLoader';
 import locationUtil from 'app/core/utils/location_util';
 
-export class FolderDashboardsCtrl {
+export default class FolderDashboardsCtrl {
   navModel: any;
   folderId: number;
   uid: string;
@@ -23,3 +23,4 @@ export class FolderDashboardsCtrl {
     }
   }
 }
+

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

@@ -232,3 +232,5 @@ export class DashboardImportCtrl {
     this.gnetInfo = '';
   }
 }
+
+export default DashboardImportCtrl;

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

@@ -8,14 +8,8 @@ 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);

public/app/features/panel/panel_ctrl.ts

@@ -290,17 +290,4 @@ export class PanelCtrl {
     html += '</div>';
     return sanitize(html);
   }
-
-  openInspector() {
-    const modalScope = this.$scope.$new();
-    modalScope.panel = this.panel;
-    modalScope.dashboard = this.dashboard;
-    modalScope.panelInfoHtml = this.getInfoContent({ mode: 'inspector' });
-
-    modalScope.inspector = $.extend(true, {}, this.inspector);
-    this.publishAppEvent('show-modal', {
-      src: 'public/app/features/dashboard/partials/inspector.html',
-      scope: modalScope,
-    });
-  }
 }

public/app/features/panel/panel_directive.ts

@@ -192,11 +192,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => {
       scope.$watchGroup(['ctrl.error', 'ctrl.panel.description'], updatePanelCornerInfo);
       scope.$watchCollection('ctrl.panel.links', updatePanelCornerInfo);
 
-      cornerInfoElem.on('click', () => {
-        infoDrop.close();
-        scope.$apply(ctrl.openInspector.bind(ctrl));
-      });
-
       elem.on('mouseenter', mouseEnter);
       elem.on('mouseleave', mouseLeave);
 

public/app/routes/routes.ts

@@ -10,6 +10,9 @@ import ApiKeys from 'app/features/api-keys/ApiKeysPage';
 import PluginListPage from 'app/features/plugins/PluginListPage';
 import FolderSettingsPage from 'app/features/folders/FolderSettingsPage';
 import FolderPermissions from 'app/features/folders/FolderPermissions';
+import CreateFolderCtrl from 'app/features/folders/CreateFolderCtrl';
+import FolderDashboardsCtrl from 'app/features/folders/FolderDashboardsCtrl';
+import DashboardImportCtrl from 'app/features/manage-dashboards/DashboardImportCtrl';
 import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
@@ -66,8 +69,8 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       pageClass: 'page-dashboard',
     })
     .when('/dashboard/import', {
-      templateUrl: 'public/app/features/dashboard/partials/dashboard_import.html',
-      controller: 'DashboardImportCtrl',
+      templateUrl: 'public/app/features/manage-dashboards/partials/dashboard_import.html',
+      controller: DashboardImportCtrl,
       controllerAs: 'ctrl',
     })
     .when('/datasources', {
@@ -100,8 +103,8 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controllerAs: 'ctrl',
     })
     .when('/dashboards/folder/new', {
-      templateUrl: 'public/app/features/dashboard/partials/create_folder.html',
-      controller: 'CreateFolderCtrl',
+      templateUrl: 'public/app/features/folders/partials/create_folder.html',
+      controller: CreateFolderCtrl,
       controllerAs: 'ctrl',
     })
     .when('/dashboards/f/:uid/:slug/permissions', {
@@ -117,8 +120,8 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       },
     })
     .when('/dashboards/f/:uid/:slug', {
-      templateUrl: 'public/app/features/dashboard/partials/folder_dashboards.html',
-      controller: 'FolderDashboardsCtrl',
+      templateUrl: 'public/app/features/folders/partials/folder_dashboards.html',
+      controller: FolderDashboardsCtrl,
       controllerAs: 'ctrl',
     })
     .when('/dashboards/f/:uid', {

public/sass/_grafana.scss

@@ -39,6 +39,7 @@
 @import 'layout/page';
 
 // COMPONENTS
+@import '../app/features/dashboard/components/AddPanelWidget/AddPanelWidget';
 @import 'components/scrollbar';
 @import 'components/cards';
 @import 'components/buttons';
@@ -58,7 +59,6 @@
 @import 'components/panel_table';
 @import 'components/panel_text';
 @import 'components/panel_heatmap';
-@import 'components/panel_add_panel';
 @import 'components/panel_logs';
 @import 'components/settings_permissions';
 @import 'components/tagsinput';