Merge branch 'remove-mobx'

package.json

@@ -60,7 +60,6 @@
     "lint-staged": "^6.0.0",
     "load-grunt-tasks": "3.5.2",
     "mini-css-extract-plugin": "^0.4.0",
-    "mobx-react-devtools": "^4.2.15",
     "mocha": "^4.0.1",
     "ng-annotate-loader": "^0.6.1",
     "ng-annotate-webpack-plugin": "^0.3.0",
@@ -146,9 +145,6 @@
     "immutable": "^3.8.2",
     "jquery": "^3.2.1",
     "lodash": "^4.17.10",
-    "mobx": "^3.4.1",
-    "mobx-react": "^4.3.5",
-    "mobx-state-tree": "^1.3.1",
     "moment": "^2.22.2",
     "mousetrap": "^1.6.0",
     "mousetrap-global-bind": "^1.1.0",

public/app/core/components/PageHeader/PageHeader.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import { NavModel, NavModelItem } from 'app/types';
 import classNames from 'classnames';
 import appEvents from 'app/core/app_events';
-import { toJS } from 'mobx';
 
 export interface Props {
   model: NavModel;
@@ -81,7 +79,6 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
   );
 };
 
-@observer
 export default class PageHeader extends React.Component<Props, any> {
   constructor(props) {
     super(props);
@@ -148,7 +145,7 @@ export default class PageHeader extends React.Component<Props, any> {
       return null;
     }
 
-    const main = toJS(model.main); // Convert to JS if its a mobx observable
+    const main = model.main;
 
     return (
       <div className="page-header-canvas">

public/app/core/components/PermissionList/DisabledPermissionListItem.tsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import DescriptionPicker from 'app/core/components/Picker/DescriptionPicker';
-import { permissionOptions } from 'app/stores/PermissionsStore/PermissionsStore';
+import { dashboardPermissionLevels } from 'app/types/acl';
 
 export interface Props {
   item: any;
@@ -24,7 +24,7 @@ export default class DisabledPermissionListItem extends Component<Props, any> {
         <td>
           <div className="gf-form">
             <DescriptionPicker
-              optionsWithDesc={permissionOptions}
+              optionsWithDesc={dashboardPermissionLevels}
               onSelected={() => {}}
               value={item.permission}
               disabled={true}

public/app/core/components/grafana_app.ts

@@ -6,11 +6,10 @@ import coreModule from 'app/core/core_module';
 import { profiler } from 'app/core/profiler';
 import appEvents from 'app/core/app_events';
 import Drop from 'tether-drop';
-import { createStore } from 'app/stores/store';
 import colors from 'app/core/utils/colors';
 import { BackendSrv, setBackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
-import { configureStore } from 'app/stores/configureStore';
+import { configureStore } from 'app/store/configureStore';
 
 export class GrafanaCtrl {
   /** @ngInject */
@@ -28,7 +27,6 @@ export class GrafanaCtrl {
     // sets singleston instances for angular services so react components can access them
     configureStore();
     setBackendSrv(backendSrv);
-    createStore({ backendSrv, datasourceSrv });
 
     $scope.init = () => {
       $scope.contextSrv = contextSrv;

public/app/core/services/bridge_srv.ts

@@ -1,8 +1,6 @@
 import coreModule from 'app/core/core_module';
 import appEvents from 'app/core/app_events';
-import { store } from 'app/stores/store';
-import { store as reduxStore } from 'app/stores/configureStore';
-import { reaction } from 'mobx';
+import { store } from 'app/store/configureStore';
 import locationUtil from 'app/core/utils/location_util';
 import { updateLocation } from 'app/core/actions';
 
@@ -18,12 +16,9 @@ export class BridgeSrv {
   init() {
     this.$rootScope.$on('$routeUpdate', (evt, data) => {
       const angularUrl = this.$location.url();
-      if (store.view.currentUrl !== angularUrl) {
-        store.view.updatePathAndQuery(this.$location.path(), this.$location.search(), this.$route.current.params);
-      }
-      const state = reduxStore.getState();
+      const state = store.getState();
       if (state.location.url !== angularUrl) {
-        reduxStore.dispatch(
+        store.dispatch(
           updateLocation({
             path: this.$location.path(),
             query: this.$location.search(),
@@ -34,8 +29,7 @@ export class BridgeSrv {
     });
 
     this.$rootScope.$on('$routeChangeSuccess', (evt, data) => {
-      store.view.updatePathAndQuery(this.$location.path(), this.$location.search(), this.$route.current.params);
-      reduxStore.dispatch(
+      store.dispatch(
         updateLocation({
           path: this.$location.path(),
           query: this.$location.search(),
@@ -44,24 +38,9 @@ export class BridgeSrv {
       );
     });
 
-    // listen for mobx store changes and update angular
-    reaction(
-      () => store.view.currentUrl,
-      currentUrl => {
-        const angularUrl = this.$location.url();
-        const url = locationUtil.stripBaseFromUrl(currentUrl);
-        if (angularUrl !== url) {
-          this.$timeout(() => {
-            this.$location.url(url);
-          });
-          console.log('store updating angular $location.url', url);
-        }
-      }
-    );
-
     // Listen for changes in redux location -> update angular location
-    reduxStore.subscribe(() => {
-      const state = reduxStore.getState();
+    store.subscribe(() => {
+      const state = store.getState();
       const angularUrl = this.$location.url();
       const url = locationUtil.stripBaseFromUrl(state.location.url);
       if (angularUrl !== url) {

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

@@ -13,7 +13,7 @@ import {
 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 { store } from 'app/stores/configureStore';
+import { store } from 'app/store/configureStore';
 
 export interface Props {
   dashboardId: number;
@@ -65,7 +65,6 @@ export class DashboardPermissions extends PureComponent<Props, State> {
   render() {
     const { permissions, folder } = this.props;
     const { isAdding } = this.state;
-    console.log('DashboardPermissions', this.props);
 
     return (
       <div>

public/app/features/plugins/ds_dashboards_ctrl.ts

@@ -1,6 +1,7 @@
-import { toJS } from 'mobx';
 import { coreModule } from 'app/core/core';
-import { store } from 'app/stores/store';
+import { store } from 'app/store/configureStore';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { buildNavModel } from './state/navModel';
 
 export class DataSourceDashboardsCtrl {
   datasourceMeta: any;
@@ -9,11 +10,8 @@ export class DataSourceDashboardsCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, private $routeParams) {
-    if (store.nav.main === null) {
-      store.nav.load('cfg', 'datasources');
-    }
-
-    this.navModel = toJS(store.nav);
+    const state = store.getState();
+    this.navModel = getNavModel(state.navIndex, 'datasources');
 
     if (this.$routeParams.id) {
       this.getDatasourceById(this.$routeParams.id);
@@ -30,8 +28,7 @@ export class DataSourceDashboardsCtrl {
   }
 
   updateNav() {
-    store.nav.initDatasourceEditNav(this.current, this.datasourceMeta, 'datasource-dashboards');
-    this.navModel = toJS(store.nav);
+    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-dashboards');
   }
 
   getPluginInfo() {

public/app/features/plugins/ds_edit_ctrl.ts

@@ -1,8 +1,9 @@
 import _ from 'lodash';
-import { toJS } from 'mobx';
 import config from 'app/core/config';
 import { coreModule, appEvents } from 'app/core/core';
-import { store } from 'app/stores/store';
+import { store } from 'app/store/configureStore';
+import { getNavModel } from 'app/core/selectors/navModel';
+import { buildNavModel } from './state/navModel';
 
 let datasourceTypes = [];
 
@@ -31,11 +32,8 @@ export class DataSourceEditCtrl {
 
   /** @ngInject */
   constructor(private $q, private backendSrv, private $routeParams, private $location, private datasourceSrv) {
-    if (store.nav.main === null) {
-      store.nav.load('cfg', 'datasources');
-    }
-
-    this.navModel = toJS(store.nav);
+    const state = store.getState();
+    this.navModel = getNavModel(state.navIndex, 'datasources');
     this.datasources = [];
 
     this.loadDatasourceTypes().then(() => {
@@ -101,8 +99,7 @@ export class DataSourceEditCtrl {
   }
 
   updateNav() {
-    store.nav.initDatasourceEditNav(this.current, this.datasourceMeta, 'datasource-settings');
-    this.navModel = toJS(store.nav);
+    this.navModel = buildNavModel(this.current, this.datasourceMeta, 'datasource-settings');
   }
 
   typeChanged() {

public/app/features/plugins/state/navModel.ts

@@ -0,0 +1,45 @@
+import _ from 'lodash';
+import { DataSource, PluginMeta, NavModel } from 'app/types';
+
+export function buildNavModel(ds: DataSource, plugin: PluginMeta, currentPage: string): NavModel {
+  let title = 'New';
+  const subTitle = `Type: ${plugin.name}`;
+
+  if (ds.id) {
+    title = ds.name;
+  }
+
+  const main = {
+    img: plugin.info.logos.large,
+    id: 'ds-edit-' + plugin.id,
+    subTitle: subTitle,
+    url: '',
+    text: title,
+    breadcrumbs: [{ title: 'Data Sources', url: 'datasources' }],
+    children: [
+      {
+        active: currentPage === 'datasource-settings',
+        icon: 'fa fa-fw fa-sliders',
+        id: 'datasource-settings',
+        text: 'Settings',
+        url: `datasources/edit/${ds.id}`,
+      },
+    ],
+  };
+
+  const hasDashboards = _.find(plugin.includes, { type: 'dashboard' }) !== undefined;
+  if (hasDashboards && ds.id) {
+    main.children.push({
+      active: currentPage === 'datasource-dashboards',
+      icon: 'fa fa-fw fa-th-large',
+      id: 'datasource-dashboards',
+      text: 'Dashboards',
+      url: `datasources/edit/${ds.id}/dashboards`,
+    });
+  }
+
+  return {
+    main: main,
+    node: _.find(main.children, { active: true }),
+  };
+}

public/app/routes/ReactContainer.tsx

@@ -1,22 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Provider } from 'mobx-react';
-import { Provider as ReduxProvider } from 'react-redux';
+import { Provider } from 'react-redux';
 
 import coreModule from 'app/core/core_module';
-import { store } from 'app/stores/store';
-import { store as reduxStore } from 'app/stores/configureStore';
+import { store } from 'app/store/configureStore';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { DatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { ContextSrv } from 'app/core/services/context_srv';
 
 function WrapInProvider(store, Component, props) {
   return (
-    <ReduxProvider store={reduxStore}>
-      <Provider {...store}>
-        <Component {...props} />
-      </Provider>
-    </ReduxProvider>
+    <Provider store={store}>
+      <Component {...props} />
+    </Provider>
   );
 }