Feature/workflow history toolbar (#279)

* moving workflow into containers

* fixing lint

* fixing license

* changes to the workflow component

* more container changes

* more container changes

* updating containers with workflow container

* adding PENDING_TASK_TYPE constants

* fixed lint

* adding tests for getDefaultState

* hooked up initGetters helper method to help initialize getters for unit tests.

* finished rest of tests for getters

* mutation unit tests

* fix lint

* workflow history toolbar

* adding simple unit test for getDefaultState

* fix merge conflict

* fixing lint + removing future code

Author: just-at-uber

client/containers/workflow-history/component.vue

@@ -28,7 +28,12 @@ import {
 } from 'vue-virtual-scroller';
 import debounce from 'lodash-es/debounce';
 import omit from 'lodash-es/omit';
-import { EventDetail, Timeline, WorkflowGraph } from './components';
+import {
+  EventDetail,
+  FooterToolbar,
+  Timeline,
+  WorkflowGraph,
+} from './components';
 import { GRAPH_VIEW_DAG, GRAPH_VIEW_TIMELINE } from './constants';
 import { getDefaultSplitSize } from './helpers';
 import { DetailList, FeatureFlag, HighlightToggle } from '~components';
@@ -74,6 +79,7 @@ export default {
     'graphView',
     'isWorkflowRunning',
     'loading',
+    'pendingTaskCount',
     'runId',
     'timelineEvents',
     'workflowHistoryEventHighlightList',
@@ -82,14 +88,14 @@ export default {
   ],
   created() {
     this.onResizeWindow = debounce(() => {
-      const { scrollerCompact, scrollerGrid, thead, viewSplit } = this.$refs;
+      const { scrollerCompact, scrollerGrid, viewSplit } = this.$refs;
       const scroller = this.isGrid ? scrollerGrid : scrollerCompact;
 
       if (!scroller) {
         return;
       }
 
-      const offsetHeight = this.isGrid ? thead.offsetHeight : 0;
+      const offsetHeight = this.isGrid ? 60 + 38 : 0;
       const viewSplitHeight = viewSplit.$el.offsetHeight;
       const scrollerHeight = viewSplitHeight - offsetHeight;
 
@@ -321,6 +327,7 @@ export default {
     DynamicScrollerItem,
     'event-detail': EventDetail,
     'feature-flag': FeatureFlag,
+    'footer-toolbar': FooterToolbar,
     'highlight-toggle': HighlightToggle,
     prism: Prism,
     RecycleScroller,
@@ -429,7 +436,7 @@ export default {
             v-if="format === 'grid' && showTable"
             :class="{ compact: compactDetails }"
           >
-            <div class="thead" ref="thead">
+            <div class="thead">
               <div class="th col-id">ID</div>
               <div class="th col-type">
                 Type
@@ -537,6 +544,7 @@ export default {
                 </DynamicScrollerItem>
               </template>
             </DynamicScroller>
+            <footer-toolbar :pending-task-count="pendingTaskCount" />
           </div>
           <prism
             class="json"
@@ -807,7 +815,7 @@ section.history {
 
       & + .spacer {
         width: 100%;
-        height: 58px;
+        height: 60px;
       }
     }
 

client/containers/workflow-history/components/footer-toolbar.vue

@@ -0,0 +1,73 @@
+<script>
+// Copyright (c) 2021 Uber 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 { ButtonFill } from '~components';
+
+export default {
+  name: 'footer-toolbar',
+  props: {
+    pendingTaskCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    pendingTasksButtonDisabled() {
+      const { pendingTaskCount } = this;
+
+      return pendingTaskCount === 0;
+    },
+    pendingTasksButtonLabel() {
+      const { pendingTaskCount } = this;
+
+      return `${pendingTaskCount} PENDING TASK${
+        pendingTaskCount === 1 ? '' : 'S'
+      }`;
+    },
+  },
+  components: {
+    'button-fill': ButtonFill,
+  },
+};
+</script>
+
+<template>
+  <div class="footer-toolbar">
+    <button-fill
+      :disabled="pendingTasksButtonDisabled"
+      disabled-label="No pending tasks"
+      :label="pendingTasksButtonLabel"
+      size="small"
+      tag="router-link"
+      :to="{ name: 'workflow/pending' }"
+    />
+  </div>
+</template>
+
+<style lang="stylus">
+.footer-toolbar {
+  background-color: #f8f8f9;
+  box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2);
+  padding: 6px 12px 6px 55px;
+  position: relative;
+}
+</style>

client/containers/workflow-history/components/index.js

@@ -20,5 +20,6 @@
 // THE SOFTWARE.
 
 export { default as EventDetail } from './event-detail';
+export { default as FooterToolbar } from './footer-toolbar';
 export { default as Timeline } from './timeline';
 export { default as WorkflowGraph } from './workflow-graph';

client/containers/workflow-history/connector.js

@@ -20,11 +20,17 @@
 // THE SOFTWARE.
 
 import { connect } from 'vuex-connect';
+import { WORKFLOW_EXECUTION_PENDING_TASK_COUNT } from '../workflow/getter-types';
+
+const gettersToProps = {
+  pendingTaskCount: WORKFLOW_EXECUTION_PENDING_TASK_COUNT,
+};
 
 const stateToProps = {
   graphEnabled: state => state.workflowHistory.graphEnabled,
 };
 
 export default connect({
+  gettersToProps,
   stateToProps,
 });

client/containers/workflow-history/get-default-state.js

@@ -0,0 +1,27 @@
+// Copyright (c) 2021 Uber 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.
+
+const getDefaultState = (state = {}) => ({
+  graphEnabled: true,
+  ...state,
+});
+
+export default getDefaultState;

client/containers/workflow-history/get-default-state.spec.js

@@ -0,0 +1,44 @@
+// Copyright (c) 2021 Uber 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 getDefaultState from './get-default-state';
+
+describe('workflow history getDefaultState', () => {
+  describe('when state is not passed', () => {
+    it('should return graphEnabled = true', () => {
+      const output = getDefaultState();
+
+      expect(output.graphEnabled).toEqual(true);
+    });
+  });
+
+  describe('when state is passed and has graphEnabled = false', () => {
+    const state = {
+      graphEnabled: false,
+    };
+
+    it('should return graphEnabled = false', () => {
+      const output = getDefaultState(state);
+
+      expect(output.graphEnabled).toEqual(false);
+    });
+  });
+});

client/containers/workflow-history/index.js

@@ -21,10 +21,7 @@
 
 import Component from './component';
 import Connector from './connector';
-
-const getDefaultState = () => ({
-  graphEnabled: true,
-});
+import getDefaultState from './get-default-state';
 
 const container = Connector('WorkflowHistory', Component);
 

client/store/index.js

@@ -84,7 +84,7 @@ const getStoreConfig = ({ router, state }) => {
   return storeConfig;
 };
 
-const initStore = ({ router, state } = {}) => {
+const initStore = ({ router, state }) => {
   Vue.use(Vuex);
 
   const storeConfig = getStoreConfig({ router, state });