import React from "react";
import { defineMessages, injectIntl, intlShape } from "react-intl";
import PropTypes from "prop-types";
import { Button, DataListItem, DataListItemRow, DataListCell, DataListItemCells } from "@patternfly/react-core";
import { CaretDownIcon, ServiceIcon } from "@patternfly/react-icons";
const messages = defineMessages({
imageName: {
defaultMessage: "Image name",
description: "The name given by the user for an image",
},
uploadType: {
defaultMessage: "Upload type",
description: "A label for the service to which an image was uploaded",
},
timeStarted: {
defaultMessage: "Started",
description: "A label for the date that an image upload was started",
},
uploadActions: {
defaultMessage: "Actions",
description: "A label for the menu that displays the actions available",
},
uploadLogs: {
defaultMessage: "Logs",
description: "Log content that gets generated as part of the upload process",
},
uploadStatusWaiting: {
defaultMessage: "Upload pending",
description: "Upload status when process is waiting",
},
uploadStatusRunning: {
defaultMessage: "Upload in progress",
description: "Upload status when process is in progress",
},
uploadStatusFinished: {
defaultMessage: "Upload complete",
description: "Upload status when process is finished",
},
uploadStatusFailed: {
defaultMessage: "Upload failed",
description: "Upload status when process failed",
},
});
class ListItemUploads extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
const { upload } = this.props;
const { formatMessage } = this.props.intl;
const timestamp = new Date(upload.creation_time * 1000);
const formattedTime = timestamp.toDateString();
const logsButton = <Button variant="secondary">{formatMessage(messages.uploadLogs)}</Button>;
const uploadStatus = () => {
switch (upload.status) {
case "WAITING":
return (
<div className="cc-c-status">
<div className="cc-c-status__icon">
<span className="pficon pficon-pending" aria-hidden="true" />
</div>
{formatMessage(messages.uploadStatusWaiting)}
</div>
);
case "RUNNING":
return (
<div className="cc-c-status">
<div className="cc-c-status__icon">
<div className="spinner spinner-xs" />
</div>
{formatMessage(messages.uploadStatusRunning)}
</div>
);
case "FINISHED":
return (
<div className="cc-c-status">
<div className="cc-c-status__icon">
<span className="pficon pficon-ok" aria-hidden="true" />
</div>
{formatMessage(messages.uploadStatusFinished)}
</div>
);
case "FAILED":
return (
<div className="cc-c-status">
<div className="cc-c-status__icon">
<span className="pficon pficon-error-circle-o" aria-hidden="true" />
</div>
{formatMessage(messages.uploadStatusFailed)}
</div>
);
default:
return <></>;
}
};
return (
<DataListItem aria-labelledby={`${upload.uuid}-type ${upload.uuid}-name`}>
<DataListItemRow>
<div className="pf-c-data-list__item-control cc-u-not-visible">
<div className="pf-c-data-list__toggle">
<Button variant="plain" aria-hidden="true">
<CaretDownIcon />
</Button>
</div>
</div>
<div className="cc-c-data-list__item-icon">
<ServiceIcon />
</div>
<DataListItemCells
className="cc-m-stacked cc-m-split-on-lg"
dataListCells={[
<DataListCell key="primary" className="pf-l-flex pf-m-column pf-m-space-items-xs">
{upload.image_name && upload.image_name !== "" && (
<div className="pf-l-flex__item">
<span>{formatMessage(messages.imageName)}</span>{" "}
<strong id={`${upload.uuid}-name`}>{upload.image_name}</strong>
</div>
)}
<div className="pf-l-flex__item">
<span>{formatMessage(messages.uploadType)}</span>{" "}
<strong id={`${upload.uuid}-type`}>{upload.provider_name}</strong>
</div>
<div className="pf-l-flex__item">
<span>{formatMessage(messages.timeStarted)}</span> <strong>{formattedTime}</strong>
</div>
</DataListCell>,
<DataListCell key="status">{uploadStatus()}</DataListCell>,
]}
/>
<div className="pf-c-data-list__item-action cc-u-not-visible" aria-hidden="true">
<div className="dropdown pull-right dropdown-kebab-pf">
<button
aria-label={formatMessage(messages.uploadActions)}
className="btn btn-link dropdown-toggle"
type="button"
id={`${upload.uuid}-actions`}
>
<span className="fa fa-ellipsis-v" />
</button>
</div>
</div>
<div aria-hidden="true" className="pf-c-data-list__item-action cc-u-not-visible">
{logsButton}
</div>
</DataListItemRow>
</DataListItem>
);
}
}
ListItemUploads.propTypes = {
upload: PropTypes.shape({
creation_time: PropTypes.number,
image_name: PropTypes.string,
provider_name: PropTypes.string,
status: PropTypes.string,
uuid: PropTypes.string,
}),
intl: intlShape.isRequired,
};
ListItemUploads.defaultProps = {
upload: {},
};
export default injectIntl(ListItemUploads);