Skip to content

Commit dc590d4

Browse files
cschleidencschleiden
authored
Merge pull request #92 from cschleiden/diag-improvements
Display color-coded schedule event ids & show parent ids
2 parents af8b5d4 + e975011 commit dc590d4

File tree

11 files changed

+92
-26
lines changed

11 files changed

+92
-26
lines changed

‎diag/app/build/asset-manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"files": {
33
"main.css": "./static/css/main.8b0db0ad.css",
4-
"main.js": "./static/js/main.f375bbc0.js",
4+
"main.js": "./static/js/main.9a7800c8.js",
55
"index.html": "./index.html",
66
"main.8b0db0ad.css.map": "./static/css/main.8b0db0ad.css.map",
7-
"main.f375bbc0.js.map": "./static/js/main.f375bbc0.js.map"
7+
"main.9a7800c8.js.map": "./static/js/main.9a7800c8.js.map"
88
},
99
"entrypoints": [
1010
"static/css/main.8b0db0ad.css",
11-
"static/js/main.f375bbc0.js"
11+
"static/js/main.9a7800c8.js"
1212
]
1313
}

‎diag/app/build/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>go-workflows</title><script defer="defer" src="./static/js/main.f375bbc0.js"></script><link href="./static/css/main.8b0db0ad.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>go-workflows</title><script defer="defer" src="./static/js/main.9a7800c8.js"></script><link href="./static/css/main.8b0db0ad.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

‎diag/app/build/static/js/main.f375bbc0.js‎ renamed to ‎diag/app/build/static/js/main.9a7800c8.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎diag/app/build/static/js/main.f375bbc0.js.LICENSE.txt‎ renamed to ‎diag/app/build/static/js/main.9a7800c8.js.LICENSE.txt‎

File renamed without changes.

‎diag/app/build/static/js/main.9a7800c8.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎diag/app/build/static/js/main.f375bbc0.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎diag/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
"last 1 safari version"
4747
]
4848
},
49-
"proxy": "http://localhost:3000",
49+
"proxy": "http://localhost:3000/diag/",
5050
"homepage": ".",
5151
"devDependencies": {
5252
"@types/react-router-bootstrap": "^0.24.5",

‎diag/app/src/Components.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,31 @@ export const EventType: React.FC<{ type: string }> = ({ type }) => {
5959
);
6060
};
6161

62+
export const ScheduleEventID: React.FC<{ id: number }> = ({ id }) => {
63+
const [textColor, bgColor] = scheduleEventIDColor(id);
64+
65+
return (
66+
<Badge
67+
className="ms-2"
68+
pill
69+
text={textColor}
70+
bg={""}
71+
style={{
72+
background: bgColor,
73+
fontWeight: "bold",
74+
}}
75+
>
76+
<code
77+
style={{
78+
color: "inherit",
79+
}}
80+
>
81+
{id}
82+
</code>
83+
</Badge>
84+
);
85+
};
86+
6287
function eventColor(event: string): [Color, string] {
6388
switch (event) {
6489
case "SubWorkflowScheduled":
@@ -90,3 +115,21 @@ function eventColor(event: string): [Color, string] {
90115
return ["dark", "info"];
91116
}
92117
}
118+
119+
function scheduleEventIDColor(id: number): [Color, string] {
120+
// Default bootstrap theme colors
121+
const colors: [Color, string][] = [
122+
["light", "#0d6efd"],
123+
["light", "#6f42c1"],
124+
["light", "#d63384"],
125+
["light", "#ffc107"],
126+
["light", "#dc3545"],
127+
["light", "#6610f2"],
128+
["light", "#fd7e14"],
129+
["light", "#198754"],
130+
["light", "#20c997"],
131+
["light", "#0dcaf0"],
132+
];
133+
134+
return colors[(id - 1) % colors.length];
135+
}

‎diag/app/src/Home.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Link, useLocation } from "react-router-dom";
21
import { Pagination, Table } from "react-bootstrap";
2+
import { Link, useLocation } from "react-router-dom";
33

4-
import { LinkContainer } from "react-router-bootstrap";
54
import React from "react";
6-
import { WorkflowInstanceRef } from "./client";
75
import useFetch from "react-fetch-hook";
6+
import { LinkContainer } from "react-router-bootstrap";
7+
import { WorkflowInstanceRef } from "./client";
88

99
function useQuery() {
1010
const { search } = useLocation();
@@ -40,23 +40,26 @@ function Home() {
4040
<tr>
4141
<th>Instance ID</th>
4242
<th>Execution ID</th>
43+
<th>Parent Instance ID</th>
4344
<th>Created At</th>
4445
</tr>
4546
</thead>
4647
<tbody>
4748
{(data || []).map((i) => (
4849
<tr key={i.instance.instance_id}>
4950
<td>
50-
<Link
51-
to={`/${i.instance.instance_id}`}
52-
key={i.instance.instance_id}
53-
>
51+
<Link to={`/${i.instance.instance_id}`}>
5452
<code>{i.instance.instance_id}</code>
5553
</Link>
5654
</td>
5755
<td>
5856
<code>{i.instance.execution_id}</code>
5957
</td>
58+
<td>
59+
<Link to={`/${i.instance.parent_instance}`}>
60+
<code>{i.instance.parent_instance}</code>
61+
</Link>
62+
</td>
6063
<td>
6164
<code>{i.created_at}</code>
6265
</td>

‎diag/app/src/Instance.tsx‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import { Accordion, Alert, Badge, Card } from "react-bootstrap";
2-
import {
3-
EventType,
4-
Payload,
5-
decodePayload,
6-
decodePayloads,
7-
} from "./Components";
2+
import { Link, useParams } from "react-router-dom";
83
import {
94
ExecutionCompletedAttributes,
105
ExecutionStartedAttributes,
116
HistoryEvent,
127
WorkflowInstanceInfo,
138
} from "./client";
9+
import {
10+
decodePayload,
11+
decodePayloads,
12+
EventType,
13+
Payload,
14+
ScheduleEventID,
15+
} from "./Components";
1416

15-
import React from "react";
1617
import useFetch from "react-fetch-hook";
17-
import { useParams } from "react-router-dom";
1818

1919
function Instance() {
2020
let params = useParams();
@@ -70,10 +70,25 @@ function Instance() {
7070

7171
<dl className="row">
7272
<dt className="col-sm-4">InstanceID</dt>
73-
<dd className="col-sm-8">{instance.instance.instance_id}</dd>
73+
<dd className="col-sm-8">
74+
<code>{instance.instance.instance_id}</code>
75+
</dd>
7476

7577
<dt className="col-sm-4">ExecutionID</dt>
76-
<dd className="col-sm-8">{instance.instance.execution_id}</dd>
78+
<dd className="col-sm-8">
79+
<code>{instance.instance.execution_id}</code>
80+
</dd>
81+
82+
{!!instance.instance.parent_instance && (
83+
<>
84+
<dt className="col-sm-4">Parent InstanceID</dt>
85+
<dd className="col-sm-8">
86+
<Link to={`/${instance.instance.parent_instance}`}>
87+
{instance.instance.parent_instance}
88+
</Link>
89+
</dd>
90+
</>
91+
)}
7792

7893
<dt className="col-sm-4">State</dt>
7994
<dd className="col-sm-8">
@@ -119,6 +134,10 @@ function Instance() {
119134
</div>
120135
<div className="flex-grow-1">
121136
<EventType type={event.type} />
137+
138+
{!!event.schedule_event_id && (
139+
<ScheduleEventID id={event.schedule_event_id!} />
140+
)}
122141
</div>
123142
<div>{event.timestamp}</div>
124143
</h5>

0 commit comments

Comments
 (0)