fix: connected status

sayjava · Sep 30, 2021 · 6a8a65b · 6a8a65b
1 parent ccec31e
commit 6a8a65b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -14,6 +14,7 @@ import { ServerControls } from './components/ServerControls';
 import { Visualise } from './components/Visualise';
 import { Header } from 'antd/lib/layout/layout';
 import { ReactComponent as Logo } from './logo.svg';
+import { ServerStatus } from './components/ServerStatus';
 
 const { Footer, Content } = Layout;
 
@@ -26,7 +27,8 @@ const App = () => {
                         <Row justify="space-between">
                             <Row align="middle">
                                 <Logo width="30" />
-                                <span style={{ color: 'white', paddingLeft: '10px' }}>Deputy v{version}</span>
+                                <span style={{ color: 'white', padding: '0 10px' }}>Deputy v{version}</span>
+                                <ServerStatus />
                             </Row>
                             <Typography.Link href="https://sayjava.github.io/behave/" target="_blank">
                                 Docs

diff --git a/ui/src/components/ServerStatus.tsx b/ui/src/components/ServerStatus.tsx
@@ -0,0 +1,14 @@
+import { ApiFilled } from '@ant-design/icons';
+import { useServerState } from './Provider';
+
+export const ServerStatus = () => {
+    const {
+        state: { connected },
+    } = useServerState();
+
+    if (connected) {
+        return <></>;
+    }
+
+    return <ApiFilled style={{ color: '#ff0000' }} />;
+};