Feature/dsl graph SettingsWorkflowHistory container (Part 2) (#255)

* Pr branch (#214)

* added simple route to tree graph

* added new component for workflow graph

* now displaying a svg circle, added some styling

* added a simple line generator to display grah

* moved code from js project to graph vue component, added new data in data.json

* removed old file, fixed click issues by a temporay hack'

* trying to integrate cytoscape graph@

* removed and changed some imports to make cytoscape graph work

* updated store import

* added loading of workflow to history component for testing

* removed typescript files

* added new test data

* added demo-data

* added store

* added event function map but in pure js

* added old tree component which will be updated

* changed name of store

* updated npm package of cytoscape to 3.16.0

* renamed tree vue file

* changed to receive events as props@

* history now loads workflow container instead of graph

* modiefied graph container to receive new props and set a small delay of displaying graph

* changed with and height of graph to fix problem with zoom

* now looping over events instead of workflow@

* added a new event map to get event info

* changed all eventtypes to map to servers json format

* updated store to receive both workflow id and child id

* updated graph component to send correct data to store

* added a function to set route to child

* changed the way childworkflow route is set in event map

* changed how parent is routed to

* changed variable name for parent route

* removed old function for routing

* removed home btn

* added a simpler way to change the route@

* added query to route to route to the graph format and not grid

* renamed showGraph variable to showTimeLine

* renamed variables and functions from showGraph to showTimeline

* toggling with flag instead of true false variable

* added a function setWorkflow which rezises the split window based on the variable graphView

* removed old link to tree graph

* added a refresh btn which forces a reload of the graph container

* sending isworkflow running to the history component from index

* refresh functioning, only on mount needs to bw fixed

* removed debugging msg

* Refresh btn now only shows if there is more data to reload

* only sending the prop (events) to graphView if it has been fetched and has length

* removed redundant code and changed variable names to better represent their functionalities

* revomed debugging code

* displaying graph on right side works but is hacky - needs to be fixed

* added flexbox to the container when the dag graph is displayed to layout the slider on the right

* added functionality which check route query to determine how to split the window@

* new name for class to match current class naming style

* removed commented code and console log

* changed to listen to query updates rather than store to update currently selected node

* removed node list from graph and not used function

* removed commented code

* added new function zoomtonode which is called on mount, if a eventId exist on query

* removed old console log

* removed not used method in store set rendered nodes

* removed functionality regarding rendered nodes (only relevant when we have a node list to the graph

* removed old console logs

* removed another debug console log

* added omit to router query when routing from/to child to avoid trying to display a node with same eventId which doesnt exist@

* added a check to see if eventId is definied on graph mount

* update route query when a node is clicked

* added a watch function which watches changes in event id query and then scrolls the grid to that event

* removed old on click functioanlity and added new to allow deselection of node

* removed eventlist and moved childbtn to topbar

* removed event list and all css linked to it and node list

* added and extra if statement to check if you have already clicked on bg

* removed old getters and setters in vue store

* added functionality to check if a node is clicked or not

* added matching top bar to canvas (same as grid)

* added new btn styling to match rest of the page, using the predefinted mixins@

* added proper buttons for parent and child routes@

* removed unecessary css code

* styled refresh button

* added a check to enableSplitting to not do it on graph view

* removed clickinfo from eventmap

* updated name of event info and removed click info

* removed old static workflow loading functionality and its corresponding data and props

* removed old event map functions and renamed the current one

* removed old code and renamed some variables

* removed old demo data

* changed child btn text to To Child

* changed variable names for better readability. Added overflow ellipse for workflow name text

* added new variables names to store for better readability regarding childworkflow

* added functionality to show child btn for previous execution run id

* functionality for changing the name of the parent btn, and only use run id as route

* updated continued as new event to return run ID

* added a new mutation to update route for new executions

* Change cytoscape version

* added functionality to make graph display child btn on grid click

* refractored current code for better readability

* removed onNodeClick function which is not necessary anymore

* added an extra check to make sure refresh btn is not showed unecessarily

* updated even connection functionality to not break for different chunk sizes

* removed old console log

* removed legend imports in graph component

* added legend to graph container

* added graph legend component and changed its styling a bit

* small html and css fixes

* moved legend to bottom of graph

* removed chunckWorfklow and code that is not used

* removed old graph file

* fixed pr comment on this=self, and simplified zoom

* removed unused import

* passing eventId as prop instead of listening to changes in query

* removed unnecessary async prefix for viewInit

* update to check for prop and not for route query

* changed from let to const for zoom lvl

* added map mupations to connect to store

* resolved merge conflicts

* added demo data to gitignore

* commented out demo data

* making sure cytoscape version stays on 3.16.0

* added a new file for calculating the layout using timestamps

* added a new file which keeps track of events and nodes and builds the graph

* removed unused function

* Order nodes by timestamp in graph visualization

* Enable chrono edges

* Avoid overlapping edges

* Apply lint --fix

* Disable chrono edges for large workflows

* Fix timeline elements test

* Use showGraph url parameter in tests

Co-authored-by: Aliaksei Talkachou <[email protected]>

* removing git ignore file

* updating package-lock and updating ordering in cytoscape component

* refactoring get-event-connections. fixing lint. adding missing licenses.

* minor refactorings

* minor refactoring

* updating start date in license headers

* moving files to a more logical structure.

* small refactor

* small refactor for legend

* adding license header

* fixing lint

* moving constants

* small rename refactor for graphView values.

* adjusting line in legend

* moving constants out of helper into constants file.

* moving comments for constants.

* moving more constants out

* reordering constants

* minor refactoring. removing some warnings in console.

* adjusting whitespace in legend

* fixing lint

* minor refactoring of CytoscapeLayout for better readability.

* minor refactor

* minor refactoring

* adjusting ordering

* breaking apart cytoscape layout into smaller helpers

* moving graph styles from helpers to constants.

* fixed unnecessary code

* moving out helper function

* removing route.query

* setting split direction to computed field

* adjusting name for split size constant

* fixing error in console

* removing unused packages.

* breaking apart graph helper into smaller files.

* adding license headers

* fixing lint

* removing unused prop

* moving to computed prop

* moving constant. moving to computed field

* simplifying code

* reference helper

* removing unused variables

* moving out more constants

* separating get event connections into smaller files.

* minor refactoring

* moving more constants out

* fixing lint

* updating comment

* adding feature flag

* fixing feature flag height and stopping it from hiding timeline.

* fixing lint

* tweaking vuex store to have graph namespace for application separation.

* fixing lint

* removing direct import reference to store in components.

* addressing PR comments

* removing unnecessary this from template

* fixing lint

* added container path

* moving workflow history to containers folder.

* fixing whitespace. removing helper moved to another location.

* fixing lint

* add containers shortcut

* moving settings-workflow-history into containers

* fixing lint

* add name to settings toggle change event.

* updating containers to reference new attributes of the SettingsWorkflowHistory container.

* updating package to include vuex-connect

* updating store with SettingsWorkflowHistory state getters mutations

* settings workflow history container changes.

* changes for settings workflow history component to support graphEnabled setting.

Co-authored-by: Emma Tysk <[email protected]>
Co-authored-by: Aliaksei Talkachou <[email protected]>

Author: 3 people

client/components/settings-modal/components/settings-toggle.vue

@@ -39,7 +39,9 @@ export default {
   },
   methods: {
     onChange(event) {
-      this.$emit('change', event);
+      const { name } = this;
+
+      this.$emit('change', { ...event, name });
     },
   },
   components: {

client/containers/index.js

@@ -19,5 +19,10 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-export { component as SettingsWorkflowHistory } from './settings-workflow-history';
+export {
+  container as SettingsWorkflowHistory,
+  getDefaultState as getSettingsWorkflowHistoryDefaultState,
+  getters as settingsWorkflowHistoryGetters,
+  mutations as settingsWorkflowHistoryMutations,
+} from './settings-workflow-history';
 export { component as WorkflowHistory } from './workflow-history';

client/containers/settings-workflow-history/component.vue

@@ -24,6 +24,7 @@ import { ToggleButton } from 'vue-js-toggle-button';
 import {
   ButtonFill,
   ButtonIcon,
+  FeatureFlag,
   FlexGrid,
   FlexGridItem,
   SettingsFooter,
@@ -39,6 +40,12 @@ import {
 export default {
   name: 'settings-workflow-history',
   props: {
+    graphEnabled: {
+      type: Boolean,
+    },
+    isSubmitEnabled: {
+      type: Boolean,
+    },
     workflowHistoryEventHighlightList: {
       type: Array,
     },
@@ -115,6 +122,9 @@ export default {
     onWorkflowHistoryEventHighlightListEnabledChange({ value }) {
       this.modalWorkflowHistoryEventHighlightListEnabled = value;
     },
+    onChange({ name, value }) {
+      this.$emit('onChange', { name, value });
+    },
     onSubmit() {
       this.$emit('change', {
         ...(this.isWorkflowHistoryEventHighlightListEnabledChanged && {
@@ -126,11 +136,13 @@ export default {
             .modalWorkflowHistoryEventHighlightList,
         }),
       });
+      this.$emit('onSubmit');
     },
   },
   components: {
     'button-fill': ButtonFill,
     'button-icon': ButtonIcon,
+    'feature-flag': FeatureFlag,
     'flex-grid': FlexGrid,
     'flex-grid-item': FlexGridItem,
     'settings-footer': SettingsFooter,
@@ -144,6 +156,16 @@ export default {
 <template>
   <div class="settings-workflow-history">
     <div class="content">
+      <div class="content-item">
+        <feature-flag name="workflowGraph">
+          <settings-toggle
+            label="Enable history graph"
+            name="graphEnabled"
+            :value="graphEnabled"
+            @change="onChange"
+          />
+        </feature-flag>
+      </div>
       <div class="content-item">
         <settings-toggle
           label="Enable history event param highlighting"
@@ -248,7 +270,7 @@ export default {
       </div>
     </div>
     <settings-footer
-      :submit-enabled="isSettingsChanged"
+      :submit-enabled="isSubmitEnabled || isSettingsChanged"
       @cancel="onClose"
       @submit="onSubmit"
     />
@@ -265,7 +287,8 @@ export default {
 
   .scrollable {
     overflow-y: auto;
-    height: 200px;
+    height: 165px;
+    margin-bottom: 10px;
   }
 }
 </style>

client/containers/settings-workflow-history/connector.js

@@ -0,0 +1,52 @@
+// 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 { SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED } from './getterTypes';
+import {
+  SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE,
+  SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED,
+  SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT,
+} from './mutationTypes';
+
+const gettersToProps = {
+  isSubmitEnabled: SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED,
+};
+
+const lifecycle = {
+  mounted: ({ commit }) => commit(SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED),
+};
+
+const stateToProps = {
+  graphEnabled: state => state.settingsWorkflowHistory.graphEnabled,
+};
+
+const mutationsToEvents = {
+  onChange: SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE,
+  onSubmit: SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT,
+};
+
+export default connect({
+  gettersToProps,
+  lifecycle,
+  mutationsToEvents,
+  stateToProps,
+});

client/containers/settings-workflow-history/constants.js

@@ -0,0 +1,22 @@
+// 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 SUBMIT_CHANGE_KEYS = ['graphEnabled'];

client/containers/settings-workflow-history/getterTypes.js

@@ -0,0 +1,23 @@
+// 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 SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED =
+  'SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED';

client/containers/settings-workflow-history/getters.js

@@ -0,0 +1,37 @@
+// 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 { SUBMIT_CHANGE_KEYS } from './constants';
+import { SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED } from './getterTypes';
+
+const getters = {
+  [SETTINGS_WORKFLOW_HISTORY_IS_SUBMIT_ENABLED]: ({
+    settingsWorkflowHistory,
+    workflowHistory,
+  }) =>
+    SUBMIT_CHANGE_KEYS.reduce(
+      (accumulator, key) =>
+        accumulator || settingsWorkflowHistory[key] !== workflowHistory[key],
+      false
+    ),
+};
+
+export default getters;

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

@@ -20,7 +20,14 @@
 // THE SOFTWARE.
 
 import Component from './component';
+import Connector from './connector';
+import getters from './getters';
+import mutations from './mutations';
 
-const component = Component;
+const getDefaultState = () => ({
+  graphEnabled: true,
+});
 
-export { component };
+const container = Connector('SettingsWorkflowHistory', Component);
+
+export { container, getDefaultState, getters, mutations };

client/containers/settings-workflow-history/mutationTypes.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.
+
+export const SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE =
+  'SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE';
+export const SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED =
+  'SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED';
+export const SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT =
+  'SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT';

client/containers/settings-workflow-history/mutations.js

@@ -0,0 +1,49 @@
+// 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 {
+  SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE,
+  SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED,
+  SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT,
+} from './mutationTypes';
+
+const mutations = {
+  [SETTINGS_WORKFLOW_HISTORY_ON_CHANGE_VALUE]: (state, { name, value }) => {
+    state.settingsWorkflowHistory = {
+      ...state.settingsWorkflowHistory,
+      [name]: value,
+    };
+  },
+  [SETTINGS_WORKFLOW_HISTORY_ON_MOUNTED]: state => {
+    state.settingsWorkflowHistory = {
+      ...state.settingsWorkflowHistory,
+      graphEnabled: state.workflowHistory.graphEnabled,
+    };
+  },
+  [SETTINGS_WORKFLOW_HISTORY_ON_SUBMIT]: state => {
+    state.workflowHistory = {
+      ...state.workflowHistory,
+      ...state.settingsWorkflowHistory,
+    };
+  },
+};
+
+export default mutations;