Merge pull request #164 from brown-dash/james-server-stats

Server Stats Endpoint and Frontend View

9 files changed, 385 insertions, 42 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 5b631676e..2154016bd 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -1329,7 +1329,7 @@ export class Collection3DCarouselViewChrome extends React.Component<CollectionVi
         return (
             <div className="collection3DCarouselViewChrome-cont">
                 <div className="collection3DCarouselViewChrome-scrollSpeed-cont">
-                    {FormattedTextBox.Focused ? <RichTextMenu /> : null}
+                    {/* {FormattedTextBox.Focused ? <RichTextMenu /> : null} */}
                     <div className="collectionStackingViewChrome-scrollSpeed-label">AUTOSCROLL SPEED:</div>
                     <div className="collection3DCarouselViewChrome-scrollSpeed">
                         <EditableView GetValue={() => StrCast(this.scrollSpeed)} oneLine SetValue={this.setValue} contents={this.scrollSpeed ? this.scrollSpeed : 1000} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 7f1e15c2f..0dfd119d7 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -1,6 +1,6 @@
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, Field } from '../../../../fields/Doc';
+import { CssSym, Doc, Field } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { Cast, NumCast, StrCast } from '../../../../fields/Types';
@@ -35,10 +35,10 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
             () => [
                 this.props.A.props.ScreenToLocalTransform(),
                 Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor1, Doc, null)?.annotationOn, Doc, null)?.scrollTop,
-                Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor1, Doc, null)?.annotationOn, Doc, null)?._highlights,
+                Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor1, Doc, null)?.annotationOn, Doc, null)?.[CssSym],
                 this.props.B.props.ScreenToLocalTransform(),
                 Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor2, Doc, null)?.annotationOn, Doc, null)?.scrollTop,
-                Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor2, Doc, null)?.annotationOn, Doc, null)?._highlights,
+                Cast(Cast(Cast(this.props.A.rootDoc, Doc, null)?.anchor2, Doc, null)?.annotationOn, Doc, null)?.[CssSym],
             ],
             action(() => {
                 this._start = Date.now();
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 5719ea83c..f5826ef95 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1,7 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEqual } from 'lodash';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { baseKeymap, selectAll } from 'prosemirror-commands';
 import { history } from 'prosemirror-history';
@@ -11,13 +11,13 @@ import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { DateField } from '../../../../fields/DateField';
-import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, Doc, DocListCast, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, CssSym, Doc, DocListCast, Field, ForceServerWrite, HeightSym, Opt, UpdatingFromServer, WidthSym } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { PrefetchProxy } from '../../../../fields/Proxy';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { RichTextUtils } from '../../../../fields/RichTextUtils';
-import { ComputedField, ScriptField } from '../../../../fields/ScriptField';
+import { ComputedField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
 import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util';
 import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, numberRange, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, unimplementedFunction, Utils } from '../../../../Utils';
@@ -29,6 +29,7 @@ import { DictationManager } from '../../../util/DictationManager';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
 import { MakeTemplate } from '../../../util/DropConverter';
+import { IsFollowLinkScript } from '../../../util/LinkFollower';
 import { LinkManager } from '../../../util/LinkManager';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -64,7 +65,6 @@ import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
 import React = require('react');
-import { IsFollowLinkScript } from '../../../util/LinkFollower';
 const translateGoogleApi = require('translate-google-api');
 
 export const GoogleRef = 'googleDocId';
@@ -79,7 +79,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     public static blankState = () => EditorState.create(FormattedTextBox.Instance.config);
     public static Instance: FormattedTextBox;
     public static LiveTextUndo: UndoManager.Batch | undefined;
-    static _globalHighlights: string[] = ['Audio Tags', 'Text from Others', 'Todo Items', 'Important Items', 'Disagree Items', 'Ignore Items'];
+    static _globalHighlightsCache: string = '';
+    static _globalHighlights = new ObservableSet<string>(['Audio Tags', 'Text from Others', 'Todo Items', 'Important Items', 'Disagree Items', 'Ignore Items']);
     static _highlightStyleSheet: any = addStyleSheet();
     static _bulletStyleSheet: any = addStyleSheet();
     static _userStyleSheet: any = addStyleSheet();
@@ -193,7 +194,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     constructor(props: any) {
         super(props);
         FormattedTextBox.Instance = this;
-        this.updateHighlights();
         this._recordingStart = Date.now();
     }
 
@@ -605,45 +605,46 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         return ret;
     }
 
-    updateHighlights = () => {
-        const highlights = FormattedTextBox._globalHighlights;
+    updateHighlights = (highlights: string[]) => {
+        if (Array.from(highlights).join('') === FormattedTextBox._globalHighlightsCache) return;
+        setTimeout(() => (FormattedTextBox._globalHighlightsCache = Array.from(highlights).join('')));
         clearStyleSheetRules(FormattedTextBox._userStyleSheet);
-        if (highlights.indexOf('Audio Tags') === -1) {
+        if (highlights.includes('Audio Tags')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'audiotag', { display: 'none' }, '');
         }
-        if (highlights.indexOf('Text from Others') !== -1) {
+        if (highlights.includes('Text from Others')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-remote', { background: 'yellow' });
         }
-        if (highlights.indexOf('My Text') !== -1) {
+        if (highlights.includes('My Text')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { background: 'moccasin' });
         }
-        if (highlights.indexOf('Todo Items') !== -1) {
+        if (highlights.includes('Todo Items')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-todo', { outline: 'black solid 1px' });
         }
-        if (highlights.indexOf('Important Items') !== -1) {
+        if (highlights.includes('Important Items')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-important', { 'font-size': 'larger' });
         }
-        if (highlights.indexOf('Bold Text') !== -1) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner-selected .ProseMirror strong > span', { 'font-size': 'large' }, '');
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner-selected .ProseMirror :not(strong > span)', { 'font-size': '0px' }, '');
+        if (highlights.includes('Bold Text')) {
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner .ProseMirror strong > span', { 'font-size': 'large' }, '');
+            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner .ProseMirror :not(strong > span)', { 'font-size': '0px' }, '');
         }
-        if (highlights.indexOf('Disagree Items') !== -1) {
+        if (highlights.includes('Disagree Items')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-disagree', { 'text-decoration': 'line-through' });
         }
-        if (highlights.indexOf('Ignore Items') !== -1) {
+        if (highlights.includes('Ignore Items')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-ignore', { 'font-size': '1' });
         }
-        if (highlights.indexOf('By Recent Minute') !== -1) {
+        if (highlights.includes('By Recent Minute')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { opacity: '0.1' });
             const min = Math.round(Date.now() / 1000 / 60);
             numberRange(10).map(i => addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-min-' + (min - i), { opacity: ((10 - i - 1) / 10).toString() }));
-            setTimeout(this.updateHighlights);
         }
-        if (highlights.indexOf('By Recent Hour') !== -1) {
+        if (highlights.includes('By Recent Hour')) {
             addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + Doc.CurrentUserEmail.replace('.', '').replace('@', ''), { opacity: '0.1' });
             const hr = Math.round(Date.now() / 1000 / 60 / 60);
             numberRange(10).map(i => addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-hr-' + (hr - i), { opacity: ((10 - i - 1) / 10).toString() }));
         }
+        this.layoutDoc[CssSym] = this.layoutDoc[CssSym] + 1; // css changes happen outside of react/mobx.  so we need to set a flag that will notify anyone intereted in layout changes triggered by css changes (eg., CollectionLinkView)
     };
 
     @observable _showSidebar = false;
@@ -781,18 +782,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const expertHighlighting = [...noviceHighlighting, 'Important Items', 'Ignore Items', 'Disagree Items', 'By Recent Minute', 'By Recent Hour'];
         (Doc.noviceMode ? noviceHighlighting : expertHighlighting).forEach(option =>
             highlighting.push({
-                description: (FormattedTextBox._globalHighlights.indexOf(option) === -1 ? 'Highlight ' : 'Unhighlight ') + option,
-                event: () => {
+                description: (!FormattedTextBox._globalHighlights.has(option) ? 'Highlight ' : 'Unhighlight ') + option,
+                event: action(() => {
                     e.stopPropagation();
-                    if (FormattedTextBox._globalHighlights.indexOf(option) === -1) {
-                        FormattedTextBox._globalHighlights.push(option);
+                    if (!FormattedTextBox._globalHighlights.has(option)) {
+                        FormattedTextBox._globalHighlights.add(option);
                     } else {
-                        FormattedTextBox._globalHighlights.splice(FormattedTextBox._globalHighlights.indexOf(option), 1);
+                        FormattedTextBox._globalHighlights.delete(option);
                     }
-                    runInAction(() => (this.layoutDoc._highlights = FormattedTextBox._globalHighlights.join('')));
-                    this.updateHighlights();
-                },
-                icon: FormattedTextBox._globalHighlights.indexOf(option) === -1 ? 'highlighter' : 'remove-format',
+                }),
+                icon: !FormattedTextBox._globalHighlights.has(option) ? 'highlighter' : 'remove-format',
             })
         );
 
@@ -1031,6 +1030,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
             () => this.autoHeight,
             autoHeight => autoHeight && this.tryUpdateScrollHeight()
         );
+        this._disposers.highlights = reaction(
+            () => Array.from(FormattedTextBox._globalHighlights).slice(),
+            highlights => this.updateHighlights(highlights),
+            { fireImmediately: true }
+        );
         this._disposers.width = reaction(
             () => this.props.PanelWidth(),
             width => this.tryUpdateScrollHeight()
@@ -1115,7 +1119,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         this._disposers.selected = reaction(
             () => this.props.isSelected(),
             action(selected => {
-                this.layoutDoc._highlights = selected ? FormattedTextBox._globalHighlights.join('') : '';
+                if (FormattedTextBox._globalHighlights.has('Bold Text')) {
+                    this.layoutDoc[CssSym] = this.layoutDoc[CssSym] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed
+                }
                 if (RichTextMenu.Instance?.view === this._editorView && !selected) {
                     RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined);
                 }
@@ -1431,7 +1437,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
 
     componentWillUnmount() {
-        FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined);
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
         this.unhighlightSearchTerms();
@@ -1532,11 +1537,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     @action
     onFocused = (e: React.FocusEvent): void => {
         //applyDevTools.applyDevTools(this._editorView);
-        FormattedTextBox.Focused = this;
         this.ProseRef?.children[0] === e.nativeEvent.target && this._editorView && RichTextMenu.Instance?.updateMenu(this._editorView, undefined, this.props);
         this.startUndoTypingBatch();
     };
-    @observable public static Focused: FormattedTextBox | undefined;
 
     onClick = (e: React.MouseEvent): void => {
         if (!this.props.isContentActive()) return;
@@ -1633,7 +1636,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 tr && this._editorView.dispatch(tr);
             }
         }
-        FormattedTextBox.Focused === this && (FormattedTextBox.Focused = undefined);
         if (RichTextMenu.Instance?.view === this._editorView && !this.props.isSelected(true)) {
             RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined);
         }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 662792ff0..6c808c145 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -96,6 +96,7 @@ export const HighlightSym = Symbol('Highlight');
 export const DataSym = Symbol('Data');
 export const LayoutSym = Symbol('Layout');
 export const FieldsSym = Symbol('Fields');
+export const CssSym = Symbol('Css');
 export const AclSym = Symbol('Acl');
 export const DirectLinksSym = Symbol('DirectLinks');
 export const AclUnset = Symbol('AclUnset');
@@ -341,6 +342,7 @@ export class Doc extends RefField {
     @observable private ___fieldKeys: any = {};
     /// all of the raw acl's that have been set on this document.  Use GetEffectiveAcl to determine the actual ACL of the doc for editing
     @observable public [AclSym]: { [key: string]: symbol } = {};
+    @observable public [CssSym]: number = 0; // incrementer denoting a change to CSS layout
     @observable public [DirectLinksSym]: Set<Doc> = new Set();
     @observable public [AnimationSym]: Opt<Doc>;
     @observable public [HighlightSym]: boolean = false;
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 53e55c1c3..c3dadd821 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -5,6 +5,7 @@ import { msToTime } from '../ActionUtilities';
 import * as bcrypt from 'bcrypt-nodejs';
 import { Opt } from '../../fields/Doc';
 import { WebSocket } from '../websocket';
+import { DashStats } from '../DashStats';
 
 export const timeMap: { [id: string]: number } = {};
 interface ActivityUnit {
diff --git a/src/server/DashStats.ts b/src/server/DashStats.ts
new file mode 100644
index 000000000..8d341db63
--- /dev/null
+++ b/src/server/DashStats.ts
@@ -0,0 +1,293 @@
+import { cyan, magenta } from 'colors';
+import { Response } from 'express';
+import SocketIO from 'socket.io';
+import { timeMap } from './ApiManagers/UserManager';
+import { WebSocket } from './websocket';
+const fs = require('fs');
+
+/**
+ * DashStats focuses on tracking user data for each session.
+ * 
+ * This includes time connected, number of operations, and
+ * the rate of their operations
+ */
+export namespace DashStats {
+    export const SAMPLING_INTERVAL = 1000; // in milliseconds (ms) - Time interval to update the frontend. 
+    export const RATE_INTERVAL = 10; // in seconds (s) - Used to calculate rate
+
+    const statsCSVFilename = './src/server/stats/userLoginStats.csv';
+    const columns = ['USERNAME', 'ACTION', 'TIME'];
+
+    /**
+     * UserStats holds the stats associated with a particular user. 
+     */
+    interface UserStats {
+        socketId: string;
+        username: string;
+        time: string;
+        operations: number;
+        rate: number;
+    }
+
+    /**
+     * UserLastOperations is the queue object for each user 
+     * storing their past operations. 
+     */
+    interface UserLastOperations {
+        sampleOperations: number; // stores how many operations total are in this rate section (10 sec, for example)
+        lastSampleOperations: number; // stores how many total operations were recorded at the last sample
+        previousOperationsQueue: number[]; // stores the operations to calculate rate. 
+    }
+
+    /**
+     * StatsDataBundle represents an object that will be sent to the frontend view
+     * on each websocket update. 
+     */
+    interface StatsDataBundle {
+        connectedUsers: UserStats[];
+    }
+
+    /**
+     * CSVStore represents how objects will be stored in the CSV
+     */
+    interface CSVStore {
+        USERNAME: string;
+        ACTION: string;
+        TIME: string;
+    }
+
+    /**
+     * ServerTraffic describes the current traffic going to the backend. 
+     */
+    enum ServerTraffic {
+        NOT_BUSY,
+        BUSY,
+        VERY_BUSY
+    }
+
+    // These values can be changed after further testing how many
+    // users correspond to each traffic level in Dash. 
+    const BUSY_SERVER_BOUND = 2;
+    const VERY_BUSY_SERVER_BOUND = 3;
+
+    const serverTrafficMessages = [
+        "Not Busy",
+        "Busy",
+        "Very Busy"
+    ]
+
+    // lastUserOperations maps each username to a UserLastOperations
+    // structure 
+    export const lastUserOperations = new Map<string, UserLastOperations>();
+
+    /**
+     * handleStats is called when the /stats route is called, providing a JSON
+     * object with relevant stats. In this case, we return the number of
+     * current connections and 
+     * @param res Response object from Express
+     */
+    export function handleStats(res: Response) {
+        let current = getCurrentStats();
+        const results: CSVStore[] = [];
+        res.json({
+                currentConnections: current.length,
+                socketMap: current,
+            });
+    }
+
+    /**
+     * getUpdatedStatesBundle() sends an updated copy of the current stats to the 
+     * frontend /statsview route via websockets. 
+     * 
+     * @returns a StatsDataBundle that is sent to the frontend view on each websocket update
+     */
+    export function getUpdatedStatsBundle(): StatsDataBundle {
+        let current = getCurrentStats();
+
+        return {
+            connectedUsers: current,
+        }
+    }
+
+    /**
+     * handleStatsView() is called when the /statsview route is called. This 
+     * will use pug to render a frontend view of the current stats
+     * 
+     * @param res 
+     */
+    export function handleStatsView(res: Response) {
+        let current = getCurrentStats();
+
+        let connectedUsers = current.map((socketPair) => {
+            return socketPair.time + " - " + socketPair.username + " Operations: " + socketPair.operations;
+        })
+
+        let serverTraffic = ServerTraffic.NOT_BUSY;
+        if(current.length < BUSY_SERVER_BOUND) {
+            serverTraffic = ServerTraffic.NOT_BUSY;
+        } else if(current.length >= BUSY_SERVER_BOUND && current.length < VERY_BUSY_SERVER_BOUND) {
+            serverTraffic = ServerTraffic.BUSY;
+        } else {
+            serverTraffic = ServerTraffic.VERY_BUSY;
+        }
+        
+        res.render("stats.pug", {
+            title: "Dash Stats",
+            numConnections: connectedUsers.length,
+            serverTraffic: serverTraffic,
+            serverTrafficMessage : serverTrafficMessages[serverTraffic],
+            connectedUsers: connectedUsers
+        });
+    }
+
+    /**
+     * logUserLogin() writes a login event to the CSV file. 
+     * 
+     * @param username the username in the format of "username@domain.com logged in"
+     * @param socket the websocket associated with the current connection
+     */
+    export function logUserLogin(username: string | undefined, socket: SocketIO.Socket) {
+        if (!(username === undefined)) {
+            let currentDate = new Date();
+            console.log(magenta(`User ${username.split(' ')[0]} logged in at: ${currentDate.toISOString()}`));
+
+            let toWrite: CSVStore = {
+                USERNAME : username,
+                ACTION : "loggedIn",
+                TIME : currentDate.toISOString()
+            }
+
+            let statsFile = fs.createWriteStream(statsCSVFilename, { flags: "a"});
+            statsFile.write(convertToCSV(toWrite));
+            statsFile.end();
+            console.log(cyan(convertToCSV(toWrite)));
+        }
+    }
+
+    /**
+     * logUserLogout() writes a logout event to the CSV file. 
+     * 
+     * @param username the username in the format of "username@domain.com logged in"
+     * @param socket the websocket associated with the current connection. 
+     */
+    export function logUserLogout(username: string | undefined, socket: SocketIO.Socket) {
+        if (!(username === undefined)) {
+            let currentDate = new Date();
+
+            let statsFile = fs.createWriteStream(statsCSVFilename, { flags: "a"});
+            let toWrite: CSVStore = {
+                USERNAME : username,
+                ACTION : "loggedOut",
+                TIME : currentDate.toISOString()
+            }
+            statsFile.write(convertToCSV(toWrite));
+            statsFile.end();
+        }
+    }
+
+    /**
+     * getLastOperationsOrDefault() is a helper method that will attempt
+     * to query the lastUserOperations map for a specified username. If the
+     * username is not in the map, an empty UserLastOperations object is returned. 
+     * @param username 
+     * @returns the user's UserLastOperations structure or an empty
+     * UserLastOperations object (All values set to 0) if the username is not found.
+     */
+    function getLastOperationsOrDefault(username: string): UserLastOperations {
+        if(lastUserOperations.get(username) === undefined) {
+            let initializeOperationsQueue = [];
+            for(let i = 0; i < RATE_INTERVAL; i++) {
+                initializeOperationsQueue.push(0);
+            }
+            return {
+                sampleOperations: 0,
+                lastSampleOperations: 0,
+                previousOperationsQueue: initializeOperationsQueue
+            }
+        }
+        return lastUserOperations.get(username)!;
+    }
+
+    /**
+     * updateLastOperations updates a specific user's UserLastOperations information
+     * for the current sampling cycle. The method removes old/outdated counts for
+     * operations from the queue and adds new data for the current sampling 
+     * cycle to the queue, updating the total count as it goes. 
+     * @param lastOperationData the old UserLastOperations data that must be updated
+     * @param currentOperations the total number of operations measured for this sampling cycle.
+     * @returns the udpated UserLastOperations structure. 
+     */
+    function updateLastOperations(lastOperationData: UserLastOperations, currentOperations: number): UserLastOperations {
+        // create a copy of the UserLastOperations to modify
+        let newLastOperationData: UserLastOperations = {
+            sampleOperations: lastOperationData.sampleOperations,
+            lastSampleOperations: lastOperationData.lastSampleOperations,
+            previousOperationsQueue: lastOperationData.previousOperationsQueue.slice()
+        }
+
+        let newSampleOperations = newLastOperationData.sampleOperations;
+        newSampleOperations -= newLastOperationData.previousOperationsQueue.shift()!; // removes and returns the first element of the queue
+        let operationsThisCycle = currentOperations - lastOperationData.lastSampleOperations;
+        newSampleOperations += operationsThisCycle; // add the operations this cycle to find out what our count for the interval should be (e.g operations in the last 10 seconds)
+
+        // update values for the copy object
+        newLastOperationData.sampleOperations = newSampleOperations;
+
+        newLastOperationData.previousOperationsQueue.push(operationsThisCycle);
+        newLastOperationData.lastSampleOperations = currentOperations;
+
+        return newLastOperationData;
+    }
+
+    /**
+     * getUserOperationsOrDefault() is a helper method to get the user's total
+     * operations for the CURRENT sampling interval. The method will return 0 
+     * if the username is not in the userOperations map.
+     * @param username the username to search the map for
+     * @returns the total number of operations recorded up to this sampling cycle. 
+     */
+    function getUserOperationsOrDefault(username: string): number {
+        return WebSocket.userOperations.get(username) === undefined ? 0 : WebSocket.userOperations.get(username)!
+    }
+
+    /**
+     * getCurrentStats() calculates the total stats for this cycle. In this case,
+     * getCurrentStats() returns an Array of UserStats[] objects describing 
+     * the stats for each user
+     * @returns an array of UserStats storing data for each user at the current moment. 
+     */
+    function getCurrentStats(): UserStats[] {
+        let socketPairs: UserStats[] = [];
+        for (let [key, value] of WebSocket.socketMap) {
+            let username = value.split(' ')[0];
+            let connectionTime = new Date(timeMap[username]);
+
+            let connectionTimeString = connectionTime.toLocaleDateString() + " " + connectionTime.toLocaleTimeString();
+
+            if (!key.disconnected) {
+                let lastRecordedOperations = getLastOperationsOrDefault(username);
+                let currentUserOperationCount = getUserOperationsOrDefault(username);
+
+                socketPairs.push({ 
+                    socketId: key.id,
+                    username: username,
+                    time: connectionTimeString.includes("Invalid Date") ? "" : connectionTimeString,
+                    operations : WebSocket.userOperations.get(username) ? WebSocket.userOperations.get(username)! : 0,
+                    rate: lastRecordedOperations.sampleOperations
+                });
+                lastUserOperations.set(username, updateLastOperations(lastRecordedOperations,currentUserOperationCount));
+            }
+        }
+        return socketPairs;
+    }
+
+    /**
+     * convertToCSV() is a helper method that stringifies a CSVStore object
+     * that can be written to the CSV file later. 
+     * @param dataObject the object to stringify
+     * @returns the object as a string. 
+     */
+    function convertToCSV(dataObject: CSVStore): string {
+        return `${dataObject.USERNAME},${dataObject.ACTION},${dataObject.TIME}\n`;
+    }
+}
diff --git a/src/server/Message.ts b/src/server/Message.ts
index d87ae5027..8f0af08bc 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -94,4 +94,6 @@ export namespace MessageStore {
     export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
+
+    export const UpdateStats = new Message<string>("updatestats");
 }
diff --git a/src/server/index.ts b/src/server/index.ts
index 6562860fe..8b2e18847 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -19,6 +19,7 @@ import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
 import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils';
 import { DashSessionAgent } from './DashSession/DashSessionAgent';
 import { AppliedSessionAgent } from './DashSession/Session/agents/applied_session_agent';
+import { DashStats } from './DashStats';
 import { DashUploadUtils } from './DashUploadUtils';
 import { Database } from './database';
 import { Logger } from './ProcessFactory';
@@ -98,6 +99,18 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }:
 
     addSupervisedRoute({
         method: Method.GET,
+        subscription: '/stats',
+        secureHandler: ({ res }) => DashStats.handleStats(res),
+    });
+
+    addSupervisedRoute({
+        method: Method.GET,
+        subscription: '/statsview',
+        secureHandler: ({ res }) => DashStats.handleStatsView(res),
+    });
+
+    addSupervisedRoute({
+        method: Method.GET,
         subscription: '/resolvedPorts',
         secureHandler: ({ res }) => res.send(resolvedPorts),
         publicHandler: ({ res }) => res.send(resolvedPorts),
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 68b003496..a11d20cfa 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -12,6 +12,7 @@ import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
 import YoutubeApi from './apis/youtube/youtubeApiSample';
 import { initializeGuest } from './authentication/DashUserModel';
 import { Client } from './Client';
+import { DashStats } from './DashStats';
 import { Database } from './database';
 import { DocumentsCollection } from './IDatabase';
 import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from './Message';
@@ -20,8 +21,9 @@ import { resolvedPorts } from './server_Initialization';
 
 export namespace WebSocket {
     export let _socket: Socket;
-    const clients: { [key: string]: Client } = {};
+    export const clients: { [key: string]: Client } = {};
     export const socketMap = new Map<SocketIO.Socket, string>();
+    export const userOperations = new Map<string, number>();
     export let disconnect: Function;
 
     export async function initialize(isRelease: boolean, app: express.Express) {
@@ -49,6 +51,8 @@ export namespace WebSocket {
                 next();
             });
 
+            socket.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle())
+
             // convenience function to log server messages on the client
             function log(message?: any, ...optionalParams: any[]) {
                 socket.emit('log', ['Message from server:', message, ...optionalParams]);
@@ -97,6 +101,17 @@ export namespace WebSocket {
                 console.log('received bye');
             });
 
+            socket.on('disconnect', function () {
+                let currentUser = socketMap.get(socket);
+                if (!(currentUser === undefined)) {
+                    let currentUsername = currentUser.split(' ')[0]
+                    DashStats.logUserLogout(currentUsername, socket);
+                    delete timeMap[currentUsername]
+                }
+            });
+
+
+
             Utils.Emit(socket, MessageStore.Foo, 'handshooken');
 
             Utils.AddServerHandler(socket, MessageStore.Bar, guid => barReceived(socket, guid));
@@ -130,6 +145,12 @@ export namespace WebSocket {
                 socket.disconnect(true);
             };
         });
+
+        setInterval(function() {
+            // Utils.Emit(socket, MessageStore.UpdateStats, DashStats.getUpdatedStatsBundle());
+
+            io.emit(MessageStore.UpdateStats.Message, DashStats.getUpdatedStatsBundle())
+        }, DashStats.SAMPLING_INTERVAL);
     }
 
     function processGesturePoints(socket: Socket, content: GestureContent) {
@@ -172,11 +193,16 @@ export namespace WebSocket {
     }
 
     function barReceived(socket: SocketIO.Socket, userEmail: string) {
-        clients[userEmail] = new Client(userEmail.toString());
+         clients[userEmail] = new Client(userEmail.toString());
         const currentdate = new Date();
         const datetime = currentdate.getDate() + '/' + (currentdate.getMonth() + 1) + '/' + currentdate.getFullYear() + ' @ ' + currentdate.getHours() + ':' + currentdate.getMinutes() + ':' + currentdate.getSeconds();
         console.log(blue(`user ${userEmail} has connected to the web socket at: ${datetime}`));
+        printActiveUsers();
+
+        timeMap[userEmail] = Date.now();
         socketMap.set(socket, userEmail + ' at ' + datetime);
+        userOperations.set(userEmail, 0);
+        DashStats.logUserLogin(userEmail, socket);
     }
 
     function getField([id, callback]: [string, (result?: Transferable) => void]) {
@@ -300,7 +326,8 @@ export namespace WebSocket {
         const remListItems = diff.diff.$set[updatefield].fields;
         const curList = (curListItems as any)?.fields?.[updatefield.replace('fields.', '')]?.fields.filter((f: any) => f !== null) || [];
         diff.diff.$set[updatefield].fields = curList?.filter(
-            (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId : remItem.heading ? remItem.heading === curItem.heading : remItem === curItem))
+            (curItem: any) => !remListItems.some((remItem: any) => (remItem.fieldId ? remItem.fieldId === curItem.fieldId :
+                 remItem.heading ? remItem.heading === curItem.heading : remItem === curItem))
         );
         const sendBack = diff.diff.length !== diff.diff.$set[updatefield].fields.length;
         delete diff.diff.length;
@@ -346,6 +373,9 @@ export namespace WebSocket {
     var CurUser: string | undefined = undefined;
 
     function UpdateField(socket: Socket, diff: Diff) {
+        let currentUsername = socketMap.get(socket)!.split(' ')[0];
+        userOperations.set(currentUsername, userOperations.get(currentUsername) !== undefined ? userOperations.get(currentUsername)! + 1 : 0);
+        
         if (CurUser !== socketMap.get(socket)) {
             CurUser = socketMap.get(socket);
             console.log('Switch User: ' + CurUser);