Skip to content

Commit e7ca753

Browse files
sterlpsterlp
committed
adjusted UI that it displays running on
1 parent 238df1e commit e7ca753

File tree

6 files changed

+119
-91
lines changed

6 files changed

+119
-91
lines changed

‎ui/src/history/history.page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import ReloadButton from "@src/shared/view/reload-button.view";
77
import TriggerItemView from "@src/shared/view/trigger-list-item.view";
88
import TaskSelect from "@src/task/view/task-select.view";
99
import { useState } from "react";
10-
import { Col, Form, Row, Stack } from "react-bootstrap";
10+
import { Accordion, Col, Form, Row, Stack } from "react-bootstrap";
1111

1212
const HistoryPage = () => {
1313
const [page, setPage] = useState(0);
@@ -63,9 +63,11 @@ const HistoryPage = () => {
6363
/>
6464
</Col>
6565
</Row>
66-
{triggers.data?.content.map((t) => (
67-
<TriggerItemView key={"history-" + t.id} trigger={t} />
68-
))}
66+
<Accordion>
67+
{triggers.data?.content.map((t) => (
68+
<TriggerItemView key={"history-" + t.id} trigger={t} />
69+
))}
70+
</Accordion>
6971
</Stack>
7072
</>
7173
);

‎ui/src/history/view/trigger-history.view.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,11 @@ const TriggerHistoryListView = ({ triggers }: { triggers?: Trigger[] }) => {
1919
<Row>
2020
<Col>
2121
<TriggerStatusView data={t} />
22-
<strong>
23-
{" at " + formatDateTime(t.createdTime)}
24-
</strong>
2522
</Col>
2623
<Col>
27-
{formatDateTime(t.start)} - {formatDateTime(t.end)}{" "}
24+
<strong>{formatDateTime(t.createdTime)}</strong>
2825
</Col>
29-
<Col>{t.executionCount}</Col>
26+
<Col>execution: {t.executionCount}</Col>
3027
<Col>{formatMs(t.runningDurationInMs)}</Col>
3128
</Row>
3229
</ListGroup.Item>

‎ui/src/server-api.d.ts‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,6 @@ export interface AddTriggerRequest<T> {
2323
priority: number;
2424
}
2525

26-
export interface HistoryOverview {
27-
instanceId: number;
28-
taskName: string;
29-
entryCount: number;
30-
start: string;
31-
end: string;
32-
createdTime: string;
33-
executionCount: number;
34-
runningDurationInMs: number;
35-
}
36-
3726
export interface PersistentTask<T> {
3827
transactional: boolean;
3928
}
@@ -53,6 +42,16 @@ export interface MultiplicativeRetryStrategy extends RetryStrategy {
5342
export interface SpringBeanTask<T> extends PersistentTask<T> {
5443
}
5544

45+
export interface TaskHistoryOverview {
46+
taskName: string;
47+
executionCount: number;
48+
firstRun: string;
49+
lastRun: string;
50+
maxDurationMs: number;
51+
minDurationMs: number;
52+
avgDurationMs: number;
53+
}
54+
5655
export interface TaskId<T> extends Serializable {
5756
name: string;
5857
}

‎ui/src/shared/date.util.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
export function formatDateTime(inputDate?: string | Date): string {
1+
export function formatShortDateTime(inputDate?: string | Date): string {
22
if (!inputDate) return "";
33
const date = inputDate instanceof Date ? inputDate : new Date(inputDate);
44

55
const now = new Date();
66
const isToday = date.toDateString() === now.toDateString();
7+
8+
const secondsPast = Math.floor(now.getTime() - date.getTime() / 1000);
9+
if (secondsPast > 0 && secondsPast < 6) return "just now";
10+
if (secondsPast > 0 && secondsPast < 30) return secondsPast + "s";
11+
712
const options = {
813
hour: "2-digit",
914
minute: "2-digit",
@@ -22,6 +27,23 @@ export function formatDateTime(inputDate?: string | Date): string {
2227
).format(date);
2328
}
2429

30+
export function formatDateTime(inputDate?: string | Date): string {
31+
if (!inputDate) return "";
32+
const date = inputDate instanceof Date ? inputDate : new Date(inputDate);
33+
return new Intl.DateTimeFormat(
34+
navigator.language || "en-US",
35+
{
36+
day: "2-digit",
37+
month: "2-digit",
38+
year: "2-digit",
39+
hour: "2-digit",
40+
minute: "2-digit",
41+
second: "2-digit",
42+
hour12: false, // Use 24-hour format
43+
}
44+
).format(date);
45+
}
46+
2547
export function formatMs(ms?: number) {
2648
if (ms === 0) return "0ms";
2749
if (!ms) return "";

‎ui/src/shared/view/trigger-list-item.view.tsx‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import LabeledText from "@src/shared/view/labled-text.view";
44
import JsonView from "@uiw/react-json-view";
55
import { Accordion, Button, Col, Container, Row } from "react-bootstrap";
66
import TriggerStatusView from "../../trigger/views/trigger-staus.view";
7-
import { formatDateTime, formatMs } from "../date.util";
7+
import { formatMs, formatShortDateTime } from "../date.util";
88
import { useServerObject } from "../http-request";
99
import HttpErrorView from "./http-error.view";
1010
import StackTraceView from "./stacktrace-view";
@@ -28,57 +28,56 @@ const TriggerItemView = ({ trigger, afterTriggerChanged }: TriggerProps) => {
2828
);
2929

3030
return (
31-
<Accordion
31+
<Accordion.Item
32+
eventKey={trigger.id + ""}
3233
onClick={() => {
3334
if (!triggerHistory.data) triggerHistory.doGet();
3435
}}
3536
>
36-
<Accordion.Item eventKey={trigger.id + ""}>
37-
<Accordion.Header>
38-
<Container>
39-
<TriggerCompactView
40-
key={trigger.id + "TriggerCompactView"}
41-
trigger={trigger}
42-
/>
43-
</Container>
44-
</Accordion.Header>
45-
<Accordion.Body>
46-
<HttpErrorView
47-
error={triggerHistory.error || editTrigger.error}
48-
/>
49-
{trigger.status === "WAITING" && afterTriggerChanged ? (
50-
<div className="d-flex gap-2 mb-2">
51-
<Button
52-
onClick={() => {
53-
editTrigger
54-
.doCall("/run-at", "POST", new Date())
55-
.then(afterTriggerChanged)
56-
.catch((e) => console.info(e));
57-
}}
58-
>
59-
Run now
60-
</Button>
61-
<Button
62-
variant="danger"
63-
onClick={() => {
64-
editTrigger
65-
.doCall("", "DELETE")
66-
.then(afterTriggerChanged)
67-
.catch((e) => console.info(e));
68-
}}
69-
>
70-
Cancel Trigger
71-
</Button>
72-
</div>
73-
) : undefined}
74-
<TriggerDetailsView
75-
key={trigger.id + "TriggerDetailsView"}
37+
<Accordion.Header>
38+
<Container>
39+
<TriggerCompactView
40+
key={trigger.id + "TriggerCompactView"}
7641
trigger={trigger}
77-
history={triggerHistory.data}
7842
/>
79-
</Accordion.Body>
80-
</Accordion.Item>
81-
</Accordion>
43+
</Container>
44+
</Accordion.Header>
45+
<Accordion.Body>
46+
<HttpErrorView
47+
error={triggerHistory.error || editTrigger.error}
48+
/>
49+
{trigger.status === "WAITING" && afterTriggerChanged ? (
50+
<div className="d-flex gap-2 mb-2">
51+
<Button
52+
onClick={() => {
53+
editTrigger
54+
.doCall("/run-at", "POST", new Date())
55+
.then(afterTriggerChanged)
56+
.catch((e) => console.info(e));
57+
}}
58+
>
59+
Run now
60+
</Button>
61+
<Button
62+
variant="danger"
63+
onClick={() => {
64+
editTrigger
65+
.doCall("", "DELETE")
66+
.then(afterTriggerChanged)
67+
.catch((e) => console.info(e));
68+
}}
69+
>
70+
Cancel Trigger
71+
</Button>
72+
</div>
73+
) : undefined}
74+
<TriggerDetailsView
75+
key={trigger.id + "TriggerDetailsView"}
76+
trigger={trigger}
77+
history={triggerHistory.data}
78+
/>
79+
</Accordion.Body>
80+
</Accordion.Item>
8281
);
8382
};
8483

@@ -95,10 +94,23 @@ const TriggerCompactView = ({ trigger }: { trigger: Trigger }) => (
9594
{" " + trigger.key.taskName}
9695
</Col>
9796
<Col>
98-
<LabeledText label="Run at" value={formatDateTime(trigger.runAt)} />
97+
<LabeledText
98+
label="Run at"
99+
value={formatShortDateTime(trigger.runAt)}
100+
/>
99101
</Col>
100-
<Col className="d-none d-lg-block">
101-
<LabeledText label="Retrys" value={trigger.executionCount} />
102+
<Col>
103+
{trigger.runningOn ? (
104+
<LabeledText
105+
label={`Running on (${trigger.executionCount})`}
106+
value={trigger.runningOn}
107+
/>
108+
) : (
109+
<LabeledText
110+
label="Executions"
111+
value={trigger.executionCount}
112+
/>
113+
)}
102114
</Col>
103115
</Row>
104116
);
@@ -113,39 +125,33 @@ const TriggerDetailsView = ({
113125
return (
114126
<>
115127
<Row>
116-
<Col>
117-
<LabeledText label="Task" value={trigger.key.taskName} />
118-
</Col>
119-
<Col>
128+
<Col xs="6">
120129
<LabeledText label="Key Id" value={trigger.key.id} />
121130
</Col>
122-
<Col>
123-
<LabeledText
124-
label="Retrys"
125-
value={trigger.executionCount}
126-
/>
131+
<Col xs="3">
132+
<LabeledText label="Task" value={trigger.key.taskName} />
127133
</Col>
128-
<Col>
134+
<Col xs="3">
129135
<LabeledText label="Priority" value={trigger.priority} />
130136
</Col>
131137
</Row>
132138
<Row>
133139
<Col md="6" xl="3">
134140
<LabeledText
135141
label="Run at"
136-
value={formatDateTime(trigger.runAt)}
142+
value={formatShortDateTime(trigger.runAt)}
137143
/>
138144
</Col>
139145
<Col md="6" xl="3">
140146
<LabeledText
141147
label="Started at"
142-
value={formatDateTime(trigger.start)}
148+
value={formatShortDateTime(trigger.start)}
143149
/>
144150
</Col>
145151
<Col md="6" xl="3">
146152
<LabeledText
147153
label="Finished at"
148-
value={formatDateTime(trigger.end)}
154+
value={formatShortDateTime(trigger.end)}
149155
/>
150156
</Col>
151157
<Col md="6" xl="3">

‎ui/src/trigger/triggers.page.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import PageView from "@src/shared/view/page.view";
66
import ReloadButton from "@src/shared/view/reload-button.view";
77
import TaskSelect from "@src/task/view/task-select.view";
88
import { useState } from "react";
9-
import { Col, Form, Row, Stack } from "react-bootstrap";
9+
import { Accordion, Col, Form, Row, Stack } from "react-bootstrap";
1010
import TriggerItemView from "../shared/view/trigger-list-item.view";
1111

1212
const TriggersPage = () => {
@@ -56,13 +56,15 @@ const TriggersPage = () => {
5656
/>
5757
</Col>
5858
</Row>
59-
{triggers.data?.content.map((t) => (
60-
<TriggerItemView
61-
key={t.id + "-" + t.key.id}
62-
trigger={t}
63-
afterTriggerChanged={doReload}
64-
/>
65-
))}
59+
<Accordion>
60+
{triggers.data?.content.map((t) => (
61+
<TriggerItemView
62+
key={t.id + "-" + t.key.id}
63+
trigger={t}
64+
afterTriggerChanged={doReload}
65+
/>
66+
))}
67+
</Accordion>
6668
</Stack>
6769
);
6870
};

0 commit comments

Comments
 (0)