From 8239c68cf323e4bb20007d2b456336becead273d Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Thu, 25 Feb 2016 12:32:46 -0500 Subject: Refactor and modularize analytics on the client --- .../components/admin_console/admin_controller.jsx | 4 +- web/react/components/admin_console/analytics.jsx | 489 --------------------- .../components/admin_console/doughnut_chart.jsx | 77 ---- web/react/components/admin_console/line_chart.jsx | 50 --- .../components/admin_console/statistic_count.jsx | 33 -- .../components/admin_console/system_analytics.jsx | 216 --------- .../components/admin_console/team_analytics.jsx | 253 ----------- web/react/components/analytics/doughnut_chart.jsx | 77 ++++ web/react/components/analytics/line_chart.jsx | 90 ++++ web/react/components/analytics/statistic_count.jsx | 33 ++ .../components/analytics/system_analytics.jsx | 346 +++++++++++++++ web/react/components/analytics/table_chart.jsx | 60 +++ web/react/components/analytics/team_analytics.jsx | 235 ++++++++++ web/react/stores/analytics_store.jsx | 85 ++++ web/react/utils/async_client.jsx | 270 +++++++++++- web/react/utils/client.jsx | 23 +- web/react/utils/constants.jsx | 20 + web/static/i18n/en.json | 44 +- web/static/i18n/es.json | 37 +- 19 files changed, 1269 insertions(+), 1173 deletions(-) delete mode 100644 web/react/components/admin_console/analytics.jsx delete mode 100644 web/react/components/admin_console/doughnut_chart.jsx delete mode 100644 web/react/components/admin_console/line_chart.jsx delete mode 100644 web/react/components/admin_console/statistic_count.jsx delete mode 100644 web/react/components/admin_console/system_analytics.jsx delete mode 100644 web/react/components/admin_console/team_analytics.jsx create mode 100644 web/react/components/analytics/doughnut_chart.jsx create mode 100644 web/react/components/analytics/line_chart.jsx create mode 100644 web/react/components/analytics/statistic_count.jsx create mode 100644 web/react/components/analytics/system_analytics.jsx create mode 100644 web/react/components/analytics/table_chart.jsx create mode 100644 web/react/components/analytics/team_analytics.jsx create mode 100644 web/react/stores/analytics_store.jsx (limited to 'web') diff --git a/web/react/components/admin_console/admin_controller.jsx b/web/react/components/admin_console/admin_controller.jsx index de0b085bc..32ed70a99 100644 --- a/web/react/components/admin_console/admin_controller.jsx +++ b/web/react/components/admin_console/admin_controller.jsx @@ -21,10 +21,10 @@ import TeamSettingsTab from './team_settings.jsx'; import ServiceSettingsTab from './service_settings.jsx'; import LegalAndSupportSettingsTab from './legal_and_support_settings.jsx'; import TeamUsersTab from './team_users.jsx'; -import TeamAnalyticsTab from './team_analytics.jsx'; +import TeamAnalyticsTab from '../analytics/team_analytics.jsx'; import LdapSettingsTab from './ldap_settings.jsx'; import LicenseSettingsTab from './license_settings.jsx'; -import SystemAnalyticsTab from './system_analytics.jsx'; +import SystemAnalyticsTab from '../analytics/system_analytics.jsx'; export default class AdminController extends React.Component { constructor(props) { diff --git a/web/react/components/admin_console/analytics.jsx b/web/react/components/admin_console/analytics.jsx deleted file mode 100644 index ec9ad4da0..000000000 --- a/web/react/components/admin_console/analytics.jsx +++ /dev/null @@ -1,489 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Constants from '../../utils/constants.jsx'; -import LineChart from './line_chart.jsx'; -import DoughnutChart from './doughnut_chart.jsx'; -import StatisticCount from './statistic_count.jsx'; - -var Tooltip = ReactBootstrap.Tooltip; -var OverlayTrigger = ReactBootstrap.OverlayTrigger; - -import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedDate} from 'mm-intl'; - -const holders = defineMessages({ - analyticsTotalUsers: { - id: 'admin.analytics.totalUsers', - defaultMessage: 'Total Users' - }, - analyticsPublicChannels: { - id: 'admin.analytics.publicChannels', - defaultMessage: 'Public Channels' - }, - analyticsPrivateGroups: { - id: 'admin.analytics.privateGroups', - defaultMessage: 'Private Groups' - }, - analyticsTotalPosts: { - id: 'admin.analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - analyticsFilePosts: { - id: 'admin.analytics.totalFilePosts', - defaultMessage: 'Posts with Files' - }, - analyticsHashtagPosts: { - id: 'admin.analytics.totalHashtagPosts', - defaultMessage: 'Posts with Hashtags' - }, - analyticsIncomingHooks: { - id: 'admin.analytics.totalIncomingWebhooks', - defaultMessage: 'Incoming Webhooks' - }, - analyticsOutgoingHooks: { - id: 'admin.analytics.totalOutgoingWebhooks', - defaultMessage: 'Outgoing Webhooks' - }, - analyticsChannelTypes: { - id: 'admin.analytics.channelTypes', - defaultMessage: 'Channel Types' - }, - analyticsTextPosts: { - id: 'admin.analytics.textPosts', - defaultMessage: 'Posts with Text-only' - }, - analyticsPostTypes: { - id: 'admin.analytics.postTypes', - defaultMessage: 'Posts, Files and Hashtags' - } -}); - -export default class Analytics extends React.Component { - constructor(props) { - super(props); - - this.state = {}; - } - - render() { // in the future, break down these into smaller components - const {formatMessage} = this.props.intl; - - var serverError = ''; - if (this.props.serverError) { - serverError =
; - } - - let loading = ( -
- -
- ); - - let firstRow; - let extraGraphs; - if (this.props.showAdvanced) { - firstRow = ( -
- - - - -
- ); - - const channelTypeData = [ - { - value: this.props.channelOpenCount, - color: '#46BFBD', - highlight: '#5AD3D1', - label: formatMessage(holders.analyticsPublicChannels) - }, - { - value: this.props.channelPrivateCount, - color: '#FDB45C', - highlight: '#FFC870', - label: formatMessage(holders.analyticsPrivateGroups) - } - ]; - - const postTypeData = [ - { - value: this.props.filePostCount, - color: '#46BFBD', - highlight: '#5AD3D1', - label: formatMessage(holders.analyticsFilePosts) - }, - { - value: this.props.filePostCount, - color: '#F7464A', - highlight: '#FF5A5E', - label: formatMessage(holders.analyticsHashtagPosts) - }, - { - value: this.props.postCount - this.props.filePostCount - this.props.hashtagPostCount, - color: '#FDB45C', - highlight: '#FFC870', - label: formatMessage(holders.analyticsTextPosts) - } - ]; - - extraGraphs = ( -
- - -
- ); - } else { - firstRow = ( -
- - - - -
- ); - } - - let postCountsByDay; - if (this.props.postCountsDay == null) { - postCountsByDay = ( -
-
-
- -
-
{loading}
-
-
- ); - } else { - let content; - if (this.props.postCountsDay.labels.length === 0) { - content = ( -
- -
- ); - } else { - content = ( - - ); - } - postCountsByDay = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let usersWithPostsByDay; - if (this.props.userCountsWithPostsDay == null) { - usersWithPostsByDay = ( -
-
-
- -
-
{loading}
-
-
- ); - } else { - let content; - if (this.props.userCountsWithPostsDay.labels.length === 0) { - content = ( -
- -
- ); - } else { - content = ( - - ); - } - usersWithPostsByDay = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let recentActiveUser; - if (this.props.recentActiveUsers != null) { - let content; - if (this.props.recentActiveUsers.length === 0) { - content = loading; - } else { - content = ( - - - { - this.props.recentActiveUsers.map((user) => { - const tooltip = ( - - {user.email} - - ); - - return ( - - - - - ); - }) - } - -
- - - - - -
- ); - } - recentActiveUser = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - let newUsers; - if (this.props.newlyCreatedUsers != null) { - let content; - if (this.props.newlyCreatedUsers.length === 0) { - content = loading; - } else { - content = ( - - - { - this.props.newlyCreatedUsers.map((user) => { - const tooltip = ( - - {user.email} - - ); - - return ( - - - - - ); - }) - } - -
- - - - - -
- ); - } - newUsers = ( -
-
-
- -
-
- {content} -
-
-
- ); - } - - return ( -
-

- -

- {serverError} - {firstRow} - {extraGraphs} -
- {postCountsByDay} -
-
- {usersWithPostsByDay} -
-
- {recentActiveUser} - {newUsers} -
-
- ); - } -} - -Analytics.defaultProps = { - title: null, - channelOpenCount: null, - channelPrivateCount: null, - postCount: null, - postCountsDay: null, - userCountsWithPostsDay: null, - recentActiveUsers: null, - newlyCreatedUsers: null, - uniqueUserCount: null, - serverError: null -}; - -Analytics.propTypes = { - intl: intlShape.isRequired, - title: React.PropTypes.string, - channelOpenCount: React.PropTypes.number, - channelPrivateCount: React.PropTypes.number, - postCount: React.PropTypes.number, - showAdvanced: React.PropTypes.bool, - filePostCount: React.PropTypes.number, - hashtagPostCount: React.PropTypes.number, - incomingWebhookCount: React.PropTypes.number, - outgoingWebhookCount: React.PropTypes.number, - postCountsDay: React.PropTypes.object, - userCountsWithPostsDay: React.PropTypes.object, - recentActiveUsers: React.PropTypes.array, - newlyCreatedUsers: React.PropTypes.array, - uniqueUserCount: React.PropTypes.number, - serverError: React.PropTypes.string -}; - -export default injectIntl(Analytics); diff --git a/web/react/components/admin_console/doughnut_chart.jsx b/web/react/components/admin_console/doughnut_chart.jsx deleted file mode 100644 index e2dc01528..000000000 --- a/web/react/components/admin_console/doughnut_chart.jsx +++ /dev/null @@ -1,77 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import {FormattedMessage} from 'mm-intl'; - -export default class DoughnutChart extends React.Component { - constructor(props) { - super(props); - - this.initChart = this.initChart.bind(this); - this.chart = null; - } - - componentDidMount() { - this.initChart(this.props); - } - - componentWillReceiveProps(nextProps) { - if (this.chart) { - this.chart.destroy(); - this.initChart(nextProps); - } - } - - componentWillUnmount() { - if (this.chart) { - this.chart.destroy(); - } - } - - initChart(props) { - var el = ReactDOM.findDOMNode(this.refs.canvas); - var ctx = el.getContext('2d'); - this.chart = new Chart(ctx).Doughnut(props.data, props.options || {}); //eslint-disable-line new-cap - } - - render() { - let content; - if (this.props.data == null) { - content = ( - - ); - } else { - content = ( - - ); - } - - return ( -
-
-
- {this.props.title} -
-
- {content} -
-
-
- ); - } -} - -DoughnutChart.propTypes = { - title: React.PropTypes.string, - width: React.PropTypes.string, - height: React.PropTypes.string, - data: React.PropTypes.array, - options: React.PropTypes.object -}; diff --git a/web/react/components/admin_console/line_chart.jsx b/web/react/components/admin_console/line_chart.jsx deleted file mode 100644 index 7e2f95c84..000000000 --- a/web/react/components/admin_console/line_chart.jsx +++ /dev/null @@ -1,50 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -export default class LineChart extends React.Component { - constructor(props) { - super(props); - - this.initChart = this.initChart.bind(this); - this.chart = null; - } - - componentDidMount() { - this.initChart(this.props); - } - - componentWillReceiveProps(nextProps) { - if (this.chart) { - this.chart.destroy(); - this.initChart(nextProps); - } - } - - componentWillUnmount() { - if (this.chart) { - this.chart.destroy(); - } - } - - initChart(props) { - var el = ReactDOM.findDOMNode(this); - var ctx = el.getContext('2d'); - this.chart = new Chart(ctx).Line(props.data, props.options || {}); //eslint-disable-line new-cap - } - - render() { - return ( - - ); - } -} - -LineChart.propTypes = { - width: React.PropTypes.string, - height: React.PropTypes.string, - data: React.PropTypes.object, - options: React.PropTypes.object -}; diff --git a/web/react/components/admin_console/statistic_count.jsx b/web/react/components/admin_console/statistic_count.jsx deleted file mode 100644 index 118a0ad31..000000000 --- a/web/react/components/admin_console/statistic_count.jsx +++ /dev/null @@ -1,33 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import {FormattedMessage} from 'mm-intl'; - -export default class StatisticCount extends React.Component { - render() { - let loading = ( - - ); - - return ( -
-
-
- {this.props.title} - -
-
{this.props.count == null ? loading : this.props.count}
-
-
- ); - } -} - -StatisticCount.propTypes = { - title: React.PropTypes.string.isRequired, - icon: React.PropTypes.string.isRequired, - count: React.PropTypes.number -}; diff --git a/web/react/components/admin_console/system_analytics.jsx b/web/react/components/admin_console/system_analytics.jsx deleted file mode 100644 index f983db177..000000000 --- a/web/react/components/admin_console/system_analytics.jsx +++ /dev/null @@ -1,216 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Analytics from './analytics.jsx'; -import * as Client from '../../utils/client.jsx'; - -import {injectIntl, intlShape, defineMessages} from 'mm-intl'; - -const labels = defineMessages({ - totalPosts: { - id: 'admin.system_analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - activeUsers: { - id: 'admin.system_analytics.activeUsers', - defaultMessage: 'Active Users With Posts' - }, - title: { - id: 'admin.system_analytics.title', - defaultMessage: 'the System' - } -}); - -class SystemAnalytics extends React.Component { - constructor(props) { - super(props); - - this.getData = this.getData.bind(this); - - this.state = { // most of this state should be from a store in the future - users: null, - serverError: null, - channel_open_count: null, - channel_private_count: null, - post_count: null, - post_counts_day: null, - user_counts_with_posts_day: null, - recent_active_users: null, - newly_created_users: null, - unique_user_count: null - }; - } - - componentDidMount() { - this.getData(); - } - - getData() { // should be moved to an action creator eventually - const {formatMessage} = this.props.intl; - Client.getSystemAnalytics( - 'standard', - (data) => { - for (var index in data) { - if (data[index].name === 'channel_open_count') { - this.setState({channel_open_count: data[index].value}); - } - - if (data[index].name === 'channel_private_count') { - this.setState({channel_private_count: data[index].value}); - } - - if (data[index].name === 'post_count') { - this.setState({post_count: data[index].value}); - } - - if (data[index].name === 'unique_user_count') { - this.setState({unique_user_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getSystemAnalytics( - 'post_counts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.totalPosts), - fillColor: 'rgba(151,187,205,0.2)', - strokeColor: 'rgba(151,187,205,1)', - pointColor: 'rgba(151,187,205,1)', - pointStrokeColor: '#fff', - pointHighlightFill: '#fff', - pointHighlightStroke: 'rgba(151,187,205,1)', - data: [] - }] - }; - - for (var index in data) { - if (data[index]) { - var row = data[index]; - chartData.labels.push(row.name); - chartData.datasets[0].data.push(row.value); - } - } - - this.setState({post_counts_day: chartData}); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getSystemAnalytics( - 'user_counts_with_posts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.activeUsers), - fillColor: 'rgba(151,187,205,0.2)', - strokeColor: 'rgba(151,187,205,1)', - pointColor: 'rgba(151,187,205,1)', - pointStrokeColor: '#fff', - pointHighlightFill: '#fff', - pointHighlightStroke: 'rgba(151,187,205,1)', - data: [] - }] - }; - - for (var index in data) { - if (data[index]) { - var row = data[index]; - chartData.labels.push(row.name); - chartData.datasets[0].data.push(row.value); - } - } - - this.setState({user_counts_with_posts_day: chartData}); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - if (global.window.mm_license.IsLicensed === 'true') { - Client.getSystemAnalytics( - 'extra_counts', - (data) => { - for (var index in data) { - if (data[index].name === 'file_post_count') { - this.setState({file_post_count: data[index].value}); - } - - if (data[index].name === 'hashtag_post_count') { - this.setState({hashtag_post_count: data[index].value}); - } - - if (data[index].name === 'incoming_webhook_count') { - this.setState({incoming_webhook_count: data[index].value}); - } - - if (data[index].name === 'outgoing_webhook_count') { - this.setState({outgoing_webhook_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - } - - componentWillReceiveProps() { - this.setState({ - serverError: null, - channel_open_count: null, - channel_private_count: null, - post_count: null, - post_counts_day: null, - user_counts_with_posts_day: null, - unique_user_count: null - }); - - this.getData(); - } - - render() { - return ( -
- -
- ); - } -} - -SystemAnalytics.propTypes = { - intl: intlShape.isRequired, - team: React.PropTypes.object -}; - -export default injectIntl(SystemAnalytics); diff --git a/web/react/components/admin_console/team_analytics.jsx b/web/react/components/admin_console/team_analytics.jsx deleted file mode 100644 index 808d8046d..000000000 --- a/web/react/components/admin_console/team_analytics.jsx +++ /dev/null @@ -1,253 +0,0 @@ -// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import Analytics from './analytics.jsx'; -import * as Client from '../../utils/client.jsx'; - -import {injectIntl, intlShape, defineMessages} from 'mm-intl'; - -const labels = defineMessages({ - totalPosts: { - id: 'admin.team_analytics.totalPosts', - defaultMessage: 'Total Posts' - }, - activeUsers: { - id: 'admin.team_analytics.activeUsers', - defaultMessage: 'Active Users With Posts' - } -}); - -class TeamAnalytics extends React.Component { - constructor(props) { - super(props); - - this.getData = this.getData.bind(this); - - this.state = { // most of this state should be from a store in the future - users: null, - serverError: null, - channel_open_count: null, - channel_private_count: null, - post_count: null, - post_counts_day: null, - user_counts_with_posts_day: null, - recent_active_users: null, - newly_created_users: null, - unique_user_count: null - }; - } - - componentDidMount() { - this.getData(this.props.team.id); - } - - getData(teamId) { // should be moved to an action creator eventually - const {formatMessage} = this.props.intl; - Client.getTeamAnalytics( - teamId, - 'standard', - (data) => { - for (var index in data) { - if (data[index].name === 'channel_open_count') { - this.setState({channel_open_count: data[index].value}); - } - - if (data[index].name === 'channel_private_count') { - this.setState({channel_private_count: data[index].value}); - } - - if (data[index].name === 'post_count') { - this.setState({post_count: data[index].value}); - } - - if (data[index].name === 'unique_user_count') { - this.setState({unique_user_count: data[index].value}); - } - } - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getTeamAnalytics( - teamId, - 'post_counts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.totalPosts), - fillColor: 'rgba(151,187,205,0.2)', - strokeColor: 'rgba(151,187,205,1)', - pointColor: 'rgba(151,187,205,1)', - pointStrokeColor: '#fff', - pointHighlightFill: '#fff', - pointHighlightStroke: 'rgba(151,187,205,1)', - data: [] - }] - }; - - for (var index in data) { - if (data[index]) { - var row = data[index]; - chartData.labels.push(row.name); - chartData.datasets[0].data.push(row.value); - } - } - - this.setState({post_counts_day: chartData}); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getTeamAnalytics( - teamId, - 'user_counts_with_posts_day', - (data) => { - data.reverse(); - - var chartData = { - labels: [], - datasets: [{ - label: formatMessage(labels.activeUsers), - fillColor: 'rgba(151,187,205,0.2)', - strokeColor: 'rgba(151,187,205,1)', - pointColor: 'rgba(151,187,205,1)', - pointStrokeColor: '#fff', - pointHighlightFill: '#fff', - pointHighlightStroke: 'rgba(151,187,205,1)', - data: [] - }] - }; - - for (var index in data) { - if (data[index]) { - var row = data[index]; - chartData.labels.push(row.name); - chartData.datasets[0].data.push(row.value); - } - } - - this.setState({user_counts_with_posts_day: chartData}); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - - Client.getProfilesForTeam( - teamId, - (users) => { - this.setState({users}); - - var usersList = []; - for (var id in users) { - if (users.hasOwnProperty(id)) { - usersList.push(users[id]); - } - } - - usersList.sort((a, b) => { - if (a.last_activity_at < b.last_activity_at) { - return 1; - } - - if (a.last_activity_at > b.last_activity_at) { - return -1; - } - - return 0; - }); - - var recentActive = []; - for (let i = 0; i < usersList.length; i++) { - if (usersList[i].last_activity_at == null) { - continue; - } - - recentActive.push(usersList[i]); - if (i > 19) { - break; - } - } - - this.setState({recent_active_users: recentActive}); - - usersList.sort((a, b) => { - if (a.create_at < b.create_at) { - return 1; - } - - if (a.create_at > b.create_at) { - return -1; - } - - return 0; - }); - - var newlyCreated = []; - for (let i = 0; i < usersList.length; i++) { - newlyCreated.push(usersList[i]); - if (i > 19) { - break; - } - } - - this.setState({newly_created_users: newlyCreated}); - }, - (err) => { - this.setState({serverError: err.message}); - } - ); - } - - componentWillReceiveProps(newProps) { - this.setState({ - users: null, - serverError: null, - channel_open_count: null, - channel_private_count: null, - post_count: null, - post_counts_day: null, - user_counts_with_posts_day: null, - recent_active_users: null, - newly_created_users: null, - unique_user_count: null - }); - - this.getData(newProps.team.id); - } - - render() { - return ( -
- -
- ); - } -} - -TeamAnalytics.propTypes = { - intl: intlShape.isRequired, - team: React.PropTypes.object -}; - -export default injectIntl(TeamAnalytics); diff --git a/web/react/components/analytics/doughnut_chart.jsx b/web/react/components/analytics/doughnut_chart.jsx new file mode 100644 index 000000000..00bb66f0a --- /dev/null +++ b/web/react/components/analytics/doughnut_chart.jsx @@ -0,0 +1,77 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {FormattedMessage} from 'mm-intl'; + +export default class DoughnutChart extends React.Component { + constructor(props) { + super(props); + + this.initChart = this.initChart.bind(this); + this.chart = null; + } + + componentDidMount() { + this.initChart(this.props); + } + + componentWillReceiveProps(nextProps) { + if (this.chart) { + this.chart.destroy(); + this.initChart(nextProps); + } + } + + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + + initChart(props) { + var el = ReactDOM.findDOMNode(this.refs.canvas); + var ctx = el.getContext('2d'); + this.chart = new Chart(ctx).Doughnut(props.data, props.options || {}); //eslint-disable-line new-cap + } + + render() { + let content; + if (this.props.data == null) { + content = ( + + ); + } else { + content = ( + + ); + } + + return ( +
+
+
+ {this.props.title} +
+
+ {content} +
+
+
+ ); + } +} + +DoughnutChart.propTypes = { + title: React.PropTypes.node, + width: React.PropTypes.string, + height: React.PropTypes.string, + data: React.PropTypes.array, + options: React.PropTypes.object +}; diff --git a/web/react/components/analytics/line_chart.jsx b/web/react/components/analytics/line_chart.jsx new file mode 100644 index 000000000..d1bb6b9cb --- /dev/null +++ b/web/react/components/analytics/line_chart.jsx @@ -0,0 +1,90 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {FormattedMessage} from 'mm-intl'; + +export default class LineChart extends React.Component { + constructor(props) { + super(props); + + this.initChart = this.initChart.bind(this); + this.chart = null; + } + + componentDidMount() { + this.initChart(); + } + + componentDidUpdate() { + if (this.chart) { + this.chart.destroy(); + } + this.initChart(); + } + + componentWillUnmount() { + if (this.chart) { + this.chart.destroy(); + } + } + + initChart() { + if (!this.refs.canvas) { + return; + } + var el = ReactDOM.findDOMNode(this.refs.canvas); + var ctx = el.getContext('2d'); + this.chart = new Chart(ctx).Line(this.props.data, this.props.options || {}); //eslint-disable-line new-cap + } + + render() { + let content; + if (this.props.data == null) { + content = ( + + ); + } else if (this.props.data.labels.length === 0) { + content = ( +
+ +
+ ); + } else { + content = ( + + ); + } + + return ( +
+
+
+ {this.props.title} +
+
+ {content} +
+
+
+ ); + } +} + +LineChart.propTypes = { + title: React.PropTypes.node.isRequired, + width: React.PropTypes.string.isRequired, + height: React.PropTypes.string.isRequired, + data: React.PropTypes.object, + options: React.PropTypes.object +}; + diff --git a/web/react/components/analytics/statistic_count.jsx b/web/react/components/analytics/statistic_count.jsx new file mode 100644 index 000000000..cf457310f --- /dev/null +++ b/web/react/components/analytics/statistic_count.jsx @@ -0,0 +1,33 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import {FormattedMessage} from 'mm-intl'; + +export default class StatisticCount extends React.Component { + render() { + let loading = ( + + ); + + return ( +
+
+
+ {this.props.title} + +
+
{this.props.count == null ? loading : this.props.count}
+
+
+ ); + } +} + +StatisticCount.propTypes = { + title: React.PropTypes.node.isRequired, + icon: React.PropTypes.string.isRequired, + count: React.PropTypes.number +}; diff --git a/web/react/components/analytics/system_analytics.jsx b/web/react/components/analytics/system_analytics.jsx new file mode 100644 index 000000000..a2b783a79 --- /dev/null +++ b/web/react/components/analytics/system_analytics.jsx @@ -0,0 +1,346 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import LineChart from './line_chart.jsx'; +import DoughnutChart from './doughnut_chart.jsx'; +import StatisticCount from './statistic_count.jsx'; + +import AnalyticsStore from '../../stores/analytics_store.jsx'; + +import * as Utils from '../../utils/utils.jsx'; +import * as AsyncClient from '../../utils/async_client.jsx'; +import Constants from '../../utils/constants.jsx'; +const StatTypes = Constants.StatTypes; + +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + analyticsPublicChannels: { + id: 'analytics.system.publicChannels', + defaultMessage: 'Public Channels' + }, + analyticsPrivateGroups: { + id: 'analytics.system.privateGroups', + defaultMessage: 'Private Groups' + }, + analyticsFilePosts: { + id: 'analytics.system.totalFilePosts', + defaultMessage: 'Posts with Files' + }, + analyticsHashtagPosts: { + id: 'analytics.system.totalHashtagPosts', + defaultMessage: 'Posts with Hashtags' + }, + analyticsTextPosts: { + id: 'analytics.system.textPosts', + defaultMessage: 'Posts with Text-only' + } +}); + +class SystemAnalytics extends React.Component { + constructor(props) { + super(props); + + this.onChange = this.onChange.bind(this); + + this.state = {stats: AnalyticsStore.getAllSystem()}; + } + + componentDidMount() { + AnalyticsStore.addChangeListener(this.onChange); + + AsyncClient.getStandardAnalytics(); + AsyncClient.getPostsPerDayAnalytics(); + AsyncClient.getUsersPerDayAnalytics(); + + if (global.window.mm_license.IsLicensed === 'true') { + AsyncClient.getAdvancedAnalytics(); + } + } + + componentWillUnmount() { + AnalyticsStore.removeChangeListener(this.onChange); + } + + shouldComponentUpdate(nextProps, nextState) { + if (!Utils.areObjectsEqual(nextState.stats, this.state.stats)) { + return true; + } + + return false; + } + + onChange() { + this.setState({stats: AnalyticsStore.getAllSystem()}); + } + + render() { + const stats = this.state.stats; + + let advancedCounts; + let advancedGraphs; + if (global.window.mm_license.IsLicensed === 'true') { + advancedCounts = ( +
+ + } + icon='fa-signal' + count={stats[StatTypes.TOTAL_SESSIONS]} + /> + + } + icon='fa-terminal' + count={stats[StatTypes.TOTAL_COMMANDS]} + /> + + } + icon='fa-arrow-down' + count={stats[StatTypes.TOTAL_IHOOKS]} + /> + + } + icon='fa-arrow-up' + count={stats[StatTypes.TOTAL_OHOOKS]} + /> +
+ ); + + 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 = ( +
+ + } + data={channelTypeData} + width='300' + height='225' + /> + + } + data={postTypeData} + width='300' + height='225' + /> +
+ ); + } + + const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]); + const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]); + + return ( +
+

+ +

+
+ + } + icon='fa-user' + count={stats[StatTypes.TOTAL_USERS]} + /> + + } + icon='fa-users' + count={stats[StatTypes.TOTAL_TEAMS]} + /> + + } + icon='fa-comment' + count={stats[StatTypes.TOTAL_POSTS]} + /> + + } + icon='fa-globe' + count={stats[StatTypes.TOTAL_PUBLIC_CHANNELS] + stats[StatTypes.TOTAL_PRIVATE_GROUPS]} + /> +
+ {advancedCounts} + {advancedGraphs} +
+ + } + data={postCountsDay} + width='740' + height='225' + /> +
+
+ + } + data={userCountsWithPostsDay} + width='740' + height='225' + /> +
+
+ ); + } +} + +SystemAnalytics.propTypes = { + intl: intlShape.isRequired, + team: React.PropTypes.object +}; + +export default injectIntl(SystemAnalytics); + +export function formatChannelDoughtnutData(totalPublic, totalPrivate, intl) { + const {formatMessage} = intl; + const channelTypeData = [ + { + value: totalPublic, + color: '#46BFBD', + highlight: '#5AD3D1', + label: formatMessage(holders.analyticsPublicChannels) + }, + { + value: totalPrivate, + color: '#FDB45C', + highlight: '#FFC870', + label: formatMessage(holders.analyticsPrivateGroups) + } + ]; + + return channelTypeData; +} + +export function formatPostDoughtnutData(filePosts, hashtagPosts, totalPosts, intl) { + const {formatMessage} = intl; + const postTypeData = [ + { + value: filePosts, + color: '#46BFBD', + highlight: '#5AD3D1', + label: formatMessage(holders.analyticsFilePosts) + }, + { + value: hashtagPosts, + color: '#F7464A', + highlight: '#FF5A5E', + label: formatMessage(holders.analyticsHashtagPosts) + }, + { + value: totalPosts - filePosts - hashtagPosts, + color: '#FDB45C', + highlight: '#FFC870', + label: formatMessage(holders.analyticsTextPosts) + } + ]; + + return postTypeData; +} + +export function formatPostsPerDayData(data) { + var chartData = { + labels: [], + datasets: [{ + fillColor: 'rgba(151,187,205,0.2)', + strokeColor: 'rgba(151,187,205,1)', + pointColor: 'rgba(151,187,205,1)', + pointStrokeColor: '#fff', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(151,187,205,1)', + data: [] + }] + }; + + for (var index in data) { + if (data[index]) { + var row = data[index]; + chartData.labels.push(row.name); + chartData.datasets[0].data.push(row.value); + } + } + + return chartData; +} + +export function formatUsersWithPostsPerDayData(data) { + var chartData = { + labels: [], + datasets: [{ + fillColor: 'rgba(151,187,205,0.2)', + strokeColor: 'rgba(151,187,205,1)', + pointColor: 'rgba(151,187,205,1)', + pointStrokeColor: '#fff', + pointHighlightFill: '#fff', + pointHighlightStroke: 'rgba(151,187,205,1)', + data: [] + }] + }; + + for (var index in data) { + if (data[index]) { + var row = data[index]; + chartData.labels.push(row.name); + chartData.datasets[0].data.push(row.value); + } + } + + return chartData; +} diff --git a/web/react/components/analytics/table_chart.jsx b/web/react/components/analytics/table_chart.jsx new file mode 100644 index 000000000..c94fa300b --- /dev/null +++ b/web/react/components/analytics/table_chart.jsx @@ -0,0 +1,60 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import Constants from '../../utils/constants.jsx'; + +const Tooltip = ReactBootstrap.Tooltip; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; + +export default class TableChart extends React.Component { + render() { + return ( +
+
+
+ {this.props.title} +
+
+ + + { + this.props.data.map((item) => { + const tooltip = ( + + {item.tip} + + ); + + return ( + + + + + ); + }) + } + +
+ + + + + {item.value} +
+
+
+
+ ); + } +} + +TableChart.propTypes = { + title: React.PropTypes.node, + data: React.PropTypes.array +}; diff --git a/web/react/components/analytics/team_analytics.jsx b/web/react/components/analytics/team_analytics.jsx new file mode 100644 index 000000000..1236c070b --- /dev/null +++ b/web/react/components/analytics/team_analytics.jsx @@ -0,0 +1,235 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import LineChart from './line_chart.jsx'; +import StatisticCount from './statistic_count.jsx'; +import TableChart from './table_chart.jsx'; + +import AnalyticsStore from '../../stores/analytics_store.jsx'; + +import * as Utils from '../../utils/utils.jsx'; +import * as AsyncClient from '../../utils/async_client.jsx'; +import Constants from '../../utils/constants.jsx'; +const StatTypes = Constants.StatTypes; + +import {formatPostsPerDayData, formatUsersWithPostsPerDayData} from './system_analytics.jsx'; +import {injectIntl, intlShape, FormattedMessage, FormattedDate} from 'mm-intl'; + +class TeamAnalytics extends React.Component { + constructor(props) { + super(props); + + this.onChange = this.onChange.bind(this); + + this.state = {stats: AnalyticsStore.getAllTeam(this.props.team.id)}; + } + + componentDidMount() { + AnalyticsStore.addChangeListener(this.onChange); + + this.getData(this.props.team.id); + } + + getData(id) { + AsyncClient.getStandardAnalytics(id); + AsyncClient.getPostsPerDayAnalytics(id); + AsyncClient.getUsersPerDayAnalytics(id); + AsyncClient.getRecentAndNewUsersAnalytics(id); + } + + componentWillUnmount() { + AnalyticsStore.removeChangeListener(this.onChange); + } + + componentWillReceiveProps(nextProps) { + this.getData(nextProps.team.id); + this.setState({stats: AnalyticsStore.getAllTeam(nextProps.team.id)}); + } + + shouldComponentUpdate(nextProps, nextState) { + if (!Utils.areObjectsEqual(nextState.stats, this.state.stats)) { + return true; + } + + if (!Utils.areObjectsEqual(nextProps.team, this.props.team)) { + return true; + } + + return false; + } + + onChange() { + this.setState({stats: AnalyticsStore.getAllTeam(this.props.team.id)}); + } + + render() { + const stats = this.state.stats; + const postCountsDay = formatPostsPerDayData(stats[StatTypes.POST_PER_DAY]); + const userCountsWithPostsDay = formatUsersWithPostsPerDayData(stats[StatTypes.USERS_WITH_POSTS_PER_DAY]); + const recentActiveUsers = formatRecentUsersData(stats[StatTypes.RECENTLY_ACTIVE_USERS]); + const newlyCreatedUsers = formatNewUsersData(stats[StatTypes.NEWLY_CREATED_USERS]); + + return ( +
+

+ +

+
+ + } + icon='fa-user' + count={stats[StatTypes.TOTAL_USERS]} + /> + + } + icon='fa-users' + count={stats[StatTypes.TOTAL_PUBLIC_CHANNELS]} + /> + + } + icon='fa-globe' + count={stats[StatTypes.TOTAL_PRIVATE_GROUPS]} + /> + + } + icon='fa-comment' + count={stats[StatTypes.TOTAL_POSTS]} + /> +
+
+ + } + data={postCountsDay} + width='740' + height='225' + /> +
+
+ + } + data={userCountsWithPostsDay} + width='740' + height='225' + /> +
+
+ + } + data={recentActiveUsers} + /> + + } + data={newlyCreatedUsers} + /> +
+
+ ); + } +} + +TeamAnalytics.propTypes = { + intl: intlShape.isRequired, + team: React.PropTypes.object.isRequired +}; + +export default injectIntl(TeamAnalytics); + +export function formatRecentUsersData(data) { + if (data == null) { + return []; + } + + const formattedData = data.map((user) => { + const item = {}; + item.name = user.username; + item.value = ( + + ); + item.tip = user.email; + + return item; + }); + + return formattedData; +} + +export function formatNewUsersData(data) { + if (data == null) { + return []; + } + + const formattedData = data.map((user) => { + const item = {}; + item.name = user.username; + item.value = ( + + ); + item.tip = user.email; + + return item; + }); + + return formattedData; +} diff --git a/web/react/stores/analytics_store.jsx b/web/react/stores/analytics_store.jsx new file mode 100644 index 000000000..ec827f6d7 --- /dev/null +++ b/web/react/stores/analytics_store.jsx @@ -0,0 +1,85 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; +import EventEmitter from 'events'; + +import Constants from '../utils/constants.jsx'; +const ActionTypes = Constants.ActionTypes; + +const CHANGE_EVENT = 'change'; + +class AnalyticsStoreClass extends EventEmitter { + constructor() { + super(); + this.systemStats = {}; + this.teamStats = {}; + } + + emitChange() { + this.emit(CHANGE_EVENT); + } + + addChangeListener(callback) { + this.on(CHANGE_EVENT, callback); + } + + removeChangeListener(callback) { + this.removeListener(CHANGE_EVENT, callback); + } + + getAllSystem() { + return JSON.parse(JSON.stringify(this.systemStats)); + } + + getAllTeam(id) { + if (id in this.teamStats) { + return JSON.parse(JSON.stringify(this.teamStats[id])); + } + + return {}; + } + + storeSystemStats(newStats) { + for (const stat in newStats) { + if (!newStats.hasOwnProperty(stat)) { + continue; + } + this.systemStats[stat] = newStats[stat]; + } + } + + storeTeamStats(id, newStats) { + if (!(id in this.teamStats)) { + this.teamStats[id] = {}; + } + + for (const stat in newStats) { + if (!newStats.hasOwnProperty(stat)) { + continue; + } + this.teamStats[id][stat] = newStats[stat]; + } + } + +} + +var AnalyticsStore = new AnalyticsStoreClass(); + +AnalyticsStore.dispatchToken = AppDispatcher.register((payload) => { + var action = payload.action; + + switch (action.type) { + case ActionTypes.RECEIVED_ANALYTICS: + if (action.teamId == null) { + AnalyticsStore.storeSystemStats(action.stats); + } else { + AnalyticsStore.storeTeamStats(action.teamId, action.stats); + } + AnalyticsStore.emitChange(); + break; + default: + } +}); + +export default AnalyticsStore; diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index ca9d81865..7d5e1bd0f 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -11,16 +11,17 @@ import UserStore from '../stores/user_store.jsx'; import * as utils from './utils.jsx'; import Constants from './constants.jsx'; -var ActionTypes = Constants.ActionTypes; +const ActionTypes = Constants.ActionTypes; +const StatTypes = Constants.StatTypes; // Used to track in progress async calls -var callTracker = {}; +const callTracker = {}; export function dispatchError(err, method) { AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_ERROR, - err: err, - method: method + err, + method }); } @@ -848,3 +849,264 @@ export function getFileInfo(filename) { } ); } + +export function getStandardAnalytics(teamId) { + const callName = 'getStandardAnaytics' + teamId; + + if (isCallInProgress(callName)) { + return; + } + + callTracker[callName] = utils.getTimestamp(); + + client.getAnalytics( + 'standard', + teamId, + (data) => { + callTracker[callName] = 0; + + const stats = {}; + + for (const index in data) { + if (data[index].name === 'channel_open_count') { + stats[StatTypes.TOTAL_PUBLIC_CHANNELS] = data[index].value; + } + + if (data[index].name === 'channel_private_count') { + stats[StatTypes.TOTAL_PRIVATE_GROUPS] = data[index].value; + } + + if (data[index].name === 'post_count') { + stats[StatTypes.TOTAL_POSTS] = data[index].value; + } + + if (data[index].name === 'unique_user_count') { + stats[StatTypes.TOTAL_USERS] = data[index].value; + } + + if (data[index].name === 'team_count' && teamId == null) { + stats[StatTypes.TOTAL_TEAMS] = data[index].value; + } + } + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_ANALYTICS, + teamId, + stats + }); + }, + (err) => { + callTracker[callName] = 0; + + dispatchError(err, 'getStandardAnalytics'); + } + ); +} + +export function getAdvancedAnalytics(teamId) { + const callName = 'getAdvancedAnalytics' + teamId; + + if (isCallInProgress(callName)) { + return; + } + + callTracker[callName] = utils.getTimestamp(); + + client.getAnalytics( + 'extra_counts', + teamId, + (data) => { + callTracker[callName] = 0; + + const stats = {}; + + for (const index in data) { + if (data[index].name === 'file_post_count') { + stats[StatTypes.TOTAL_FILE_POSTS] = data[index].value; + } + + if (data[index].name === 'hashtag_post_count') { + stats[StatTypes.TOTAL_HASHTAG_POSTS] = data[index].value; + } + + if (data[index].name === 'incoming_webhook_count') { + stats[StatTypes.TOTAL_IHOOKS] = data[index].value; + } + + if (data[index].name === 'outgoing_webhook_count') { + stats[StatTypes.TOTAL_OHOOKS] = data[index].value; + } + + if (data[index].name === 'command_count') { + stats[StatTypes.TOTAL_COMMANDS] = data[index].value; + } + + if (data[index].name === 'session_count') { + stats[StatTypes.TOTAL_SESSIONS] = data[index].value; + } + } + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_ANALYTICS, + teamId, + stats + }); + }, + (err) => { + callTracker[callName] = 0; + + dispatchError(err, 'getAdvancedAnalytics'); + } + ); +} + +export function getPostsPerDayAnalytics(teamId) { + const callName = 'getPostsPerDayAnalytics' + teamId; + + if (isCallInProgress(callName)) { + return; + } + + callTracker[callName] = utils.getTimestamp(); + + client.getAnalytics( + 'post_counts_day', + teamId, + (data) => { + callTracker[callName] = 0; + + data.reverse(); + + const stats = {}; + stats[StatTypes.POST_PER_DAY] = data; + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_ANALYTICS, + teamId, + stats + }); + }, + (err) => { + callTracker[callName] = 0; + + dispatchError(err, 'getPostsPerDayAnalytics'); + } + ); +} + +export function getUsersPerDayAnalytics(teamId) { + const callName = 'getUsersPerDayAnalytics' + teamId; + + if (isCallInProgress(callName)) { + return; + } + + callTracker[callName] = utils.getTimestamp(); + + client.getAnalytics( + 'user_counts_with_posts_day', + teamId, + (data) => { + callTracker[callName] = 0; + + data.reverse(); + + const stats = {}; + stats[StatTypes.USERS_WITH_POSTS_PER_DAY] = data; + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_ANALYTICS, + teamId, + stats + }); + }, + (err) => { + callTracker[callName] = 0; + + dispatchError(err, 'getUsersPerDayAnalytics'); + } + ); +} + +export function getRecentAndNewUsersAnalytics(teamId) { + const callName = 'getRecentAndNewUsersAnalytics' + teamId; + + if (isCallInProgress(callName)) { + return; + } + + callTracker[callName] = utils.getTimestamp(); + + client.getProfilesForTeam( + teamId, + (users) => { + const stats = {}; + + const usersList = []; + for (const id in users) { + if (users.hasOwnProperty(id)) { + usersList.push(users[id]); + } + } + + usersList.sort((a, b) => { + if (a.last_activity_at < b.last_activity_at) { + return 1; + } + + if (a.last_activity_at > b.last_activity_at) { + return -1; + } + + return 0; + }); + + const recentActive = []; + for (let i = 0; i < usersList.length; i++) { + if (usersList[i].last_activity_at == null) { + continue; + } + + recentActive.push(usersList[i]); + if (i >= Constants.STAT_MAX_ACTIVE_USERS) { + break; + } + } + + stats[StatTypes.RECENTLY_ACTIVE_USERS] = recentActive; + + usersList.sort((a, b) => { + if (a.create_at < b.create_at) { + return 1; + } + + if (a.create_at > b.create_at) { + return -1; + } + + return 0; + }); + + var newlyCreated = []; + for (let i = 0; i < usersList.length; i++) { + newlyCreated.push(usersList[i]); + if (i >= Constants.STAT_MAX_NEW_USERS) { + break; + } + } + + stats[StatTypes.NEWLY_CREATED_USERS] = newlyCreated; + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECEIVED_ANALYTICS, + teamId, + stats + }); + }, + (err) => { + callTracker[callName] = 0; + + dispatchError(err, 'getRecentAndNewUsersAnalytics'); + } + ); +} diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index f647e2296..1a002bc8c 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -435,23 +435,16 @@ export function getConfig(success, error) { }); } -export function getTeamAnalytics(teamId, name, success, error) { - $.ajax({ - url: '/api/v1/admin/analytics/' + teamId + '/' + name, - dataType: 'json', - contentType: 'application/json', - type: 'GET', - success, - error: (xhr, status, err) => { - var e = handleError('getTeamAnalytics', xhr, status, err); - error(e); - } - }); -} +export function getAnalytics(name, teamId, success, error) { + let url = '/api/v1/admin/analytics/'; + if (teamId == null) { + url += name; + } else { + url += teamId + '/' + name; + } -export function getSystemAnalytics(name, success, error) { $.ajax({ - url: '/api/v1/admin/analytics/' + name, + url, dataType: 'json', contentType: 'application/json', type: 'GET', diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 0a4944708..88f01a475 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -71,6 +71,26 @@ export default { VIEW_ACTION: null }), + StatTypes: keyMirror({ + TOTAL_USERS: null, + TOTAL_PUBLIC_CHANNELS: null, + TOTAL_PRIVATE_GROUPS: null, + TOTAL_POSTS: null, + TOTAL_TEAMS: null, + TOTAL_FILE_POSTS: null, + TOTAL_HASHTAG_POSTS: null, + TOTAL_IHOOKS: null, + TOTAL_OHOOKS: null, + TOTAL_COMMANDS: null, + TOTAL_SESSIONS: null, + POST_PER_DAY: null, + USERS_WITH_POSTS_PER_DAY: null, + RECENTLY_ACTIVE_USERS: null, + NEWLY_CREATED_USERS: null + }), + STAT_MAX_ACTIVE_USERS: 20, + STAT_MAX_NEW_USERS: 20, + SocketEvents: { POSTED: 'posted', POST_EDITED: 'post_edited', diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json index 0d7be4b08..68942c61a 100644 --- a/web/static/i18n/en.json +++ b/web/static/i18n/en.json @@ -21,23 +21,33 @@ "activity_log_modal.android": "Android", "activity_log_modal.androidNativeApp": "Android Native App", "activity_log_modal.iphoneNativeApp": "iPhone Native App", - "admin.analytics.activeUsers": "Active Users With Posts", - "admin.analytics.channelTypes": "Channel Types", - "admin.analytics.loading": "Loading...", - "admin.analytics.meaningful": "Not enough data for a meaningful representation.", - "admin.analytics.newlyCreated": "Newly Created Users", - "admin.analytics.postTypes": "Posts, Files and Hashtags", - "admin.analytics.privateGroups": "Private Groups", - "admin.analytics.publicChannels": "Public Channels", - "admin.analytics.recentActive": "Recent Active Users", - "admin.analytics.textPosts": "Posts with Text-only", - "admin.analytics.title": "Statistics for {title}", - "admin.analytics.totalFilePosts": "Posts with Files", - "admin.analytics.totalHashtagPosts": "Posts with Hashtags", - "admin.analytics.totalIncomingWebhooks": "Incoming Webhooks", - "admin.analytics.totalOutgoingWebhooks": "Outgoing Webhooks", - "admin.analytics.totalPosts": "Total Posts", - "admin.analytics.totalUsers": "Total Users", + "analytics.chart.loading": "Loading...", + "analytics.chart.meaningful": "Not enough data for a meaningful representation.", + "analytics.system.activeUsers": "Active Users With Posts", + "analytics.system.channelTypes": "Channel Types", + "analytics.system.postTypes": "Posts, Files and Hashtags", + "analytics.system.privateGroups": "Private Groups", + "analytics.system.publicChannels": "Public Channels", + "analytics.system.textPosts": "Posts with Text-only", + "analytics.system.title": "System Statistics", + "analytics.system.totalFilePosts": "Posts with Files", + "analytics.system.totalHashtagPosts": "Posts with Hashtags", + "analytics.system.totalIncomingWebhooks": "Incoming Webhooks", + "analytics.system.totalOutgoingWebhooks": "Outgoing Webhooks", + "analytics.system.totalCommands": "Total Commands", + "analytics.system.totalSessions": "Total Sessions", + "analytics.system.totalPosts": "Total Posts", + "analytics.system.totalUsers": "Total Users", + "analytics.system.totalTeams": "Total Teams", + "analytics.system.totalChannels": "Total Channels", + "analytics.team.activeUsers": "Active Users With Posts", + "analytics.team.recentActive": "Recent Active Users", + "analytics.team.newlyCreated": "Newly Created Users", + "analytics.team.privateGroups": "Private Groups", + "analytics.team.publicChannels": "Public Channels", + "analytics.team.title": "Team Statistics for {team}", + "analytics.team.totalPosts": "Total Posts", + "analytics.team.totalUsers": "Total Users", "admin.audits.reload": "Reload", "admin.audits.title": "User Activity", "admin.email.allowEmailSignInDescription": "When true, Mattermost allows users to sign in using their email and password.", diff --git a/web/static/i18n/es.json b/web/static/i18n/es.json index ea1b4663a..ac9fd173f 100644 --- a/web/static/i18n/es.json +++ b/web/static/i18n/es.json @@ -21,23 +21,26 @@ "activity_log_modal.android": "Android", "activity_log_modal.androidNativeApp": "Android App Nativa", "activity_log_modal.iphoneNativeApp": "iPhone App Nativa", - "admin.analytics.activeUsers": "Usuarios Activos con Mensajes", - "admin.analytics.channelTypes": "Tipos de Canales", - "admin.analytics.loading": "Cargando...", - "admin.analytics.meaningful": "No hay suficiente data para tener una representación significativa.", - "admin.analytics.newlyCreated": "Nuevos Usuarios Creados", - "admin.analytics.postTypes": "Mesajes, Archivos y Hashtags", - "admin.analytics.privateGroups": "Grupos Privados", - "admin.analytics.publicChannels": "Canales Públicos", - "admin.analytics.recentActive": "Usuarios Recientemente Activos", - "admin.analytics.textPosts": "Mensajes de sólo Texto", - "admin.analytics.title": "Estadísticas para {title}", - "admin.analytics.totalFilePosts": "Mensajes con Archivos", - "admin.analytics.totalHashtagPosts": "Mensajes con Hashtags", - "admin.analytics.totalIncomingWebhooks": "Webhooks de Entrada", - "admin.analytics.totalOutgoingWebhooks": "Webhooks de Salida", - "admin.analytics.totalPosts": "Total de Mensajes", - "admin.analytics.totalUsers": "Total de Usuarios", + "analytics.chart.loading": "Cargando...", + "analytics.chart.meaningful": "No hay suficiente data para tener una representación significativa.", + "analytics.system.channelTypes": "Tipos de Canales", + "analytics.system.postTypes": "Mesajes, Archivos y Hashtags", + "analytics.system.privateGroups": "Grupos Privados", + "analytics.system.publicChannels": "Canales Públicos", + "analytics.system.textPosts": "Mensajes de sólo Texto", + "analytics.system.totalFilePosts": "Mensajes con Archivos", + "analytics.system.totalHashtagPosts": "Mensajes con Hashtags", + "analytics.system.totalIncomingWebhooks": "Webhooks de Entrada", + "analytics.system.totalOutgoingWebhooks": "Webhooks de Salida", + "analytics.system.totalPosts": "Total de Mensajes", + "analytics.system.totalUsers": "Total de Usuarios", + "analytics.team.activeUsers": "Usuarios Activos con Mensajes", + "analytics.team.newlyCreated": "Nuevos Usuarios Creados", + "analytics.team.privateGroups": "Grupos Privados", + "analytics.team.publicChannels": "Canales Públicos", + "analytics.team.recentActive": "Usuarios Recientemente Activos", + "analytics.team.totalPosts": "Total de Mensajes", + "analytics.team.totalUsers": "Total de Usuarios", "admin.audits.reload": "Recargar", "admin.audits.title": "Auditorías del Servidor", "admin.email.allowEmailSignInDescription": "Cuando es verdadero, Mattermost permite a los usuarios iniciar sesión utilizando el correo electrónico y contraseña.", -- cgit v1.2.3-1-g7c22