diff --git a/frontend/src/blocks/alert.js b/frontend/src/blocks/alert.js index 6a81160..23320bb 100644 --- a/frontend/src/blocks/alert.js +++ b/frontend/src/blocks/alert.js @@ -1,5 +1,4 @@ import React, { Component } from 'react'; - import './alert.css'; export default class Alert extends Component { diff --git a/frontend/src/blocks/header.js b/frontend/src/blocks/header.js index 1326051..3b6a35c 100644 --- a/frontend/src/blocks/header.js +++ b/frontend/src/blocks/header.js @@ -1,21 +1,19 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react' +import './header.css' -import './header.css'; - -class Header extends Component { +export default class Header extends Component { render() { + let user = this.props.user return (
go-apicommands
-
{this.props.user.name}
- +
{user.name}
+ {"Picture
- ); + ) } } - -export default Header; diff --git a/frontend/src/blocks/job_list.js b/frontend/src/blocks/job_list.js index d4cb412..196d618 100644 --- a/frontend/src/blocks/job_list.js +++ b/frontend/src/blocks/job_list.js @@ -1,13 +1,13 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import { Link } from 'react-router-dom' -import Timestamp from './timestamp.js'; -import './job_list.css'; +import Timestamp from './timestamp.js' +import './job_list.css' export default class JobList extends Component { render() { if (this.props.jobs === undefined) { - return null; + return null } return ( @@ -26,7 +26,7 @@ export default class JobList extends Component { } renderJob(job) { - let shortID = job.id.substring(0, 8); + let shortID = job.id.substring(0, 8) return (
@@ -36,7 +36,7 @@ export default class JobList extends Component {
- ); + ) } } diff --git a/frontend/src/blocks/nav.js b/frontend/src/blocks/nav.js index 951e211..026904e 100644 --- a/frontend/src/blocks/nav.js +++ b/frontend/src/blocks/nav.js @@ -1,40 +1,37 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import { Link } from 'react-router-dom' -import './nav.css'; +import './nav.css' export default class Nav extends Component { constructor(props) { - super(props); - this.state = { - query: "", - }; + super(props) + this.state = {query: ""} } + render() { return ( - ); + ) + } + + renderItem(name) { + let cmd = this.props.commands[name] + if (cmd.name.indexOf(this.props.query) === -1) { + return null + } + + let className = this.props.active && cmd.name === this.props.active ? "active" : "" + return ( +
  • + {cmd.name} +
  • + ) } } diff --git a/frontend/src/blocks/output.js b/frontend/src/blocks/output.js index 38b3049..a4ea8b7 100644 --- a/frontend/src/blocks/output.js +++ b/frontend/src/blocks/output.js @@ -1,75 +1,75 @@ -import React, { Component } from 'react'; -import { Link } from 'react-router-dom'; +import React, { Component } from 'react' +import { Link } from 'react-router-dom' -import Timestamp from './timestamp.js'; -import { api, httpGET, httpStreamGET } from '../http.js'; -import './output.css'; +import Timestamp from './timestamp.js' +import { api, httpGET, httpStreamGET } from '../http.js' +import './output.css' export default class Output extends Component { constructor(props) { - super(props); + super(props) this.state = { job: null, xhr: null - }; + } } componentDidMount() { - let jobID = this.props.jobID; + let jobID = this.props.jobID if (jobID !== null) { - this.loadCommandLog(jobID); - this.loadJobDetails(jobID); + this.loadCommandLog(jobID) + this.loadJobDetails(jobID) } } componentWillUnmount() { if (this.state.xhr !== null) { - this.state.xhr.abort(); + this.state.xhr.abort() } } loadJobDetails(id) { if (id === null) { - return; + return } httpGET(api("/jobs/" + id), (status, body) => { - this.setState({job: JSON.parse(body)}); + this.setState({job: JSON.parse(body)}) }, (error) => { - console.log("Failed to load job details:", error); + console.log("Failed to load job details:", error) } - ); + ) } loadCommandLog(id) { if (id === null || this.state.xhr !== null) { - return; + return } let xhr = httpStreamGET(api("/jobs/" + id + "/log"), (chunk) => { // Progress - let target = this.refs["output"]; - target.innerHTML += chunk.replace(/\n/g, "
    "); - this.autoScroll(); + let target = this.refs["output"] + target.innerHTML += chunk.replace(/\n/g, "
    ") + this.autoScroll() }, (status) => { // Complete // Request cancelled if (status === 0) { - return; + return } // Reload job details - this.setState({xhr: null}); - this.loadJobDetails(id); + this.setState({xhr: null}) + this.loadJobDetails(id) }, (error) => { - let target = this.refs["output"]; - target.innerHTML = "Failed to fetch command log: "+ error; + let target = this.refs["output"] + target.innerHTML = "Failed to fetch command log: "+ error } - ); - this.setState({xhr: xhr}); + ) + this.setState({xhr: xhr}) } autoScroll() { @@ -77,32 +77,28 @@ export default class Output extends Component { } render() { - var outputClass = "output"; - if (this.state.job) { - outputClass += " visible"; - } - + let className = this.state.job ? "output visible" : "output" return (
    {this.renderJobDetails()} -
    +
    - ); + ) } renderJobDetails() { - let details = this.state.job; + let details = this.state.job if (!details) { - return (
    ); + return null } - // let shortID = details.id.substring(0, 8); - var state = details.state; - state = state.charAt(0).toUpperCase() + state.substr(1); + // let shortID = details.id.substring(0, 8) + var state = details.state + state = state.charAt(0).toUpperCase() + state.substr(1) - var args; + var args if (details.args !== "") { - args = {details.args}; + args = {details.args} } return (
    @@ -126,34 +122,34 @@ export default class Output extends Component { {this.renderStarted()} {this.renderFinished()}
    - ); + ) } renderStarted() { - let details = this.state.job; + let details = this.state.job return (
    Started
    - ); + ) } renderFinished() { - let details = this.state.job; - if (details.finished_at !== null) { - return [ -
    -
    Finished
    -
    -
    , -
    -
    Took
    -
    -
    - ]; - } else { - return null; + let details = this.state.job + if (details.finished_at === null) { + return null } + + return [ +
    +
    Finished
    +
    +
    , +
    +
    Took
    +
    +
    + ] } } diff --git a/frontend/src/blocks/user.js b/frontend/src/blocks/user.js index 19fcbec..43246e9 100644 --- a/frontend/src/blocks/user.js +++ b/frontend/src/blocks/user.js @@ -1,46 +1,52 @@ -import React, { Component } from 'react'; +import React, { Component } from 'react' -import { api, httpGET } from '../http.js'; -import './user.css'; +import { api, httpGET } from '../http.js' +import './user.css' export default class User extends Component { constructor(props) { - super(props); - this.state = {user: undefined}; + super(props) + this.state = {user: undefined} } componentDidMount() { - if (this.props.id === undefined || this.props.id === null) { - return; + if (!this.props.id) { + return } + httpGET(api("/users/"+ this.props.id), (status, body) => { - this.setState({user: JSON.parse(body)}); + this.setState({user: JSON.parse(body)}) }, (error) => { - console.log("Failed to load user details:", error); + console.log("Failed to load user details:", error) } - ); + ) } render() { - if (this.props.id === undefined || this.props.id === null || this.state.user === undefined) { - return null; - } else if (this.state.user === null) { - let shortID = this.props.id.substring(0, 8); - return ( -
    - User -
    {shortID}
    -
    - ); - } else { - let details = this.state.user; - return ( -
    - {details.name -
    {details.name}
    -
    - ); + let details = this.state.user + if (!this.props.id || details === undefined) { + return null } + if (details === null) { + return this.renderUnknownUser() + } + + return ( +
    + {details.name +
    {details.name}
    +
    + ) + } + + renderUnknownUser() { + let shortID = this.props.id.substring(0, 8) + return ( +
    + User +
    {shortID}
    +
    + ) } }