Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

Commit

Permalink
add basic support for nextScheduledAt and lastExecution
Browse files Browse the repository at this point in the history 
FE: hook up nextScheduledAt and lastExecuted

update IntervalFormatter proptypes to just show run data

lastExecution tests
  • Loading branch information
@briandennis
briandennis committed Oct 2, 2018
1 parent e2efafb commit e51f7c8
Show file tree
Hide file tree
Showing 8 changed files with 279 additions and 99 deletions.
22 changes: 8 additions & 14 deletions app/components/Settings/scheduler/preview-modal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import Tag from './tag.jsx';
import Status from './status.jsx';
import TagPicker from './tag-picker.jsx';
import {datasetUrl} from '../../../utils/utils.js';
import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING} from '../../../constants/constants.js';
import {getHighlightMode, WAITING_MESSAGE, SAVE_WARNING, FAILED} from '../../../constants/constants.js';
import {getInitialCronMode} from '../cron-picker/cron-helpers.js';

const NO_OP = () => {};
Expand Down Expand Up @@ -228,13 +228,8 @@ export class PreviewModal extends Component {

const initialModeId = getInitialCronMode(query);

// TODO this.props.value.lastExecution
const run = {
completedAt: Date.now() - 1000,
rowCount: 64,
duration: 3 * 1000,
status: 'OK'
};
const run = query.lastExecution;
const now = Date.now();

content = (
<Column
Expand Down Expand Up @@ -276,7 +271,7 @@ export class PreviewModal extends Component {
)}
<Row style={headingRowStyle}>
<Column style={{width: 'auto', marginRight: '32px', justifyContent: 'center'}}>
<Status size={40} status={run.status} />
<Status size={40} status={run && run.status} />
</Column>
<Column>
<Row className="sql-preview" style={flexStart}>
Expand Down Expand Up @@ -383,16 +378,16 @@ export class PreviewModal extends Component {
<em style={valueStyle}>
<span
style={{
color: run.status !== 'FAILED' ? '#30aa65' : '#ef595b'
color: (run && run.status) !== FAILED ? '#30aa65' : '#ef595b'
}}
>
{ms(Date.now() - run.completedAt, {
{ms(now - run.completedAt, {
long: true
})}{' '}
ago
</span>
<br />
{`${run.rowCount} rows in ${ms(run.duration, {
{`${run.rowCount} rows in ${ms(run.duration / 1000, {
long: true
})}`}
</em>
Expand All @@ -402,9 +397,8 @@ export class PreviewModal extends Component {
<Row style={rowStyle}>
<div style={keyStyle}>Next Execution</div>
<em style={valueStyle}>
{/* TODO query.nextScheduledAt */}
in{' '}
{ms((query.nextScheduledAt || Date.now() + 5000) - Date.now(), {
{ms((query.nextScheduledAt || now) - now, {
long: true
})}
</em>
Expand Down
94 changes: 51 additions & 43 deletions app/components/Settings/scheduler/scheduler.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,38 +16,42 @@ import SQL from './sql.jsx';
import Tag from './tag.jsx';
import Status from './status.jsx';

import {SQL_DIALECTS_USING_EDITOR} from '../../../constants/constants';
import {SQL_DIALECTS_USING_EDITOR, FAILED} from '../../../constants/constants';

import './scheduler.css';

const NO_OP = () => {};

const ROW_HEIGHT = 84;

const sortLastExecution = (key, reverse) => (a, b) => {
const s = (a.lastExecution && a.lastExecution[key]) || 0 - (b.lastExecution && b.lastExecution[key]) || 0;
return reverse ? -1 * s : s;
};
const SORT_OPTIONS = [
{
label: 'Least recently run',
value: (a, b) => a.completedAt - b.completedAt
label: 'Most recently run',
value: sortLastExecution('completedAt', true)
},
{
label: 'Most recently run',
value: (a, b) => b.completedAt - a.completedAt
label: 'Least recently run',
value: sortLastExecution('completedAt')
},
{
label: 'Longest duration',
value: (a, b) => b.duration - a.duration
value: sortLastExecution('duration', true)
},
{
label: 'Shortest duration',
value: (a, b) => a.duration - b.duration
value: sortLastExecution('duration')
},
{
label: 'Most rows',
value: (a, b) => b.rowCount - a.rowCount
value: sortLastExecution('rowCount', true)
},
{
label: 'Least rows',
value: (a, b) => a.rowCount - b.rowCount
value: sortLastExecution('rowCount')
}
];

Expand Down Expand Up @@ -111,44 +115,48 @@ class IntervalFormatter extends React.Component {
* Object passed by `react-data-grid` to each row. Here the value
* is an object containg the required `refreshInterval`.
*/
value: PropTypes.shape({
refreshInterval: PropTypes.number.isRequired,
cronInterval: PropTypes.string,
status: PropTypes.string
})
value: PropTypes.oneOfType([
PropTypes.shape({
completedAt: PropTypes.number,
duration: PropTypes.number,
rowsCount: PropTypes.number,
status: PropTypes.string
}),
// when value is undefined, `react-data-grid` passes ''
PropTypes.string
])
};

render() {
// TODO this.props.value.lastExecution
const run = {
completedAt: Date.now() - 1000,
rowCount: 64,
duration: 3 * 1000,
status: 'OK'
};
const run = this.props.value;

return (
<Row>
<Column>
<div
style={{
fontSize: 18,
color: run.status !== 'FAILED' ? '#30aa65' : '#ef595b'
}}
>
{`${ms(Date.now() - run.completedAt, {
long: true
})} ago`}
</div>
<em
style={{
fontSize: 12
}}
>
{`${run.rowCount} rows in ${ms(run.duration, {
long: true
})}`}
</em>
{!run && '—'}
{run && (
<div
style={{
fontSize: 18,
color: run.status !== FAILED ? '#30aa65' : '#ef595b'
}}
>
{`${ms(Date.now() - run.completedAt, {
long: true
})} ago`}
</div>
)}
{run && (
<em
style={{
fontSize: 12
}}
>
{`${run.rowCount} rows in ${ms(run.duration / 1000, {
long: true
})}`}
</em>
)}
</Column>
</Row>
);
Expand All @@ -158,7 +166,7 @@ class IntervalFormatter extends React.Component {
function mapRow(row) {
return {
query: row,
run: row
run: row.lastExecution
};
}

Expand Down Expand Up @@ -361,13 +369,13 @@ class Scheduler extends Component {
</Column>
<Column style={{padding: '4px 0', marginLeft: 24}}>
Success ({
rows.filter(row => (row.lastExecution && row.lastExecution.status) !== 'FAILED')
rows.filter(row => (row.lastExecution && row.lastExecution.status) !== FAILED)
.length
})
</Column>
<Column style={{padding: '4px 0', marginLeft: 8}}>
Error ({
rows.filter(row => (row.lastExecution && row.lastExecution.status) === 'FAILED')
rows.filter(row => (row.lastExecution && row.lastExecution.status) === FAILED)
.length
})
</Column>
Expand Down
6 changes: 4 additions & 2 deletions app/components/Settings/scheduler/status.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
import React from 'react';
import PropTypes from 'prop-types';

import {OK} from '../../../constants/constants';

const Status = ({status, size}) => {
if (status === 'OK') {
if (status === OK) {
return <img width={size} height={size} src="images/checkmark.png" />;
}

Expand All @@ -16,7 +18,7 @@ Status.propTypes = {
};

Status.defaultProps = {
status: 'OK'
status: OK
};

export default Status;
4 changes: 4 additions & 0 deletions app/constants/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
/* eslint-disable no-multi-str */
import {concat} from 'ramda';

export const OK = 'ok';
export const RUNNING = 'running';
export const FAILED = 'failed';

export const DIALECTS = {
MYSQL: 'mysql',
MARIADB: 'mariadb',
Expand Down
Loading

0 comments on commit e51f7c8

Please sign in to comment.