diff --git a/frontend/src/App/AppRoutes.js b/frontend/src/App/AppRoutes.js index 66d925210..58ce900ee 100644 --- a/frontend/src/App/AppRoutes.js +++ b/frontend/src/App/AppRoutes.js @@ -5,6 +5,7 @@ import NotFound from 'Components/NotFound'; import Switch from 'Components/Router/Switch'; import HistoryConnector from 'History/HistoryConnector'; import IndexerIndexConnector from 'Indexer/Index/IndexerIndexConnector'; +import StatsConnector from 'Indexer/Stats/StatsConnector'; import SearchIndexConnector from 'Search/SearchIndexConnector'; import ApplicationSettings from 'Settings/Applications/ApplicationSettings'; import GeneralSettingsConnector from 'Settings/General/GeneralSettingsConnector'; @@ -57,7 +58,7 @@ function AppRoutes(props) { {/* diff --git a/frontend/src/Components/Chart/BarChart.js b/frontend/src/Components/Chart/BarChart.js new file mode 100644 index 000000000..b31de923b --- /dev/null +++ b/frontend/src/Components/Chart/BarChart.js @@ -0,0 +1,50 @@ +import Chart from 'chart.js'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +class BarChart extends Component { + constructor(props) { + super(props); + this.canvasRef = React.createRef(); + } + + componentDidMount() { + this.myChart = new Chart(this.canvasRef.current, { + type: 'bar', + options: { + maintainAspectRatio: false + }, + data: { + labels: this.props.data.map((d) => d.label), + datasets: [{ + label: this.props.title, + data: this.props.data.map((d) => d.value) + }] + } + }); + } + + componentDidUpdate() { + this.myChart.data.labels = this.props.data.map((d) => d.label); + this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value); + this.myChart.update(); + } + + render() { + return ( + + ); + } +} + +BarChart.propTypes = { + data: PropTypes.arrayOf(PropTypes.object).isRequired, + title: PropTypes.string.isRequired +}; + +BarChart.defaultProps = { + data: [], + title: '' +}; + +export default BarChart; diff --git a/frontend/src/Components/Chart/DoughnutChart.js b/frontend/src/Components/Chart/DoughnutChart.js new file mode 100644 index 000000000..d86fdfc40 --- /dev/null +++ b/frontend/src/Components/Chart/DoughnutChart.js @@ -0,0 +1,57 @@ +import Chart from 'chart.js'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +class DoughnutChart extends Component { + constructor(props) { + super(props); + this.canvasRef = React.createRef(); + } + + componentDidMount() { + this.myChart = new Chart(this.canvasRef.current, { + type: 'doughnut', + options: { + maintainAspectRatio: false, + legend: { + position: 'bottom' + }, + title: { + display: true, + text: this.props.title + } + }, + data: { + labels: this.props.data.map((d) => d.label), + datasets: [{ + label: this.props.title, + data: this.props.data.map((d) => d.value) + }] + } + }); + } + + componentDidUpdate() { + this.myChart.data.labels = this.props.data.map((d) => d.label); + this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value); + this.myChart.update(); + } + + render() { + return ( + + ); + } +} + +DoughnutChart.propTypes = { + data: PropTypes.arrayOf(PropTypes.object).isRequired, + title: PropTypes.string.isRequired +}; + +DoughnutChart.defaultProps = { + data: [], + title: '' +}; + +export default DoughnutChart; diff --git a/frontend/src/Components/Chart/LineChart.js b/frontend/src/Components/Chart/LineChart.js new file mode 100644 index 000000000..3d7d1ebac --- /dev/null +++ b/frontend/src/Components/Chart/LineChart.js @@ -0,0 +1,49 @@ +import Chart from 'chart.js'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; + +class LineChart extends Component { + constructor(props) { + super(props); + this.canvasRef = React.createRef(); + } + + componentDidMount() { + this.myChart = new Chart(this.canvasRef.current, { + type: 'line', + options: { + maintainAspectRatio: false + }, + data: { + labels: this.props.data.map((d) => d.time), + datasets: [{ + label: this.props.title, + data: this.props.data.map((d) => d.value), + fill: 'none', + pointRadius: 2, + borderWidth: 1, + lineTension: 0 + }] + } + }); + } + + componentDidUpdate() { + this.myChart.data.labels = this.props.data.map((d) => d.label); + this.myChart.data.datasets[0].data = this.props.data.map((d) => d.value); + this.myChart.update(); + } + + render() { + return ( + + ); + } +} + +LineChart.propTypes = { + data: PropTypes.arrayOf(PropTypes.object).isRequired, + title: PropTypes.string.isRequired +}; + +export default LineChart; diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.js b/frontend/src/Components/Page/Sidebar/PageSidebar.js index 049d5f51b..0edb203a3 100644 --- a/frontend/src/Components/Page/Sidebar/PageSidebar.js +++ b/frontend/src/Components/Page/Sidebar/PageSidebar.js @@ -26,7 +26,7 @@ const links = [ children: [ { title: translate('Stats'), - to: '/indexer/stats' + to: '/indexers/stats' } ] }, diff --git a/frontend/src/Indexer/Stats/Stats.css b/frontend/src/Indexer/Stats/Stats.css new file mode 100644 index 000000000..249dcc448 --- /dev/null +++ b/frontend/src/Indexer/Stats/Stats.css @@ -0,0 +1,22 @@ +.fullWidthChart { + display: inline-block; + padding: 15px 25px; + width: 100%; + height: 300px; +} + +.halfWidthChart { + display: inline-block; + padding: 15px 25px; + width: 50%; + height: 300px; +} + +@media only screen and (max-width: $breakpointSmall) { + .halfWidthChart { + display: inline-block; + padding: 15px 25px; + width: 100%; + height: 300px; + } +} diff --git a/frontend/src/Indexer/Stats/Stats.js b/frontend/src/Indexer/Stats/Stats.js new file mode 100644 index 000000000..127732f2b --- /dev/null +++ b/frontend/src/Indexer/Stats/Stats.js @@ -0,0 +1,87 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +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 PageToolbar from 'Components/Page/Toolbar/PageToolbar'; +import getErrorMessage from 'Utilities/Object/getErrorMessage'; +import styles from './Stats.css'; + +function getAverageResponseTimeData(indexerStats) { + const data = indexerStats.map((indexer) => { + return { + label: indexer.indexerName, + value: indexer.averageResponseTime + }; + }); + + return data; +} + +function getTotalRequestsData(indexerStats) { + const data = indexerStats.map((indexer) => { + return { + label: indexer.indexerName, + value: indexer.numberOfQueries + }; + }); + + return data; +} + +function Stats(props) { + const { + items, + isFetching, + isPopulated, + error + } = props; + + const isLoaded = !!(!error && isPopulated && items.length); + + return ( + + + { + isFetching && !isPopulated && + + } + + { + !isFetching && !!error && +
+ {getErrorMessage(error, 'Failed to load indexer stats from API')} +
+ } + + { + isLoaded && +
+
+ +
+
+ +
+
+ } +
+ ); +} + +Stats.propTypes = { + items: PropTypes.arrayOf(PropTypes.object).isRequired, + isFetching: PropTypes.bool.isRequired, + isPopulated: PropTypes.bool.isRequired, + error: PropTypes.object, + data: PropTypes.object +}; + +export default Stats; diff --git a/frontend/src/Indexer/Stats/StatsConnector.js b/frontend/src/Indexer/Stats/StatsConnector.js new file mode 100644 index 000000000..4dbc8fbd2 --- /dev/null +++ b/frontend/src/Indexer/Stats/StatsConnector.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { fetchIndexerStats } from 'Store/Actions/indexerStatsActions'; +import Stats from './Stats'; + +function createMapStateToProps() { + return createSelector( + (state) => state.indexerStats, + (indexerStats) => indexerStats + ); +} + +const mapDispatchToProps = { + dispatchFetchIndexers: fetchIndexerStats +}; + +class StatsConnector extends Component { + + // + // Lifecycle + + componentDidMount() { + this.props.dispatchFetchIndexers(); + } + + // + // Render + + render() { + return ( + + ); + } +} + +StatsConnector.propTypes = { + dispatchFetchIndexers: PropTypes.func.isRequired +}; + +export default connect(createMapStateToProps, mapDispatchToProps)(StatsConnector); diff --git a/frontend/src/Store/Actions/index.js b/frontend/src/Store/Actions/index.js index 8be8e7c67..ff8981a58 100644 --- a/frontend/src/Store/Actions/index.js +++ b/frontend/src/Store/Actions/index.js @@ -5,6 +5,7 @@ import * as customFilters from './customFilterActions'; import * as history from './historyActions'; import * as indexers from './indexerActions'; import * as indexerIndex from './indexerIndexActions'; +import * as indexerStats from './indexerStatsActions'; import * as movies from './movieActions'; import * as oAuth from './oAuthActions'; import * as paths from './pathActions'; @@ -27,6 +28,7 @@ export default [ movies, indexers, indexerIndex, + indexerStats, settings, system, tags diff --git a/frontend/src/Store/Actions/indexerStatsActions.js b/frontend/src/Store/Actions/indexerStatsActions.js new file mode 100644 index 000000000..2e5e9e9ad --- /dev/null +++ b/frontend/src/Store/Actions/indexerStatsActions.js @@ -0,0 +1,46 @@ +import { createThunk, handleThunks } from 'Store/thunks'; +import createFetchHandler from './Creators/createFetchHandler'; +import createHandleActions from './Creators/createHandleActions'; + +// +// Variables + +export const section = 'indexerStats'; + +// +// State + +export const defaultState = { + isFetching: false, + isPopulated: false, + error: null, + items: [], + + details: { + isFetching: false, + isPopulated: false, + error: null, + items: [] + } +}; + +// +// Actions Types + +export const FETCH_INDEXER_STATS = 'indexerStats/fetchIndexerStats'; + +// +// Action Creators + +export const fetchIndexerStats = createThunk(FETCH_INDEXER_STATS); + +// +// Action Handlers + +export const actionHandlers = handleThunks({ + [FETCH_INDEXER_STATS]: createFetchHandler(section, '/indexerStats') +}); + +// +// Reducers +export const reducers = createHandleActions({}, defaultState, section); diff --git a/package.json b/package.json index b930faf45..baa1aaa3e 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "babel-loader": "8.1.0", "babel-plugin-inline-classnames": "2.0.1", "babel-plugin-transform-react-remove-prop-types": "0.4.24", + "chart.js": "2.9.4", "classnames": "2.2.6", "clipboard": "2.0.6", "connected-react-router": "6.8.0", diff --git a/src/NzbDrone.Core/IndexerStats/IndexerStatistics.cs b/src/NzbDrone.Core/IndexerStats/IndexerStatistics.cs index 81f6ddbfe..3443507b1 100644 --- a/src/NzbDrone.Core/IndexerStats/IndexerStatistics.cs +++ b/src/NzbDrone.Core/IndexerStats/IndexerStatistics.cs @@ -5,6 +5,7 @@ namespace NzbDrone.Core.IndexerStats public class IndexerStatistics : ResultSet { public int IndexerId { get; set; } + public string IndexerName { get; set; } public int AverageResponseTime { get; set; } public int NumberOfQueries { get; set; } } diff --git a/src/NzbDrone.Core/IndexerStats/IndexerStatisticsRepository.cs b/src/NzbDrone.Core/IndexerStats/IndexerStatisticsRepository.cs index 1b9d0fa83..613857e84 100644 --- a/src/NzbDrone.Core/IndexerStats/IndexerStatisticsRepository.cs +++ b/src/NzbDrone.Core/IndexerStats/IndexerStatisticsRepository.cs @@ -47,6 +47,7 @@ namespace NzbDrone.Core.IndexerStats private SqlBuilder Builder() => new SqlBuilder() .Select(@"Indexers.Id AS IndexerId, + Indexers.Name AS IndexerName, COUNT(History.Id) AS NumberOfQueries, AVG(json_extract(History.Data,'$.elapsedTime')) AS AverageResponseTime") .Join((t, r) => t.IndexerId == r.Id) diff --git a/src/Prowlarr.Api.V1/Indexers/IndexerStatsResource.cs b/src/Prowlarr.Api.V1/Indexers/IndexerStatsResource.cs index d9f0c31cf..a46c5571b 100644 --- a/src/Prowlarr.Api.V1/Indexers/IndexerStatsResource.cs +++ b/src/Prowlarr.Api.V1/Indexers/IndexerStatsResource.cs @@ -8,6 +8,7 @@ namespace Prowlarr.Api.V1.Indexers public class IndexerStatsResource : RestResource { public int IndexerId { get; set; } + public string IndexerName { get; set; } public int NumberOfQueries { get; set; } public int AverageResponseTime { get; set; } } @@ -24,6 +25,7 @@ namespace Prowlarr.Api.V1.Indexers return new IndexerStatsResource { IndexerId = model.IndexerId, + IndexerName = model.IndexerName, NumberOfQueries = model.NumberOfQueries, AverageResponseTime = model.AverageResponseTime }; diff --git a/yarn.lock b/yarn.lock index ee76c4e6d..62064625b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2416,6 +2416,29 @@ character-reference-invalid@^1.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== +chart.js@2.9.4: + version "2.9.4" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" + integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== + dependencies: + chartjs-color "^2.1.0" + moment "^2.10.2" + +chartjs-color-string@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" + integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== + dependencies: + color-name "^1.0.0" + +chartjs-color@^2.1.0: + version "2.4.1" + resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0" + integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w== + dependencies: + chartjs-color-string "^0.6.0" + color-convert "^1.9.3" + chokidar@^2.0.0, chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2601,7 +2624,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1: +color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -6252,6 +6275,11 @@ moment@2.29.0: resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425" integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA== +moment@^2.10.2: + version "2.29.1" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" + integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== + mousetrap@1.6.5: version "1.6.5" resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"