wip: dashboard in react starting to work

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 
 // Components
 import { LoadingPlaceholder } from '@grafana/ui';
+import { DashboardGrid } from '../dashgrid/DashboardGrid';
 
 // Redux
 import { initDashboard } from '../state/initDashboard';
@@ -45,42 +46,8 @@ export class DashboardPage extends Component<Props, State> {
       urlUid: this.props.urlUid,
       urlType: this.props.urlType,
     })
-
-    // const { $injector, urlUid, urlType, urlSlug } = this.props;
-    //
-    // // handle old urls with no uid
-    // if (!urlUid && !(urlType === 'script' || urlType === 'snapshot')) {
-    //   this.redirectToNewUrl();
-    //   return;
-    // }
-    //
-    // const loaderSrv = $injector.get('dashboardLoaderSrv');
-    // const dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid);
-    //
-    // try {
-    //   this.initDashboard(dashDTO);
-    // } catch (err) {
-    //   this.props.notifyApp(createErrorNotification('Failed to init dashboard', err.toString()));
-    //   console.log(err);
-    // }
   }
 
-  // redirectToNewUrl() {
-  //   getBackendSrv()
-  //     .getDashboardBySlug(this.props.urlSlug)
-  //     .then(res => {
-  //       if (res) {
-  //         const url = locationUtil.stripBaseFromUrl(res.meta.url.replace('/d/', '/d-solo/'));
-  //         this.props.updateLocation(url);
-  //       }
-  //     });
-  // }
-  //
-  // initDashboard(dashDTO: any) {
-  //   const dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
-  //   this.setState({ dashboard });
-  // }
-
   render() {
     const { loadingState, dashboard } = this.props;
 
@@ -88,7 +55,8 @@ export class DashboardPage extends Component<Props, State> {
       return <LoadingPlaceholder text={loadingState.toString()} />;
     }
 
-    return <div>title: {dashboard.title}</div>;
+    console.log(dashboard);
+    return <DashboardGrid dashboard={dashboard} />
   }
 }
 
@@ -98,7 +66,7 @@ const mapStateToProps = (state: StoreState) => ({
   urlType: state.location.routeParams.type,
   panelId: state.location.query.panelId,
   loadingState: state.dashboard.loadingState,
-  dashboard: state.dashboard as DashboardModel,
+  dashboard: state.dashboard.model as DashboardModel,
 });
 
 const mapDispatchToProps = {

public/app/features/dashboard/state/actions.ts

@@ -20,10 +20,11 @@ import {
   DashboardAclUpdateDTO,
   NewDashboardAclItem,
 } from 'app/types/acl';
-import { DashboardLoadingState } from 'app/types/dashboard';
+import { DashboardLoadingState, MutableDashboard } from 'app/types/dashboard';
 
 export const loadDashboardPermissions = actionCreatorFactory<DashboardAclDTO[]>('LOAD_DASHBOARD_PERMISSIONS').create();
 export const setDashboardLoadingState = actionCreatorFactory<DashboardLoadingState>('SET_DASHBOARD_LOADING_STATE').create();
+export const setDashboardModel = actionCreatorFactory<MutableDashboard>('SET_DASHBOARD_MODEL').create();
 
 export type Action = ActionOf<DashboardAclDTO[]>;
 

public/app/features/dashboard/state/initDashboard.ts

@@ -1,16 +1,11 @@
-// Libaries
-import { StoreState } from 'app/types';
-import { ThunkAction } from 'redux-thunk';
-
 // Services & Utils
-import { getBackendSrv } from 'app/core/services/backend_srv';
 import { createErrorNotification } from 'app/core/copy/appNotification';
 
 // Actions
 import { updateLocation } from 'app/core/actions';
 import { notifyApp } from 'app/core/actions';
 import locationUtil from 'app/core/utils/location_util';
-import { setDashboardLoadingState, ThunkResult } from './actions';
+import { setDashboardLoadingState, ThunkResult, setDashboardModel } from './actions';
 
 // Types
 import { DashboardLoadingState } from 'app/types/dashboard';
@@ -30,41 +25,58 @@ export function initDashboard({ injector, scope, urlUid, urlSlug, urlType }: Ini
 
     dispatch(setDashboardLoadingState(DashboardLoadingState.Fetching));
 
+    let dashDTO = null;
+
     try {
       // fetch dashboard from api
-      const dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid);
-      // set initializing state
-      dispatch(setDashboardLoadingState(DashboardLoadingState.Initializing));
-      // create model
-      const dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
-      // init services
+      dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid);
+    } catch (err) {
+      dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
+      console.log(err);
+      return;
+    }
 
-      injector.get('timeSrv').init(dashboard);
-      injector.get('annotationsSrv').init(dashboard);
+    // set initializing state
+    dispatch(setDashboardLoadingState(DashboardLoadingState.Initializing));
 
-      // template values service needs to initialize completely before
-      // the rest of the dashboard can load
-      injector.get('variableSrv').init(dashboard)
-        .catch(err => {
-          dispatch(notifyApp(createErrorNotification('Templating init failed')));
-        })
-        .finally(() => {
+    // create model
+    let dashboard: DashboardModel;
+    try {
+      dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
+    } catch (err) {
+      dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
+      console.log(err);
+      return;
+    }
 
-          dashboard.processRepeats();
-          dashboard.updateSubmenuVisibility();
-          dashboard.autoFitPanels(window.innerHeight);
+    // init services
+    injector.get('timeSrv').init(dashboard);
+    injector.get('annotationsSrv').init(dashboard);
 
-          injector.get('unsavedChangesSrv').init(dashboard, scope);
+    // template values service needs to initialize completely before
+    // the rest of the dashboard can load
+    try {
+      await injector.get('variableSrv').init(dashboard);
+    } catch (err) {
+      dispatch(notifyApp(createErrorNotification('Templating init failed', err.toString())));
+      console.log(err);
+    }
+
+    try {
+      dashboard.processRepeats();
+      dashboard.updateSubmenuVisibility();
+      dashboard.autoFitPanels(window.innerHeight);
+
+      injector.get('unsavedChangesSrv').init(dashboard, scope);
 
-          scope.dashboard = dashboard;
-          injector.get('dashboardViewStateSrv').create(scope);
-          injector.get('keybindingSrv').setupDashboardBindings(scope, dashboard);
-        })
-        .catch(err => {
-          dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
-        });
+      scope.dashboard = dashboard;
+      injector.get('dashboardViewStateSrv').create(scope);
+      injector.get('keybindingSrv').setupDashboardBindings(scope, dashboard);
     } catch (err) {
-      dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
+      dispatch(notifyApp(createErrorNotification('Dashboard init failed', err.toString())));
+      console.log(err);
     }
+
+    dispatch(setDashboardModel(dashboard));
   };
 }

public/app/features/dashboard/state/reducers.ts

@@ -1,11 +1,11 @@
 import { DashboardState, DashboardLoadingState } from 'app/types/dashboard';
-import { loadDashboardPermissions, setDashboardLoadingState } from './actions';
+import { loadDashboardPermissions, setDashboardLoadingState, setDashboardModel } from './actions';
 import { reducerFactory } from 'app/core/redux';
 import { processAclItems } from 'app/core/utils/acl';
 
 export const initialState: DashboardState = {
   loadingState: DashboardLoadingState.NotStarted,
-  dashboard: null,
+  model: null,
   permissions: [],
 };
 
@@ -24,6 +24,13 @@ export const dashboardReducer = reducerFactory(initialState)
       loadingState: action.payload
     }),
   })
+  .addMapper({
+    filter: setDashboardModel,
+    mapper: (state, action) => ({
+      ...state,
+      model: action.payload
+    }),
+  })
   .create()
 
 export default {

public/app/types/dashboard.ts

@@ -1,6 +1,6 @@
 import { DashboardAcl } from './acl';
 
-export interface Dashboard {
+export interface MutableDashboard {
 }
 
 export enum DashboardLoadingState {
@@ -12,7 +12,7 @@ export enum DashboardLoadingState {
 }
 
 export interface DashboardState {
-  dashboard: Dashboard | null;
+  model: MutableDashboard | null;
   loadingState: DashboardLoadingState;
   permissions: DashboardAcl[] | null;
 }