Commit 38e732d3 authored by Matija Obreza's avatar Matija Obreza
Browse files

Updates for KPI runs display

parent ddc84cfb
......@@ -127,7 +127,7 @@ export default function admin(state = INITIAL_STATE, action: IReducerAction) {
case ADMIN_RECEIVE_EXEC_DET: {
return update(state, {
exec: { details: { $set: action.payload } },
exec: { details: { $set: action.payload }, changes: { $set: null } },
});
}
case ADMIN_RECEIVE_EXEC_LASTRUN: {
......
......@@ -185,6 +185,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
showSnackbar={ showSnackbar }
loadExecutionChanges={ loadExecutionChanges }
executionName={ execution.name }
executionType={ execution.type }
availableDimensions={ [...execution.executionDimensions, ...execution.groups] }
/>
:
......
......@@ -130,8 +130,8 @@ class ChangesFilterField extends React.Component<any> {
onChange={ (e) => this.setState({name: e.target.value}) }
>
{ dimensions && dimensions.map((dim) => (
<MenuItem key={ 0 } value={ `${dim.link ? `${dim.link}.` : ''}${dim.field}` }>
{ dim.alias || `${dim.link ? `${dim.link}.` : ''}.${dim.field}` }
<MenuItem key={ 0 } value={ dim.alias || `${dim.link ? `${dim.link}.` : ''}${dim.field}` }>
{ dim.alias || `${dim.link ? `${dim.link}.` : ''}${dim.field}` }
</MenuItem>
)) }
</Select>
......
......@@ -33,6 +33,7 @@ const styles = (theme) => ({
interface IChangesSectionProps extends React.ClassAttributes<any> {
changes: any;
executionName: string;
executionType: string;
availableDimensions?: Array<Dimension<any>>;
loadExecutionChanges: (name, {days, to, from}: { days: number, to: string, from: string }, keys) => void;
classes: any;
......@@ -82,7 +83,7 @@ class ChangesSection extends React.Component<IChangesSectionProps> {
}
public render() {
const {changes, classes, availableDimensions, t} = this.props;
const {changes, classes, executionType, availableDimensions, t} = this.props;
return (
<Grid container spacing={ 8 } justify="space-between">
......@@ -99,7 +100,7 @@ class ChangesSection extends React.Component<IChangesSectionProps> {
{ t('common:action.copyToClipboard') }&nbsp;&nbsp; <FileCopyIcon fontSize="small"/>
</Button>
</div>
<ObservationsTable id={ `changes-table-${index}` } executionType="COUNT" observations={ changes[date] } highlight showSum/>
<ObservationsTable id={ `changes-table-${index}` } executionType={ executionType } observations={ changes[date] } highlight showSum/>
</div>
))
:
......
......@@ -11,28 +11,41 @@ const styles = (theme) => ({
overflowY: 'scroll' as 'scroll',
maxHeight: '12rem',
},
/*tslint:disable*/
header: {
background: 'green',
// background: 'green',
'& td': {
padding: '0.4em 0',
},
},
footer: {
// background: 'green',
backgroundColor: '#e5e5e5',
'& td': {
padding: '0.4em 0',
},
},
/*tslint:disable*/
highlightPositive: {
color: '#88ba42',
fontWeight: 500,
// fontWeight: 500,
'&:before': {
content: '"+"',
},
},
highlightNegative: {
color: '#ff0000',
fontWeight: 500,
// fontWeight: 500,
},
body: {
'&:nth-child(even)': {
background: '#f3f2ee'
'& tr:nth-child(even)': {
backgroundColor: '#f3f2ee'
},
'&:nth-child(odd)': {
background: '#f8f7f5'
'& tr:nth-child(odd)': {
backgroundColor: '#f8f7f5'
},
'& td': {
padding: '0.1em 0',
}
},
/*tslint:enable*/
});
......@@ -64,7 +77,7 @@ class ObservationsTable extends React.Component<IObservationsTableProps> {
public render() {
const {executionType, observations, classes, highlight, id, t, showSum} = this.props;
const total = observations && observations.length > 0 && observations.map((obs) => obs.value).reduce((acc, current) => acc + current);
const total = observations && observations.length > 0 && observations.map((obs) => obs.value).reduce((acc, current) => acc + current);
return (
......@@ -78,7 +91,7 @@ class ObservationsTable extends React.Component<IObservationsTableProps> {
</td>
)) }
<td className="text-right">{ executionType }</td>
{ executionType === 'AVERAGE' && <td className="text-right">STDDEV</td> }
{ ! highlight && executionType === 'AVERAGE' && <td className="text-right">STDDEV</td> }
</tr>
</thead>
}
......@@ -93,21 +106,23 @@ class ObservationsTable extends React.Component<IObservationsTableProps> {
<td
className={ `text-right ${highlight && (obs.value >= 0 ? classes.highlightPositive : classes.highlightNegative)}` }>
<Number value={ obs.value }/></td>
{ obs.stdDev !== null && <td className="text-right"><Number value={ obs.stdDev }/></td> }
{ ! highlight && obs.stdDev !== null && <td className="text-right"><Number value={ obs.stdDev }/></td> }
</tr>
)) }
</tbody>
}
{ showSum &&
{ showSum && (executionType === 'COUNT' || executionType === 'SUM') &&
<tfoot className={ classes.footer }>
<tr key={ `total` }>
<td><b>{ t('kpi.admin.c.observationsTable.total') }</b></td>
<td
className={ `text-right ${highlight && total >= 0 ? classes.highlightPositive : classes.highlightNegative}` }
colSpan={ observations[0].dimensions.length }
>
<b>{ total }</b></td>
<b><Number value={ total } /></b></td>
</tr>
}
</tbody>
</tfoot>
}
</table>
);
......
......@@ -137,6 +137,7 @@ class RunsSection extends React.Component<IRunsSectionProps> {
</span>
</span>
<ObservationsTable
showSum
executionType={ execution.type }
observations={ currentRun ? currentRun.observations : lastRun.observations }
/>
......
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