import _ from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; import { Button, Icon, Modal, Switch } from 'antd'; // max characters we displaly for error messages before truncating them const maxErrorLength = 500; export default class ErrorModal extends React.Component { static propTypes = { errors: PropTypes.shape({}).isRequired, resourceName: PropTypes.string.isRequired, resourceType: PropTypes.string.isRequired } state = { visible: false, truncateErrors: true } showModal = () => { this.setState({ visible: true, }); } handleOk = () => { this.setState({ visible: false, }); } handleCancel = () => { this.setState({ visible: false, }); } toggleTruncateErrors = () => { this.setState({ truncateErrors: !this.state.truncateErrors }); } processErrorData = podErrors => { let shouldTruncate = false; let byPodAndContainer = _(podErrors) .keys() .sortBy() .map(pod => { let byContainer = _(podErrors[pod].errors).reduce((errors, err) => { if (!_.isEmpty(err.container)) { let c = err.container; if (_.isEmpty(errors[c.container])) { errors[c.container] = []; } let errMsg = c.message; if (_.size(errMsg) > maxErrorLength) { shouldTruncate = true; c.truncatedMessage = _.take(errMsg, maxErrorLength).join("") + "..."; } errors[c.container].push(c); } return errors; }, {}); return { pod, byContainer }; }).value(); return { byPodAndContainer, shouldTruncate }; } renderContainerErrors = (pod, errorsByContainer) => { if (_.isEmpty(errorsByContainer)) { return "No messages to display"; } return _.map(errorsByContainer, (errors, container) => (
{container} {_.get(errors, [0, "image"])}
{ _.map(errors, (er, i) => { if (_.size(er.message) === 0) { return null; } let message = !this.state.truncateErrors ? er.message : er.truncatedMessage || er.message; return ( {!er.reason ? null : er.reason + ": "} {message}

); } ) }
)); }; renderPodErrors = errors => { return _.map(errors, err => { return (

{err.pod}

{this.renderContainerErrors(err.pod, err.byContainer)}
); }); } render() { let errors = this.processErrorData(this.props.errors); return ( OK} width="800px"> { errors.shouldTruncate ? Some of these error messages are very long. Show full error text? : null } {this.renderPodErrors(errors.byPodAndContainer)} ); } }