123 lines
2.9 KiB
JavaScript
123 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import cn from 'classnames';
|
|
import withRequest from 'HOCs/withRequest';
|
|
import { Loader } from 'UI';
|
|
import { countries } from 'App/constants';
|
|
import Trend from './Trend';
|
|
import DateAgo from './DateAgo';
|
|
import DistributionBar from './DistributionBar';
|
|
|
|
const MAX_PERCENTAGE = 3;
|
|
const MIN_COUNT = 4;
|
|
const MAX_COUNT = 10;
|
|
function hidePredicate(percentage, index) {
|
|
if (index < MIN_COUNT) return false;
|
|
if (index < MAX_COUNT && percentage < MAX_PERCENTAGE) return false;
|
|
return true;
|
|
}
|
|
function partitionsWrapper(partitions = [], mapCountry = false) {
|
|
const counts = partitions.map(({ count }) => count);
|
|
const sum = counts.reduce((a,b)=>parseInt(a)+parseInt(b),0);
|
|
if (sum === 0) {
|
|
return [];
|
|
}
|
|
const otherPrcs = counts
|
|
.map(c => c/sum * 100)
|
|
.filter(hidePredicate);
|
|
const otherPrcsSum = otherPrcs.reduce((a,b)=>a+b,0);
|
|
const showLength = partitions.length - otherPrcs.length;
|
|
const show = partitions
|
|
.sort((a, b) => b.count - a.count)
|
|
.slice(0, showLength)
|
|
.map(p => ({
|
|
label: mapCountry
|
|
? (countries[p.name] || "Unknown")
|
|
: p.name,
|
|
prc: p.count/sum * 100,
|
|
}))
|
|
|
|
if (otherPrcsSum > 0) {
|
|
show.push({
|
|
label: "Other",
|
|
prc: otherPrcsSum,
|
|
other: true,
|
|
})
|
|
}
|
|
return show;
|
|
}
|
|
function tagsWrapper(tags = []) {
|
|
return tags.map(({ name, partitions }) => ({
|
|
name,
|
|
partitions: partitionsWrapper(partitions, name === "country")
|
|
}))
|
|
}
|
|
|
|
function dataWrapper(data = {}) {
|
|
return {
|
|
chart24: data.chart24 || [],
|
|
chart30: data.chart30 || [],
|
|
tags: tagsWrapper(data.tags),
|
|
};
|
|
}
|
|
|
|
@connect(state => ({
|
|
error: state.getIn([ "errors", "instance" ])
|
|
}))
|
|
@withRequest({
|
|
initialData: props => dataWrapper(props.error),
|
|
endpoint: props => `/errors/${ props.error.errorId }/stats`,
|
|
dataWrapper,
|
|
})
|
|
export default class SideSection extends React.PureComponent {
|
|
onDateChange = ({ startDate, endDate }) => {
|
|
this.props.request({ startDate, endDate });
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
className,
|
|
error,
|
|
data,
|
|
loading,
|
|
} = this.props;
|
|
|
|
return (
|
|
<div className={ cn(className, "pl-5") }>
|
|
<h3 className="text-xl mb-2">Overview</h3>
|
|
<Trend
|
|
chart={ data.chart24 }
|
|
title="Past 24 hours"
|
|
/>
|
|
<div className="mb-6" />
|
|
<Trend
|
|
chart={ data.chart30 }
|
|
title="Last 30 days"
|
|
timeFormat={'l'}
|
|
/>
|
|
<div className="mb-6" />
|
|
<DateAgo
|
|
className="my-4"
|
|
title="First Seen"
|
|
timestamp={ error.firstOccurrence }
|
|
/>
|
|
<DateAgo
|
|
className="my-4"
|
|
title="Last Seen"
|
|
timestamp={ error.lastOccurrence }
|
|
/>
|
|
{ data.tags.length > 0 && <h4 className="text-xl mt-6 mb-3">Summary</h4> }
|
|
<Loader loading={loading}>
|
|
{ data.tags.map(({ name, partitions }) =>
|
|
<DistributionBar
|
|
key={ name }
|
|
title={name}
|
|
partitions={partitions}
|
|
className="mb-6"
|
|
/>
|
|
)}
|
|
</Loader>
|
|
</div>
|
|
);
|
|
}
|
|
}
|