Commit 920e332a authored by Matija Obreza's avatar Matija Obreza

KPI UI updates

parent 72c3b59c
......@@ -42,7 +42,6 @@ module.exports = {
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
contentBase: false,
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {translate} from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
// Actions
import {deleteExecution, executeExecution, getExecution} from 'kpi/actions/admin';
import { deleteExecution, executeExecution, getExecution } from 'kpi/actions/admin';
// Models
import ExecutionDetails from 'model/kpi/ExecutionDetails';
import ExecutionRun from 'model/kpi/ExecutionRun';
// Service
import KpiService from 'service/genesys/KpiService';
// UI
import {PageContents, PageSection} from 'ui/layout/PageLayout';
import { PageContents, PageSection } from 'ui/layout/PageLayout';
import Loading from 'ui/common/Loading';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PrettyDate from 'ui/common/time/PrettyDate';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import { Properties, PropertiesItem } from 'ui/common/Properties';
import Grid from '@material-ui/core/Grid/Grid';
import Button from '@material-ui/core/Button';
import ExecutionCard from './c/ExecutionCard';
import RunTable from './c/RunTable';
import ExecutionDialog from './ExecutionDialog';
......@@ -37,6 +36,7 @@ interface IExecutionProps extends React.ClassAttributes<any> {
class ExecutionDisplay extends React.Component<IExecutionProps, any> {
protected static needs = [
({ params: { shortName } }) => getExecution(shortName),
];
public state = {
......@@ -91,6 +91,10 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
const lastRun = executionDetails === null ? null : executionDetails.lastRun;
const {currentRun} = this.state;
if (stillLoading) {
return <Loading />;
}
return (
<div>
<ContentHeaderWithButton title={ t(`kpi.admin.p.executionDisplay.title`) } buttons={
......@@ -101,9 +105,43 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
</div>
}/>
<PageContents>
{ stillLoading ? <Loading/> : <ExecutionCard execution={ execution }/> }
<Grid container spacing={ 8 }>
<Grid item sm={ 12 }>
<PageSection title={ execution.title }>
<Properties>
<PropertiesItem title={ t('common:label.name') }><code>{ execution.name }</code></PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.type') }><b>{ execution.type }</b></PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.property') }><code>{ execution.parameter.entity }.{ execution.property }</code></PropertiesItem>
</Properties>
</PageSection>
</Grid>
<Grid item sm={ 12 } md={ 6 }>
<PageSection title={ t('kpi.admin.c.executionCard.parameterInfo') }>
<Properties>
<PropertiesItem title={ t('common:label.title') }>{ execution.parameter.title }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterDescription') }>{ execution.parameter.description }</PropertiesItem>
<PropertiesItem title={ t('common:label.name') }><code>{ execution.parameter.name }</code></PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterEntity') }><code>{ execution.parameter.entity }</code></PropertiesItem>
{ execution.parameter.condition && <PropertiesItem title={ t('kpi.admin.c.executionCard.parameterCondition') }><code>{ execution.parameter.condition }</code></PropertiesItem> }
</Properties>
</PageSection>
</Grid>
{ execution.executionDimensions && execution.executionDimensions.length > 0 &&
<Grid item sm={ 12 } md={ 6 }>
<PageSection title={ t('kpi.admin.c.executionCard.dimensionsInfo') }>
{ execution.executionDimensions.map((dimension) => (
<Properties key={ dimension.id }>
<PropertiesItem title={ t('common:label.name') }>{ dimension.dimension.title }</PropertiesItem>
{ dimension.field && <PropertiesItem title={ t('kpi.admin.c.executionCard.dimensionField') }>{ execution.parameter.entity }.{ dimension.field }</PropertiesItem> }
{ dimension.link && <PropertiesItem title={ t('kpi.admin.c.executionCard.dimensionLink') }>{ execution.parameter.entity }.{ dimension.link }</PropertiesItem> }
</Properties>
)) }
</PageSection>
</Grid>
}
<Grid container spacing={ 8 } style={ {width: 'calc(100% - 24px)'} }>
<Grid item sm={ 12 } md={ 6 }>
<PageSection title={ currentRun === null ? t('kpi.admin.p.executionDisplay.lastRun') : <span>{ t('kpi.admin.p.executionDisplay.runFrom') }<PrettyDate value={ currentRun.timestamp }/></span> }>
<RunTable execution={ execution } runInfo={ currentRun || lastRun } />
......
import * as React from 'react';
import {translate} from 'react-i18next';
import {withStyles} from '@material-ui/core/styles';
import { translate } from 'react-i18next';
import { withStyles } from '@material-ui/core/styles';
// model
import Execution from 'model/kpi/Execution';
// ui
import Card from '@material-ui/core/Card';
import {CardContent} from 'ui/common/Card';
import {ExecutionLink} from 'ui/genesys/Links';
import {Properties, PropertiesItem} from 'ui/common/Properties';
import {PageSection} from 'ui/layout/PageLayout';
import { CardContent } from 'ui/common/Card';
import { ExecutionLink } from 'ui/genesys/Links';
import { Properties, PropertiesItem } from 'ui/common/Properties';
const styles = () => ({
......@@ -30,35 +29,14 @@ const ExecutionCard = ({execution, index, compact = false, classes, style = {},
<div>Looks at { execution.type } of { execution.property } of { execution.parameter.entity }</div>
</CardContent>
:
<div>
<PageSection title={ t('kpi.admin.c.executionCard.mainInformation') }>
<Properties>
<PropertiesItem title={ t('common:label.name') }>{ execution.name }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.type') }>{ execution.type }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.property') }>{ execution.property }</PropertiesItem>
</Properties>
</PageSection>
<PageSection title={ t('kpi.admin.c.executionCard.parameterInfo') }>
<Properties>
<PropertiesItem title={ t('common:label.title') }>{ execution.parameter.title }</PropertiesItem>
<PropertiesItem title={ t('common:label.name') }>{ execution.parameter.name }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterEntity') }>{ execution.parameter.entity }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterCondition') }>{ execution.parameter.condition }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.parameterDescription') }>{ execution.parameter.description }</PropertiesItem>
</Properties>
</PageSection>
{ execution.executionDimensions && execution.executionDimensions.length > 0 &&
<PageSection title={ t('kpi.admin.c.executionCard.dimensionsInfo') }>
{ execution.executionDimensions.map((dimension) => (
<Properties key={ dimension.id }>
<PropertiesItem title={ t('kpi.admin.c.executionCard.dimensionField') }>{ dimension.field }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.dimensionLink') }>{ dimension.link }</PropertiesItem>
<PropertiesItem title={ t('common:label.name') }>{ dimension.dimension.name }</PropertiesItem>
</Properties>
)) }
</PageSection>
}
</div>
<CardContent>
<Properties>
<PropertiesItem title={ t('common:label.title') }>{ execution.title }</PropertiesItem>
<PropertiesItem title={ t('common:label.name') }><code>{ execution.name }</code></PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.type') }>{ execution.type }</PropertiesItem>
<PropertiesItem title={ t('kpi.admin.c.executionCard.property') }>{ execution.property }</PropertiesItem>
</Properties>
</CardContent>
}
</Card>
}
......
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