ui/src/main/js/components/JobListItem.js

import React from 'react';
import { Link } from 'react-router-dom';

import Icon from 'components/Icon';

import { TASK_COUNTS } from 'utils/Job';

export function JobTaskStats({ stats }) {
  const taskStats = [];
  TASK_COUNTS.forEach((k) => {
    if (stats[k] > 0) {
      const label = k.replace('TaskCount', '');
      taskStats.push(<li key={k}><span className={`img-circle ${label}-task`} /> {stats[k]} </li>);
    }
  });
  return <ul className='job-task-stats'>{taskStats}</ul>;
}

export default function JobListItem(props) {
  const {job: {job: { cronSchedule, key: {role, name, environment}, taskConfig }, stats}} = props;

  const envLink = (props.env) ? null : (<td className='job-list-env'>
    <Link to={`/scheduler/${role}/${environment}`}>{environment}</Link>
  </td>);

  return (<tr key={`${environment}/${name}`}>
    <td className='job-list-type'>
      {taskConfig.isService ? 'service' : (cronSchedule) ? 'cron' : 'adhoc'}
    </td>
    {envLink}
    <td className='job-list-name' value={name}>
      <h4>
        <Link to={`/scheduler/${role}/${environment}/${name}`}>
          {name}
          {taskConfig.production ? <Icon name='star' /> : ''}
        </Link>
      </h4>
    </td>
    <td className='job-list-stats'>
      <JobTaskStats stats={stats} />
    </td>
  </tr>);
}