Reorganize stats on system statistics page (#5007)

1 files changed, 189 insertions, 125 deletions

diff --git a/webapp/components/analytics/system_analytics.jsx b/webapp/components/analytics/system_analytics.jsx
index 244e1ff07..dd7b90260 100644
--- a/webapp/components/analytics/system_analytics.jsx
+++ b/webapp/components/analytics/system_analytics.jsx
@@ -80,69 +80,141 @@ 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
-                    description={
+                <div className='banner'>
+                    <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]}
                 />
             );
-        }
 
-        let advancedCounts;
-        let advancedStats;
-        let advancedGraphs;
-        if (global.window.mm_license.IsLicensed === 'true') {
-            advancedCounts = (
+            postTotalGraph = (
                 <div className='row'>
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalSessions'
-                                defaultMessage='Total Sessions'
-                            />
-                        }
-                        icon='fa-signal'
-                        count={stats[StatTypes.TOTAL_SESSIONS]}
-                    />
-                    <StatisticCount
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalCommands'
-                                defaultMessage='Total Commands'
-                            />
-                        }
-                        icon='fa-terminal'
-                        count={stats[StatTypes.TOTAL_COMMANDS]}
-                    />
-                    <StatisticCount
+                    <LineChart
                         title={
                             <FormattedMessage
-                                id='analytics.system.totalIncomingWebhooks'
-                                defaultMessage='Incoming Webhooks'
+                                id='analytics.system.totalPosts'
+                                defaultMessage='Total Posts'
                             />
                         }
-                        icon='fa-arrow-down'
-                        count={stats[StatTypes.TOTAL_IHOOKS]}
+                        data={postCountsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
                     />
-                    <StatisticCount
+                </div>
+            );
+
+            activeUserGraph = (
+                <div className='row'>
+                    <LineChart
                         title={
                             <FormattedMessage
-                                id='analytics.system.totalOutgoingWebhooks'
-                                defaultMessage='Outgoing Webhooks'
+                                id='analytics.system.activeUsers'
+                                defaultMessage='Active Users With Posts'
                             />
                         }
-                        icon='fa-arrow-up'
-                        count={stats[StatTypes.TOTAL_OHOOKS]}
+                        data={userCountsWithPostsDay}
+                        options={{
+                            legend: {
+                                display: false
+                            }
+                        }}
+                        width='740'
+                        height='225'
                     />
                 </div>
             );
+        }
+
+        let advancedStats;
+        let advancedGraphs;
+        let sessionCount;
+        let commandCount;
+        let incomingCount;
+        let outgoingCount;
+        if (global.window.mm_license.IsLicensed === 'true') {
+            sessionCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.system.totalSessions'
+                            defaultMessage='Total Sessions'
+                        />
+                    }
+                    icon='fa-signal'
+                    count={stats[StatTypes.TOTAL_SESSIONS]}
+                />
+            );
+
+            commandCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.system.totalCommands'
+                            defaultMessage='Total Commands'
+                        />
+                    }
+                    icon='fa-terminal'
+                    count={stats[StatTypes.TOTAL_COMMANDS]}
+                />
+            );
+
+            incomingCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.system.totalIncomingWebhooks'
+                            defaultMessage='Incoming Webhooks'
+                        />
+                    }
+                    icon='fa-arrow-down'
+                    count={stats[StatTypes.TOTAL_IHOOKS]}
+                />
+            );
+
+            outgoingCount = (
+                <StatisticCount
+                    title={
+                        <FormattedMessage
+                            id='analytics.system.totalOutgoingWebhooks'
+                            defaultMessage='Outgoing Webhooks'
+                        />
+                    }
+                    icon='fa-arrow-up'
+                    count={stats[StatTypes.TOTAL_OHOOKS]}
+                />
+            );
 
             advancedStats = (
                 <div className='row'>
@@ -247,65 +319,89 @@ class SystemAnalytics extends React.Component {
             }
         }
 
-        const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]);
-        const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]);
+        const userCount = (
+            <StatisticCount
+                title={
+                    <FormattedMessage
+                        id='analytics.system.totalUsers'
+                        defaultMessage='Total Users'
+                    />
+                }
+                icon='fa-user'
+                count={stats[StatTypes.TOTAL_USERS]}
+            />
+        );
 
-        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]}
-                />
+        const teamCount = (
+            <StatisticCount
+                title={
+                    <FormattedMessage
+                        id='analytics.system.totalTeams'
+                        defaultMessage='Total Teams'
+                    />
+                }
+                icon='fa-users'
+                count={stats[StatTypes.TOTAL_TEAMS]}
+            />
+        );
+
+        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>
             );
 
-            postTotalGraph = (
+            secondRow = (
                 <div className='row'>
-                    <LineChart
-                        title={
-                            <FormattedMessage
-                                id='analytics.system.totalPosts'
-                                defaultMessage='Total Posts'
-                            />
-                        }
-                        data={postCountsDay}
-                        options={{
-                            legend: {
-                                display: false
-                            }
-                        }}
-                        width='740'
-                        height='225'
-                    />
+                    {commandCount}
+                    {incomingCount}
+                    {outgoingCount}
+                </div>
+            );
+        } else if (isLicensed && !skippedIntensiveQueries) {
+            firstRow = (
+                <div className='row'>
+                    {userCount}
+                    {teamCount}
+                    {channelCount}
+                    {postCount}
                 </div>
             );
 
-            activeUserGraph = (
+            secondRow = (
                 <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'
-                    />
+                    {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'>
-                    <StatisticCount
-                        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}
+                {firstRow}
+                {secondRow}
                 {advancedStats}
                 {advancedGraphs}
                 {postTotalGraph}