KPI UI updates

config/webpack-base.config.js

@@ -42,7 +42,6 @@ module.exports = {
     },
 
     devServer: {
-        historyApiFallback: true,
         hot: true,
         inline: true,
         contentBase: false,

src/kpi/ui/admin/ExecutionDisplay.tsx

 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 } />

src/kpi/ui/admin/c/ExecutionCard.tsx

 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>
     }