Feature/workflow container (part 2)

babel.config.js

@@ -9,6 +9,7 @@ module.exports = {
           "~containers": "./client/containers",
           "~helpers": "./client/helpers",
           "~services": "./client/services",
+          "~test": "./test/helpers",
         },
       }
     ],

client/containers/index.js

@@ -37,6 +37,12 @@ export {
   mutations as settingsWorkflowHistoryMutations,
 } from './settings-workflow-history';
 export { container as Workflow } from './workflow';
+export {
+  container as Workflow,
+  getDefaultState as getWorkflowDefaultState,
+  getters as workflowGetters,
+  mutations as workflowMutations,
+} from './workflow';
 export {
   container as WorkflowHistory,
   getDefaultState as getWorkflowHistoryDefaultState,

client/containers/workflow/component.vue

@@ -39,7 +39,6 @@ export default {
       nextPageToken: undefined,
       fetchHistoryPageRetryCount: 0,
       wfLoading: true,
-      workflow: undefined,
 
       history: {
         loading: undefined,
@@ -63,9 +62,12 @@ export default {
     'dateFormat',
     'displayWorkflowId',
     'domain',
+    'pendingTaskCount',
     'runId',
+    'taskListName',
     'timeFormat',
     'timezone',
+    'workflow',
     'workflowHistoryEventHighlightList',
     'workflowHistoryEventHighlightListEnabled',
     'workflowId',
@@ -74,6 +76,9 @@ export default {
     this.unwatch.push(
       this.$watch('baseAPIURL', this.onBaseApiUrlChange, { immediate: true })
     );
+    this.unwatch.push(
+      this.$watch('historyUrl', this.onHistoryUrlChange, { immediate: true })
+    );
   },
   beforeDestroy() {
     this.clearWatches();
@@ -134,7 +139,6 @@ export default {
       this.nextPageToken = undefined;
       this.fetchHistoryPageRetryCount = 0;
       this.wfLoading = true;
-      this.workflow = undefined;
 
       this.history.loading = undefined;
 
@@ -144,17 +148,14 @@ export default {
       this.summary.result = undefined;
       this.summary.wfStatus = undefined;
       this.summary.workflow = undefined;
+
+      this.$emit('clearWorkflow');
     },
     clearWatches() {
       while (this.unwatch.length) {
         this.unwatch.pop()();
       }
     },
-    clearHistoryUrlWatch() {
-      while (this.unwatch.length > 1) {
-        this.unwatch.pop()();
-      }
-    },
     fetchHistoryPage(pagedHistoryUrl) {
       if (
         !pagedHistoryUrl ||
@@ -240,80 +241,80 @@ export default {
           }
         });
     },
-    onBaseApiUrlChange(baseAPIURL) {
+    fetchTaskList() {
+      const { taskListName } = this;
+
+      if (!taskListName) {
+        return Promise.reject('task list name is required');
+      }
+
+      this.$http(
+        `/api/domains/${this.$route.params.domain}/task-lists/${taskListName}`
+      )
+        .then(
+          taskList => {
+            this.taskList = { name: taskListName, ...taskList };
+          },
+          error => {
+            this.taskList = { name: taskListName };
+            this.error =
+              (error.json && error.json.message) ||
+              error.status ||
+              error.message;
+          }
+        )
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    fetchWorkflowInfo() {
+      const { baseAPIURL } = this;
+
       if (this.baseApiUrlRetryCount >= RETRY_COUNT_MAX) {
         return;
       }
 
-      this.clearHistoryUrlWatch();
-      this.clearState();
       this.wfLoading = true;
 
       return this.$http(baseAPIURL)
         .then(
           wf => {
-            this.workflow = wf;
+            this.$emit('setWorkflow', wf);
             this.isWorkflowRunning = !wf.workflowExecutionInfo.closeTime;
-            this.setupHistoryUrlWatch();
             this.baseApiUrlRetryCount = 0;
+
+            return wf;
           },
           error => {
             this.$emit('onNotification', {
               message: getErrorMessage(error),
               type: NOTIFICATION_TYPE_ERROR,
             });
             this.baseApiUrlRetryCount += 1;
-            setTimeout(
-              () => this.onBaseApiUrlChange(baseAPIURL),
-              RETRY_TIMEOUT
-            );
+            setTimeout(() => this.fetchWorkflowInfo(), RETRY_TIMEOUT);
           }
         )
         .finally(() => {
           this.wfLoading = false;
         });
     },
-    onHistoryUrlChange(historyUrl) {
-      this.fetchHistoryPage(historyUrl).then(this.fetchTaskList);
+    onBaseApiUrlChange() {
+      this.clearState();
+    },
+    async onHistoryUrlChange(historyUrl) {
+      const workflowInfo = await this.fetchWorkflowInfo();
+
+      if (workflowInfo) {
+        await this.fetchHistoryPage(historyUrl);
+        this.fetchTaskList();
+      }
     },
     onNotification(event) {
       this.$emit('onNotification', event);
     },
     onWorkflowHistoryEventParamToggle(event) {
       this.$emit('onWorkflowHistoryEventParamToggle', event);
     },
-    setupHistoryUrlWatch() {
-      this.clearHistoryUrlWatch();
-      this.unwatch.push(
-        this.$watch('historyUrl', this.onHistoryUrlChange, { immediate: true })
-      );
-    },
-    fetchTaskList() {
-      if (!this.workflow || !this.workflow.executionConfiguration) {
-        return Promise.reject('task list name is required');
-      }
-
-      const taskListName = this.workflow.executionConfiguration.taskList.name;
-
-      this.$http(
-        `/api/domains/${this.$route.params.domain}/task-lists/${taskListName}`
-      )
-        .then(
-          taskList => {
-            this.taskList = { name: taskListName, ...taskList };
-          },
-          error => {
-            this.taskList = { name: taskListName };
-            this.error =
-              (error.json && error.json.message) ||
-              error.status ||
-              error.message;
-          }
-        )
-        .finally(() => {
-          this.loading = false;
-        });
-    },
   },
 };
 </script>

client/containers/workflow/connector.js

@@ -0,0 +1,47 @@
+// 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 { connect } from 'vuex-connect';
+import {
+  WORKFLOW_EXECUTION,
+  WORKFLOW_EXECUTION_PENDING_TASK_COUNT,
+  WORKFLOW_EXECUTION_TASK_LIST_NAME,
+} from './getter-types';
+import {
+  WORKFLOW_CLEAR_EXECUTION,
+  WORKFLOW_SET_EXECUTION,
+} from './mutation-types';
+
+const gettersToProps = {
+  pendingTaskCount: WORKFLOW_EXECUTION_PENDING_TASK_COUNT,
+  taskListName: WORKFLOW_EXECUTION_TASK_LIST_NAME,
+  workflow: WORKFLOW_EXECUTION,
+};
+
+const mutationsToEvents = {
+  clearWorkflow: WORKFLOW_CLEAR_EXECUTION,
+  setWorkflow: WORKFLOW_SET_EXECUTION,
+};
+
+export default connect({
+  gettersToProps,
+  mutationsToEvents,
+});

client/containers/workflow/constants.js

@@ -19,5 +19,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+export const PENDING_TASK_TYPE_ACTIVITY = 'PENDING_TASK_TYPE_ACTIVITY';
+export const PENDING_TASK_TYPE_CHILD_WORKFLOW =
+  'PENDING_TASK_TYPE_CHILD_WORKFLOW';
 export const RETRY_COUNT_MAX = 3;
 export const RETRY_TIMEOUT = 6000;

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

@@ -0,0 +1,28 @@
+// 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 = {}) => ({
+  execution: null,
+  isLoading: true,
+  ...state,
+});
+
+export default getDefaultState;

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

@@ -0,0 +1,58 @@
+// 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 getDefaultState', () => {
+  describe('when state is not passed', () => {
+    it('should return execution = null.', () => {
+      const output = getDefaultState();
+
+      expect(output.execution).toEqual(null);
+    });
+
+    it('should return isLoading = true.', () => {
+      const output = getDefaultState();
+
+      expect(output.isLoading).toEqual(true);
+    });
+  });
+
+  describe('when state is passed with execution defined', () => {
+    const state = { execution: {} };
+
+    it('should return execution.', () => {
+      const output = getDefaultState(state);
+
+      expect(output.execution).toEqual({});
+    });
+  });
+
+  describe('when state is passed with isLoading = false', () => {
+    const state = { isLoading: false };
+
+    it('should return isLoading = false.', () => {
+      const output = getDefaultState(state);
+
+      expect(output.isLoading).toEqual(false);
+    });
+  });
+});

client/containers/workflow/getter-types.js

@@ -0,0 +1,33 @@
+// 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.
+
+export const WORKFLOW_EXECUTION = 'WORKFLOW_EXECUTION';
+export const WORKFLOW_EXECUTION_IS_LOADING = 'WORKFLOW_EXECUTION_IS_LOADING';
+export const WORKFLOW_EXECUTION_PENDING_ACTIVITIES =
+  'WORKFLOW_EXECUTION_PENDING_ACTIVITIES';
+export const WORKFLOW_EXECUTION_PENDING_CHILDREN =
+  'WORKFLOW_EXECUTION_PENDING_CHILDREN';
+export const WORKFLOW_EXECUTION_PENDING_TASK_COUNT =
+  'WORKFLOW_EXECUTION_PENDING_TASK_COUNT';
+export const WORKFLOW_EXECUTION_PENDING_TASKS =
+  'WORKFLOW_EXECUTION_PENDING_TASKS';
+export const WORKFLOW_EXECUTION_TASK_LIST_NAME =
+  'WORKFLOW_EXECUTION_TASK_LIST_NAME';