Hide skipped statistics in system console and add note (#4961)

3 files changed, 172 insertions, 102 deletions

diff --git a/webapp/components/analytics/system_analytics.jsx b/webapp/components/analytics/system_analytics.jsx
index a50a33812..244e1ff07 100644
--- a/webapp/components/analytics/system_analytics.jsx
+++ b/webapp/components/analytics/system_analytics.jsx
@@ -81,10 +81,23 @@ class SystemAnalytics extends React.Component {
     render() {
         const stats = this.state.stats;
 
+        let banner;
+        if (stats[StatTypes.TOTAL_POSTS] === -1) {
+            banner = (
+                <Banner
+                    description={
+                        <FormattedHTMLMessage
+                            id='analytics.system.skippedIntensiveQueries'
+                            defaultMessage="Some statistics have been omitted because they put too much load on the system to calculate. See <a href='https://docs.mattermost.com/administration/statistics.html' target='_blank'>https://docs.mattermost.com/administration/statistics.html</a> for more details."
+                        />
+                    }
+                />
+            );
+        }
+
         let advancedCounts;
         let advancedStats;
         let advancedGraphs;
-        let banner;
         if (global.window.mm_license.IsLicensed === 'true') {
             advancedCounts = (
                 <div className='row'>
@@ -169,30 +182,37 @@ class SystemAnalytics extends React.Component {
             const channelTypeData = formatChannelDoughtnutData(stats[StatTypes.TOTAL_PUBLIC_CHANNELS], stats[StatTypes.TOTAL_PRIVATE_GROUPS], this.props.intl);
             const postTypeData = formatPostDoughtnutData(stats[StatTypes.TOTAL_FILE_POSTS], stats[StatTypes.TOTAL_HASHTAG_POSTS], stats[StatTypes.TOTAL_POSTS], this.props.intl);
 
-            advancedGraphs = (
-                <div className='row'>
+            let postTypeGraph;
+            if (stats[StatTypes.TOTAL_POSTS] !== -1) {
+                postTypeGraph = (
                     <DoughnutChart
                         title={
                             <FormattedMessage
-                                id='analytics.system.channelTypes'
-                                defaultMessage='Channel Types'
+                                id='analytics.system.postTypes'
+                                defaultMessage='Posts, Files and Hashtags'
                             />
                         }
-                        data={channelTypeData}
+                        data={postTypeData}
                         width='300'
                         height='225'
                     />
+                );
+            }
+
+            advancedGraphs = (
+                <div className='row'>
                     <DoughnutChart
                         title={
                             <FormattedMessage
-                                id='analytics.system.postTypes'
-                                defaultMessage='Posts, Files and Hashtags'
+                                id='analytics.system.channelTypes'
+                                defaultMessage='Channel Types'
                             />
                         }
-                        data={postTypeData}
+                        data={channelTypeData}
                         width='300'
                         height='225'
                     />
+                    {postTypeGraph}
                 </div>
             );
 
@@ -230,6 +250,66 @@ class SystemAnalytics extends React.Component {
         const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]);
         const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]);
 
+        let totalPostsCount;
+        let postTotalGraph;
+        let activeUserGraph;
+        if (stats[StatTypes.TOTAL_POSTS] !== -1) {
+            totalPostsCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.system.totalPosts'
+                            defaultMessage='Total Posts'
+                        />
+                    }
+                    icon='fa-comment'
+                    count={stats[StatTypes.TOTAL_POSTS]}
+                />
+            );
+
+            postTotalGraph = (
+                <div className='row'>
+                    <LineChart
+                        title={
+                            <FormattedMessage
+                                id='analytics.system.totalPosts'
+                                defaultMessage='Total Posts'
+                            />
+                        }
+                        data={postCountsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
+                    />
+                </div>
+            );
+
+            activeUserGraph = (
+                <div className='row'>
+                    <LineChart
+                        title={
+                            <FormattedMessage
+                                id='analytics.system.activeUsers'
+                                defaultMessage='Active Users With Posts'
+                            />
+                        }
+                        data={userCountsWithPostsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
+                    />
+                </div>
+            );
+        }
+
         return (
             <div className='wrapper--fixed team_statistics'>
                 <h3>
@@ -260,16 +340,7 @@ class SystemAnalytics extends React.Component {
                         icon='fa-users'
                         count={stats[StatTypes.TOTAL_TEAMS]}
                     />
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalPosts'
-                                defaultMessage='Total Posts'
-                            />
-                        }
-                        icon='fa-comment'
-                        count={stats[StatTypes.TOTAL_POSTS]}
-                    />
+                    {totalPostsCount}
                     <StatisticCount
                         title={
                             <FormattedMessage
@@ -284,42 +355,8 @@ class SystemAnalytics extends React.Component {
                 {advancedCounts}
                 {advancedStats}
                 {advancedGraphs}
-                <div className='row'>
-                    <LineChart
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalPosts'
-                                defaultMessage='Total Posts'
-                            />
-                        }
-                        data={postCountsDay}
-                        options={{
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
-                    />
-                </div>
-                <div className='row'>
-                    <LineChart
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.activeUsers'
-                                defaultMessage='Active Users With Posts'
-                            />
-                        }
-                        data={userCountsWithPostsDay}
-                        options={{
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
-                    />
-                </div>
+                {postTotalGraph}
+                {activeUserGraph}
             </div>
         );
     }
diff --git a/webapp/components/analytics/team_analytics.jsx b/webapp/components/analytics/team_analytics.jsx
index 574a388d0..66eb7e2db 100644
--- a/webapp/components/analytics/team_analytics.jsx
+++ b/webapp/components/analytics/team_analytics.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import Banner from 'components/admin_console/banner.jsx';
 import LineChart from './line_chart.jsx';
 import StatisticCount from './statistic_count.jsx';
 import TableChart from './table_chart.jsx';
@@ -14,7 +15,7 @@ import Constants from 'utils/constants.jsx';
 const StatTypes = Constants.StatTypes;
 
 import {formatPostsPerDayData, formatUsersWithPostsPerDayData} from './system_analytics.jsx';
-import {FormattedMessage, FormattedDate} from 'react-intl';
+import {FormattedMessage, FormattedDate, FormattedHTMLMessage} from 'react-intl';
 
 import React from 'react';
 
@@ -95,6 +96,79 @@ export default class TeamAnalytics extends React.Component {
         const stats = this.state.stats;
         const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]);
         const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]);
+
+        let banner;
+        let totalPostsCount;
+        let postTotalGraph;
+        let userActiveGraph;
+        if (stats[StatTypes.TOTAL_POSTS] === -1) {
+            banner = (
+                <Banner
+                    description={
+                        <FormattedHTMLMessage
+                            id='analytics.system.skippedIntensiveQueries'
+                            defaultMessage="Some statistics have been omitted because they put too much load on the system to calculate. See <a href='https://docs.mattermost.com/administration/statistics.html' target='_blank'>https://docs.mattermost.com/administration/statistics.html</a> for more details."
+                        />
+                    }
+                />
+            );
+        } else {
+            totalPostsCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.team.totalPosts'
+                            defaultMessage='Total Posts'
+                        />
+                    }
+                    icon='fa-comment'
+                    count={stats[StatTypes.TOTAL_POSTS]}
+                />
+            );
+
+            postTotalGraph = (
+                <div className='row'>
+                    <LineChart
+                        title={
+                            <FormattedMessage
+                                id='analytics.team.totalPosts'
+                                defaultMessage='Total Posts'
+                            />
+                        }
+                        data={postCountsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
+                    />
+                </div>
+            );
+
+            userActiveGraph = (
+                <div className='row'>
+                    <LineChart
+                        title={
+                            <FormattedMessage
+                                id='analytics.team.activeUsers'
+                                defaultMessage='Active Users With Posts'
+                            />
+                        }
+                        data={userCountsWithPostsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
+                    />
+                </div>
+            );
+        }
+
         const recentActiveUsers = formatRecentUsersData(stats[StatTypes.RECENTLY_ACTIVE_USERS]);
         const newlyCreatedUsers = formatNewUsersData(stats[StatTypes.NEWLY_CREATED_USERS]);
 
@@ -109,6 +183,7 @@ export default class TeamAnalytics extends React.Component {
                         }}
                     />
                 </h3>
+                {banner}
                 <div className='row'>
                     <StatisticCount
                         title={
@@ -140,53 +215,10 @@ export default class TeamAnalytics extends React.Component {
                         icon='fa-globe'
                         count={stats[StatTypes.TOTAL_PRIVATE_GROUPS]}
                     />
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.team.totalPosts'
-                                defaultMessage='Total Posts'
-                            />
-                        }
-                        icon='fa-comment'
-                        count={stats[StatTypes.TOTAL_POSTS]}
-                    />
-                </div>
-                <div className='row'>
-                    <LineChart
-                        title={
-                            <FormattedMessage
-                                id='analytics.team.totalPosts'
-                                defaultMessage='Total Posts'
-                            />
-                        }
-                        data={postCountsDay}
-                        options={{
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
-                    />
-                </div>
-                <div className='row'>
-                    <LineChart
-                        title={
-                            <FormattedMessage
-                                id='analytics.team.activeUsers'
-                                defaultMessage='Active Users With Posts'
-                            />
-                        }
-                        data={userCountsWithPostsDay}
-                        options={{
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
-                    />
+                    {totalPostsCount}
                 </div>
+                {postTotalGraph}
+                {userActiveGraph}
                 <div className='row'>
                     <TableChart
                         title={
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index def5b117d..746a0c634 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -922,6 +922,7 @@
   "analytics.chart.loading": "Loading...",
   "analytics.chart.meaningful": "Not enough data for a meaningful representation.",
   "analytics.system.activeUsers": "Active Users With Posts",
+  "analytics.system.skippedIntensiveQueries": "Some statistics have been omitted because they put too much load on the system to calculate. See <a href='https://docs.mattermost.com/administration/statistics.html' target='_blank'>https://docs.mattermost.com/administration/statistics.html</a> for more details.",
   "analytics.system.channelTypes": "Channel Types",
   "analytics.system.expiredBanner": "The Enterprise license expired on {date}. You have 15 days from this date to renew the license, please contact <a href='mailto:commercial@mattermost.com'>commercial@mattermost.com</a>.",
   "analytics.system.expiringBanner": "The Enterprise license is expiring on {date}. To renew your license, please contact <a href='mailto:commercial@mattermost.com'>commercial@mattermost.com</a>.",