Add more views

README.md

@@ -1,4 +1,4 @@
-# ClusterCockpit with a Golang backend (Only supports archived jobs)
+# ClusterCockpit with a Golang backend
 
 [![Build](https://github.com/ClusterCockpit/cc-jobarchive/actions/workflows/test.yml/badge.svg)](https://github.com/ClusterCockpit/cc-jobarchive/actions/workflows/test.yml)
 
@@ -11,7 +11,12 @@ git clone --recursive git@github.com:ClusterCockpit/cc-jobarchive.git
 # Prepare frontend
 cd ./cc-jobarchive/frontend
 yarn install
-CCFRONTEND_ROLLUP_INTRO="" yarn build
+export CCFRONTEND_ROLLUP_INTRO='
+const JOBVIEW_URL = job => `/monitoring/job/${job.jobId}`;
+const USERVIEW_URL = userId => `/monitoring/user/${userId}`;
+const TAG_URL = tag => `/monitoring/jobs/?tag=${tag.id}`;
+'
+yarn build
 
 cd ..
 go get
@@ -45,4 +50,6 @@ This project uses [gqlgen](https://github.com/99designs/gqlgen) for the GraphQL
 
 - [ ] Documentation
 - [ ] Write more TODOs
+- [ ] Caching
+- [ ] Generate JWTs based on the provided keys
 

frontend

@@ -1 +1 @@
-Subproject commit 41b8953eb14e52fe9f3c4fe69167202f8002de45
+Subproject commit cc48461a810dbd3565000150fc99332743de92ba

server.go

@@ -176,8 +176,27 @@ func main() {
 	secured.HandleFunc("/config.json", config.ServeConfig).Methods(http.MethodGet)
 
 	secured.HandleFunc("/", func(rw http.ResponseWriter, r *http.Request) {
+		conf, err := config.GetUIConfig(r)
+		if err != nil {
+			http.Error(rw, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		infos := map[string]interface{}{
+			"clusters": config.Clusters,
+			"username": "",
+			"admin":    true,
+		}
+
+		if user := auth.GetUser(r.Context()); user != nil {
+			infos["username"] = user.Username
+			infos["admin"] = user.IsAdmin
+		}
+
 		templates.Render(rw, r, "home", &templates.Page{
 			Title:  "ClusterCockpit",
+			Config: conf,
+			Infos:  infos,
 		})
 	})
 
@@ -208,9 +227,34 @@ func monitoringRoutes(router *mux.Router, resolver *graph.Resolver) {
 			return
 		}
 
+		filterPresets := map[string]interface{}{}
+		query := r.URL.Query()
+		if query.Get("tag") != "" {
+			filterPresets["tagId"] = query.Get("tag")
+		}
+		if query.Get("cluster") != "" {
+			filterPresets["clusterId"] = query.Get("cluster")
+		}
+		if query.Get("project") != "" {
+			filterPresets["projectId"] = query.Get("project")
+		}
+		if query.Get("running") == "true" {
+			filterPresets["isRunning"] = true
+		}
+		if query.Get("running") == "false" {
+			filterPresets["isRunning"] = false
+		}
+		if query.Get("from") != "" && query.Get("to") != "" {
+			filterPresets["startTime"] = map[string]string{
+				"from": query.Get("from"),
+				"to":   query.Get("to"),
+			}
+		}
+
 		templates.Render(rw, r, "monitoring/jobs/", &templates.Page{
 			Title:         "Jobs - ClusterCockpit",
 			Config:        conf,
+			FilterPresets: filterPresets,
 		})
 	})
 
@@ -266,8 +310,64 @@ func monitoringRoutes(router *mux.Router, resolver *graph.Resolver) {
 		templates.Render(rw, r, "monitoring/user/", &templates.Page{
 			Title:  fmt.Sprintf("User %s - ClusterCockpit", id),
 			Config: conf,
+			Infos:  map[string]interface{}{"userId": id},
+		})
+	})
+
+	router.HandleFunc("/monitoring/analysis/", func(rw http.ResponseWriter, r *http.Request) {
+		conf, err := config.GetUIConfig(r)
+		if err != nil {
+			http.Error(rw, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		filterPresets := map[string]interface{}{}
+		query := r.URL.Query()
+		if query.Get("cluster") != "" {
+			filterPresets["clusterId"] = query.Get("cluster")
+		}
+
+		templates.Render(rw, r, "monitoring/analysis/", &templates.Page{
+			Title:         "Analysis View - ClusterCockpit",
+			Config:        conf,
+			FilterPresets: filterPresets,
+		})
+	})
+
+	router.HandleFunc("/monitoring/systems/", func(rw http.ResponseWriter, r *http.Request) {
+		conf, err := config.GetUIConfig(r)
+		if err != nil {
+			http.Error(rw, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		filterPresets := map[string]interface{}{}
+		query := r.URL.Query()
+		if query.Get("cluster") != "" {
+			filterPresets["clusterId"] = query.Get("cluster")
+		}
+
+		templates.Render(rw, r, "monitoring/systems/", &templates.Page{
+			Title:         "System View - ClusterCockpit",
+			Config:        conf,
+			FilterPresets: filterPresets,
+		})
+	})
+
+	router.HandleFunc("/monitoring/node/{clusterId}/{nodeId}", func(rw http.ResponseWriter, r *http.Request) {
+		conf, err := config.GetUIConfig(r)
+		if err != nil {
+			http.Error(rw, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		vars := mux.Vars(r)
+		templates.Render(rw, r, "monitoring/node/", &templates.Page{
+			Title:  fmt.Sprintf("Node %s - ClusterCockpit", vars["nodeId"]),
+			Config: conf,
 			Infos: map[string]interface{}{
-				"userId": id,
+				"nodeId":    vars["nodeId"],
+				"clusterId": vars["clusterId"],
 			},
 		})
 	})

templates/home.html

@@ -1,10 +1,57 @@
 {{define "content"}}
 <div class="row">
     <div class="col">
+        {{if .Infos.username}}
+            <i class="bi bi-person-circle"></i> {{ .Infos.username }}
+            {{if .Infos.admin}}
+                <span class="badge bg-primary">Admin</span>
+            {{end}}
+        {{end}}
+    </div>
+    <div class="col" style="text-align: right;">
+        <form method="post" action="/logout">
+            <button type="submit" class="btn btn-primary">Logout</button>
+        </form>
+    </div>
+</div>
+<div class="row">
+    {{if .Infos.admin}}
+        <div class="col-4">
             <ul>
-            <li><a href="/monitoring/jobs/">jobs</a></li>
+                <li><a href="/monitoring/jobs/">All jobs</a></li>
-            <li><a href="/monitoring/users/">users</a></li>
+                <li><a href="/monitoring/users/">All users</a></li>
             </ul>
         </div>
+    {{else}}
+        <div class="col-4">
+            <ul>
+                <li><a href="/monitoring/jobs/">My jobs</a></li>
+                <li><a href="/monitoring/user/{{.Infos.username}}">My user view</a></li>
+            </ul>
+        </div>
+    {{end}}
+    <div class="col-8">
+        <h2>Clusters</h2>
+        <table class="table">
+            <thead>
+                <tr>
+                    <th>Name/ID</th>
+                    <th>Jobs</th>
+                    <th>System View</th>
+                    <th>Analysis View</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range .Infos.clusters}}
+                    <tr>
+                        <td>{{.ClusterID}}</td>
+                        <td><a href="/monitoring/jobs/?cluster={{.ClusterID}}">Jobs</a></td>
+                        <td><a href="/monitoring/systems/?cluster={{.ClusterID}}">System View</a></td>
+                        <td><a href="/monitoring/analysis/?cluster={{.ClusterID}}">Analysis View</a></td>
+                    </tr>
+                {{end}}
+            </tbody>
+        </table>
+    </div>
 </div>
 {{end}}

templates/monitoring/analysis.html

@@ -0,0 +1,18 @@
+{{define "content"}}
+    <div id="svelte-app"></div>
+{{end}}
+
+{{define "stylesheets"}}
+    <link rel='stylesheet' href='/build/analysis.css'>
+{{end}}
+{{define "javascript"}}
+    <script>
+        const filterPresets = {{ .FilterPresets }};
+        const clusterCockpitConfigPromise = Promise.resolve({
+            plot_view_plotsPerRow:            {{ .Config.plot_view_plotsPerRow            }},
+            analysis_view_histogramMetrics:   {{ .Config.analysis_view_histogramMetrics   }},
+            analysis_view_scatterPlotMetrics: {{ .Config.analysis_view_scatterPlotMetrics }}
+        });
+    </script>
+    <script src='/build/analysis.js'></script>
+{{end}}

templates/monitoring/jobs.html

@@ -7,7 +7,7 @@
 {{end}}
 {{define "javascript"}}
     <script>
-        const filterPresets = null;
+        const filterPresets = {{ .FilterPresets }};
         const clusterCockpitConfigPromise = Promise.resolve({
             plot_general_colorscheme:     {{ .Config.plot_general_colorscheme     }},
             plot_general_lineWidth:       {{ .Config.plot_general_lineWidth       }},

templates/monitoring/node.html

@@ -0,0 +1,21 @@
+{{define "content"}}
+    <div id="svelte-app"></div>
+{{end}}
+
+{{define "stylesheets"}}
+    <link rel='stylesheet' href='/build/node.css'>
+{{end}}
+{{define "javascript"}}
+    <script>
+        const nodeInfos = {
+            nodeId: "{{ .Infos.nodeId }}",
+            clusterId: "{{ .Infos.clusterId }}"
+        };
+        const clusterCockpitConfigPromise = Promise.resolve({
+            plot_general_colorscheme:           {{ .Config.plot_general_colorscheme           }},
+            plot_general_lineWidth:             {{ .Config.plot_general_lineWidth             }},
+            plot_general_colorBackground:       {{ .Config.plot_general_colorBackground       }},
+        });
+    </script>
+    <script src='/build/node.js'></script>
+{{end}}

templates/monitoring/systems.html

@@ -0,0 +1,19 @@
+{{define "content"}}
+    <div id="svelte-app"></div>
+{{end}}
+
+{{define "stylesheets"}}
+    <link rel='stylesheet' href='/build/systems.css'>
+{{end}}
+{{define "javascript"}}
+    <script>
+        const filterPresets = {{ .FilterPresets }};
+        const clusterCockpitConfigPromise = Promise.resolve({
+            plot_view_plotsPerRow:              {{ .Config.plot_view_plotsPerRow            }},
+            plot_general_colorscheme:           {{ .Config.plot_general_colorscheme           }},
+            plot_general_lineWidth:             {{ .Config.plot_general_lineWidth             }},
+            plot_general_colorBackground:       {{ .Config.plot_general_colorBackground       }},
+        });
+    </script>
+    <script src='/build/systems.js'></script>
+{{end}}

templates/templates.go

@@ -11,6 +11,7 @@ var templates map[string]*template.Template
 type Page struct {
 	Title         string
 	Login         *LoginPage
+	FilterPresets map[string]interface{}
 	Infos         map[string]interface{}
 	Config        map[string]interface{}
 }
@@ -30,11 +31,19 @@ func init() {
 		"monitoring/job/":      template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/job.html")),
 		"monitoring/users/":    template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/users.html")),
 		"monitoring/user/":     template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/user.html")),
+		"monitoring/analysis/": template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/analysis.html")),
+		"monitoring/systems/":  template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/systems.html")),
+		"monitoring/node/":     template.Must(template.Must(base.Clone()).ParseFiles("./templates/monitoring/node.html")),
 	}
 }
 
 func Render(rw http.ResponseWriter, r *http.Request, name string, page *Page) {
-	if err := templates[name].Execute(rw, page); err != nil {
+	t, ok := templates[name]
+	if !ok {
+		panic("templates must be predefinied!")
+	}
+
+	if err := t.Execute(rw, page); err != nil {
 		log.Printf("template error: %s\n", err.Error())
 	}
 }