ExecutionDisplay.tsx 7.8 KB
Newer Older
Matija Obreza's avatar
Matija Obreza committed
1
import * as React from 'react';
Matija Obreza's avatar
Matija Obreza committed
2
3
4
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
Matija Obreza's avatar
Matija Obreza committed
5
// Actions
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
6
import { deleteExecution, executeExecution, getExecution, listDimensions, listParameters } from 'kpi/actions/admin';
Matija Obreza's avatar
Matija Obreza committed
7
8
// Models
import ExecutionDetails from 'model/kpi/ExecutionDetails';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
9
10
11
import ExecutionRun from 'model/kpi/ExecutionRun';
// Service
import KpiService from 'service/genesys/KpiService';
Matija Obreza's avatar
Matija Obreza committed
12
// UI
Matija Obreza's avatar
Matija Obreza committed
13
import { PageContents, PageSection } from 'ui/layout/PageLayout';
Matija Obreza's avatar
Matija Obreza committed
14
15
16
import Loading from 'ui/common/Loading';
import ContentHeaderWithButton from 'ui/common/heading/ContentHeaderWithButton';
import PrettyDate from 'ui/common/time/PrettyDate';
Matija Obreza's avatar
Matija Obreza committed
17
import { Properties, PropertiesItem } from 'ui/common/Properties';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
18
import Grid from '@material-ui/core/Grid/Grid';
Matija Obreza's avatar
Matija Obreza committed
19
import Button from '@material-ui/core/Button';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
20
21
22
23
import RunTable from './c/RunTable';
import ExecutionDialog from './ExecutionDialog';

// import { parse } from 'query-string';
Matija Obreza's avatar
Matija Obreza committed
24
25
26
27
28
29
30
31
32

interface IExecutionProps extends React.ClassAttributes<any> {
  classes: any;
  t?: any;

  shortName: string;
  executionDetails: ExecutionDetails;
  getExecution: any;
  executeExecution: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
33
  deleteExecution: any;
Matija Obreza's avatar
Matija Obreza committed
34
35
36
37
38
}

class ExecutionDisplay extends React.Component<IExecutionProps, any> {

  protected static needs = [
Matija Obreza's avatar
Matija Obreza committed
39
    ({ params: { shortName } }) => getExecution(shortName),
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
40
41
      ({}) => listParameters({}),
      ({}) => listDimensions({}),
Matija Obreza's avatar
Matija Obreza committed
42
43
  ];

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
45
46
47
48
49
50
51
52
53
  public state = {
    currentRun: null,
  };

  private delete = () => {
    const {deleteExecution, executionDetails} = this.props;
    console.log('Executing');
    deleteExecution(executionDetails.execution);
  }

Matija Obreza's avatar
Matija Obreza committed
54
55
56
  public componentWillMount() {
    const { shortName, executionDetails, getExecution } = this.props;
    console.log(`cwm: `, executionDetails);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
57
    if (!executionDetails || !executionDetails.execution || executionDetails.execution.name !== shortName) {
Matija Obreza's avatar
Matija Obreza committed
58
59
60
61
62
      console.log(`Loading execution ${shortName}`);
      getExecution(shortName);
    }
  }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
  private execute = () => {
    const { executeExecution, executionDetails } = this.props;
    console.log('Executing');
    executeExecution(executionDetails.execution.name);
  }

  private loadRunInfo = (runInfo: ExecutionRun) => {
    const {executionDetails: {lastRun, execution: {name}}} = this.props;

    if (runInfo.timestamp === lastRun.timestamp) {
      this.setState({currentRun: null});
    } else {
      KpiService.executionRun(name, runInfo.id).then((run) => this.setState({currentRun: run}));
    }
  }

Matija Obreza's avatar
Matija Obreza committed
79
80
  public componentWillReceiveProps(nextProps) {
    const { shortName, executionDetails, getExecution } = nextProps;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
81
    if (!executionDetails || !executionDetails.execution || executionDetails.execution.name !== shortName) {
Matija Obreza's avatar
Matija Obreza committed
82
83
84
85
86
87
88
89
      console.log(`Reloading execution ${shortName}`);
      getExecution(shortName);
    }
  }

  public render() {
    const { t, shortName, executionDetails } = this.props;

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
90
    const stillLoading = !executionDetails || !executionDetails.execution || executionDetails.execution.name !== shortName;
Matija Obreza's avatar
Matija Obreza committed
91
92
93
    const execution = executionDetails === null ? null : executionDetails.execution;
    const runs = executionDetails === null ? null : executionDetails.runs;
    const lastRun = executionDetails === null ? null : executionDetails.lastRun;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
94
    const {currentRun} = this.state;
Matija Obreza's avatar
Matija Obreza committed
95

Matija Obreza's avatar
Matija Obreza committed
96
97
98
99
    if (stillLoading) {
      return <Loading />;
    }

Matija Obreza's avatar
Matija Obreza committed
100
101
    return (
      <div>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
102
103
104
        <ContentHeaderWithButton title={ t(`kpi.admin.p.executionDisplay.title`) } buttons={
          <div>
            <ExecutionDialog execution={ executionDetails && executionDetails.execution } buttonLabel={ t('common:action.edit') }/>
105
106
            <Button variant="contained" onClick={ this.delete }>{ t('common:action.delete') }</Button>
            <Button variant="contained" onClick={ this.execute }>{ t('kpi.admin.p.executionDisplay.execute') }</Button>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
107
108
          </div>
        }/>
Matija Obreza's avatar
Matija Obreza committed
109
        <PageContents>
Matija Obreza's avatar
Matija Obreza committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
          <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>
            }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

            <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 } />
              </PageSection>
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
              { runs && runs.length > 0 &&
              <PageSection title={ t('kpi.admin.p.executionDisplay.runs') }>
                <Properties>
                  { runs.map((runInfo, i) => (
                    <PropertiesItem numeric key={ runInfo.id } title={ <PrettyDate value={ runInfo.timestamp }/> }>
                      <a onClick={ () => this.loadRunInfo(runInfo) }>{ t('kpi.common.showRun') }</a>
                    </PropertiesItem>
                    )) }
                </Properties>
              </PageSection>
              }
Matija Obreza's avatar
Matija Obreza committed
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
            </Grid>
          </Grid>
        </PageContents>
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  executionDetails: state.kpi.admin.exec.details,
  shortName: ownProps.match.params.shortName,
});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  getExecution,
  executeExecution,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
180
  deleteExecution,
Matija Obreza's avatar
Matija Obreza committed
181
182
183
184
}, dispatch);


export default connect(mapStateToProps, mapDispatchToProps)((translate()(ExecutionDisplay)));