119 lines
3.8 KiB
JavaScript
119 lines
3.8 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import withSiteIdRouter from 'HOCs/withSiteIdRouter';
|
|
import { errors as errorsRoute, error as errorRoute } from 'App/routes';
|
|
import { NoContent, Loader, IconButton, Icon, Popup, BackLink } from 'UI';
|
|
import { fetch, fetchTrace } from 'Duck/errors';
|
|
import MainSection from './MainSection';
|
|
import SideSection from './SideSection';
|
|
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
|
|
|
|
@connect(
|
|
(state) => ({
|
|
errorIdInStore: state.getIn(['errors', 'instance']).errorId,
|
|
list: state.getIn(['errors', 'instanceTrace']),
|
|
loading: state.getIn(['errors', 'fetch', 'loading']) || state.getIn(['errors', 'fetchTrace', 'loading']),
|
|
errorOnFetch: state.getIn(['errors', 'fetch', 'errors']) || state.getIn(['errors', 'fetchTrace', 'errors']),
|
|
}),
|
|
{
|
|
fetch,
|
|
fetchTrace,
|
|
}
|
|
)
|
|
@withSiteIdRouter
|
|
export default class ErrorInfo extends React.PureComponent {
|
|
ensureInstance() {
|
|
const { errorId, loading, errorOnFetch } = this.props;
|
|
if (!loading && this.props.errorIdInStore !== errorId && errorId != null) {
|
|
this.props.fetch(errorId);
|
|
this.props.fetchTrace(errorId);
|
|
}
|
|
}
|
|
componentDidMount() {
|
|
this.ensureInstance();
|
|
}
|
|
componentDidUpdate() {
|
|
this.ensureInstance();
|
|
}
|
|
next = () => {
|
|
const { list, errorId } = this.props;
|
|
const curIndex = list.findIndex((e) => e.errorId === errorId);
|
|
const next = list.get(curIndex + 1);
|
|
if (next != null) {
|
|
this.props.history.push(errorRoute(next.errorId));
|
|
}
|
|
};
|
|
prev = () => {
|
|
const { list, errorId } = this.props;
|
|
const curIndex = list.findIndex((e) => e.errorId === errorId);
|
|
const prev = list.get(curIndex - 1);
|
|
if (prev != null) {
|
|
this.props.history.push(errorRoute(prev.errorId));
|
|
}
|
|
};
|
|
render() {
|
|
const { loading, errorIdInStore, list, errorId } = this.props;
|
|
|
|
let nextDisabled = true,
|
|
prevDisabled = true;
|
|
if (list.size > 0) {
|
|
nextDisabled = loading || list.last().errorId === errorId;
|
|
prevDisabled = loading || list.first().errorId === errorId;
|
|
}
|
|
|
|
return (
|
|
<NoContent
|
|
title={
|
|
<div className="flex flex-col items-center justify-center">
|
|
<AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
|
|
<div className="mt-6 text-2xl">No Error Found!</div>
|
|
</div>
|
|
}
|
|
subtext="Please try to find existing one."
|
|
// animatedIcon="no-results"
|
|
show={!loading && errorIdInStore == null}
|
|
>
|
|
{/* <div className="w-9/12 mb-4 flex justify-between">
|
|
<BackLink to={ errorsRoute() } label="Back" />
|
|
<div />
|
|
<div className="flex items-center">
|
|
<Popup
|
|
pinned
|
|
content="Prev Error"
|
|
>
|
|
<IconButton
|
|
outline
|
|
compact
|
|
size="small"
|
|
icon="prev1"
|
|
disabled={ prevDisabled }
|
|
onClick={this.prev}
|
|
/>
|
|
</Popup>
|
|
<div className="mr-3" />
|
|
|
|
<Popup
|
|
pinned
|
|
content="Next Error"
|
|
>
|
|
<IconButton
|
|
outline
|
|
compact
|
|
size="small"
|
|
icon="next1"
|
|
disabled={ nextDisabled }
|
|
onClick={this.next}
|
|
/>
|
|
</Popup>
|
|
</div>
|
|
</div> */}
|
|
<div className="flex">
|
|
<Loader loading={loading} className="w-9/12">
|
|
<MainSection className="w-9/12" />
|
|
<SideSection className="w-3/12" />
|
|
</Loader>
|
|
</div>
|
|
</NoContent>
|
|
);
|
|
}
|
|
}
|