fix build view ui

routers/web/dev/termdemo.go

@@ -1,51 +0,0 @@
-package dev
-
-import (
-	"fmt"
-	"io"
-	"net/http"
-	"os"
-	"sync"
-	"time"
-
-	"code.gitea.io/gitea/models/db"
-	"code.gitea.io/gitea/models/dbfs"
-	"code.gitea.io/gitea/modules/context"
-)
-
-var demoLogWriterOnce sync.Once
-
-func TermDemo(ctx *context.Context) {
-	demoLogWriterOnce.Do(func() {
-		go func() {
-			f, _ := dbfs.OpenFile(db.DefaultContext, "termdemo.log", os.O_RDWR|os.O_CREATE|os.O_TRUNC|os.O_APPEND)
-			count := 0
-			for {
-				count++
-				s := fmt.Sprintf("\x1B[1;3;31mDemo Log\x1B[0m, count=%d\r\n", count)
-				_, _ = f.Write([]byte(s))
-				time.Sleep(time.Second)
-			}
-		}()
-	})
-
-	cmd := ctx.FormString("cmd")
-	if cmd == "tail" {
-		offset := ctx.FormInt64("offset")
-		f, _ := dbfs.OpenFile(db.DefaultContext, "termdemo.log", os.O_RDONLY)
-		if offset == -1 {
-			_, _ = f.Seek(0, io.SeekEnd)
-		} else {
-			_, _ = f.Seek(offset, io.SeekStart)
-		}
-		buf, _ := io.ReadAll(f)
-		offset, _ = f.Seek(0, io.SeekCurrent)
-		ctx.JSON(http.StatusOK, map[string]interface{}{
-			"offset":  offset,
-			"content": string(buf),
-		})
-		return
-	}
-
-	ctx.HTML(http.StatusOK, "dev/termdemo")
-}

routers/web/repo/builds/view.go

@@ -25,6 +25,7 @@ func View(ctx *context.Context) {
 	run := job.Run
 	ctx.Data["Build"] = run
 
+	// ctx.Data["Build"] = &bots_model.Run{Title: "test", Index: 123, Status: bots_model.StatusRunning}
 	ctx.HTML(http.StatusOK, tplViewBuild)
 }
 

routers/web/web.go

@@ -19,7 +19,6 @@ import (
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/metrics"
 	"code.gitea.io/gitea/modules/public"
-	_ "code.gitea.io/gitea/modules/session" // to registers all internal adapters
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/storage"
 	"code.gitea.io/gitea/modules/structs"
@@ -46,6 +45,8 @@ import (
 	"code.gitea.io/gitea/services/forms"
 	"code.gitea.io/gitea/services/lfs"
 
+	_ "code.gitea.io/gitea/modules/session" // to registers all internal adapters
+
 	"gitea.com/go-chi/captcha"
 	"gitea.com/go-chi/session"
 	"github.com/NYTimes/gziphandler"
@@ -661,6 +662,7 @@ func RegisterRoutes(m *web.Route) {
 
 	if !setting.IsProd {
 		m.Any("/dev/termdemo", dev.TermDemo)
+		m.Get("/template/*", dev.TemplatePreview)
 	}
 
 	reqRepoAdmin := context.RequireRepoAdmin()

templates/repo/builds/view.tmpl

@@ -1,17 +1,17 @@
 {{template "base/head" .}}
+
 <div class="page-content repository">
 	{{template "repo/header" .}}
-	<div class="ui container">
-		<div class="sixteen wide column title">
-			<div class="issue-title" id="issue-title-wrapper">
-				<h1>
-					<span id="issue-title">{{template "repo/builds/status" .Build.Status}}{{RenderIssueTitle $.Context .Build.Title $.RepoLink $.Repository.ComposeMetas}}</span>
-					<span class="index">#{{.Build.Index}}</span>
-				</h1>
-			</div>
-		</div>
+	<div class="build-view-header">
+		<h1>
+			<span class="title">{{template "repo/builds/status" .Build.Status}}{{RenderIssueTitle $.Context .Build.Title $.RepoLink $.Repository.ComposeMetas}}</span>
+			<span class="index">#{{.Build.Index}}</span>
+		</h1>
 	</div>
-	<div id="repo-build-view" run-index="{{.RunIndex}}" job-index="{{.JobIndex}}" class="h-100">
+
+	<div id="repo-build-view" data-run-index="{{.RunIndex}}" data-job-index="{{.JobIndex}}">
 	</div>
+
 </div>
+
 {{template "base/footer" .}}

web_src/js/components/RepoBuildView.vue

@@ -103,10 +103,6 @@ const sfc = {
   },
 
   mounted() {
-    // TODO: the parent element's full height doesn't work well now
-    const elBodyDiv = document.querySelector('body > div.full.height');
-    elBodyDiv.style.height = '100%';
-
     // load job data and then auto-reload periodically
     this.loadJobData();
     setInterval(() => this.loadJobData(), 1000);
@@ -239,7 +235,7 @@ const sfc = {
       // prepare mock data for logs
       for (const reqCursor of reqData.stepLogCursors) {
         if (!reqCursor.expanded) continue; // backend can decide whether send logs for a step
-        // if (reqCursor.cursor > 100) continue;
+        if (reqCursor.cursor > 100) continue;
         let cursor = reqCursor.cursor; // use cursor to send remaining logs
         const lines = [];
         for (let i = 0; i < 110; i++) {
@@ -317,8 +313,8 @@ export function initRepositoryBuildView() {
   if (!el) return;
 
   const view = createApp(sfc, {
-    jobIndex: el.getAttribute("job-index"),
-    runIndex: el.getAttribute("run-index"),
+    jobIndex: el.getAttribute("data-job-index"),
+    runIndex: el.getAttribute("data-run-index"),
   });
   view.mount(el);
 }
@@ -329,7 +325,7 @@ export function initRepositoryBuildView() {
 
 .build-view-container {
   display: flex;
-  height: 100%;
+  height: calc(100vh - 286px); // fine tune this value to make the main view has full height
 }
 
 
@@ -416,6 +412,12 @@ export function initRepositoryBuildView() {
 
 <style lang="less">
 // some elements are not managed by vue, so we need to use global style
+
+// TODO: the parent element's full height doesn't work well now
+body > div.full.height {
+  padding-bottom: 0;
+}
+
 .job-status-rotate {
   animation: job-status-rotate-keyframes 1s linear infinite;
 }

web_src/less/_base.less

@@ -1755,7 +1755,7 @@ footer {
   .ui {
     &.left,
     &.right {
-      line-height: 40px;
+      line-height: 39px; // there  is a border-top on the footer, so make the line-height 1px less
     }
   }
 }

web_src/less/_repository_build.less

@@ -0,0 +1,14 @@
+.page-content.repository {
+  .build-view-header {
+    height: 60px;
+
+    h1 {
+      font-size: 20px;
+      font-weight: 300;
+    }
+
+    .index {
+      color: var(--color-text-light-2);
+    }
+  }
+}

web_src/less/index.less

@@ -28,6 +28,7 @@
 @import "_install";
 @import "_form";
 @import "_repository";
+@import "_repository_build";
 @import "_editor";
 @import "_organization";
 @import "_user";