Skip to content

Workflow table #159

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stevekinney merged 16 commits into from
Dec 9, 2021
Merged

Workflow table #159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
6cb54bf
workflow changes
softwarecurator Dec 7, 2021
1cd7873
Merge branch 'main' of github.com:temporalio/ui into workflow-table
softwarecurator Dec 7, 2021
3e35d5d
removed table scroll
softwarecurator Dec 7, 2021
10d162e
Merge branch 'main' of github.com:temporalio/ui into workflow-table
softwarecurator Dec 8, 2021
661dc68
make table windowed again and addthe virtual list
softwarecurator Dec 8, 2021
db041bb
hover states
softwarecurator Dec 9, 2021
5b87a75
removed table html, styling isn't there yet
softwarecurator Dec 9, 2021
edb102b
styling fixes
softwarecurator Dec 9, 2021
372219f
more styling changes
softwarecurator Dec 9, 2021
bca54e8
one big a tag
softwarecurator Dec 9, 2021
5770840
Merge branch 'main' into workflow-table
stevekinney Dec 9, 2021
0cbeccb
Merge branch 'main' into workflow-table
stevekinney Dec 9, 2021
6a91a0b
Merge branch 'main' of github.com:temporalio/ui into workflow-table
softwarecurator Dec 9, 2021
b4abb7a
lock
softwarecurator Dec 9, 2021
6742f54
Merge branch 'workflow-table' of github.com:temporalio/ui into workfl…
softwarecurator Dec 9, 2021
0460beb
revisions
softwarecurator Dec 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"cypress:open": "TEMPORAL_API_HOST=http://localhost:3000 cypress open"
},
"dependencies": {
"@sveltejs/svelte-virtual-list": "^3.0.1",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"date-fns": "^2.23.0",
"json-beautify": "^1.1.1",
Expand Down
77 changes: 22 additions & 55 deletions src/routes/namespaces/[namespace]/workflows/_workflows-summary-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,83 +2,50 @@
import type { WorkflowExecution } from '$lib/models/workflow-execution';

import { namespace } from '$lib/stores/namespace';
import { page } from '$app/stores';
import { getWorkflowExecutionUrl } from '$lib/utilities/get-workflow-execution-url';
import { pathMatches } from '$lib/utilities/path-matches';
import Time from '$lib/components/workflow-time.svelte';
import WorkflowStatus from '$lib/components/workflow-status.svelte';

export let workflow: WorkflowExecution;
export let timeFormat: string;

$: href = getWorkflowExecutionUrl($namespace, workflow);
$: isActive = pathMatches(href, $page.path);
</script>
Comment thread
softwarecurator marked this conversation as resolved.

<tr class:active={isActive}>
<td class="">
<a sveltekit:noscroll {href}>
<a sveltekit:noscroll {href}>
Comment thread
softwarecurator marked this conversation as resolved.
<article class="row flex flex-row border-b-2">
<div class="links w-3/12 text-left">
{workflow.id}
</div>
<div class="links w-3/12 text-left">
<h3>
Copy link
Copy Markdown
Contributor

@stevekinney stevekinney Dec 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a blocker, but I wonder if we really need the <h3> tags? 🤷🏻

{workflow.name}
</h3>
</a>
</td>
<td>
<a sveltekit:noscroll {href}>
<p>
{workflow.id}
<!-- / <span class="run-id">{workflow.runId}</span> -->
</p></a
>
</td>
<td>
<a sveltekit:noscroll {href}>
<div class={`flex justify-center `}>
</div>
<div class="w-3/12 text-left">
<div>
<WorkflowStatus status={workflow.status} />
</div>
</a>
</td>
<td>
<a sveltekit:noscroll {href} class="font-mono text-right">
</div>
<div class="w-2/12 text-left">
<Time time={workflow.startTime} {timeFormat} />
</a>
</td>
<td>
<a sveltekit:noscroll {href} class="font-mono text-right">
</div>
<div class="w-2/12 text-left">
<Time time={workflow.endTime} {timeFormat} />
</a>
</td>
</tr>
</div>
</article>
</a>

<style lang="postcss">
p {
@apply m-0 text-gray-500 text-sm;
.row {
@apply w-full h-full flex no-underline p-2;
}

tr {
@apply bg-gray-50;
.row:hover {
Comment thread
softwarecurator marked this conversation as resolved.
@apply bg-green-100;
}

tr:hover {
@apply bg-gray-100;
}

td {
@apply p-0;
}

a {
@apply w-full h-full block no-underline p-2;
}

.active {
@apply bg-yellow-200;
}

.active:hover {
@apply bg-yellow-200;
}
.run-id {
font-size: 0.5rem;
.row:hover .links {
@apply underline text-blue-500;
}
</style>
30 changes: 16 additions & 14 deletions src/routes/namespaces/[namespace]/workflows/_workflows-summary-table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
<table class="border-collapse w-full">
<thead>
<tr class="bg-gray-200">
<th class="w-3/12 text-left ">Workflow Name</th>
<th class="w-3/12 text-left">Workflow ID</th>
<th class="w-1/12">Status</th>
<th class="w-2/12 text-right">Started</th>
<th class="w-2/12 text-right">Ended</th>
</tr>
</thead>
<slot name="rows" />
</table>
<section
class="workflow-table border-collapse border-2 border-gray-300 overflow-hidden w-full rounded-lg"
>
<div class="bg-gray-200 flex flex-row p-2">
<div class="w-3/12 text-left">Workflow ID</div>
<div class="w-3/12 text-left">Type</div>
<div class="w-3/12 text-left">Status</div>
<div class="w-2/12 text-left">Started</div>
<div class="w-2/12 text-left">End</div>
</div>
<slot />
</section>

<!-- this style is mainly for keeping the height a certain level so the scroll
will feel more natural | may need revisions -->
<style lang="postcss">
th {
@apply bg-gray-200 text-gray-500 text-xs h-6 m-0 p-3 uppercase table-fixed;
.workflow-table {
height: calc(100vh - 25%);
Copy link
Copy Markdown
Contributor

@stevekinney stevekinney Dec 9, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This definitely has some weird implications on the layout. When we scroll down, there is a lot of extra space. We probably are going to want to get rid of this. I'm not going to block this PR over it though.

Now that we have no sidebar and we're about to remove the navigation on the other side, we can probably simplify the layout and remove this later.

}
</style>
9 changes: 4 additions & 5 deletions src/routes/namespaces/[namespace]/workflows/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
import WorkflowFilters from './_workflow-filters.svelte';
import WorkflowsEmptyState from './_workflows-empty.svelte';
import WorkflowsLoadingState from './_workflows-loading.svelte';
import VirtualList from '@sveltejs/svelte-virtual-list';

export let namespace: string;
export let initialData: ReturnType<typeof fetchAllWorkflows>;
Expand All @@ -48,11 +49,9 @@
{:then { workflows }}
{#if workflows.length}
<WorkflowsSummaryTable>
<tbody slot="rows">
{#each workflows as workflow}
<WorkflowsSummaryRow {workflow} {timeFormat} />
{/each}
</tbody>
<VirtualList items={workflows} let:item>
<WorkflowsSummaryRow workflow={item} {timeFormat} />
</VirtualList>
</WorkflowsSummaryTable>
{:else}
<WorkflowsEmptyState />
Expand Down