Merge pull request #68 from aerokube/merge_log_vnc

Merge log and vnc

.gitignore

@@ -12,3 +12,7 @@ vendor/*/
 bindata_assetfs.go
 selenoid-ui
 data
+
+.DS_Store
+dist/**
+docs/output/*.html

README.md

@@ -8,7 +8,7 @@ Simple status page with UI updates by SSE,
 backed by constant polling of status handle
 of [selenoid](https://github.com/aerokube/selenoid) on small go backend.
 
-![ui](docs/img/ui.png)
+![ui](docs/img/stats.png)
 
 ## Usage
 

docs/index.adoc

@@ -17,7 +17,7 @@ backed by constant polling of status handle
 of https://github.com/aerokube/selenoid[Selenoid] on small go backend.
 Source code available at https://github.com/aerokube/selenoid-ui[GitHub].
 
-image:img/selenoidui.gif[ui]
+image:img/selenoid-ui.gif[ui]
 _Recorded with https://github.com/justinfrankel/licecap[licecap]_
 
 == Quick Start Guide
@@ -121,35 +121,38 @@ services:
 
 Shows current quota usage, pending browsers and queue.
 Gets updates via SSE, so no need to refresh browser to see what happens.
+It will reconnect automatically on any temp failures.
 
 .Stats and capabilities
-image:img/ui.png[ui]
+image:img/stats.png[ui]
 
 === Capabilities
 
 You can choose browser from the available browser list and UI will provide
 an example of setup with right capabilities. Examples available for several languages.
 
-=== VNC
+=== LOGS & VNC
 
 If you get browser from selenoid with `enableVNC=true` capability, you can see list of available screens:
 
 .VNC list
-image:img/vnc-list.png[ui]
+image:img/sessions.png[ui]
 
-VNC allows to see and interact with browser:
+Pay attention to named sessions - you can achieve same result with `name=your.test.name` capability.
+
+VNC allows to see and interact with browser while log will reflect all driver actions:
 
 .Exact VNC session
-image:img/vnc.png[ui]
+image:img/session-logs-vnc.png[ui]
 
 .Fullscreen mode
 image:img/vnc-fs.png[ui]
 
 Please refer to http://aerokube.com/selenoid/latest/#_live_browser_screen[selenoid documentation] about VNC usage.
 
-=== LOGS
+==== LOGS
 
-With same as VNC list you can see logs of docker container (no any additional action required)
+You can see logs of docker container for each session even without vnc and name (no any additional action required)
 
 .Logs
 image:img/logs.png[logs]

main.go

@@ -11,7 +11,6 @@ import (
 	"net/http"
 	"os"
 	"os/signal"
-	"regexp"
 	"syscall"
 	"time"
 	"net/url"
@@ -30,28 +29,13 @@ var (
 	buildStamp  string = "unknown"
 )
 
-func staticRewrite(path string) string {
-	jsfile, _ := regexp.Compile("/(?:log/|vnc/)(.*\\.js$)")
-	any, _ := regexp.Compile("/(?:log/|vnc/)(.*)")
-	return any.ReplaceAllString(jsfile.ReplaceAllString(path, "$1"), "")
-}
-
 func mux(sse *sse.SseBroker) http.Handler {
 	mux := http.NewServeMux()
 	static := http.FileServer(assetFS())
 
 	mux.Handle("/", static)
-	mux.HandleFunc("/vnc/", func(w http.ResponseWriter, r *http.Request) {
-		r.URL.Path = staticRewrite(r.URL.Path)
-		static.ServeHTTP(w, r)
-	})
-	mux.HandleFunc("/log/", func(w http.ResponseWriter, r *http.Request) {
-		r.URL.Path = staticRewrite(r.URL.Path)
-		static.ServeHTTP(w, r)
-	})
 	mux.Handle("/events", sse)
 
-
 	parsedUri, err := url.Parse(selenoidUri)
 	if err != nil {
 		log.Fatal(err)

main_test.go

@@ -23,24 +23,6 @@ func TestRootLoads(t *testing.T) {
 	AssertThat(t, resp, Code{200})
 }
 
-func TestRegex(t *testing.T) {
-	paths := []string{
-		"/manifest.bundle.js",
-		"/hljs.bundle.js",
-		"/vendor.bundle.js",
-		"/js.bundle.js",
-		"/log/2j",
-		"/log/js.bundle.js",
-		"/log/manifest.bundle.js",
-		"/vnc/2",
-	}
-
-	for _, path := range paths {
-		AssertThat(t, staticRewrite(path), NotContains{"log"})
-		AssertThat(t, staticRewrite(path), NotContains{"vnc"})
-	}
-}
-
 type NotContains struct {
 	V interface{}
 }

selenoid/selenoid.go

@@ -11,11 +11,21 @@ import (
  * SELENOID TYPES *
  * ------v------- */
 
+// Caps - user capabilities
+type Caps struct {
+	Name             string `json:"browserName"`
+	Version          string `json:"version"`
+	ScreenResolution string `json:"screenResolution"`
+	VNC              bool   `json:"enableVNC"`
+	TestName         string `json:"name"`
+	TimeZone         string `json:"timeZone"`
+}
+
 // Session - session id and vnc flag
 type Session struct {
-	ID     string `json:"id"`
-	VNC    bool   `json:"vnc"`
-	Screen string `json:"screen"`
+	ID        string `json:"id"`
+	Container string `json:"container"`
+	Caps      Caps   `json:"caps"`
 }
 
 // Sessions - used count and individual sessions for quota user
@@ -46,14 +56,12 @@ type State struct {
  * SELENOID TYPES *
  * -------------- */
 
-// sessionInfo - extended (and inverted) session information
+// sessionInfo - extended session information
 type sessionInfo struct {
-	ID      string `json:"id"`
-	VNC     bool   `json:"vnc"`
-	Screen  string `json:"screen"`
-	Browser string `json:"browser"`
-	Version string `json:"version"`
-	Quota   string `json:"quota"`
+	ID        string `json:"id"`
+	Container string `json:"container"`
+	Caps      Caps   `json:"caps"`
+	Quota     string `json:"quota"`
 }
 
 // result - processed selenoid state
@@ -117,17 +125,15 @@ func toUI(state State, baseUrl string) result {
 
 	for browser, version := range state.Browsers {
 		count := 0
-		for versionName, quota := range version {
+		for _, quota := range version {
 			for quotaName, sess := range quota {
 				count += sess.Count
 				for _, session := range sess.Sessions {
 					sessions[session.ID] = sessionInfo{
-						ID:      session.ID,
-						VNC:     session.VNC,
-						Screen:  session.Screen,
-						Browser: browser,
-						Version: versionName,
-						Quota:   quotaName,
+						ID:        session.ID,
+						Quota:     quotaName,
+						Container: session.Container,
+						Caps:      session.Caps,
 					}
 				}
 			}

selenoid/selenoid_test.go

@@ -37,7 +37,15 @@ func selenoidState() State {
             {
               "id": "5ad7e24dd38f7283163d839cae5e7e70",
               "vnc": false,
-              "screen": "1920x1080x24"
+              "screen": "1920x1080x24",
+              "caps": {
+                "browserName": "firefox",
+                "version": "46",
+                "screenResolution": "1920x1080x24",
+                "enableVNC": true,
+                "name": "",
+                "timeZone": ""
+              }
             }
           ]
         }
@@ -51,7 +59,15 @@ func selenoidState() State {
             {
               "id": "87cffbdd-8b63-46a5-ba65-6f2d32d40304",
               "vnc": false,
-              "screen": "1920x1080x24"
+              "screen": "1920x1080x24",
+              "caps": {
+                "browserName": "firefox",
+                "version": "46",
+                "screenResolution": "1920x1080x24",
+                "enableVNC": true,
+                "name": "",
+                "timeZone": ""
+              }
             }
           ]
         }

web/src/components/Log/LogInfo.js

@@ -1,32 +1,15 @@
 import React from "react";
 
-const LogInfo = ({session, browser}) => {
+const LogInfo = ({session}) => {
     return (
         <div className="log-info">
-
-            {browser.quota && (
-                <div>
-                    <span className="log-info__quota">{browser.quota}</span>
-                    <span className="log-info__version-separator">:</span>
-                </div>
-            )}
-
-            {browser.browser && (
-                <span>
-                    <span className="log-info__name">{browser.browser}</span>
-                    <span className="log-info__version-separator">:</span>
-                    <span className="log-info__version">{browser.version}</span>
-                    <span className="log-info__version-separator">:</span>
-                </span>
-            )}
-
-            <span>
+            <div>
+                <span className="log-info__session">LOG</span>
+                <span className="log-info__version-separator"> :: </span>
                 <span className="log-info__session">{session.substring(0, 8)}</span>
-            </span>
-
+            </div>
         </div>
     );
 };
 
-
 export default LogInfo

web/src/components/Log/index.js

@@ -84,14 +84,14 @@ export default class Log extends Component {
     }
 
     render() {
-        const {session, browser = {}} = this.props;
+        const {session} = this.props;
 
         return (
             <div className="log">
                 <div className="log-card">
                     <div className="log-card__header">
                         <Back/>
-                        <LogInfo browser={browser} session={session}/>
+                        <LogInfo session={session}/>
                     </div>
 
                     <div className="log-card__content">
@@ -106,7 +106,7 @@ export default class Log extends Component {
 }
 
 const Back = () => (
-    <Link className="control" to="/log/">
+    <Link className="control" to="/sessions/">
         <div title="Back"></div>
     </Link>
 );

web/src/components/Log/style.scss

@@ -12,8 +12,7 @@ $light-font: #999;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
-  height: 100%;
-  width: 100%;
+  margin: 20px 0;
 
   .log-card {
     height: 450px;
@@ -80,27 +79,13 @@ $light-font: #999;
     width: 200px;
     color: $light-font;
 
-    &__name {
-      text-transform: uppercase;
-      font-weight: 200;
-    }
-
     &__version-separator {
       margin-right: 4px;
       margin-left: 4px;
       font-size: 0.6em;
       color: #fff;
     }
 
-    &__version {
-      font-size: 0.8em;
-    }
-
-    &__quota {
-      font-size: 0.8em;
-      color: $light-font;
-    }
-
     &__session {
       line-height: 20px;
       font-size: 0.8em;