Reorganize stats on system statistics page (#5007)

This commit is contained in:
Joram Wilander
2017-01-09 09:26:07 -05:00
committed by Harrison Healey
parent 280e3aac2b
commit f6672605e8
2 changed files with 201 additions and 137 deletions

View File

@@ -80,68 +80,140 @@ 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]}
/>
);
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 = (
<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
title={
<FormattedMessage
id='analytics.system.totalIncomingWebhooks'
defaultMessage='Incoming Webhooks'
/>
}
icon='fa-arrow-down'
count={stats[StatTypes.TOTAL_IHOOKS]}
/>
<StatisticCount
title={
<FormattedMessage
id='analytics.system.totalOutgoingWebhooks'
defaultMessage='Outgoing Webhooks'
/>
}
icon='fa-arrow-up'
count={stats[StatTypes.TOTAL_OHOOKS]}
/>
</div>
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 = (
@@ -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]);
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'
const userCount = (
<StatisticCount
title={
<FormattedMessage
id='analytics.system.totalUsers'
defaultMessage='Total Users'
/>
}
icon='fa-user'
count={stats[StatTypes.TOTAL_USERS]}
/>
);
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>
);
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'
/>
{commandCount}
{incomingCount}
{outgoingCount}
</div>
);
} else if (isLicensed && !skippedIntensiveQueries) {
firstRow = (
<div className='row'>
{userCount}
{teamCount}
{channelCount}
{postCount}
</div>
);
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'>
<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}

View File

@@ -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>.",