Commit 802a0012 authored by Matija Obreza's avatar Matija Obreza

Dashboard section headings and navigation to KPI details

parent 82567b41
......@@ -26,7 +26,7 @@ export const createApiCaller = (method, payloadType: string) => {
return method(...ensureParamsAmount(method, params), {cancelToken: cancelToken && cancelToken.token})
.then((data) => { // Success
log('Data received: ', data);
// log('Data received: ', data);
dispatch({ type: payloadType, payload: { apiCall: ApiCall.success(data) } });
return Promise.resolve(data);
})
......@@ -62,7 +62,7 @@ export const createPureApiCaller = (method) => {
return method(...ensureParamsAmount(method, params), {cancelToken: cancelToken && cancelToken.token})
.then((data) => { // Success
log('Data received: ', data);
// log('Data received: ', data);
return Promise.resolve(data);
})
.catch((err) => { // Failed
......
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
/*tslint:disable*/
const styles = (theme) => ({
root: {
margin: '2rem 0 1rem',
fontFamily: 'Roboto-Light',
borderBottom: 'solid 2px #808080',
'&:first-child': {
marginTop: 0,
},
'& h2': {
margin: 0,
}
}
});
/*tslint:enable*/
const SectionHeader = ({ title, subTitle = null, classes }: { title: any, subTitle?: string, classes: any }) => (
<div className={ classes.root }>
<h2>{ title }</h2>
{ subTitle && <p>{ subTitle }</p> }
</div>
);
export default withStyles(styles)(SectionHeader);
......@@ -12,11 +12,14 @@ import { LineChart } from 'react-chartkick';
import * as moment from 'moment';
import KpiService from 'service/genesys/KpiService';
import ExecutionRun from 'model/kpi/ExecutionRun';
import SectionHeader from 'ui/common/heading/SectionHeader';
import navigateTo from 'actions/navigation';
require('chart.js');
interface IAdminDashProps extends React.ClassAttributes<any> {
title: string;
navigateTo: any;
}
const DEFAULT_CHART_OPTIONS = {
......@@ -78,9 +81,10 @@ class AdministrationDashboard extends React.Component<IAdminDashProps> {
KpiService.listExecutions({ size: 20 }).then((paged) => paged.content)
.then((executions) => {
executions.forEach((execution) => {
console.log(`Loading ${execution.name}`);
// console.log(`Loading ${execution.name}`);
KpiService.executionRuns(execution.name, { size: 20 }).then((runs) => {
kpiCharts.push({
name: execution.name,
title: execution.title,
chart: makeKpiChart(runs.content),
});
......@@ -95,21 +99,47 @@ class AdministrationDashboard extends React.Component<IAdminDashProps> {
});
}
private openKpi = (name: string) => () => {
const { navigateTo } = this.props;
navigateTo(`/admin/kpi/${name}`);
}
public render() {
return (
<div>
<PageTitle title="You're root, have fun!"/>
<ContentHeaderWithButton title="You're root, have fun!"/>
<PageContents className="pt-1rem">
<SectionHeader title="Accessions" subTitle="Metrics related to accessions over the last 20 days" />
<Grid container spacing={ 8 }>
{ this.state.kpiCharts.filter((kpiChart) => kpiChart.name.match(/accession/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item sm={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
<LineChart download height="200px" thousands="," { ...kpiChart.chart } />
</PageSection>
</Grid>
)) }
</Grid>
<SectionHeader title="Datasets and Subsets" subTitle="Metrics related to the Catalog over the last 20 days" />
<Grid container spacing={ 8 }>
{ this.state.kpiCharts.filter((kpiChart) => kpiChart.name.match(/subset|dataset|descriptor/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item sm={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
<LineChart download height="200px" thousands="," { ...kpiChart.chart } />
</PageSection>
</Grid>
)) }
</Grid>
<SectionHeader title="Other" subTitle="Other metrics" />
<Grid container spacing={ 8 }>
{ this.state.kpiCharts.map((kpiChart) => (
<Grid item sm={ 12 } md={ 6 }>
<PageSection title={ kpiChart.title }>
{ this.state.kpiCharts.filter((kpiChart) => ! kpiChart.name.match(/accession|subset|dataset|descriptor/)).map((kpiChart) => (
<Grid key={ kpiChart.name } item sm={ 12 } md={ 6 }>
<PageSection title={ <div style={ { cursor: 'pointer' } } onClick={ this.openKpi(kpiChart.name) }>{ kpiChart.title }</div> }>
<LineChart download height="200px" thousands="," { ...kpiChart.chart } />
</PageSection>
</Grid>
)) }
</Grid>
</Grid>
</PageContents>
</div>
);
......@@ -121,7 +151,7 @@ const mapStateToProps = (state, ownProps) => ({
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
// not now
navigateTo,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(AdministrationDashboard);
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