[webui] Various UI improvements

csweichel · Dec 23, 2019 · a09f381 · a09f381
1 parent 8ac8d07
commit a09f381
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 12 deletions.
diff --git a/cmd/server/run.go b/cmd/server/run.go
@@ -177,7 +177,20 @@ func startWeb(srv *werft.Service, grpcServer *grpc.Server, addr string, debugPro
 		log.WithField("target", tgt).Debug("proxying to webui server")
 		webuiServer = httputil.NewSingleHostReverseProxy(tgt)
 	} else {
-		webuiServer = http.FileServer(rice.MustFindBox("../../pkg/webui/build").HTTPBox())
+		// WebUI is a single-page app, hence any path that does not resolve to a static file must result in /index.html.
+		// As a (rather crude) fix we intercept the response writer to find out if the FileServer returned an error. If so
+		// we return /index.html instead.
+		dws := http.FileServer(rice.MustFindBox("../../pkg/webui/build").HTTPBox())
+		webuiServer = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+			dws.ServeHTTP(&interceptResponseWriter{
+				ResponseWriter: w,
+				errH: func(rw http.ResponseWriter, code int) {
+					r.URL.Path = "/"
+					rw.Header().Set("Content-Type", "text/html; charset=utf-8")
+					dws.ServeHTTP(rw, r)
+				},
+			}, r)
+		})
 	}
 
 	grpcWebServer := grpcweb.WrapServer(grpcServer)
@@ -231,6 +244,27 @@ func grpcTrafficSplitter(fallback http.Handler, wrappedGrpc *grpcweb.WrappedGrpc
 	})
 }
 
+type interceptResponseWriter struct {
+	http.ResponseWriter
+	errH func(http.ResponseWriter, int)
+}
+
+func (w *interceptResponseWriter) WriteHeader(status int) {
+	if status >= http.StatusBadRequest {
+		w.errH(w.ResponseWriter, status)
+		w.errH = nil
+	} else {
+		w.ResponseWriter.WriteHeader(status)
+	}
+}
+
+func (w *interceptResponseWriter) Write(p []byte) (n int, err error) {
+	if w.errH == nil {
+		return len(p), nil
+	}
+	return w.ResponseWriter.Write(p)
+}
+
 func init() {
 	rootCmd.AddCommand(runCmd)
 

diff --git a/logo.svg b/logo.svg
diff --git a/logo_background.svg b/logo_background.svg
diff --git a/logo_path.svg b/logo_path.svg
diff --git a/pkg/logcutter/logcutter_test.go b/pkg/logcutter/logcutter_test.go
@@ -31,7 +31,7 @@ func TestDefaultCutterSlice(t *testing.T) {
 				v1.LogSliceEvent{Name: "otherproc", Type: v1.LogSliceType_SLICE_START},
 				v1.LogSliceEvent{Name: "otherproc", Type: v1.LogSliceType_SLICE_CONTENT, Payload: "Some other process"},
 				v1.LogSliceEvent{Name: "foobar", Type: v1.LogSliceType_SLICE_CONTENT, Payload: "More output"},
-				v1.LogSliceEvent{Name: "foobar", Type: v1.LogSliceType_SLICE_END},
+				v1.LogSliceEvent{Name: "foobar", Type: v1.LogSliceType_SLICE_DONE},
 				v1.LogSliceEvent{Name: "otherproc", Type: v1.LogSliceType_SLICE_CONTENT, Payload: "Cool beans"},
 				v1.LogSliceEvent{Name: "otherproc", Type: v1.LogSliceType_SLICE_ABANDONED},
 			},

diff --git a/pkg/webui/src/JobList.tsx b/pkg/webui/src/JobList.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { WerftServiceClient } from './api/werft_pb_service';
-import { JobStatus, ListJobsResponse, ListJobsRequest, JobPhase, SubscribeRequest, FilterExpression, FilterTerm, FilterOp, OrderExpression } from './api/werft_pb';
+import { JobStatus, ListJobsResponse, ListJobsRequest, JobPhase, SubscribeRequest, FilterExpression, OrderExpression } from './api/werft_pb';
 import { Header, headerStyles } from './components/header';
 import { createStyles, Theme, Button, Table, TableHead, TableRow, TableCell, TableSortLabel, TableBody, Link, Grid, TablePagination } from '@material-ui/core';
 import { WithStyles, withStyles } from '@material-ui/styles';

diff --git a/pkg/webui/src/StartJob.tsx b/pkg/webui/src/StartJob.tsx
@@ -100,7 +100,11 @@ class StartJobImpl extends React.Component<StartJobProps, StartJobState> {
                             const repo = s.toObject().repo!;
                             return (
 
-                            <ListItem key={i} button component="a" onClick={() => this.setState({active: s, targetRefRev: s.getRepo()!.getRevision()})}>
+                            <ListItem key={i} button component="a" onClick={() => this.setState({
+                                active: s, 
+                                useRef: !!s.getRepo()!.getRef(), 
+                                targetRefRev: s.getRepo()!.getRef() || s.getRepo()!.getRevision()
+                            })}>
                                 { this.state.active === s && <ListItemIcon><CheckIcon /></ListItemIcon> }
                                 <ListItemText primary={s.getName()} secondary={`${repo.owner}/${repo.repo}`} />
                             </ListItem>
@@ -111,7 +115,7 @@ class StartJobImpl extends React.Component<StartJobProps, StartJobState> {
                             <Typography variant="h5">Arguments</Typography>
                             <List>
                                 <ListItem>
-                                    <Switch onChange={e => this.setState({useRef: e.target.checked})} />
+                                    <Switch defaultChecked={this.state.useRef} onChange={e => this.setState({useRef: e.target.checked})} />
                                     <TextField 
                                         className={classes.arg} 
                                         label={this.state.useRef ? "Ref" : "Revision"}

diff --git a/pkg/webui/src/components/LogView.tsx b/pkg/webui/src/components/LogView.tsx
@@ -49,7 +49,7 @@ interface Content {
     type: "content"
     name: string
     lines: string[]
-    status: "running" | "done" | "failed"
+    status: "running" | "done" | "failed" | "unknown"
 }
 
 function isContent(c: Chunk): c is Content {
@@ -73,7 +73,7 @@ class LogViewImpl extends React.Component<LogViewProps, LogViewState> {
         this.state = {
             chunks: new Map<string, Chunk>(),
             autoscroll: true,
-            showKubeUpdates: true,
+            showKubeUpdates: false,
         }
 
         this.updateChunks();
@@ -116,12 +116,21 @@ class LogViewImpl extends React.Component<LogViewProps, LogViewState> {
                 content.lines.push(le.getPayload());
                 chunks.set(id, content);
             } else if (le.getType() === LogSliceType.SLICE_PHASE) {
-                chunks.set("phase:"+le.getName(), {
+                const id = "phase:"+le.getName();
+                if (chunks.has(id)) {
+                    return;
+                }
+
+                chunks.set(id, {
                     type: "phase",
                     desc: le.getPayload(),
                     name: le.getName()
                 })
                 phase = le.getName();
+
+                Array.from(chunks.entries())
+                    .filter(([id, chunk]) => !id.startsWith(phase) && isContent(chunk) && chunk.status === "running")
+                    .forEach(([id, chunk]) => { console.log("ending", phase, id, chunk); (chunk as Content).status = "unknown"; chunks.set(id, chunk); })
             }
         });
     }
@@ -173,7 +182,7 @@ class LogViewImpl extends React.Component<LogViewProps, LogViewState> {
                             { chunk.status === "done" && <DoneIcon /> }
                             { chunk.status === "failed" && <ErrorIcon /> }
                             { chunk.status === "running" && !this.props.finished && <CircularProgress style={{width:'24px', height:'24px'}} /> }
-                            { chunk.status === "running" && this.props.finished && <DoneIcon style={{opacity:0.25}} /> }
+                            { ((chunk.status === "running" && this.props.finished) || chunk.status === "unknown") && <DoneIcon style={{opacity:0.25}} /> }
                             <span className={classes.sectionTitle}>{ chunk.name }</span>
                             <span dangerouslySetInnerHTML={{__html: chunk.lines[chunk.lines.length - 1]}}></span>
                         </ExpansionPanelSummary>
@@ -211,7 +220,10 @@ class LogViewImpl extends React.Component<LogViewProps, LogViewState> {
     protected getRawLogs() {
         let rawLog = this.props.logs.map(c => c.getPayload());
         if (!this.state.showKubeUpdates) {
-            rawLog = this.props.logs.filter(c => !c.getPayload().trim().startsWith("[werft:kubernetes]")).map(c => c.getPayload());
+            rawLog = this.props.logs.filter(c => 
+                !c.getPayload().trim().startsWith("[werft:kubernetes]")
+                && !c.getPayload().trim().startsWith("[werft:status]")
+            ).map(c => c.getPayload());
         }
         return rawLog.join("");
     }

diff --git a/pkg/webui/src/components/SearchBox.tsx b/pkg/webui/src/components/SearchBox.tsx
@@ -60,7 +60,6 @@ class SearchBoxImpl extends React.Component<SearchBoxProps, SearchBoxState> {
         console.log(this.props.defaultValue);
 
         if (!!this.props.defaultValue) {
-            debugger;
             this.updateChips(this.props.defaultValue);
         }
     }

diff --git a/pkg/webui/src/components/terminal.css b/pkg/webui/src/components/terminal.css
@@ -1,7 +1,7 @@
 /* https://raw.githubusercontent.com/buildkite/terminal-to-html/master/assets/terminal.css */
 
 .term-container {
-    background: #171717;
+    background: #333333;
     border-radius: 5px;
     color: white;
     word-break: break-word;

diff --git a/pkg/werft/uiservice.go b/pkg/werft/uiservice.go
@@ -113,6 +113,7 @@ func (uis *UIService) updateJobSpecs() error {
 					Host:     "github.com",
 					Owner:    repo.Owner,
 					Repo:     repo.Repo,
+					Ref:      repo.Ref,
 					Revision: repo.Revision,
 				},
 				Name:        jobName,