From f7ba566df7167369062324a989c8c848e12433ab Mon Sep 17 00:00:00 2001 From: Aleksandr Nogikh Date: Thu, 6 Apr 2023 18:39:39 +0200 Subject: dashboard: display collapsible info sections on the bug page Instead of showing tons of extra information to the user, only show the collapsed titles with counts and let user toggle the sections they need. --- dashboard/app/bug.html | 24 ++++++----- dashboard/app/main.go | 94 +++++++++++++++++++++++++++++++------------- dashboard/app/templates.html | 5 +-- pkg/html/pages/common.js | 14 +++++++ pkg/html/pages/style.css | 29 ++++++++++++++ 5 files changed, 127 insertions(+), 39 deletions(-) diff --git a/dashboard/app/bug.html b/dashboard/app/bug.html index 252b33ebd..23f2c6689 100644 --- a/dashboard/app/bug.html +++ b/dashboard/app/bug.html @@ -39,21 +39,27 @@ Page with details about a single bug.
- {{template "discussions_list" .Discussions}} - {{template "bug_list" .DupOf}} - {{template "bug_list" .Dups}} - {{template "bug_list" .Similar}} - {{template "job_list" .TestPatchJobs}} + {{range $item := .Sections}} +
+
+ ▶ + ▲ + {{$item.Title}} +
+
+ {{if eq $item.Type "bug_list"}}{{template "bug_list" $item.Value}}{{end}} + {{if eq $item.Type "job_list"}}{{template "job_list" $item.Value}}{{end}} + {{if eq $item.Type "crash_list"}}{{template "crash_list" $item.Value}}{{end}} + {{if eq $item.Type "discussion_list"}}{{template "discussion_list" $item.Value}}{{end}} +
+
+ {{end}} {{if .SampleReport}}
Sample crash report:
{{.SampleReport}}

{{end}} - {{if .FixBisections}} - {{template "crash_list" .FixBisections}} - {{end}} - {{template "crash_list" .Crashes}} diff --git a/dashboard/app/main.go b/dashboard/app/main.go index b86c3ea23..97babdf55 100644 --- a/dashboard/app/main.go +++ b/dashboard/app/main.go @@ -242,15 +242,25 @@ type uiBugPage struct { Bug *uiBug BisectCause *uiJob BisectFix *uiJob - DupOf *uiBugGroup - Dups *uiBugGroup - Similar *uiBugGroup + Sections []*uiCollapsible SampleReport template.HTML Crashes *uiCrashTable - FixBisections *uiCrashTable TestPatchJobs *uiJobList Subsystems []*uiBugSubsystem - Discussions []*uiBugDiscussion +} + +const ( + sectionBugList = "bug_list" + sectionJobList = "job_list" + sectionCrashList = "crash_list" + sectionDiscussionList = "discussion_list" +) + +type uiCollapsible struct { + Title string + Show bool // By default it's collapsed. + Type string // Template system understands it. + Value interface{} } type uiBugGroup struct { @@ -644,6 +654,7 @@ func handleAdmin(c context.Context, w http.ResponseWriter, r *http.Request) erro } // handleBug serves page about a single bug (which is passed in id argument). +// nolint: funlen, gocyclo func handleBug(c context.Context, w http.ResponseWriter, r *http.Request) error { bug, err := findBugByID(c, r) if err != nil { @@ -665,18 +676,22 @@ func handleBug(c context.Context, w http.ResponseWriter, r *http.Request) error if err != nil { return err } - var dupOf *uiBugGroup + sections := []*uiCollapsible{} if bug.DupOf != "" { dup := new(Bug) if err := db.Get(c, db.NewKey(c, "Bug", bug.DupOf, 0, nil), dup); err != nil { return err } if accessLevel >= dup.sanitizeAccess(accessLevel) { - dupOf = &uiBugGroup{ - Now: timeNow(c), - Caption: "Duplicate of", - Bugs: []*uiBug{createUIBug(c, dup, state, managers)}, - } + sections = append(sections, &uiCollapsible{ + Title: "Duplicate of", + Show: true, + Type: sectionBugList, + Value: &uiBugGroup{ + Now: timeNow(c), + Bugs: []*uiBug{createUIBug(c, dup, state, managers)}, + }, + }) } } uiBug := createUIBug(c, bug, state, managers) @@ -692,10 +707,25 @@ func handleBug(c context.Context, w http.ResponseWriter, r *http.Request) error if err != nil { return err } + if len(dups.Bugs) > 0 { + sections = append(sections, &uiCollapsible{ + Title: fmt.Sprintf("Duplicate bugs (%d)", len(dups.Bugs)), + Type: sectionBugList, + Value: dups, + }) + } similar, err := loadSimilarBugsUI(c, r, bug, state) if err != nil { return err } + if len(similar.Bugs) > 0 { + sections = append(sections, &uiCollapsible{ + Title: fmt.Sprintf("Similar bugs (%d)", len(similar.Bugs)), + Type: sectionBugList, + Value: similar, + }) + } + var bisectCause *uiJob if bug.BisectCause > BisectPending { bisectCause, err = getUIJob(c, bug, JobBisectCause) @@ -710,31 +740,41 @@ func handleBug(c context.Context, w http.ResponseWriter, r *http.Request) error return err } } - testPatchJobs, err := loadTestPatchJobs(c, bug) + discussions, err := getBugDiscussionsUI(c, bug) if err != nil { return err } - discussions, err := getBugDiscussionsUI(c, bug) + if len(discussions) > 0 { + sections = append(sections, &uiCollapsible{ + Title: fmt.Sprintf("Discussions (%d)", len(discussions)), + Show: true, + Type: sectionDiscussionList, + Value: discussions, + }) + } + testPatchJobs, err := loadTestPatchJobs(c, bug) if err != nil { return err } + if len(testPatchJobs) > 0 { + sections = append(sections, &uiCollapsible{ + Title: fmt.Sprintf("Last patch testing requests (%d)", len(testPatchJobs)), + Type: sectionJobList, + Value: &uiJobList{ + PerBug: true, + Jobs: testPatchJobs, + }, + }) + } data := &uiBugPage{ Header: hdr, Now: timeNow(c), Bug: uiBug, BisectCause: bisectCause, BisectFix: bisectFix, - DupOf: dupOf, - Dups: dups, - Similar: similar, + Sections: sections, SampleReport: sampleReport, Crashes: crashesTable, - TestPatchJobs: &uiJobList{ - Title: "Last patch testing requests:", - PerBug: true, - Jobs: testPatchJobs, - }, - Discussions: discussions, } for _, entry := range bug.Tags.Subsystems { data.Subsystems = append(data.Subsystems, makeBugSubsystemUI(c, bug, entry)) @@ -748,10 +788,11 @@ func handleBug(c context.Context, w http.ResponseWriter, r *http.Request) error return err } if len(fixBisections) != 0 { - data.FixBisections = &uiCrashTable{ - Crashes: fixBisections, - Caption: "Fix bisection attempts", - } + data.Sections = append(data.Sections, &uiCollapsible{ + Title: fmt.Sprintf("Fix bisection attempts (%d)", len(fixBisections)), + Type: sectionCrashList, + Value: &uiCrashTable{Crashes: fixBisections}, + }) } } @@ -1331,7 +1372,6 @@ func loadSimilarBugsUI(c context.Context, r *http.Request, bug *Bug, state *Repo } group := &uiBugGroup{ Now: timeNow(c), - Caption: "similar bugs", ShowNamespace: true, ShowPatched: true, ShowStatus: true, diff --git a/dashboard/app/templates.html b/dashboard/app/templates.html index 840f8073e..62f37b5cd 100644 --- a/dashboard/app/templates.html +++ b/dashboard/app/templates.html @@ -356,7 +356,7 @@ Use of this source code is governed by Apache 2 LICENSE that can be found in the {{define "crash_list"}} {{if .}} - + {{if .Caption}}{{end}} @@ -506,10 +506,9 @@ Use of this source code is governed by Apache 2 LICENSE that can be found in the {{end}} {{/* List of discussions, invoked with []*uiBugDiscussion */}} -{{define "discussions_list"}} +{{define "discussion_list"}} {{if .}}
{{.Caption}}:{{.Caption}}:
Time
- diff --git a/pkg/html/pages/common.js b/pkg/html/pages/common.js index 95e6c8f61..80db71c8f 100644 --- a/pkg/html/pages/common.js +++ b/pkg/html/pages/common.js @@ -99,3 +99,17 @@ function addInputGroup(node) { values.insertBefore(newGroup, lastGroup.nextSibling) return false } + +document.addEventListener("DOMContentLoaded", function() { + document.addEventListener('click', function(event) { + const collapsible = event.target.closest('.collapsible') + if (!collapsible) { + return + } + const toggle = event.target.closest('.collapsible .head'); + if (toggle) { + collapsible.classList.toggle("collapsible-hide"); + collapsible.classList.toggle("collapsible-show"); + } + }) +}) diff --git a/pkg/html/pages/style.css b/pkg/html/pages/style.css index 09bcc90a0..5e19eebef 100644 --- a/pkg/html/pages/style.css +++ b/pkg/html/pages/style.css @@ -342,3 +342,32 @@ aside { clear: both; margin-bottom: 10px; } + +.collapsible { + border: 1px solid lightgrey; + margin-bottom: 15px; +} + +.collapsible .content { + overflow-x: auto; +} + +.collapsible .head { + max-width: 100%; + background-color: lightgrey; + padding: 5pt; + vertical-align: middle; + cursor: pointer; +} + +.collapsible-hide .content { + display: none; +} + +.collapsible-hide .hide-icon { + display: none; +} + +.collapsible-show .show-icon { + display: none; +} -- cgit mrf-deployment
Discussions:
Title