Feature/dsl graph feature flag (#249)

* 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

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

Author: 3 people

client/routes/workflow/history.vue

@@ -33,7 +33,7 @@ import WorkflowGraph from './components/workflow-graph';
 import EventDetail from './components/event-detail.vue';
 import { GRAPH_VIEW_DAG, GRAPH_VIEW_TIMELINE } from './constants';
 import { getDefaultSplitSize } from './helpers';
-import { DetailList, HighlightToggle } from '~components';
+import { DetailList, FeatureFlag, HighlightToggle } from '~components';
 
 export default {
   name: 'history',
@@ -321,6 +321,7 @@ export default {
     DynamicScroller,
     DynamicScrollerItem,
     'event-detail': EventDetail,
+    'feature-flag': FeatureFlag,
     'highlight-toggle': HighlightToggle,
     prism: Prism,
     RecycleScroller,
@@ -367,17 +368,16 @@ export default {
         </div>
       </div>
       <div class="actions">
-        <a href="#" @click.prevent="toggleShowDagGraph()"
-          >{{ this.graphView === GRAPH_VIEW_DAG ? 'hide' : 'show' }} graph</a
-        >
+        <feature-flag name="workflowGraph">
+          <a href="#" @click.prevent="toggleShowDagGraph()"
+            >{{ graphView === GRAPH_VIEW_DAG ? 'hide' : 'show' }} graph</a
+          >
+        </feature-flag>
         <a
           href="#"
           @click.prevent="toggleShowTimeline()"
           class="show-timeline-btn"
-          >{{
-            this.graphView === GRAPH_VIEW_TIMELINE ? 'hide' : 'show'
-          }}
-          timeline</a
+          >{{ graphView === GRAPH_VIEW_TIMELINE ? 'hide' : 'show' }} timeline</a
         >
         <a
           class="export"
@@ -389,7 +389,7 @@ export default {
     </header>
     <Split
       class="split-panel"
-      :class="this.graphView === GRAPH_VIEW_DAG ? 'dag-graph' : ''"
+      :class="graphView === GRAPH_VIEW_DAG ? 'dag-graph' : ''"
       :direction="splitDirection"
       @onDrag="onSplitResize"
       @onDragStart="enableSplitting"
@@ -401,17 +401,21 @@ export default {
         :min-size="splitSizeMinSet[0]"
         :size="splitSizeSet[0]"
       >
-        <WorkflowGraph
-          :events="events"
-          :isWorkflowRunning="isWorkflowRunning"
-          :selected-event-id="eventId"
-          class="tree-view"
-          v-if="this.graphView === GRAPH_VIEW_DAG && events.length"
-        />
+        <feature-flag
+          name="workflowGraph"
+          v-if="graphView === GRAPH_VIEW_DAG && events.length"
+        >
+          <WorkflowGraph
+            :events="events"
+            :isWorkflowRunning="isWorkflowRunning"
+            :selected-event-id="eventId"
+            class="tree-view"
+          />
+        </feature-flag>
         <timeline
           :events="timelineEvents"
           :selected-event-id="eventId"
-          v-if="this.graphView === GRAPH_VIEW_TIMELINE"
+          v-if="graphView === GRAPH_VIEW_TIMELINE"
         />
       </SplitArea>
       <SplitArea
@@ -719,6 +723,9 @@ section.history {
   div.split-panel {
     .timeline-split {
       overflow: hidden;
+      .feature-flag {
+        height: 100%;
+      }
     }
 
     .view-split {

server/feature-flags.json

@@ -19,6 +19,10 @@
     "key": "taskListPartition",
     "value": false
   },
+  {
+    "key": "workflowGraph",
+    "value": true
+  },
   {
     "key": "workflowTerminate",
     "value": true