Skip to content

N
nexpie-grafana-theme
Commit 83937f59 by Torkel Ödegaard
Options

wip: dashboard in react starting to work

parent d86e773c
Showing with 62 additions and 74 deletions
public/app/features/dashboard/containers/DashboardPage.tsx
...@@ -5,6 +5,7 @@ import { connect } from 'react-redux'; ...@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
// Components // Components
import { LoadingPlaceholder } from '@grafana/ui'; import { LoadingPlaceholder } from '@grafana/ui';
import { DashboardGrid } from '../dashgrid/DashboardGrid';
// Redux // Redux
import { initDashboard } from '../state/initDashboard'; import { initDashboard } from '../state/initDashboard';
...@@ -45,42 +46,8 @@ export class DashboardPage extends Component<Props, State> { ...@@ -45,42 +46,8 @@ export class DashboardPage extends Component<Props, State> {
urlUid: this.props.urlUid, urlUid: this.props.urlUid,
urlType: this.props.urlType, 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() { render() {
const { loadingState, dashboard } = this.props; const { loadingState, dashboard } = this.props;
...@@ -88,7 +55,8 @@ export class DashboardPage extends Component<Props, State> { ...@@ -88,7 +55,8 @@ export class DashboardPage extends Component<Props, State> {
return <LoadingPlaceholder text={loadingState.toString()} />; 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) => ({ ...@@ -98,7 +66,7 @@ const mapStateToProps = (state: StoreState) => ({
urlType: state.location.routeParams.type, urlType: state.location.routeParams.type,
panelId: state.location.query.panelId, panelId: state.location.query.panelId,
loadingState: state.dashboard.loadingState, loadingState: state.dashboard.loadingState,
dashboard: state.dashboard as DashboardModel, dashboard: state.dashboard.model as DashboardModel,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
......
public/app/features/dashboard/state/actions.ts
...@@ -20,10 +20,11 @@ import { ...@@ -20,10 +20,11 @@ import {
DashboardAclUpdateDTO, DashboardAclUpdateDTO,
NewDashboardAclItem, NewDashboardAclItem,
} from 'app/types/acl'; } 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 loadDashboardPermissions = actionCreatorFactory<DashboardAclDTO[]>('LOAD_DASHBOARD_PERMISSIONS').create();
export const setDashboardLoadingState = actionCreatorFactory<DashboardLoadingState>('SET_DASHBOARD_LOADING_STATE').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[]>; export type Action = ActionOf<DashboardAclDTO[]>;
......
public/app/features/dashboard/state/initDashboard.ts
// Libaries
import { StoreState } from 'app/types';
import { ThunkAction } from 'redux-thunk';
// Services & Utils // Services & Utils
import { getBackendSrv } from 'app/core/services/backend_srv';
import { createErrorNotification } from 'app/core/copy/appNotification'; import { createErrorNotification } from 'app/core/copy/appNotification';
// Actions // Actions
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import { notifyApp } from 'app/core/actions'; import { notifyApp } from 'app/core/actions';
import locationUtil from 'app/core/utils/location_util'; import locationUtil from 'app/core/utils/location_util';
import { setDashboardLoadingState, ThunkResult } from './actions'; import { setDashboardLoadingState, ThunkResult, setDashboardModel } from './actions';
// Types // Types
import { DashboardLoadingState } from 'app/types/dashboard'; import { DashboardLoadingState } from 'app/types/dashboard';
...@@ -30,41 +25,58 @@ export function initDashboard({ injector, scope, urlUid, urlSlug, urlType }: Ini ...@@ -30,41 +25,58 @@ export function initDashboard({ injector, scope, urlUid, urlSlug, urlType }: Ini
dispatch(setDashboardLoadingState(DashboardLoadingState.Fetching)); dispatch(setDashboardLoadingState(DashboardLoadingState.Fetching));
let dashDTO = null;
try { try {
// fetch dashboard from api // fetch dashboard from api
const dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid); dashDTO = await loaderSrv.loadDashboard(urlType, urlSlug, urlUid);
// set initializing state } catch (err) {
dispatch(setDashboardLoadingState(DashboardLoadingState.Initializing)); dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
// create model console.log(err);
const dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta); return;
// init services }
injector.get('timeSrv').init(dashboard); // set initializing state
injector.get('annotationsSrv').init(dashboard); dispatch(setDashboardLoadingState(DashboardLoadingState.Initializing));
// template values service needs to initialize completely before // create model
// the rest of the dashboard can load let dashboard: DashboardModel;
injector.get('variableSrv').init(dashboard) try {
.catch(err => { dashboard = new DashboardModel(dashDTO.dashboard, dashDTO.meta);
dispatch(notifyApp(createErrorNotification('Templating init failed'))); } catch (err) {
}) dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
.finally(() => { console.log(err);
return;
}
dashboard.processRepeats(); // init services
dashboard.updateSubmenuVisibility(); injector.get('timeSrv').init(dashboard);
dashboard.autoFitPanels(window.innerHeight); 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; scope.dashboard = dashboard;
injector.get('dashboardViewStateSrv').create(scope); injector.get('dashboardViewStateSrv').create(scope);
injector.get('keybindingSrv').setupDashboardBindings(scope, dashboard); injector.get('keybindingSrv').setupDashboardBindings(scope, dashboard);
})
.catch(err => {
dispatch(setDashboardLoadingState(DashboardLoadingState.Error));
});
} catch (err) { } 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
import { DashboardState, DashboardLoadingState } from 'app/types/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 { reducerFactory } from 'app/core/redux';
import { processAclItems } from 'app/core/utils/acl'; import { processAclItems } from 'app/core/utils/acl';
export const initialState: DashboardState = { export const initialState: DashboardState = {
loadingState: DashboardLoadingState.NotStarted, loadingState: DashboardLoadingState.NotStarted,
dashboard: null, model: null,
permissions: [], permissions: [],
}; };
...@@ -24,6 +24,13 @@ export const dashboardReducer = reducerFactory(initialState) ...@@ -24,6 +24,13 @@ export const dashboardReducer = reducerFactory(initialState)
loadingState: action.payload loadingState: action.payload
}), }),
}) })
.addMapper({
filter: setDashboardModel,
mapper: (state, action) => ({
...state,
model: action.payload
}),
})
.create() .create()
export default { export default {
......
public/app/types/dashboard.ts
import { DashboardAcl } from './acl'; import { DashboardAcl } from './acl';
export interface Dashboard { export interface MutableDashboard {
} }
export enum DashboardLoadingState { export enum DashboardLoadingState {
...@@ -12,7 +12,7 @@ export enum DashboardLoadingState { ...@@ -12,7 +12,7 @@ export enum DashboardLoadingState {
} }
export interface DashboardState { export interface DashboardState {
dashboard: Dashboard | null; model: MutableDashboard | null;
loadingState: DashboardLoadingState; loadingState: DashboardLoadingState;
permissions: DashboardAcl[] | null; 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