Skip to content

Commit 018ecc8

Browse files
just-at-uberfeedmeapples
just-at-uber
and
feedmeapples
authored
Feature/temporal workflow list all (#239)
* Refactor workflows list page (#171) * Refactor workflow list for reusability * Add workflows view showing all workflows (#173) * Fix workflows view console error for empty result (#186) * Avoid possible duplication of workflow instance in ALL view (#187) * Fix workflows all view (#208) * Fix workflows ALL view showing empty space (#239) * Fix workflows date range filter dropping out running workflows (#240) * Adjust workflows view spacing (#241) * fix lint & attribute temporal * adding back in default range * Show open worfklows first in All view (#243) * fixing lint * attributing temporal * fixing bugs * fixed bug with change status * fixed issue with overlapping scrollbars * fixing bug where fetch was calling with empty next page token * fixing alt colours in list. sync initial calls incase of race conditions. fixing lint * rename workflow-grid. Fixed integration tests. Fixed bug where range was not being set correctly from URL. * fix lint * rename onScroll * adjust ordering Co-authored-by: Ruslan <[email protected]>
1 parent 0808b30 commit 018ecc8

File tree

7 files changed

+502
-224
lines changed

7 files changed

+502
-224
lines changed

‎client/components/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Copyright (c) 2017-2021 Uber Technologies Inc.
2-
//
2+
// Portions of the Software are attributed to Copyright (c) 2020 Temporal Technologies Inc.
33
//
44
// Permission is hereby granted, free of charge, to any person obtaining a copy
55
// of this software and associated documentation files (the "Software"), to deal
@@ -41,3 +41,4 @@ export { default as NoResults } from './no-results';
4141
export { default as NotificationBar } from './notification-bar';
4242
export { default as SettingsModal } from './settings-modal';
4343
export { default as TextInput } from './text-input';
44+
export { default as WorkflowGrid } from './workflow-grid';

‎client/components/workflow-grid.vue‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<script>
2+
// Modifications Copyright (c) 2021 Uber Technologies Inc.
3+
// Copyright (c) 2020-2021 Temporal Technologies, Inc.
4+
//
5+
// Permission is hereby granted, free of charge, to any person obtaining a copy
6+
// of this software and associated documentation files (the "Software"), to deal
7+
// in the Software without restriction, including without limitation the rights
8+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
// copies of the Software, and to permit persons to whom the Software is
10+
// furnished to do so, subject to the following conditions:
11+
//
12+
// The above copyright notice and this permission notice shall be included in
13+
// all copies or substantial portions of the Software.
14+
//
15+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
// THE SOFTWARE.
22+
23+
import { RecycleScroller } from 'vue-virtual-scroller';
24+
import { NoResults } from '~components';
25+
26+
export default {
27+
name: 'workflow-grid',
28+
props: ['workflows', 'loading'],
29+
data() {
30+
return {
31+
nextPageToken: undefined,
32+
};
33+
},
34+
methods: {
35+
onScroll(startIndex, endIndex) {
36+
if (!this.workflows || endIndex < this.workflows.length) {
37+
return;
38+
}
39+
40+
this.$emit('onScroll', startIndex, endIndex);
41+
},
42+
},
43+
computed: {
44+
anyWorkflows() {
45+
return this.workflows && this.workflows.length > 0;
46+
},
47+
},
48+
components: {
49+
RecycleScroller,
50+
'no-results': NoResults,
51+
},
52+
};
53+
</script>
54+
55+
<template>
56+
<section class="workflow-grid" :class="{ loading }">
57+
<div class="row-header">
58+
<div class="col col-id">Workflow ID</div>
59+
<div class="col col-link">Run ID</div>
60+
<div class="col col-name">Name</div>
61+
<div class="col col-status">Status</div>
62+
<div class="col col-start">Start Time</div>
63+
<div class="col col-end">End Time</div>
64+
</div>
65+
<div class="spacer" />
66+
<no-results :results="workflows" v-if="!loading" />
67+
<RecycleScroller
68+
key-field="runId"
69+
:items="workflows"
70+
:item-size="56"
71+
emit-update
72+
@update="onScroll"
73+
ref="workflowGrid"
74+
data-cy="workflow-list"
75+
class="workflow-grid results"
76+
v-if="anyWorkflows"
77+
v-slot="{ item, index }"
78+
>
79+
<div class="row" :class="{ odd: index % 2 === 1 }">
80+
<div class="col col-id">{{ item.workflowId }}</div>
81+
<div class="col col-link">
82+
<router-link
83+
:to="{
84+
name: 'workflow/summary',
85+
params: { runId: item.runId, workflowId: item.workflowId },
86+
}"
87+
data-cy="workflow-link"
88+
>{{ item.runId }}
89+
</router-link>
90+
</div>
91+
<div class="col col-name">{{ item.workflowName }}</div>
92+
<div class="col col-status" :class="item.status">{{ item.status }}</div>
93+
<div class="col col-start">{{ item.startTime }}</div>
94+
<div class="col col-end">{{ item.endTime }}</div>
95+
</div>
96+
</RecycleScroller>
97+
</section>
98+
</template>
99+
100+
<style lang="stylus">
101+
@require "../styles/definitions.styl"
102+
103+
paged-grid()
104+
105+
.workflow-grid
106+
height: calc(100vh - 203px)
107+
108+
&.loading.has-results
109+
&::after
110+
content none
111+
112+
.row-header
113+
display: flex;
114+
position: relative;
115+
padding: 0 1rem;
116+
flex-direction: row;
117+
justify-content: start;
118+
align-items: stretch;
119+
120+
color: rgb(0, 0, 0);
121+
font-weight: 500;
122+
text-transform: uppercase;
123+
124+
box-shadow 0px 2px 2px rgba(0,0,0,0.2)
125+
width: calc(100% - 10px);
126+
127+
.row
128+
height: 56px;
129+
padding: 0 1rem;
130+
display: flex;
131+
flex-direction: row;
132+
justify-content: start;
133+
align-items: stretch;
134+
line-height: 1.2rem;
135+
&.odd
136+
background-color: uber-white-10;
137+
.col
138+
&.col-status
139+
text-transform: capitalize;
140+
141+
.col
142+
align-self: center;
143+
flex-basis: auto;
144+
padding: 0.5rem;
145+
146+
&.col-id
147+
flex-basis: 400px;
148+
&.col-link
149+
flex-basis: 400px;
150+
&.col-name
151+
flex-basis: 300px;
152+
&.col-status
153+
flex-basis: 150px;
154+
&.completed
155+
color uber-green
156+
&.failed
157+
color uber-orange
158+
&.running
159+
color uber-blue-120
160+
&.col-start
161+
flex-basis: 200px;
162+
&.col-end
163+
flex-basis: 200px;
164+
</style>

0 commit comments

Comments
 (0)