github.com/justinjmoses/evergreen@v0.0.0-20170530173719-1d50e381ff0d/public/static/js/jsx/tasks_grid.jsx

const MaxFailedTestDisplay = 5;

// endOfPath strips off all of the begging characters from a file path so that just the file name is left.
function endOfPath(input) {
  var lastSlash = input.lastIndexOf('/');
  if (lastSlash === -1 || lastSlash === input.length - 1) {
    // try to find the index using windows-style filesystem separators
    lastSlash = input.lastIndexOf('\\');
    if (lastSlash === -1 || lastSlash === input.length - 1) {
      return input;
    }
  }
  return input.substring(lastSlash + 1);
}

// taskStatusClass returns the css class that should be associated with a given task so that it can
// be properly styled.
function taskStatusClass(task) {
  if (task !== Object(task)) {
	  return '';
  }

  if (task.status == 'undispatched') {
    if (!task.activated) {
      return 'inactive';
    } else {
      return 'unstarted';
    }
  }

  if (task.status == 'failed') {
    if ('task_end_details' in task) {
      if ('type' in task.task_end_details && task.task_end_details.type == 'system') {
         return 'system-failed';
      }
      if (!!task.task_end_details.timed_out && task.task_end_details.desc == 'heartbeat') {
        return 'system-failed';
      }
    }
    return 'failed';
  }
  return task.status;
}

// labelFromTask returns the human readable label for a task's status given the details of its execution.
function labelFromTask(task){
  if (task !== Object(task)) {
	  return '';
  }

  if (task.status == 'undispatched') {
    if (task.activated) {
      if (task.task_waiting) {
        return task.task_waiting;
      }
      return 'scheduled';
    } else if (+task.dispatch_time == 0 || (typeof task.dispatch_time == "string" && +new Date(task.dispatch_time) <= 0)) {
       return 'not scheduled';
    }
  }

  if (task.status == 'failed' && 'task_end_details' in task){
    if ('timed_out' in task.task_end_details) {
      if (task.task_end_details.timed_out && task.task_end_details.desc == 'heartbeat') {
        return 'system unresponsive';
      }
      if (task.task_end_details.type == 'system') {
        return 'system timed out';
      }
      return 'test timed out';
    }
    if (task.task_end_details.type == 'system') {
      return 'system failure';
    }
  }

  return task.status;
}

// stringifyNanoseconds takes an integer count of nanoseconds and
// returns it formatted as a human readable string, like "1h32m40s"
// If skipDayMax is true, then durations longer than 1 day will be represented
// in hours. Otherwise, they will be displayed as '>=1 day'
function stringifyNanoseconds(input, skipDayMax, skipSecMax) {
  var NS_PER_MS = 1000 * 1000; // 10^6
  var NS_PER_SEC = NS_PER_MS * 1000
  var NS_PER_MINUTE = NS_PER_SEC * 60;
  var NS_PER_HOUR = NS_PER_MINUTE * 60;

  if (input == 0) {
    return "0 seconds";
  } else if (input < NS_PER_MS) {
    return "< 1 ms";
  } else if (input < NS_PER_SEC) {
    if (skipSecMax){
      return Math.floor(input / NS_PER_MS) + " ms";
    } else {
      return "< 1 second"
    }
  } else if (input < NS_PER_MINUTE) {
    return Math.floor(input / NS_PER_SEC) + " seconds";
  } else if (input < NS_PER_HOUR) {
    return Math.floor(input / NS_PER_MINUTE) + "m " + Math.floor((input % NS_PER_MINUTE) / NS_PER_SEC) + "s";
  } else if (input < NS_PER_HOUR * 24 || skipDayMax) {
    return Math.floor(input / NS_PER_HOUR) + "h " +
        Math.floor((input % NS_PER_HOUR) / NS_PER_MINUTE) + "m " +
        Math.floor((input % NS_PER_MINUTE) / NS_PER_SEC) + "s";
  } else if (input == "unknown") {
    return "unknown";
  }  else {
    return ">= 1 day";
  }
}

// Grid

// The main class that binds to the root div. This contains all the distros, builds, and tasks
function Grid ({data, project, collapseInfo, buildVariantFilter, taskFilter}) {
  return (
    <div className="waterfall-grid">
      {
        data.rows.filter(function(row){
          return row.build_variant.display_name.toLowerCase().indexOf(buildVariantFilter.toLowerCase()) != -1;
        })
        .map(function(row){
          return <Variant row={row} project={project} collapseInfo={collapseInfo} versions={data.versions} taskFilter={taskFilter} currentTime={data.current_time}/>;
        })
      }
    </div> 
  )
};

function filterActiveTasks(tasks, activeStatuses){
  return _.filter(tasks, function(task) { 
      return _.contains(activeStatuses, task.status);
    });
}

// The class for each "row" of the waterfall page. Includes the build variant link, as well as the five columns
// of versions.
function Variant({row, versions, project, collapseInfo, taskFilter, currentTime}) {
      return (
      <div className="row variant-row">
        <div className="col-xs-2 build-variants"> 
          {row.build_variant.display_name}
        </div>
        <div className="col-xs-10"> 
          <div className="row build-cells">
            {
              versions.map(function(version, i){
                  return(<div className="waterfall-build">
                    <Build key={version.ids[0]} 
                                build={row.builds[version.ids[0]]} 
                                rolledUp={version.rolled_up} 
                                collapseInfo={collapseInfo}
                                taskFilter={taskFilter} 
                                currentTime={currentTime}/>
                  </div>
                  );
              })
            }
          </div>
        </div>
      </div>
    )
}


// Each Build class is one group of tasks for an version + build variant intersection
// We case on whether or not a build is active or not, and return either an ActiveBuild or InactiveBuild respectively

function Build({build, collapseInfo, rolledUp, taskFilter, currentTime}){
  // inactive build
  if (rolledUp) {
    return <InactiveBuild/>;
  }

  // no build for this version
  if (!build) {
    return <EmptyBuild />  
  }


  // collapsed active build
  if (collapseInfo.collapsed) {
    activeTasks = filterActiveTasks(build.tasks, collapseInfo.activeTaskStatuses);
    if (activeTasks.length == 0){
      return (
        <CollapsedBuild build={build} activeTaskStatuses={collapseInfo.activeTaskStatuses} />
      )
    }
    // Can be modified to show combinations of tasks by statuses  
    var activeTasks = filterActiveTasks(build.tasks, collapseInfo.activeTaskStatuses)
    return (
      <div>
        <CollapsedBuild build={build} activeTaskStatuses={collapseInfo.activeTaskStatuses} />
        <ActiveBuild tasks={activeTasks} currentTime={currentTime}/>
      </div>
    )
  } 
  // uncollapsed active build
  return (
      <ActiveBuild tasks={build.tasks} taskFilter={taskFilter} currentTime={currentTime}/>
  )
}

// At least one task in the version is not inactive, so we display all build tasks with their appropiate colors signifying their status
function ActiveBuild({tasks, taskFilter, currentTime}){  

  if (taskFilter != null){
    tasks = _.filter(tasks, function(task){
      return task.display_name.toLowerCase().indexOf(taskFilter.toLowerCase()) != -1;
    });
  }

  return (
    <div className="active-build"> 
      {
        _.map(tasks, function(task){
          return <Task task={task} currentTime={currentTime}/>
        })
      }
    </div>
  )
}

// All tasks are inactive, so we display the words "inactive build"
function InactiveBuild ({}){
    return (<div className="inactive-build"> inactive build </div>)
}
// No build associated with a given version and variant, so we render an empty div
function EmptyBuild ({}){
    return (<div></div>)
}

function TooltipContent({task, eta}) {
  var topLineContent = task.display_name + " - " + labelFromTask(task);
  if (task.status == 'success' || task.status == 'failed') {
    var dur = stringifyNanoseconds(task.time_taken);
    topLineContent += ' - ' + dur;
  }

  if (task.status !='failed' || !task.failed_test_names || task.failed_test_names.length == 0) {
    if (task.status == 'started') {
      return(
        <span className="waterfall-tooltip">
          {topLineContent} - {eta}
        </span>
        )
    }
    return (
        <span className="waterfall-tooltip">
          {topLineContent}
        </span>
        )
  }

  if (task.failed_test_names.length > MaxFailedTestDisplay) {
    return (
        <span className="waterfall-tooltip">
          <span>{topLineContent}</span> 
        <div className="header">
          <i className="fa fa-times icon"></i>
          {task.failed_test_names.length} failed tests 
          </div>
       </span>
        )
  }
  return(
      <span className="waterfall-tooltip">
        <span>{topLineContent}</span>
      <div className="failed-tests">
        {
          task.failed_test_names.map(function(failed_test_name){
            return (
                <div> 
                 <i className="fa fa-times icon"></i>
                  {endOfPath(failed_test_name)} 
                </div>
                )
          })
        }
        </div>
        </span>
      )
}

// CountdownClock is a class that manages decrementing duration every second.
// It takes as an argument nanosecondsRemaining and begins counting this number
// down as soon as it is instantiated.
class CountdownClock {
  constructor(nanosecondsRemaining) {
    this.tick = this.tick.bind(this);
    this.countdown = setInterval(this.tick, 1000);
    this.nanosecondsRemaining = nanosecondsRemaining;
  }
  tick() {
    this.nanosecondsRemaining -= 1 * (1000 * 1000 * 1000);
    if (this.nanosecondsRemaining <= 0) {
      this.nanosecondsRemaining = 0;
      clearInterval(this.countdown);
    }
  }
  getNanosecondsRemaining() {
    return this.nanosecondsRemaining;
  }
}

// ETADisplay is a react component that manages displaying a time being
// counted down. It takes as a prop a CountdownClock, which it uses to fetch
// the time left in the count down.
class ETADisplay extends React.Component {
  constructor(props) {
    super(props);
    this.tick = this.tick.bind(this);
    this.componentWillUnmount = this.componentWillUnmount.bind(this);

    this.update = setInterval(this.tick, 1000);
    this.countdownClock = this.props.countdownClock;

    var nsString = stringifyNanoseconds(this.countdownClock.getNanosecondsRemaining());

    if (this.countdownClock.getNanosecondsRemaining() <= 0) {
      nsString = 'unknown';
    }
    this.state = {
      ETAString: nsString
    };

  }

  tick() {
    var nsRemaining = this.countdownClock.getNanosecondsRemaining();
    var nsString = stringifyNanoseconds(nsRemaining);

    if (nsRemaining <= 0) {
      nsString = 'unknown';
      clearInterval(this.countdown);
    }
    this.setState({
      ETAString: nsString,
    });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
    return (<span>ETA: {this.state.ETAString}</span>);
  }
}


// A Task contains the information for a single task for a build, including the link to its page, and a tooltip
function Task({task, currentTime}) {
  var OverlayTrigger = ReactBootstrap.OverlayTrigger;
  var Popover = ReactBootstrap.Popover;
  var Tooltip = ReactBootstrap.Tooltip;
  var eta;
  if (task.status == 'started') {
    var timeRemaining = task.expected_duration - (currentTime - task.start_time);

    var clock = new CountdownClock(timeRemaining);
    var eta = (<ETADisplay countdownClock={clock} />);
  }
  var tooltip = (
      <Tooltip id="tooltip">
        <TooltipContent task={task}  eta={eta}/>
      </Tooltip>
      )
  return (
    <OverlayTrigger placement="top" overlay={tooltip} animation={false}>
      <a href={"/task/" + task.id} className={"waterfall-box " + taskStatusClass(task)} />  
    </OverlayTrigger>
  )
}

// A CollapsedBuild contains a set of PartialProgressBars, which in turn make up a full progress bar
// We iterate over the 5 different main types of task statuses, each of which have a different color association
function CollapsedBuild({build, activeTaskStatuses}){
  var taskStats = build.taskStatusCount;

  var taskTypes = {
    "success"      : taskStats.succeeded, 
    "dispatched"   : taskStats.started, 
    "system-failed": taskStats.timed_out,
    "undispatched" : taskStats.undispatched, 
    "inactive"     : taskStats.inactive,
    "failed"       : taskStats.failed,
  };

  // Remove all task summaries that have 0 tasks
  taskTypes = _.pick(taskTypes, function(count, status){
    return count > 0 && !(_.contains(activeTaskStatuses, status))
  });
  
  return (
    <div className="collapsed-build">
      {
        _.map(taskTypes, function(count, status) {
          return <TaskSummary status={status} count={count} build={build} />;
        }) 
      }
    </div>
  )
}

// A TaskSummary is the class for one rolled up task type
// A CollapsedBuild is comprised of an  array of contiguous TaskSummaries below individual failing tasks 
function TaskSummary({status, count, build}){
  var id_link = "/build/" + build.id;
  var OverlayTrigger = ReactBootstrap.OverlayTrigger;
  var Popover = ReactBootstrap.Popover;
  var Tooltip = ReactBootstrap.Tooltip;
  var tt = <Tooltip id="tooltip">{count} {status}</Tooltip>;
  var classes = "task-summary " + status
  return (
    <OverlayTrigger placement="top" overlay={tt} animation={false}>
      <a href={id_link} className={classes}>
        {count}
      </a>
    </OverlayTrigger>
  )
}