Skip to content

Commit

Permalink
clean up components
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesturk
jamesturk committed Jul 18, 2019
1 parent bdf7cd1 commit f6dfae6
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 186 deletions.
170 changes: 2 additions & 168 deletions js/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 1,8 @@
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import RunPage from "./RunPage";

import Home from "./Home";
import TaskPage from "./TaskPage";

function App() {
return (
Expand All @@ -13,171 14,4 @@ function App() {
);
}


class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
tasks: []
};
}

componentDidMount() {
fetch("/api/index")
.then(response => response.json())
.then(data => this.setState(data));
}

render() {
let rows = this.state.tasks.map(task => {
return (<tr key={task.name}>

<td><Link to={ "/task/" task.name }>{ task.name }</Link></td>
<td>{ task.tags }</td>
<td>{ task.enabled ? "yes" : "no" }</td>
</tr>
);
});

return (
<section className="section">
<div className="container">

<table className="table">
<thead>
<tr>
<th>Task</th>
<th>Tags</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
{ rows }
</tbody>
</table>

</div>
</section>
)
}
}

class TaskPage extends React.Component {
constructor(props) {
super(props);
this.state = {
task_name: this.props.match.params.task_name,
task: {},
runs: []
};
this.startRun = this.startRun.bind(this);
}

componentDidMount() {
fetch("/api/task/" this.state.task_name)
.then(response => response.json())
.then(data => this.setState(data));
}

startRun() {
const outerThis = this;
fetch("/api/task/" this.state.task_name "/run")
.then(response => response.json())
.then(function(data) {
let runs = outerThis.state.runs;
runs.unshift(data);
outerThis.setState({runs: runs});
});
}

render() {
let rows = this.state.runs.map(run =>
<tr key={ run.uuid }>
<td><Link to={ "/run/" run.uuid }>{ run.uuid }</Link></td>
<td>{ run.status }</td>
<td>{ run.start }</td>
<td>{ run.end }</td>
</tr>
);
return (
<section className="section">
<div className="container">

<h1 className="title is-2"> { this.state.task.name } </h1>

<div className="columns">

<div className="column is-one-quarter">

<a className="button is-primary is-centered" onClick={this.startRun}>
Start Run
</a>

<table className="table">
<tbody>
<tr>
<th>Image</th>
<td>{ this.state.task.image }</td>
</tr>
<tr>
<th>Entrypoint</th>
<td>{ this.state.task.entrypoint }</td>
</tr>
<tr>
<th>Memory</th>
<td>{ this.state.task.memory }</td>
</tr>
<tr>
<th>Tags</th>
<td>{ this.state.task.tags }</td>
</tr>
<tr>
<th>Enabled</th>
<td>{ this.state.task.enabled ? "yes" : "no" }</td>
</tr>

</tbody>
</table>
</div>

<div className="column">
<h3 className="title is-3">Recent Runs</h3>
<table className="table">
<thead>
<tr>
<th>UUID</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>

</div>
</div>
</section>
);
}
}

function Header() {
return (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
);
}

export default App;
50 changes: 50 additions & 0 deletions js/Home.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,50 @@
import React from "react";
import { Link } from "react-router-dom";

class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
tasks: [],
};
}

componentDidMount() {
fetch("/api/index")
.then(response => response.json())
.then(data => this.setState(data));
}

render() {
let rows = this.state.tasks.map(task => {
return (
<tr key={task.name}>
<td>
<Link to={"/task/" task.name}>{task.name}</Link>
</td>
<td>{task.tags}</td>
<td>{task.enabled ? "yes" : "no"}</td>
</tr>
);
});

return (
<section className="section">
<div className="container">
<table className="table">
<thead>
<tr>
<th>Task</th>
<th>Tags</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
</div>
</section>
);
}
}

export default Home;
22 changes: 10 additions & 12 deletions js/RunPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 3,7 @@ import React from "react";
class RunPage extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.state = {};
}

componentDidMount() {
Expand All @@ -15,17 14,16 @@ class RunPage extends React.Component {

render() {
return (
<section className="section">
<div className="container">
<section className="section">
<div className="container">
<h1 className="title is-2">
{" "}
{this.state.task}: {this.state.uuid}{" "}
</h1>

<h1 className="title is-2"> { this.state.task }: { this.state.uuid } </h1>

<pre>
{ this.state.logs }
</pre>

</div>
</section>
<pre>{this.state.logs}</pre>
</div>
</section>
);
}
}
Expand Down
104 changes: 104 additions & 0 deletions js/TaskPage.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 1,104 @@
import React from "react";
import { Link } from "react-router-dom";

class TaskPage extends React.Component {
constructor(props) {
super(props);
this.state = {
task_name: this.props.match.params.task_name,
task: {},
runs: [],
};
this.startRun = this.startRun.bind(this);
}

componentDidMount() {
fetch("/api/task/" this.state.task_name)
.then(response => response.json())
.then(data => this.setState(data));
}

startRun() {
const outerThis = this;
fetch("/api/task/" this.state.task_name "/run")
.then(response => response.json())
.then(function(data) {
let runs = outerThis.state.runs;
runs.unshift(data);
outerThis.setState({ runs: runs });
});
}

render() {
let rows = this.state.runs.map(run => (
<tr key={run.uuid}>
<td>
<Link to={"/run/" run.uuid}>{run.uuid}</Link>
</td>
<td>{run.status}</td>
<td>{run.start}</td>
<td>{run.end}</td>
</tr>
));
return (
<section className="section">
<div className="container">
<h1 className="title is-2"> {this.state.task.name} </h1>

<div className="columns">
<div className="column is-one-quarter">
<a
className="button is-primary is-centered"
onClick={this.startRun}
>
Start Run
</a>

<table className="table">
<tbody>
<tr>
<th>Image</th>
<td>{this.state.task.image}</td>
</tr>
<tr>
<th>Entrypoint</th>
<td>{this.state.task.entrypoint}</td>
</tr>
<tr>
<th>Memory</th>
<td>{this.state.task.memory}</td>
</tr>
<tr>
<th>Tags</th>
<td>{this.state.task.tags}</td>
</tr>
<tr>
<th>Enabled</th>
<td>{this.state.task.enabled ? "yes" : "no"}</td>
</tr>
</tbody>
</table>
</div>

<div className="column">
<h3 className="title is-3">Recent Runs</h3>
<table className="table">
<thead>
<tr>
<th>UUID</th>
<th>Status</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
</div>
</div>
</div>
</section>
);
}
}

export default TaskPage;
6 changes: 1 addition & 5 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 5,6 @@ import App from "./App";
window.addEventListener("load", () => {
const app = document.querySelector('[data-hook="app"]');
if (app) {
ReactDOM.render(
React.createElement(App, {
}),
app
);
ReactDOM.render(React.createElement(App, {}), app);
}
});
6 changes: 6 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit f6dfae6

Please sign in to comment.