don't load vnc and logs if session not found in sse update (#103)

aerokube · Mar 10, 2018 · 2031a07 · 2031a07
1 parent 885ec4b
commit 2031a07
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 12 deletions.
diff --git a/web/package.json b/web/package.json
@@ -50,9 +50,10 @@
     "react-highlight": "0.10.0",
     "react-router-dom": "next",
     "react-select": "1.0.0-rc.4",
+    "react-spinners": "0.2.6",
     "rx": "^4.1.0",
     "rx-connect": "0.7.0",
-    "rxjs": "^5.4.2",
+    "rxjs": "5.4.2",
     "xterm": "3.1.0"
   },
   "peerDependencies": {

diff --git a/web/src/components/Log/index.js b/web/src/components/Log/index.js
@@ -45,9 +45,8 @@ export default class Log extends Component {
         this.term.writeln(colors.fg.getRgb(2, 3, 4) + "Initialize...\n\r" + colors.reset);
 
         this.subscription = this.props$
-            .map(({session, origin}) => ({session, origin}))
-            .distinctUntilChanged()
-            .filter(it => it && it.session && it.origin)
+            .filter(it => it && it.session && it.origin && it.browser)
+            .distinctUntilChanged((prev, {origin}) => prev.origin === origin)
             .map(({session}) => {
                 const wsProxyUrl = urlTo(window.location.href);
                 return `ws://${wsProxyUrl.host}/ws/logs/${session}`;
@@ -85,8 +84,7 @@ export default class Log extends Component {
                     })
                 })
             })
-            .do(msg => this.term.write(msg))
-            .subscribe();
+            .subscribe(msg => this.term.write(msg));
     }
 
     componentWillUnmount() {

diff --git a/web/src/components/Session/SessionInfo.js b/web/src/components/Session/SessionInfo.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { BeatLoader } from 'react-spinners';
 
 import "./style.scss";
 
@@ -10,6 +11,11 @@ const SessionInfo = (props) => {
 
             <div className="session-info__main">
                 <div className="session-browser">
+                    <BeatLoader
+                        size={5}
+                        color={'#fff'}
+                        loading={!browser.quota}
+                    />
                     <span className="session-browser__quota">{browser.quota}</span>
                     {browser.quota && (<span className="session-browser__version-separator">/</span>)}
                     <span className="session-browser__name">{browser.caps.browserName}</span>

diff --git a/web/src/components/Session/index.js b/web/src/components/Session/index.js
@@ -16,7 +16,7 @@ export default class Session extends Component {
                     browser
                 }}/>
 
-                <div className="session__interactive">
+                {browser && (<div className="session__interactive">
                     <VncContainer {... {
                         origin,
                         session,
@@ -29,8 +29,7 @@ export default class Session extends Component {
                             browser
                         }} />
                     </div>
-
-                </div>
+                </div>)}
             </div>
         );
     }

diff --git a/web/src/components/Session/style.scss b/web/src/components/Session/style.scss
@@ -3,6 +3,10 @@ $background-color-lighter: #3d444c;
 .session {
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
   &__interactive {
     display: flex;
@@ -37,6 +41,7 @@ $background-color-lighter: #3d444c;
       min-width: 350px;
       border-bottom: 1px dashed $background-color-lighter;
       margin: 15px 0;
+      flex-shrink: 0;
 
       .session-browser {
         line-height: 40px;

diff --git a/web/src/containers/Stats/style.scss b/web/src/containers/Stats/style.scss
@@ -11,6 +11,7 @@ $border-section-color: #353b42;
   align-items: center;
   position: relative;
   padding-top: 40px;
+  flex-shrink: 0;
 
   &__section-title {
     color: #666;

diff --git a/web/src/containers/Viewport/style.scss b/web/src/containers/Viewport/style.scss
@@ -21,9 +21,9 @@ body {
 }
 
 .viewport {
+  height: 100%;
   width: 100%;
   display: flex;
-  flex-wrap: wrap;
   position: relative;
   padding-top: 60px;
   flex-direction: column;