|
|
|
@ -4,6 +4,7 @@ import BarChart from 'Components/Chart/BarChart';
|
|
|
|
|
import DoughnutChart from 'Components/Chart/DoughnutChart';
|
|
|
|
|
import LoadingIndicator from 'Components/Loading/LoadingIndicator';
|
|
|
|
|
import PageContent from 'Components/Page/PageContent';
|
|
|
|
|
import PageContentBody from 'Components/Page/PageContentBody';
|
|
|
|
|
import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
|
|
|
|
|
import getErrorMessage from 'Utilities/Object/getErrorMessage';
|
|
|
|
|
import styles from './Stats.css';
|
|
|
|
@ -45,60 +46,106 @@ function getNumberGrabsData(indexerStats) {
|
|
|
|
|
return data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getUserAgentGrabsData(indexerStats) {
|
|
|
|
|
const data = indexerStats.map((indexer) => {
|
|
|
|
|
return {
|
|
|
|
|
label: indexer.userAgent ? indexer.userAgent : 'Other',
|
|
|
|
|
value: indexer.numberOfGrabs
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
data.sort((a, b) => {
|
|
|
|
|
return b.value - a.value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getUserAgentQueryData(indexerStats) {
|
|
|
|
|
const data = indexerStats.map((indexer) => {
|
|
|
|
|
return {
|
|
|
|
|
label: indexer.userAgent ? indexer.userAgent : 'Other',
|
|
|
|
|
value: indexer.numberOfQueries
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
data.sort((a, b) => {
|
|
|
|
|
return b.value - a.value;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return data;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function Stats(props) {
|
|
|
|
|
const {
|
|
|
|
|
items,
|
|
|
|
|
item,
|
|
|
|
|
isFetching,
|
|
|
|
|
isPopulated,
|
|
|
|
|
error
|
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
|
|
const isLoaded = !!(!error && isPopulated && items.length);
|
|
|
|
|
const isLoaded = !!(!error && isPopulated);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<PageContent>
|
|
|
|
|
<PageToolbar />
|
|
|
|
|
{
|
|
|
|
|
isFetching && !isPopulated &&
|
|
|
|
|
<LoadingIndicator />
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
!isFetching && !!error &&
|
|
|
|
|
<div className={styles.errorMessage}>
|
|
|
|
|
{getErrorMessage(error, 'Failed to load indexer stats from API')}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
isLoaded &&
|
|
|
|
|
<div>
|
|
|
|
|
<div className={styles.fullWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getAverageResponseTimeData(items)}
|
|
|
|
|
title='Average Response Times (ms)'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<DoughnutChart
|
|
|
|
|
data={getTotalRequestsData(items)}
|
|
|
|
|
title='Total Indexer Queries'
|
|
|
|
|
/>
|
|
|
|
|
<PageContentBody>
|
|
|
|
|
{
|
|
|
|
|
isFetching && !isPopulated &&
|
|
|
|
|
<LoadingIndicator />
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
!isFetching && !!error &&
|
|
|
|
|
<div className={styles.errorMessage}>
|
|
|
|
|
{getErrorMessage(error, 'Failed to load indexer stats from API')}
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getNumberGrabsData(items)}
|
|
|
|
|
title='Total Indexer Grabs'
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
isLoaded &&
|
|
|
|
|
<div>
|
|
|
|
|
<div className={styles.fullWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getAverageResponseTimeData(item.indexers)}
|
|
|
|
|
title='Average Response Times (ms)'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<DoughnutChart
|
|
|
|
|
data={getTotalRequestsData(item.indexers)}
|
|
|
|
|
title='Total Indexer Queries'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getNumberGrabsData(item.indexers)}
|
|
|
|
|
title='Total Indexer Grabs'
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getUserAgentQueryData(item.userAgents)}
|
|
|
|
|
title='Total User Agent Queries'
|
|
|
|
|
horizontal={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div className={styles.halfWidthChart}>
|
|
|
|
|
<BarChart
|
|
|
|
|
data={getUserAgentGrabsData(item.userAgents)}
|
|
|
|
|
title='Total User Agent Grabs'
|
|
|
|
|
horizontal={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</PageContentBody>
|
|
|
|
|
</PageContent>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Stats.propTypes = {
|
|
|
|
|
items: PropTypes.arrayOf(PropTypes.object).isRequired,
|
|
|
|
|
item: PropTypes.object.isRequired,
|
|
|
|
|
isFetching: PropTypes.bool.isRequired,
|
|
|
|
|
isPopulated: PropTypes.bool.isRequired,
|
|
|
|
|
error: PropTypes.object,
|
|
|
|
|