Reorganize stats on system statistics page (#5007)

webapp/components/analytics/system_analytics.jsx

@@ -80,27 +80,91 @@ class SystemAnalytics extends React.Component {
 
     render() {
         const stats = this.state.stats;
+        const isLicensed = global.window.mm_license.IsLicensed === 'true';
+        const skippedIntensiveQueries = stats[StatTypes.TOTAL_POSTS] === -1;
+        const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]);
+        const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]);
 
         let banner;
-        if (stats[StatTypes.TOTAL_POSTS] === -1) {
+        let postCount;
+        let postTotalGraph;
+        let activeUserGraph;
+        if (skippedIntensiveQueries) {
             banner = (
-                <Banner
+                <div className='banner'>
-                    description={
+                    <div className='banner__content'>
                         <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."
+                            defaultMessage="To maximize performance, some statistics are disabled. You can re-enable them in config.json. See: <a href='https://docs.mattermost.com/administration/statistics.html' target='_blank'>https://docs.mattermost.com/administration/statistics.html</a>"
+                        />
+                    </div>
+                </div>
+            );
+        } else {
+            postCount = (
+                <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>
+            );
         }
 
-        let advancedCounts;
         let advancedStats;
         let advancedGraphs;
+        let sessionCount;
+        let commandCount;
+        let incomingCount;
+        let outgoingCount;
         if (global.window.mm_license.IsLicensed === 'true') {
-            advancedCounts = (
+            sessionCount = (
-                <div className='row'>
                 <StatisticCount
                     title={
                         <FormattedMessage
@@ -111,6 +175,9 @@ class SystemAnalytics extends React.Component {
                     icon='fa-signal'
                     count={stats[StatTypes.TOTAL_SESSIONS]}
                 />
+            );
+
+            commandCount = (
                 <StatisticCount
                     title={
                         <FormattedMessage
@@ -121,6 +188,9 @@ class SystemAnalytics extends React.Component {
                     icon='fa-terminal'
                     count={stats[StatTypes.TOTAL_COMMANDS]}
                 />
+            );
+
+            incomingCount = (
                 <StatisticCount
                     title={
                         <FormattedMessage
@@ -131,6 +201,9 @@ class SystemAnalytics extends React.Component {
                     icon='fa-arrow-down'
                     count={stats[StatTypes.TOTAL_IHOOKS]}
                 />
+            );
+
+            outgoingCount = (
                 <StatisticCount
                     title={
                         <FormattedMessage
@@ -141,7 +214,6 @@ class SystemAnalytics extends React.Component {
                     icon='fa-arrow-up'
                     count={stats[StatTypes.TOTAL_OHOOKS]}
                 />
-                </div>
             );
 
             advancedStats = (
@@ -247,65 +319,89 @@ class SystemAnalytics extends React.Component {
             }
         }
 
-        const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]);
+        const userCount = (
-        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'
+                        id='analytics.system.totalUsers'
-                            defaultMessage='Total Posts'
+                        defaultMessage='Total Users'
                     />
                 }
-                    icon='fa-comment'
+                icon='fa-user'
-                    count={stats[StatTypes.TOTAL_POSTS]}
+                count={stats[StatTypes.TOTAL_USERS]}
             />
         );
 
-            postTotalGraph = (
+        const teamCount = (
-                <div className='row'>
+            <StatisticCount
-                    <LineChart
                 title={
                     <FormattedMessage
-                                id='analytics.system.totalPosts'
+                        id='analytics.system.totalTeams'
-                                defaultMessage='Total Posts'
+                        defaultMessage='Total Teams'
                     />
                 }
-                        data={postCountsDay}
+                icon='fa-users'
-                        options={{
+                count={stats[StatTypes.TOTAL_TEAMS]}
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
             />
+        );
+
+        const channelCount = (
+            <StatisticCount
+                title={
+                    <FormattedMessage
+                        id='analytics.system.totalChannels'
+                        defaultMessage='Total Channels'
+                    />
+                }
+                icon='fa-globe'
+                count={stats[StatTypes.TOTAL_PUBLIC_CHANNELS] + stats[StatTypes.TOTAL_PRIVATE_GROUPS]}
+            />
+        );
+
+        let firstRow;
+        let secondRow;
+        if (isLicensed && skippedIntensiveQueries) {
+            firstRow = (
+                <div className='row'>
+                    {userCount}
+                    {teamCount}
+                    {channelCount}
+                    {sessionCount}
                 </div>
             );
 
-            activeUserGraph = (
+            secondRow = (
                 <div className='row'>
-                    <LineChart
+                    {commandCount}
-                        title={
+                    {incomingCount}
-                            <FormattedMessage
+                    {outgoingCount}
-                                id='analytics.system.activeUsers'
+                </div>
-                                defaultMessage='Active Users With Posts'
+            );
-                            />
+        } else if (isLicensed && !skippedIntensiveQueries) {
-                        }
+            firstRow = (
-                        data={userCountsWithPostsDay}
+                <div className='row'>
-                        options={{
+                    {userCount}
-                            legend: {
+                    {teamCount}
-                                display: false
+                    {channelCount}
-                            }
+                    {postCount}
-                        }}
+                </div>
-                        width='740'
+            );
-                        height='225'
+
-                    />
+            secondRow = (
+                <div className='row'>
+                    {sessionCount}
+                    {commandCount}
+                    {incomingCount}
+                    {outgoingCount}
+                </div>
+            );
+        } else if (!isLicensed) {
+            firstRow = (
+                <div className='row'>
+                    {userCount}
+                    {teamCount}
+                    {channelCount}
+                    {postCount}
                 </div>
             );
         }
@@ -319,40 +415,8 @@ class SystemAnalytics extends React.Component {
                     />
                 </h3>
                 {banner}
-                <div className='row'>
+                {firstRow}
-                    <StatisticCount
+                {secondRow}
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalUsers'
-                                defaultMessage='Total Users'
-                            />
-                        }
-                        icon='fa-user'
-                        count={stats[StatTypes.TOTAL_USERS]}
-                    />
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalTeams'
-                                defaultMessage='Total Teams'
-                            />
-                        }
-                        icon='fa-users'
-                        count={stats[StatTypes.TOTAL_TEAMS]}
-                    />
-                    {totalPostsCount}
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalChannels'
-                                defaultMessage='Total Channels'
-                            />
-                        }
-                        icon='fa-globe'
-                        count={stats[StatTypes.TOTAL_PUBLIC_CHANNELS] + stats[StatTypes.TOTAL_PRIVATE_GROUPS]}
-                    />
-                </div>
-                {advancedCounts}
                 {advancedStats}
                 {advancedGraphs}
                 {postTotalGraph}

webapp/i18n/en.json

@@ -922,7 +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.skippedIntensiveQueries": "To maximize performance, some statistics are disabled. You can re-enable them in config.json. See: <a href='https://docs.mattermost.com/administration/statistics.html' target='_blank'>https://docs.mattermost.com/administration/statistics.html</a>",
   "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>.",