Feature/dsl graph workflow history container (Part 2) (#254)

* 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 container for workflow history to support graphEnabled to control graph feature

* fix lint

* updating event name for graph

* fixing tests by providing store mock

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

Author: 3 people

client/containers/index.js

@@ -25,4 +25,7 @@ export {
   getters as settingsWorkflowHistoryGetters,
   mutations as settingsWorkflowHistoryMutations,
 } from './settings-workflow-history';
-export { component as WorkflowHistory } from './workflow-history';
+export {
+  container as WorkflowHistory,
+  getDefaultState as getWorkflowHistoryDefaultState,
+} from './workflow-history';

client/containers/workflow-history/component.vue

@@ -28,9 +28,7 @@ import {
 } from 'vue-virtual-scroller';
 import debounce from 'lodash-es/debounce';
 import omit from 'lodash-es/omit';
-import Timeline from './components/timeline.vue';
-import WorkflowGraph from './components/workflow-graph';
-import EventDetail from './components/event-detail.vue';
+import { EventDetail, Timeline, WorkflowGraph } from './components';
 import { GRAPH_VIEW_DAG, GRAPH_VIEW_TIMELINE } from './constants';
 import { getDefaultSplitSize } from './helpers';
 import { DetailList, FeatureFlag, HighlightToggle } from '~components';
@@ -72,10 +70,11 @@ export default {
     'eventId',
     'events',
     'format',
+    'graphEnabled',
+    'graphView',
     'isWorkflowRunning',
     'loading',
     'runId',
-    'graphView',
     'timelineEvents',
     'workflowHistoryEventHighlightList',
     'workflowHistoryEventHighlightListEnabled',
@@ -368,7 +367,7 @@ export default {
         </div>
       </div>
       <div class="actions">
-        <feature-flag name="workflowGraph">
+        <feature-flag name="workflowGraph" v-if="graphEnabled">
           <a href="#" @click.prevent="toggleShowDagGraph()"
             >{{ graphView === GRAPH_VIEW_DAG ? 'hide' : 'show' }} graph</a
           >
@@ -403,7 +402,7 @@ export default {
       >
         <feature-flag
           name="workflowGraph"
-          v-if="graphView === GRAPH_VIEW_DAG && events.length"
+          v-if="graphEnabled && graphView === GRAPH_VIEW_DAG && events.length"
         >
           <WorkflowGraph
             :events="events"

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

@@ -0,0 +1,24 @@
+// 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 { default as EventDetail } from './event-detail';
+export { default as Timeline } from './timeline';
+export { default as WorkflowGraph } from './workflow-graph';

client/containers/workflow-history/components/workflow-graph/index.vue

@@ -68,7 +68,7 @@ export default {
   mounted() {
     this.delayedShow();
     this.eventsSnapShot = this.events;
-    this.$store.commit('resetState');
+    this.$store.commit('resetGraphState');
   },
 
   computed: {

client/containers/workflow-history/connector.js

@@ -0,0 +1,30 @@
+// 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';
+
+const stateToProps = {
+  graphEnabled: state => state.workflowHistory.graphEnabled,
+};
+
+export default connect({
+  stateToProps,
+});

client/containers/workflow-history/index.js

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

client/store/index.js

@@ -24,6 +24,7 @@ import Vuex from 'vuex';
 import VuexPersistence from 'vuex-persist';
 import {
   getSettingsWorkflowHistoryDefaultState,
+  getWorkflowHistoryDefaultState,
   settingsWorkflowHistoryGetters,
   settingsWorkflowHistoryMutations,
 } from '~containers';
@@ -59,7 +60,7 @@ const graphMutations = {
   parentRoute(state, route) {
     state.graph.parentRoute = route;
   },
-  resetState(state) {
+  resetGraphState(state) {
     Object.assign(state.graph, getGraphDefaultState());
   },
 };
@@ -78,6 +79,7 @@ const graphGetters = {
 const getDefaultState = () => ({
   graph: getGraphDefaultState(),
   settingsWorkflowHistory: getSettingsWorkflowHistoryDefaultState(),
+  workflowHistory: getWorkflowHistoryDefaultState(),
 });
 
 const state = getDefaultState();

client/test/scenario.js

@@ -21,6 +21,7 @@
 
 import Router from 'vue-router';
 import Vue from 'vue';
+import Vuex from 'vuex';
 import moment from 'moment';
 import fetchMock from 'fetch-mock';
 import qs from 'friendly-querystring';
@@ -34,6 +35,7 @@ import fixtures from './fixtures';
 export default function Scenario(test) {
   // eslint-disable-next-line no-param-reassign
   test.scenario = this;
+  this.storeConfig = {};
   this.mochaTest = test;
   this.api = fetchMock.sandbox().catch((url, req, opts) => {
     let msg = `Unexpected request: ${url}${
@@ -64,6 +66,8 @@ Scenario.prototype.render = function render(attachToBody) {
 
   const el = document.createElement('div');
 
+  const store = new Vuex.Store(this.storeConfig);
+
   if (attachToBody || this.isDebuggingJustThisTest()) {
     document.body.appendChild(el);
   }
@@ -72,6 +76,7 @@ Scenario.prototype.render = function render(attachToBody) {
     // vue just throws this away, not sure why
     el,
     router: this.router,
+    store,
     template: '<App/>',
     components: { App: main.App },
     mixins: [
@@ -227,6 +232,12 @@ Scenario.prototype.withNewsFeed = function withNewsFeed() {
   return this;
 };
 
+Scenario.prototype.withStoreConfig = function withStoreConfig(config = {}) {
+  this.storeConfig = config;
+
+  return this;
+};
+
 Scenario.prototype.withWorkflows = function withWorkflows({
   status,
   query,

client/test/workflow.test.js

@@ -46,6 +46,13 @@ describe('Workflow', () => {
           },
         ])
         .withNewsFeed()
+        .withStoreConfig({
+          state: {
+            workflowHistory: {
+              graphEnabled: true,
+            },
+          },
+        })
         .withWorkflow(
           extendedOptions.workflowId,
           extendedOptions.runId,