diff --git a/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js b/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js new file mode 100644 index 000000000..38783e7a5 --- /dev/null +++ b/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js @@ -0,0 +1,20 @@ +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; +import RelativeDateCell from './RelativeDateCell'; + +function createMapStateToProps() { + return createSelector( + createUISettingsSelector(), + (uiSettings) => { + return { + showRelativeDates: uiSettings.showRelativeDates, + shortDateFormat: uiSettings.shortDateFormat, + longDateFormat: uiSettings.longDateFormat, + timeFormat: uiSettings.timeFormat + }; + } + ); +} + +export default connect(createMapStateToProps, null)(RelativeDateCell); diff --git a/frontend/src/Indexer/Stats/IndexerStats.css b/frontend/src/Indexer/Stats/IndexerStats.css index a6ec01190..975f5ddae 100644 --- a/frontend/src/Indexer/Stats/IndexerStats.css +++ b/frontend/src/Indexer/Stats/IndexerStats.css @@ -8,6 +8,11 @@ width: 50%; } +.quarterWidthChart { + display: inline-block; + width: 25%; +} + .chartContainer { margin: 5px; padding: 15px 25px; @@ -16,12 +21,32 @@ background-color: var(--chartBackgroundColor); } +.statContainer { + margin: 5px; + padding: 15px 25px; + height: 150px; + border-radius: 10px; + background-color: var(--chartBackgroundColor); +} + +.statTitle { + font-weight: bold; + font-size: 14px; +} + +.stat { + font-weight: bold; + font-size: 60px; +} + @media only screen and (max-width: $breakpointSmall) { .halfWidthChart { display: inline-block; - margin: 5px; - padding: 15px 25px; width: 100%; - height: 300px; + } + + .quarterWidthChart { + display: inline-block; + width: 100%; } } diff --git a/frontend/src/Indexer/Stats/IndexerStats.css.d.ts b/frontend/src/Indexer/Stats/IndexerStats.css.d.ts index 6bb12271e..e2aae98c6 100644 --- a/frontend/src/Indexer/Stats/IndexerStats.css.d.ts +++ b/frontend/src/Indexer/Stats/IndexerStats.css.d.ts @@ -4,6 +4,10 @@ interface CssExports { 'chartContainer': string; 'fullWidthChart': string; 'halfWidthChart': string; + 'quarterWidthChart': string; + 'stat': string; + 'statContainer': string; + 'statTitle': string; } export const cssExports: CssExports; export default cssExports; diff --git a/frontend/src/Indexer/Stats/IndexerStats.tsx b/frontend/src/Indexer/Stats/IndexerStats.tsx index 88e2c3a62..2eed5f5b7 100644 --- a/frontend/src/Indexer/Stats/IndexerStats.tsx +++ b/frontend/src/Indexer/Stats/IndexerStats.tsx @@ -24,6 +24,7 @@ import { IndexerStatsIndexer, IndexerStatsUserAgent, } from 'typings/IndexerStats'; +import abbreviateNumber from 'Utilities/Number/abbreviateNumber'; import getErrorMessage from 'Utilities/Object/getErrorMessage'; import translate from 'Utilities/String/translate'; import IndexerStatsFilterModal from './IndexerStatsFilterModal'; @@ -201,6 +202,16 @@ function IndexerStats() { ); const isLoaded = !error && isPopulated; + const indexerCount = item.indexers?.length ?? 0; + const userAgentCount = item.userAgents?.length ?? 0; + const queryCount = + item.indexers?.reduce((total, indexer) => { + return total + indexer.numberOfQueries; + }, 0) ?? 0; + const grabCount = + item.indexers?.reduce((total, indexer) => { + return total + indexer.numberOfGrabs; + }, 0) ?? 0; return ( @@ -228,6 +239,40 @@ function IndexerStats() { {isLoaded && (
+
+
+
+ {translate('ActiveIndexers')} +
+
{indexerCount}
+
+
+
+
+
+ {translate('TotalQueries')} +
+
+ {abbreviateNumber(queryCount)} +
+
+
+
+
+
+ {translate('TotalGrabs')} +
+
{abbreviateNumber(grabCount)}
+
+
+
+
+
+ {translate('ActiveApps')} +
+
{userAgentCount}
+
+