Skip to content

Commit 0607b11

Browse files
cschleidencschleiden
authored
Improve pagination and add "Go to instance" ui
1 parent b8ab299 commit 0607b11

File tree

10 files changed

+77
-46
lines changed

10 files changed

+77
-46
lines changed

‎web/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.99032ea1.js",
4+
"main.js": "./static/js/main.f375bbc0.js",
55
"index.html": "./index.html",
66
"main.8b0db0ad.css.map": "./static/css/main.8b0db0ad.css.map",
7-
"main.99032ea1.js.map": "./static/js/main.99032ea1.js.map"
7+
"main.f375bbc0.js.map": "./static/js/main.f375bbc0.js.map"
88
},
99
"entrypoints": [
1010
"static/css/main.8b0db0ad.css",
11-
"static/js/main.99032ea1.js"
11+
"static/js/main.f375bbc0.js"
1212
]
1313
}

‎web/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.99032ea1.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.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>

‎web/app/build/static/js/main.99032ea1.js.map‎

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

‎web/app/build/static/js/main.99032ea1.js‎ renamed to ‎web/app/build/static/js/main.f375bbc0.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.

‎web/app/build/static/js/main.99032ea1.js.LICENSE.txt‎ renamed to ‎web/app/build/static/js/main.f375bbc0.js.LICENSE.txt‎

File renamed without changes.

‎web/app/build/static/js/main.f375bbc0.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.

‎web/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:8080",
49+
"proxy": "http://localhost:3000",
5050
"homepage": ".",
5151
"devDependencies": {
5252
"@types/react-router-bootstrap": "^0.24.5",

‎web/app/src/Home.tsx‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import React from "react";
1+
import { Link, useLocation } from "react-router-dom";
22
import { Pagination, Table } from "react-bootstrap";
3-
import useFetch from "react-fetch-hook";
3+
44
import { LinkContainer } from "react-router-bootstrap";
5-
import { Link, useLocation } from "react-router-dom";
5+
import React from "react";
66
import { WorkflowInstanceRef } from "./client";
7+
import useFetch from "react-fetch-hook";
78

89
function useQuery() {
910
const { search } = useLocation();
@@ -16,12 +17,12 @@ function Home() {
1617

1718
const query = useQuery();
1819
const afterId = query.get("after");
19-
const previousId = query.get("previous");
20+
const page = +(query.get("page") || 1);
2021

2122
const { isLoading, data, error } = useFetch<WorkflowInstanceRef[]>(
2223
document.location.pathname +
2324
`api/?count=${count}` +
24-
(afterId ? `&after=${afterId || previousId}` : "")
25+
(afterId ? `&after=${afterId}` : "")
2526
);
2627

2728
return (
@@ -37,40 +38,43 @@ function Home() {
3738
<Table striped bordered hover size="sm">
3839
<thead>
3940
<tr>
40-
<th>#</th>
4141
<th>Instance ID</th>
4242
<th>Execution ID</th>
4343
<th>Created At</th>
4444
</tr>
4545
</thead>
4646
<tbody>
47-
{(data || []).map((i, idx) => (
47+
{(data || []).map((i) => (
4848
<tr key={i.instance.instance_id}>
49-
<td>{idx}</td>
5049
<td>
5150
<Link
5251
to={`/${i.instance.instance_id}`}
5352
key={i.instance.instance_id}
5453
>
55-
{i.instance.instance_id}
54+
<code>{i.instance.instance_id}</code>
5655
</Link>
5756
</td>
58-
<td>{i.instance.execution_id}</td>
59-
<td>{i.created_at}</td>
57+
<td>
58+
<code>{i.instance.execution_id}</code>
59+
</td>
60+
<td>
61+
<code>{i.created_at}</code>
62+
</td>
6063
</tr>
6164
))}
6265
</tbody>
6366
</Table>
6467

6568
<div className="d-flex justify-content-center">
6669
<Pagination>
67-
<LinkContainer to={`/?previous=${previousId || ""}`}>
68-
<Pagination.Prev disabled={!previousId && !afterId} />
70+
<LinkContainer to="/?">
71+
<Pagination.First disabled={!afterId} />
6972
</LinkContainer>
73+
<Pagination.Item active>{page}</Pagination.Item>
7074
<LinkContainer
71-
to={`/?previous=${afterId || ""}&after=${
75+
to={`/?after=${
7276
(data && data[data.length - 1].instance.instance_id) || ""
73-
}`}
77+
}&page=${page + 1}`}
7478
>
7579
<Pagination.Next disabled={!data || data.length < count} />
7680
</LinkContainer>

‎web/app/src/Instance.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,63 @@
1-
import React from "react";
2-
import { Accordion, Badge, Card } from "react-bootstrap";
3-
import useFetch from "react-fetch-hook";
4-
import { useParams } from "react-router-dom";
1+
import { Accordion, Alert, Badge, Card } from "react-bootstrap";
2+
import {
3+
EventType,
4+
Payload,
5+
decodePayload,
6+
decodePayloads,
7+
} from "./Components";
58
import {
69
ExecutionCompletedAttributes,
710
ExecutionStartedAttributes,
811
HistoryEvent,
912
WorkflowInstanceInfo,
1013
} from "./client";
11-
import {
12-
decodePayload,
13-
decodePayloads,
14-
EventType,
15-
Payload,
16-
} from "./Components";
14+
15+
import React from "react";
16+
import useFetch from "react-fetch-hook";
17+
import { useParams } from "react-router-dom";
1718

1819
function Instance() {
1920
let params = useParams();
2021

2122
const instanceId = params.instanceId;
2223

23-
const { isLoading, data: instance } = useFetch<WorkflowInstanceInfo>(
24+
const {
25+
isLoading,
26+
data: instance,
27+
error,
28+
} = useFetch<WorkflowInstanceInfo>(
2429
document.location.pathname + "api/" + instanceId
2530
);
2631

27-
if (isLoading || !instance) {
32+
if (isLoading) {
2833
return <div>Loading...</div>;
2934
}
3035

36+
if (error || !instance) {
37+
return (
38+
<div>
39+
<Alert variant="danger">
40+
Workflow instance with id <code>{instanceId}</code> not found
41+
</Alert>
42+
</div>
43+
);
44+
}
45+
3146
const startedEvent = instance.history.find(
3247
(e) => e.type === "WorkflowExecutionStarted"
3348
) as HistoryEvent<ExecutionStartedAttributes>;
3449

3550
const workflowName = startedEvent.attributes.name;
3651
const inputs = startedEvent.attributes.inputs;
3752

38-
let result: string | undefined;
39-
let error: string | undefined;
53+
let wfResult: string | undefined;
54+
let wfError: string | undefined;
4055
const finishedEvent = instance.history.find(
4156
(e) => e.type === "WorkflowExecutionFinished"
4257
) as HistoryEvent<ExecutionCompletedAttributes>;
4358
if (finishedEvent) {
44-
result = finishedEvent.attributes.result;
45-
error = finishedEvent.attributes.error;
59+
wfResult = finishedEvent.attributes.result;
60+
wfError = finishedEvent.attributes.error;
4661
}
4762

4863
return (
@@ -88,8 +103,8 @@ function Instance() {
88103
<Card className="mt-3">
89104
<Card.Header as="h5">Result</Card.Header>
90105
<Card.Body>
91-
{result && <Payload payloads={[decodePayload(result)]} />}
92-
{error && <Payload payloads={[error]} />}
106+
{wfResult && <Payload payloads={[decodePayload(wfResult)]} />}
107+
{wfError && <Payload payloads={[wfError]} />}
93108
</Card.Body>
94109
</Card>
95110

‎web/app/src/Layout.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import {
32
Button,
43
Container,
@@ -7,10 +6,19 @@ import {
76
Nav,
87
Navbar,
98
} from "react-bootstrap";
9+
import { Outlet, useNavigate } from "react-router-dom";
10+
import React, { useState } from "react";
11+
1012
import { LinkContainer } from "react-router-bootstrap";
11-
import { Outlet } from "react-router-dom";
1213

1314
function Layout() {
15+
const navigate = useNavigate();
16+
const [input, setInput] = useState("");
17+
const onGo = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
18+
setInput("");
19+
navigate(`/${input}`);
20+
};
21+
1422
return (
1523
<>
1624
<header>
@@ -34,14 +42,18 @@ function Layout() {
3442
placeholder="InstanceID"
3543
className="me-2"
3644
aria-label="Search"
45+
value={input}
46+
onChange={(e) => setInput(e.target.value)}
3747
/>
38-
<Button variant="outline-success">Go</Button>
48+
<Button variant="outline-success" onClick={onGo}>
49+
Go
50+
</Button>
3951
</Form>
4052
</Navbar.Collapse>
4153
</Container>
4254
</Navbar>
4355
</header>
44-
<main>
56+
<main className="pt-5">
4557
<Container>
4658
<Outlet />
4759
</Container>

0 commit comments

Comments
 (0)