Adding analytics tab

web/react/components/admin_console/admin_controller.jsx

@@ -18,6 +18,7 @@ var SqlSettingsTab = require('./sql_settings.jsx');
 var TeamSettingsTab = require('./team_settings.jsx');
 var ServiceSettingsTab = require('./service_settings.jsx');
 var TeamUsersTab = require('./team_users.jsx');
+var TeamAnalyticsTab = require('./team_analytics.jsx');
 
 export default class AdminController extends React.Component {
     constructor(props) {
@@ -149,6 +150,10 @@ export default class AdminController extends React.Component {
                 if (this.state.teams) {
                     tab = <TeamUsersTab team={this.state.teams[this.state.selectedTeam]} />;
                 }
+            } else if (this.state.selected === 'team_analytics') {
+                if (this.state.teams) {
+                    tab = <TeamAnalyticsTab team={this.state.teams[this.state.selectedTeam]} />;
+                }
             }
         }
 

web/react/components/admin_console/admin_sidebar.jsx

@@ -24,7 +24,7 @@ export default class AdminSidebar extends React.Component {
     handleClick(name, teamId, e) {
         e.preventDefault();
         this.props.selectTab(name, teamId);
-        history.pushState({name: name, teamId: teamId}, null, `/admin_console/${name}/${teamId || ''}`);
+        history.pushState({name, teamId}, null, `/admin_console/${name}/${teamId || ''}`);
     }
 
     isSelected(name, teamId) {
@@ -121,6 +121,15 @@ export default class AdminSidebar extends React.Component {
                                                 {'- Users'}
                                             </a>
                                         </li>
+                                        <li>
+                                            <a
+                                                href='#'
+                                                className={this.isSelected('team_analytics', team.id)}
+                                                onClick={this.handleClick.bind(this, 'team_analytics', team.id)}
+                                            >
+                                                {'- Analytics'}
+                                            </a>
+                                        </li>
                                     </ul>
                                 </li>
                             </ul>

web/react/components/admin_console/team_analytics.jsx

@@ -0,0 +1,144 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var Client = require('../../utils/client.jsx');
+var LoadingScreen = require('../loading_screen.jsx');
+
+export default class UserList extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.getData = this.getData.bind(this);
+
+        this.state = {
+            users: null,
+            serverError: null,
+            channel_open_count: null,
+            channel_private_count: null,
+            post_count: null
+        };
+    }
+
+    componentDidMount() {
+        this.getData(this.props.team.id);
+    }
+
+    getData(teamId) {
+        Client.getAnalytics(
+            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});
+                    }
+                }
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+
+        Client.getProfilesForTeam(
+            teamId,
+            (users) => {
+                this.setState({users});
+
+                // var memberList = [];
+                // for (var id in users) {
+                //     if (users.hasOwnProperty(id)) {
+                //         memberList.push(users[id]);
+                //     }
+                // }
+
+                // memberList.sort((a, b) => {
+                //     if (a.username < b.username) {
+                //         return -1;
+                //     }
+
+                //     if (a.username > b.username) {
+                //         return 1;
+                //     }
+
+                //     return 0;
+                // });
+            },
+            (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
+        });
+
+        this.getData(newProps.team.id);
+    }
+
+    componentWillUnmount() {
+    }
+
+    render() {
+        var serverError = '';
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+        }
+
+        var totalCount = (
+            <div className='total-count text-center'>
+                <div>{'Total Users'}</div>
+                <div>{this.state.users == null ? 'Loading...' : Object.keys(this.state.users).length}</div>
+            </div>
+        );
+
+        var openChannelCount = (
+            <div className='total-count text-center'>
+                <div>{'Public Groups'}</div>
+                <div>{this.state.channel_open_count == null ? 'Loading...' : this.state.channel_open_count}</div>
+            </div>
+        );
+
+        var openPrivateCount = (
+            <div className='total-count text-center'>
+                <div>{'Private Groups'}</div>
+                <div>{this.state.channel_private_count == null ? 'Loading...' : this.state.channel_private_count}</div>
+            </div>
+        );
+
+        var postCount = (
+            <div className='total-count text-center'>
+                <div>{'Total Posts'}</div>
+                <div>{this.state.post_count == null ? 'Loading...' : this.state.post_count}</div>
+            </div>
+        );
+
+        return (
+            <div className='wrapper--fixed'>
+                <h2>{'Analytics for ' + this.props.team.name}</h2>
+                {serverError}
+                {totalCount}
+                {postCount}
+                {openChannelCount}
+                {openPrivateCount}
+            </div>
+        );
+    }
+}
+
+UserList.propTypes = {
+    team: React.PropTypes.object
+};

web/react/utils/client.jsx

@@ -327,6 +327,20 @@ export function getConfig(success, error) {
     });
 }
 
+export function getAnalytics(teamId, name, success, error) {
+    $.ajax({
+        url: '/api/v1/admin/analytics/' + teamId + '/' + name,
+        dataType: 'json',
+        contentType: 'application/json',
+        type: 'GET',
+        success,
+        error: function onError(xhr, status, err) {
+            var e = handleError('getAnalytics', xhr, status, err);
+            error(e);
+        }
+    });
+}
+
 export function saveConfig(config, success, error) {
     $.ajax({
         url: '/api/v1/admin/save_config',

web/sass-files/sass/partials/_admin-console.scss

@@ -5,6 +5,22 @@
     .table {
         background: #fff;
     }
+
+    .total-count {
+        width: 175px;
+        height: 100px;
+        border: 1px solid #ddd;
+        padding: 22px 10px 10px 10px;
+        margin: 10px 10px 10px 10px;
+        background: #fff;
+        float: left;
+
+        > div {
+            font-size: 18px;
+            font-weight: 300;
+        }
+    }
+
     .sidebar--left {
         &.sidebar--collapsable {
             background: #333;