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 <11838981+feedmeapples@users.noreply.github.com>
cadence-workflow · Jan 27, 2021 · 018ecc8 · 018ecc8
1 parent 0808b30
commit 018ecc8
Show file tree

Hide file tree

Showing 7 changed files with 502 additions and 224 deletions.
diff --git a/client/components/index.js b/client/components/index.js
@@ -1,5 +1,5 @@
 // Copyright (c) 2017-2021 Uber Technologies Inc.
-//
+// Portions of the Software are attributed to Copyright (c) 2020 Temporal Technologies Inc.
 //
 // Permission is hereby granted, free of charge, to any person obtaining a copy
 // of this software and associated documentation files (the "Software"), to deal
@@ -41,3 +41,4 @@ export { default as NoResults } from './no-results';
 export { default as NotificationBar } from './notification-bar';
 export { default as SettingsModal } from './settings-modal';
 export { default as TextInput } from './text-input';
+export { default as WorkflowGrid } from './workflow-grid';
diff --git a/client/components/workflow-grid.vue b/client/components/workflow-grid.vue
@@ -0,0 +1,164 @@
+<script>
+// Modifications Copyright (c) 2021 Uber Technologies Inc.
+// Copyright (c) 2020-2021 Temporal Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import { RecycleScroller } from 'vue-virtual-scroller';
+import { NoResults } from '~components';
+
+export default {
+  name: 'workflow-grid',
+  props: ['workflows', 'loading'],
+  data() {
+    return {
+      nextPageToken: undefined,
+    };
+  },
+  methods: {
+    onScroll(startIndex, endIndex) {
+      if (!this.workflows || endIndex < this.workflows.length) {
+        return;
+      }
+
+      this.$emit('onScroll', startIndex, endIndex);
+    },
+  },
+  computed: {
+    anyWorkflows() {
+      return this.workflows && this.workflows.length > 0;
+    },
+  },
+  components: {
+    RecycleScroller,
+    'no-results': NoResults,
+  },
+};
+</script>
+
+<template>
+  <section class="workflow-grid" :class="{ loading }">
+    <div class="row-header">
+      <div class="col col-id">Workflow ID</div>
+      <div class="col col-link">Run ID</div>
+      <div class="col col-name">Name</div>
+      <div class="col col-status">Status</div>
+      <div class="col col-start">Start Time</div>
+      <div class="col col-end">End Time</div>
+    </div>
+    <div class="spacer" />
+    <no-results :results="workflows" v-if="!loading" />
+    <RecycleScroller
+      key-field="runId"
+      :items="workflows"
+      :item-size="56"
+      emit-update
+      @update="onScroll"
+      ref="workflowGrid"
+      data-cy="workflow-list"
+      class="workflow-grid results"
+      v-if="anyWorkflows"
+      v-slot="{ item, index }"
+    >
+      <div class="row" :class="{ odd: index % 2 === 1 }">
+        <div class="col col-id">{{ item.workflowId }}</div>
+        <div class="col col-link">
+          <router-link
+            :to="{
+              name: 'workflow/summary',
+              params: { runId: item.runId, workflowId: item.workflowId },
+            }"
+            data-cy="workflow-link"
+            >{{ item.runId }}
+          </router-link>
+        </div>
+        <div class="col col-name">{{ item.workflowName }}</div>
+        <div class="col col-status" :class="item.status">{{ item.status }}</div>
+        <div class="col col-start">{{ item.startTime }}</div>
+        <div class="col col-end">{{ item.endTime }}</div>
+      </div>
+    </RecycleScroller>
+  </section>
+</template>
+
+<style lang="stylus">
+@require "../styles/definitions.styl"
+
+paged-grid()
+
+.workflow-grid
+  height: calc(100vh - 203px)
+
+  &.loading.has-results
+    &::after
+      content none
+
+  .row-header
+    display: flex;
+    position: relative;
+    padding: 0 1rem;
+    flex-direction: row;
+    justify-content: start;
+    align-items: stretch;
+
+    color: rgb(0, 0, 0);
+    font-weight: 500;
+    text-transform: uppercase;
+
+    box-shadow 0px 2px 2px rgba(0,0,0,0.2)
+    width: calc(100% - 10px);
+
+  .row
+    height: 56px;
+    padding: 0 1rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: stretch;
+    line-height: 1.2rem;
+    &.odd
+      background-color: uber-white-10;
+    .col
+      &.col-status
+        text-transform: capitalize;
+
+  .col
+    align-self: center;
+    flex-basis: auto;
+    padding: 0.5rem;
+
+    &.col-id
+      flex-basis: 400px;
+    &.col-link
+      flex-basis: 400px;
+    &.col-name
+      flex-basis: 300px;
+    &.col-status
+      flex-basis: 150px;
+      &.completed
+        color uber-green
+      &.failed
+        color uber-orange
+      &.running
+        color uber-blue-120
+    &.col-start
+      flex-basis: 200px;
+    &.col-end
+      flex-basis: 200px;
+</style>