Skip to content

Commit

Permalink
Add link to show the anaconda.log from the compose build process
Browse files Browse the repository at this point in the history
Especially when some image build failed it's usefull to be able to see
from the composer UI the anaconda logs.
This commit enables this functionality, by having a link for showing the
logs in each image.

The extra 'format' parameter was added to the requests method in
composer.js because the /compose/log API returns raw text, not json.

Closes #686
  • Loading branch information
KKoukiou authored and larskarlitski committed Jun 2, 2019
1 parent 7e76d8c commit eb06a94
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 1 deletion.
42 changes: 41 additions & 1 deletion components/ListView/ListItemImages.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,17 @@ import {
setModalDeleteImageVisible,
setModalDeleteImageState
} from "../../core/actions/modals";
import * as composer from "../../core/composer";

class ListItemImages extends React.Component {
constructor() {
super();
this.state = { logsExpanded: false };
this.handleDelete = this.handleDelete.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleShowModalStop = this.handleShowModalStop.bind(this);
this.handleShowModalDeleteImage = this.handleShowModalDeleteImage.bind(this);
this.handleLogsShow = this.handleLogsShow.bind(this);
}

// maps to Remove button for FAILED
Expand All @@ -43,13 +46,46 @@ class ListItemImages extends React.Component {
this.props.setModalDeleteImageVisible(true);
}

handleLogsShow() {
this.setState(prevState => ({ logsExpanded: !prevState.logsExpanded, fetchingLogs: !prevState.logsExpanded }));
composer.getComposeLog(this.props.listItem.id).then(
logs => {
this.setState({ logsContent: logs, fetchingLogs: false });
},
() => {
this.setState({
logsContent: <FormattedMessage defaultMessage="No log available" />,
fetchingLogs: false
});
}
);
}

render() {
const { listItem } = this.props;
const timestamp = new Date(listItem.job_created * 1000);
const formattedTime = timestamp.toDateString();
const moreButton = (
<button className="btn btn-link" onClick={this.handleLogsShow} type="button">
{this.state.logsExpanded && <FormattedMessage defaultMessage="Hide logs" />}
{!this.state.logsExpanded && <FormattedMessage defaultMessage="Show logs" />}
</button>
);
let logsSection;
if (this.state.logsExpanded) {
if (this.state.fetchingLogs) {
logsSection = (
<div>
<div className="spinner spinner-sm pull-left" aria-hidden="true" />
<FormattedMessage defaultMessage="Loading log messages" />
</div>
);
} else logsSection = <pre>{this.state.logsContent}</pre>;
}

return (
<div className="list-pf-item">
<div className="list-pf-container">
<div className="list-pf-container image-container">
<div className="list-pf-content list-pf-content-flex">
<div className="list-pf-left">
<span className="pficon pficon-builder-image list-pf-icon-small" aria-hidden="true" />
Expand Down Expand Up @@ -97,18 +133,21 @@ class ListItemImages extends React.Component {
<div className="list-view-pf-additional-info-item cmpsr-images__status">
<span className="pficon pficon-in-progress" aria-hidden="true" />
<FormattedMessage defaultMessage="In Progress" />
{moreButton}
</div>
)}{" "}
{listItem.queue_status === "FINISHED" && (
<div className="list-view-pf-additional-info-item cmpsr-images__status">
<span className="pficon pficon-ok" aria-hidden="true" />
<FormattedMessage defaultMessage="Complete" />
{moreButton}
</div>
)}{" "}
{listItem.queue_status === "FAILED" && (
<div className="list-view-pf-additional-info-item cmpsr-images__status">
<span className="pficon pficon-error-circle-o" aria-hidden="true" />
<FormattedMessage defaultMessage="Failed" />
{moreButton}
</div>
)}
{listItem.queue_status === "FINISHED" && (
Expand Down Expand Up @@ -167,6 +206,7 @@ class ListItemImages extends React.Component {
)}
</div>
</div>
{logsSection}
</div>
);
}
Expand Down
4 changes: 4 additions & 0 deletions core/composer.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,3 +207,7 @@ export function getFinishedComposes() {
export function getFailedComposes() {
return get("/api/v0/compose/failed").then(data => data.failed);
}

export function getComposeLog(uuid) {
return get("/api/v0/compose/log/" + encodeURIComponent(uuid), { replyFormat: "raw" });
}
6 changes: 6 additions & 0 deletions public/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -609,3 +609,9 @@ textarea.form-control[readonly] {
background-color: inherit;
color: inherit;
}

.list-pf-container.image-container {
position: sticky;
top: 0;
background: #fff;
}

0 comments on commit eb06a94

Please sign in to comment.