2 files changed, 58 insertions, 6 deletions
diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
new file mode 100644
index 000000000..0ab411bff
--- /dev/null
+++ b/src/client/util/ServerStats.tsx
@@ -0,0 +1,55 @@
+import { action, computed, observable, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { MainViewModal } from '../views/MainViewModal';
+import { DocumentView } from '../views/nodes/DocumentView';
+import './SharingManager.scss';
+
+@observer
+export class ServerStats extends React.Component<{}> {
+    public static Instance: ServerStats;
+    @observable private isOpen = false; // whether the SharingManager modal is open or not
+
+    // private get linkVisible() {
+    //     return this.targetDoc ? this.targetDoc["acl-" + PublicKey] !== SharingPermissions.None : false;
+    // }
+
+    @action
+    public open = async () => {
+        /**
+         * Populates the list of users.
+         */
+        fetch('/stats').then((res: Response) => res.text().then(action(stats => (this._stats = JSON.parse(stats)))));
+
+        this.isOpen = true;
+    };
+
+    public close = action(() => {
+        this.isOpen = false;
+    });
+
+    constructor(props: {}) {
+        super(props);
+        ServerStats.Instance = this;
+    }
+
+    @observable _stats: { [key: string]: any } | undefined;
+
+    /**
+     * @returns the main interface of the SharingManager.
+     */
+    @computed get sharingInterface() {
+        return (
+            <div>
+                <span>Active users:{this._stats?.socketMap.length}</span>
+                {this._stats?.socketMap.map((user: any) => (
+                    <p>{user.username}</p>
+                ))}
+            </div>
+        );
+    }
+
+    render() {
+        return <MainViewModal contents={this.sharingInterface} isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} />;
+    }
+}
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index a73eda04c..4937866f8 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -5,14 +5,13 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
 import * as RequestPromise from 'request-promise';
-import { AclAdmin, AclPrivate, AclSym, AclUnset, DataSym, Doc, DocListCast, DocListCastAsync, HierarchyMapping, Opt } from '../../fields/Doc';
+import { AclAdmin, AclPrivate, AclSym, AclUnset, DataSym, Doc, DocListCast, DocListCastAsync, HierarchyMapping } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
-import { Cast, NumCast, PromiseValue, StrCast } from '../../fields/Types';
+import { NumCast, StrCast } from '../../fields/Types';
 import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from '../../fields/util';
 import { Utils } from '../../Utils';
 import { DocServer } from '../DocServer';
-import { CollectionView } from '../views/collections/CollectionView';
 import { DictationOverlay } from '../views/DictationOverlay';
 import { MainViewModal } from '../views/MainViewModal';
 import { DocumentView } from '../views/nodes/DocumentView';
@@ -21,7 +20,6 @@ import { SearchBox } from '../views/search/SearchBox';
 import { DocumentManager } from './DocumentManager';
 import { GroupManager, UserOptions } from './GroupManager';
 import { GroupMemberView } from './GroupMemberView';
-import { LinkManager } from './LinkManager';
 import { SelectionManager } from './SelectionManager';
 import './SharingManager.scss';
 
@@ -581,9 +579,8 @@ export class SharingManager extends React.Component<{}> {
                 </div>
             );
         });
-
         return (
-            <div className={'sharing-interface'}>
+            <div className="sharing-interface">
                 {GroupManager.Instance?.currentGroup ? <GroupMemberView group={GroupManager.Instance.currentGroup} onCloseButtonClick={action(() => (GroupManager.Instance.currentGroup = undefined))} /> : null}
                 <div className="sharing-contents">
                     <p className={'share-title'}>