Revision 598c98ed
Added by Lucy Fu about 1 year ago
| webpack/assets/javascripts/react_app/components/HostDetails/Tabs/Details/Cards/Virtualization/index.js | ||
|---|---|---|
|
import { translate as __ } from '../../../../../../common/I18n';
|
||
|
import { foremanUrl } from '../../../../../../common/helpers';
|
||
|
import { useAPI } from '../../../../../../common/hooks/API/APIHooks';
|
||
|
import EmptyState from '../../../../../common/EmptyState';
|
||
|
import ErrorBoundary from '../../../../../common/ErrorBoundary';
|
||
|
import CardTemplate from '../../../../Templates/CardItem/CardTemplate';
|
||
|
import VirtVmware from './VirtVmware';
|
||
|
import VirtOvirt from './VirtOvirt';
|
||
| ... | ... | |
|
};
|
||
|
const VirtCardDetails = components[provider];
|
||
|
|
||
|
const errorFallback = () => (
|
||
|
<EmptyState
|
||
|
icon={<div />}
|
||
|
header={__('Something went wrong')}
|
||
|
description={__('There was an error loading this content.')}
|
||
|
/>
|
||
|
);
|
||
|
|
||
|
return (
|
||
|
<CardTemplate header={__('Virtualization')} expandable masonryLayout>
|
||
|
<DescriptionList isCompact isHorizontal>
|
||
|
{VirtCardDetails && <VirtCardDetails vm={vm} />}
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Running on')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<a
|
||
|
href={`/compute_resources/${computeResourceId}-${computeResourceName}`}
|
||
|
>
|
||
|
{computeResourceName}
|
||
|
</a>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
<ErrorBoundary fallback={errorFallback}>
|
||
|
<DescriptionList isCompact isHorizontal>
|
||
|
{VirtCardDetails && <VirtCardDetails vm={vm} />}
|
||
|
<DescriptionListGroup>
|
||
|
<DescriptionListTerm>{__('Running on')}</DescriptionListTerm>
|
||
|
<DescriptionListDescription>
|
||
|
<a
|
||
|
href={`/compute_resources/${computeResourceId}-${computeResourceName}`}
|
||
|
>
|
||
|
{computeResourceName}
|
||
|
</a>
|
||
|
</DescriptionListDescription>
|
||
|
</DescriptionListGroup>
|
||
|
</DescriptionList>
|
||
|
</ErrorBoundary>
|
||
|
</CardTemplate>
|
||
|
);
|
||
|
};
|
||
| webpack/assets/javascripts/react_app/components/common/ErrorBoundary/index.js | ||
|---|---|---|
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.state = { hasError: false };
|
||
|
props.history.listen(() => {
|
||
|
if (this.state.hasError) {
|
||
|
this.setState({
|
||
|
hasError: false,
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
props.history &&
|
||
|
props.history.listen(() => {
|
||
|
if (this.state.hasError) {
|
||
|
this.setState({
|
||
|
hasError: false,
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
componentDidCatch(error, info) {
|
||
| ... | ... | |
|
}
|
||
|
|
||
|
render() {
|
||
|
const { history, children } = this.props;
|
||
|
const { history, children, fallback } = this.props;
|
||
|
const { hasError, error, info } = this.state;
|
||
|
|
||
|
if (!hasError) return children;
|
||
|
if (fallback) return fallback();
|
||
|
|
||
|
const description = (
|
||
|
<>
|
||
| ... | ... | |
|
PropTypes.arrayOf(PropTypes.node),
|
||
|
PropTypes.node,
|
||
|
]).isRequired,
|
||
|
history: PropTypes.object.isRequired,
|
||
|
history: PropTypes.object,
|
||
|
fallback: PropTypes.func,
|
||
|
};
|
||
|
ErrorBoundary.defaultProps = {
|
||
|
history: undefined,
|
||
|
fallback: undefined,
|
||
|
};
|
||
|
|
||
|
export default ErrorBoundary;
|
||
Also available in: Unified diff
Refs #35649 - improve the error handling for Virtualization card