export default function ({
configGroups,
cronJob,
onTaskViewChange,
pendingReasons,
queryParams,
tasks }) {
const activeTasks = sort(tasks.filter(isActive), (t) => t.assignedTask.instanceId);
const numberConfigs = isNully(cronJob) ? (isNully(configGroups) ? '' : configGroups.length) : 1;
const taskView = (activeTasks.length === 0 && !isNully(cronJob))
? <CronJobPreview cronJob={cronJob} />
: <TaskList pendingReasons={pendingReasons} tasks={activeTasks} />;
return (<Tab id='status' name={`Active Tasks (${activeTasks.length})`}>
<PanelGroup>
<Tabs
activeTab={queryParams.taskView}
className='task-status-tabs'
onChange={onTaskViewChange}>
<Tab icon='th-list' id='tasks' name='Tasks'>
{taskView}
</Tab>
<Tab icon='info-sign' id='config' name={`Configuration (${numberConfigs})`}>
<JobConfig cronJob={cronJob} groups={configGroups} />
</Tab>
</Tabs>
</PanelGroup>
</Tab>);
}
render() {
const that = this;
const sortFn = this.state.sortBy ? (j) => j.stats[that.state.sortBy] : (j) => j.job.key.name;
const filterFn = (j) => that.state.filter ? searchJob(j, that.state.filter) : true;
return (<div className='job-list'>
<div className='table-input-wrapper'>
<Icon name='search' />
<input
autoFocus
onChange={(e) => this.setFilter(e)}
placeholder='Search jobs by name, environment, type or tier'
type='text' />
</div>
<JobListSortControl onClick={(key) => this.setSort(key)} />
<table className='psuedo-table'>
<Pagination
data={this.props.jobs}
filter={filterFn}
hideIfSinglePage
isTable
numberPerPage={25}
renderer={(job) => <JobListItem
env={that.props.env}
job={job}
key={`${job.job.key.environment}/${job.job.key.name}`} />}
// Always sort task count sorts in descending fashion (for UX reasons)
reverseSort={!isNully(this.state.sortBy)}
sortBy={sortFn} />
</table>
</div>);
}
export default function TaskStatus({ task, title, neighbors }) {
if (isNully(task)) {
return (<Container>
<PanelGroup title={<StandardPanelTitle title='Active Task' />}>
<div>No active task found.</div>
</PanelGroup>
</Container>);
}
return (<Container>
<PanelGroup title={<StandardPanelTitle title={title || 'Active Task'} />}>
<div className='row'>
<div className='col-md-6'>
<TaskDetails task={task} />
</div>
<div className='col-md-6'>
<StateMachine
className={getClassForScheduleStatus(task.status)}
states={taskToStateMachine(task)} />
</div>
<div className='col-md-12'>
<TaskNeighbors tasks={neighbors} />
</div>
</div>
</PanelGroup>
</Container>);
}
export default function UpdateConfig({ update }) {
if (isNully(update.update.instructions.desiredState)) {
return null;
} else if (update.update.instructions.initialState.length > 0) {
return <UpdateDiff update={update} />;
}
return (<Container>
<PanelGroup noPadding title={<StandardPanelTitle title='Update Config' />}>
<TaskConfig config={update.update.instructions.desiredState.task} />
</PanelGroup>
</Container>);
}