Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
N
nexpie-grafana-theme
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Registry
Registry
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Kornkitt Poolsup
nexpie-grafana-theme
Commits
83937f59
Commit
83937f59
authored
Feb 02, 2019
by
Torkel Ödegaard
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
wip: dashboard in react starting to work
parent
d86e773c
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
62 additions
and
74 deletions
+62
-74
public/app/features/dashboard/containers/DashboardPage.tsx
+4
-36
public/app/features/dashboard/state/actions.ts
+2
-1
public/app/features/dashboard/state/initDashboard.ts
+45
-33
public/app/features/dashboard/state/reducers.ts
+9
-2
public/app/types/dashboard.ts
+2
-2
No files found.
public/app/features/dashboard/containers/DashboardPage.tsx
View file @
83937f59
...
...
@@ -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
View file @
83937f59
...
...
@@ -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
View file @
83937f59
// 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
View file @
83937f59
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
View file @
83937f59
import
{
DashboardAcl
}
from
'./acl'
;
export
interface
Dashboard
{
export
interface
Mutable
Dashboard
{
}
export
enum
DashboardLoadingState
{
...
...
@@ -12,7 +12,7 @@ export enum DashboardLoadingState {
}
export
interface
DashboardState
{
dashboard
:
Dashboard
|
null
;
model
:
Mutable
Dashboard
|
null
;
loadingState
:
DashboardLoadingState
;
permissions
:
DashboardAcl
[]
|
null
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment