Skip to content

Commit

Permalink
Merge pull request #98 from widmogrod/feature/january-2024-6
Browse files Browse the repository at this point in the history 
Few small UI changes
  • Loading branch information
@widmogrod
widmogrod authored Jan 10, 2024
2 parents d63cd30 + 86c4ef0 commit ac55b21
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 28 deletions.
56 changes: 53 additions & 3 deletions example/my-app/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ aside {
width: 300px;
margin: 0 10px 0 0;
}

main {
float: left;
width: calc(100% - 310px);
Expand All @@ -24,9 +25,11 @@ span {
span.schedguled {
background-color: #b8975d;
}

span.error {
background-color: #de7773;
}

span.await {
background-color: #52d2d2;
}
Expand Down Expand Up @@ -102,14 +105,50 @@ table > thead .filter-rules {
float: right;
}

.filter-rules {
/* make definitions inline, but new definition term must start from new line
definition is on right side, and wraps text */
dl {
margin: 0 10px 0 0;
padding: 0;
overflow: auto;
}

dt {
float: left;
clear: left;
font-weight: normal;
text-align: right;
margin: 0;
padding: 2px 10px;
width: 30px;
}

dd {
float: left;
padding: 2px 0;
margin-bottom: 5px;
text-wrap: normal;
}

dt:hover {
background-color: #51887a;
color: #ffffff;
padding: 2px 10px;
}


.filter-group, .filter-rule {
margin-left: 40px;
}

.filter-in,
.filter-out {
font-size: 0.8em;
padding: 2px 10px;
background-color: #97a8a4;
border: none;
}

table > tbody > tr {
border-bottom: 1px solid #dddddd;
}
Expand All @@ -129,10 +168,11 @@ tfoot tr {
font-size: 1.2em;
}

button.next-page{
button.next-page {
float: right;
}
button.prev-page{

button.prev-page {
float: left;
}

Expand All @@ -142,6 +182,7 @@ table table {
font-size: 0.8em;
min-width: 0;
}

table table th, td {
padding: 5px 10px;
}
Expand Down Expand Up @@ -179,4 +220,13 @@ table table th, td {
.sort-asc,
.sort-desc {
cursor: pointer;
}

.debug-window {
background-color: #ffffff;
border: 1px solid #cccccc;
overflow: auto;
padding: 10px;
font-size: 0.8em;
color: #666666;
}
50 changes: 35 additions & 15 deletions example/my-app/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -725,6 +725,9 @@ function App() {
<tr>
<td>
<PaginatedTable<workflow.Flow>
sort={{
"ID": true,
}}
load={(state) => {
return listFlows({
...state,
Expand All @@ -746,9 +749,18 @@ function App() {
},
]}
/>

<div className={"debug-window"}>
<img src={`data:image/jpeg;base64,${image}`} alt=""/>
<pre>Func output: {output}</pre>
<pre>Workflow output: {JSON.stringify(state, null, 2)} </pre>
</div>
</td>
<td>
<PaginatedTable<workflow.State>
sort={{
"ID": true,
}}
load={(state) => {
return listStates({
...state,
Expand Down Expand Up @@ -799,9 +811,11 @@ function App() {
return (
<>
<span className="done">workflow.Done</span>
<img
src={`data:image/jpeg;base64,${done.Result["schema.Binary"]}`}
alt=""/>
<div className={"result"}>
<img
src={`data:image/jpeg;base64,${done.Result["schema.Binary"]}`}
alt=""/>
</div>
<WorkflowToString flow={done.BaseState?.Flow}/>
<ListVariables data={done.BaseState}/>
</>
Expand All @@ -827,7 +841,7 @@ function App() {
}
}
})}
className={"filter filter-in"}>only
className={"filter filter-in"}>show only
</button>
<button onClick={() => ctx.filter({
Predicate: {
Expand All @@ -849,7 +863,10 @@ function App() {
})}
className={"filter filter-out"}>exclude
</button>
{done.Result["schema.String"]}
<div className={"result"}>
{done.Result["schema.String"]}
</div>

<WorkflowToString flow={done.BaseState?.Flow}/>
<ListVariables data={done.BaseState}/>
</>
Expand All @@ -868,10 +885,12 @@ function App() {
<dd>{error.Code}</dd>
<dt>Message</dt>
<dd>{error.Reason}</dd>
<dt>Retried</dt>
<dd>{error.Retried} / {error.BaseState?.DefaultMaxRetries}</dd>
</dl>
<WorkflowToString flow={error.BaseState?.Flow}/>
<ListVariables data={error.BaseState}/>
<TryRecover error={error}/>
<TryRecover error={error} onFinish={() => ctx.refresh()}/>
</>

case "workflow.Await":
Expand Down Expand Up @@ -915,6 +934,7 @@ function App() {
submitCallbackResult(await_.CallbackID, {
"schema.String": (document.getElementById("callbackValue") as HTMLInputElement).value
}, (data) => {
ctx.refresh()
setState(data)
})
}}>
Expand All @@ -940,7 +960,9 @@ function App() {
<WorkflowToString flow={scheduled.BaseState?.Flow}/>
<ListVariables data={scheduled.BaseState}/>
<button onClick={() => {
stopSchedule(parentRunID)
stopSchedule(parentRunID).finally(() => {
ctx.refresh()
})
}}>
Stop Schedule
</button>
Expand All @@ -961,7 +983,9 @@ function App() {
<WorkflowToString flow={scheduleStopped.BaseState?.Flow}/>
<ListVariables data={scheduleStopped.BaseState}/>
<button onClick={() => {
resumeSchedule(parentRunID1)
resumeSchedule(parentRunID1).finally(() => {
ctx.refresh()
})
}}>
Resume Schedule
</button>
Expand All @@ -973,11 +997,6 @@ function App() {
</>
}}/>
</td>
<td>
<img src={`data:image/jpeg;base64,${image}`} alt=""/>
<pre>Func output: {output}</pre>
<pre>Workflow output: {JSON.stringify(state, null, 2)} </pre>
</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -1323,8 +1342,9 @@ const recover = (runID: string) => {
.then(data => data as workflow.State)
}

function TryRecover(props: { error: workflow.Error }) {
return <button onClick={() => props.error.BaseState?.RunID && recover(props.error.BaseState?.RunID)}>
function TryRecover(props: { error: workflow.Error, onFinish: (data: workflow.State) => void }) {
return <button
onClick={() => props.error.BaseState?.RunID && recover(props.error.BaseState?.RunID).then(props.onFinish)}>
Try recover
</button>
}
Expand Down
31 changes: 21 additions & 10 deletions example/my-app/src/component/PaginatedTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,11 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
filter: (x: predicate.WherePredicates) => {
setState({
...state,
where: mergeFilters(state.where, x)
where: mergeFilters(state.where, x),
// always reset the cursor when filtering
// user can be on a page that doesn't exist anymore
nextPage: undefined,
prevPage: undefined
})
}
} as PaginatedTableContext<T>
Expand Down Expand Up @@ -195,7 +199,7 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
return <table>
<thead>
<tr>
<th colSpan={5} className={"option-row"}>
<th colSpan={3} className={"option-row"}>
<button className={"refresh"} onClick={() => ctx.refresh()}>Refresh</button>

{props.actions && props.actions.map((action) => {
Expand All @@ -216,11 +220,9 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
</tr>
<tr>
<th onClick={batchSelection} className={batchSelectionState()}>
<button>select</button>
<button>✧</button>
</th>
<th onClick={changeSort("ID")} className={sortState("ID")}>ID</th>
<th onClick={changeSort("Type")} className={sortState("Type")}>Type</th>
<th onClick={changeSort("Version")} className={sortState("Version")}>Version</th>
<th>Prop</th>
<th>Data</th>
</tr>
</thead>
Expand All @@ -229,9 +231,18 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
return (
<tr key={item.ID}>
<td><input type={"checkbox"} onChange={selectRowToggle(item)} checked={isSelected(item)}/></td>
<td>{item.ID}</td>
<td>{item.Type}</td>
<td>{item.Version}</td>
<td>
<dl>
<dt onClick={changeSort("ID")} className={sortState("ID")}>ID</dt>
<dd>{item.ID}</dd>

<dt onClick={changeSort("Type")} className={sortState("Type")}>Type</dt>
<dd>{item.Type}</dd>

<dt onClick={changeSort("Version")} className={sortState("Version")}>Version</dt>
<dd>{item.Version}</dd>
</dl>
</td>
<td>{props.mapData && props.mapData(item, ctx)}</td>
</tr>
);
Expand All @@ -243,7 +254,7 @@ export function PaginatedTable<T>(props: PaginatedTableProps<T>) {
</tbody>
<tfoot>
<tr>
<td colSpan={5} className={"option-row"}>
<td colSpan={3} className={"option-row"}>
{data.Next && <button onClick={nextPage} className={"next-page"}>Next page</button>}
{data.Prev && <button onClick={prevPage} className={"prev-page"}>Prev page</button>}
</td>
Expand Down

0 comments on commit ac55b21

Please sign in to comment.