Merge branch 'master' into collaboration-sarah

1 files changed, 26 insertions, 4 deletions

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 834156295..9f2eafcee 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,14 +1,16 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, Size } from 'browndash-components';
-import { action, computed, observable } from 'mobx';
+import { Tooltip } from '@mui/material';
+import { Button, FontSize, IconButton, Size } from 'browndash-components';
+import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { FaBug, FaCamera, FaStamp } from 'react-icons/fa';
-import {  Doc } from '../../../fields/Doc';
+import { Doc } from '../../../fields/Doc';
 import { AclAdmin } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
 import { DocumentManager } from '../../util/DocumentManager';
+import { PingManager } from '../../util/PingManager';
 import { ReportManager } from '../../util/ReportManager';
 import { ServerStats } from '../../util/ServerStats';
 import { SettingsManager } from '../../util/SettingsManager';
@@ -35,7 +37,16 @@ export class TopBar extends React.Component {
     };
 
     @observable textColor: string = Colors.LIGHT_GRAY;
-    @observable backgroundColor: string = Colors.DARK_GRAY;
+    @computed get backgroundColor() {
+        return PingManager.Instance.IsBeating ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY;
+    }
+
+    @observable happyHeart: boolean = PingManager.Instance.IsBeating;
+    setHappyHeart = action((status: boolean) => (this.happyHeart = status));
+    dispose = reaction(
+        () => PingManager.Instance.IsBeating,
+        isBeating => this.setHappyHeart(isBeating)
+    );
 
     /**
      * Returns the left hand side of the topbar.
@@ -138,6 +149,17 @@ export class TopBar extends React.Component {
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ReportManager.Instance.open} icon={<FaBug />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
                 <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
+                <Tooltip title={<div className="dash-tooltip">{'Server connection ' + (PingManager.Instance.IsBeating ? 'active' : 'broken')}</div>}>
+                    <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}>
+                        <IconButton
+                            size={Size.SMALL}
+                            onClick={PingManager.Instance.showAlert}
+                            tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
+                            color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
+                            icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
+                        />
+                    </div>
+                </Tooltip>
                 {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
             </div>
         );