woodpecker/web/src/screens/repo/screens/build/menu.js

import React, { Component } from "react";
import RepoMenu from "../builds/menu";
import { RefreshIcon, CloseIcon } from "shared/components/icons";

import { cancelBuild, restartBuild } from "shared/utils/build";
import { findChildProcess } from "shared/utils/proc";
import { repositorySlug } from "shared/utils/repository";

import { branch } from "baobab-react/higher-order";
import { inject } from "config/client/inject";

const binding = (props, context) => {
	const { owner, repo, build } = props.match.params;
	const slug = repositorySlug(owner, repo);
	const number = parseInt(build);
	return {
		repo: ["repos", "data", slug],
		build: ["builds", "data", slug, number],
	};
};

@inject
@branch(binding)
export default class BuildMenu extends Component {
	constructor(props, context) {
		super(props, context);

		this.handleCancel = this.handleCancel.bind(this);
		this.handleRestart = this.handleRestart.bind(this);
	}

	handleRestart() {
		const { dispatch, drone, repo, build } = this.props;
		dispatch(restartBuild, drone, repo.owner, repo.name, build.number);
	}

	handleCancel() {
		const { dispatch, drone, repo, build, match } = this.props;
		const proc = findChildProcess(build.procs, match.params.proc || 2);

		dispatch(
			cancelBuild,
			drone,
			repo.owner,
			repo.name,
			build.number,
			proc.ppid,
		);
	}

	render() {
		const { build } = this.props;

		const rightSide = !build ? (
			undefined
		) : (
			<section>
				{build.status === "pending" || build.status === "running" ? (
					<button onClick={this.handleCancel}>
						<CloseIcon />
						<span>Cancel</span>
					</button>
				) : (
					<button onClick={this.handleRestart}>
						<RefreshIcon />
						<span>Restart Build</span>
					</button>
				)}
			</section>
		);

		return (
			<div>
				<RepoMenu {...this.props} right={rightSide} />
			</div>
		);
	}
}