Commit 83937f59 by Torkel Ödegaard

wip: dashboard in react starting to work

parent d86e773c
......@@ -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 = {
......
......@@ -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[]>;
......
// 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,26 +25,44 @@ 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);
dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid);
} catch (err) {
dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
console.log(err);
return;
}
// set initializing state
dispatch(setDashboardLoadingState(DashboardLoadingState.Initializing));
// create model
const dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
// init services
let dashboard: DashboardModel;
try {
dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
} catch (err) {
dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
console.log(err);
return;
}
// init services
injector.get('timeSrv').init(dashboard);
injector.get('annotationsSrv').init(dashboard);
// 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(() => {
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);
......@@ -59,12 +72,11 @@ export function initDashboard({ injector, scope, urlUid, urlSlug, urlType }: Ini
scope.dashboard = dashboard;
injector.get('dashboardViewStateSrv').create(scope);
injector.get('keybindingSrv').setupDashboardBindings(scope, dashboard);
})
.catch(err => {
dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
});
} catch (err) {
dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
dispatch(notifyApp(createErrorNotification('Dashboard init failed', err.toString())));
console.log(err);
}
dispatch(setDashboardModel(dashboard));
};
}
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 {
......
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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment