Skip to content

Commit 952ba9c

Browse files
author
Ryan Field
committed
Move diagrams to a separate page
1 parent 4bff541 commit 952ba9c

File tree

4 files changed

+74
-8
lines changed

4 files changed

+74
-8
lines changed

‎routes.go

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ func (g *Goflow) addTestRoute() {
1616
g.Router.HandleFunc("GET /{$}", g.handleRedirect)
1717
g.Router.HandleFunc("GET /ui", g.handleRoot)
1818
g.Router.HandleFunc("GET /ui/jobs/{name}", g.handleJobsPage)
19+
g.Router.HandleFunc("GET /ui/diagrams/{name}", g.handleDiagramsPage)
1920
g.Router.HandleFunc("/events", g.handleStream)
2021
g.Router.HandleFunc("/events/{name}", g.handleStream)
2122
g.Router.Handle("GET /static/", http.StripPrefix("/static/", http.FileServer(http.Dir(g.Options.UIPath))))
@@ -178,3 +179,20 @@ func (g *Goflow) handleJobsPage(w http.ResponseWriter, r *http.Request) {
178179
http.Error(w, http.StatusText(http.StatusNotFound), http.StatusNotFound)
179180
}
180181
}
182+
183+
func (g *Goflow) handleDiagramsPage(w http.ResponseWriter, r *http.Request) {
184+
name := r.PathValue("name")
185+
jobFn, ok := g.Jobs[name]
186+
187+
if ok {
188+
tmpl, _ := template.ParseFiles("ui/html/diagram.html.tmpl")
189+
tmpl.Execute(w,
190+
map[string]any{
191+
"jobName": name,
192+
"taskNames": jobFn().tasks,
193+
"schedule": g.Jobs[name]().Schedule,
194+
})
195+
} else {
196+
http.Error(w, http.StatusText(http.StatusNotFound), http.StatusNotFound)
197+
}
198+
}

‎ui/html/diagram.html.tmpl

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="/static/css/styles.css">
5+
<title>Goflow</title>
6+
<script src="/static/src/plain.js"></script>
7+
</head>
8+
<body>
9+
<div class="top-nav">
10+
<h1><a href="/">Goflow</a></h1>
11+
</div>
12+
<div class="job-info">
13+
<strong class="job-info-title">{{ .jobName }}</strong>
14+
<div>
15+
<div id="schedule-badge-{{ .jobName }}">{{ .schedule }}</div>
16+
</div>
17+
<div class="button-container-job-page">
18+
<a href="/ui/jobs/{{ .jobName}}">View tasks</a>
19+
</div>
20+
<div class="button-container-job-page">
21+
<button id="button-toggle-{{ .jobName }}" class="button" onclick="buttonPress('toggle', '{{ .jobName }}')">Toggle scheduling</button>
22+
<button id="button-submit-{{ .jobName }}" class="button" onclick="buttonPress('submit', '{{ .jobName }}')">Execute</button>
23+
</div>
24+
</div>
25+
<div class="job-container">
26+
<div class="graph-container">
27+
<div id="last-execution-ts-wrapper">Last run:</div>
28+
<svg class="graph" width="100%"><g/></svg>
29+
</div>
30+
</div>
31+
</body>
32+
</html>
33+
<script src="/static/dist/dist.js"></script>
34+
<script>goflowUI.graphViz('{{ .jobName }}')</script>
35+
<script>updateJobActive('{{ .jobName }}')</script>
36+
<script>diagramPageEventListener('{{ .jobName }}')</script>

‎ui/html/job.html.tmpl

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
<div>
1515
<div id="schedule-badge-{{ .jobName }}">{{ .schedule }}</div>
1616
</div>
17+
<div class="button-container-job-page">
18+
<a href="/ui/diagrams/{{ .jobName}}">View diagram</a>
19+
</div>
1720
<div class="button-container-job-page">
1821
<button id="button-toggle-{{ .jobName }}" class="button" onclick="buttonPress('toggle', '{{ .jobName }}')">Toggle scheduling</button>
1922
<button id="button-submit-{{ .jobName }}" class="button" onclick="buttonPress('submit', '{{ .jobName }}')">Execute</button>
@@ -36,14 +39,9 @@
3639
<div class="status-wrapper" id="{{ $taskName }}"></div>
3740
{{ end }}
3841
</div>
39-
<div class="graph-container">
40-
<div id="last-execution-ts-wrapper">Last run:</div>
41-
<svg class="graph" width="100%"><g/></svg>
42-
</div>
4342
</div>
4443
</body>
4544
</html>
4645
<script src="/static/dist/dist.js"></script>
47-
<script>goflowUI.graphViz('{{ .jobName }}')</script>
4846
<script>updateJobActive('{{ .jobName }}')</script>
4947
<script>jobPageEventListener('{{ .jobName }}')</script>

‎ui/src/plain.js

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@ function jobPageEventListener(job) {
1313
stream.addEventListener("message", jobPageEventHandler)
1414
}
1515

16+
function diagramPageEventListener(job) {
17+
var stream = new EventSource(`/events/${job}?stream=messages`);
18+
stream.addEventListener("message", diagramPageEventHandler)
19+
}
20+
1621
function indexPageEventHandler(message) {
1722
const d = JSON.parse(message.data);
1823
const s = stateColor(d.state);
@@ -23,8 +28,12 @@ function indexPageEventHandler(message) {
2328
function jobPageEventHandler(message) {
2429
const d = JSON.parse(message.data);
2530
updateTaskStateCircles(d);
26-
updateGraphViz(d);
31+
}
32+
33+
function diagramPageEventHandler(message) {
34+
const d = JSON.parse(message.data);
2735
updateLastRunTs(d);
36+
updateGraphViz(d);
2837
}
2938

3039
function updateStateCircles(tableName, jobID, wrapperId, color, startTimestamp) {
@@ -88,9 +97,14 @@ function updateGraphViz(execution) {
8897
}
8998

9099
function updateLastRunTs(execution) {
91-
const lastExecutionTs = execution.startTs;
100+
const options = {
101+
dateStyle: 'medium',
102+
timeStyle: 'medium'
103+
};
104+
const startTs = new Date(execution.startTs);
105+
const formattedTs = startTs.toLocaleString(undefined, options);
92106
const lastExecutionTsHTML = document.getElementById("last-execution-ts-wrapper").innerHTML;
93-
const newHTML = lastExecutionTsHTML.replace(/.*/, `Last run: ${lastExecutionTs}`);
107+
const newHTML = lastExecutionTsHTML.replace(/.*/, `Last run: ${formattedTs}`);
94108
document.getElementById("last-execution-ts-wrapper").innerHTML = newHTML;
95109
}
96110

0 commit comments

Comments
 (0)