Feature/dsl graph workflow history container (Part 1) (#252)

* 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

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

Author: 3 people

babel.config.js

@@ -4,8 +4,9 @@ module.exports = {
       "module-resolver",
       {
         "alias": {
-          "~constants": "./client/constants",
           "~components": "./client/components",
+          "~constants": "./client/constants",
+          "~containers": "./client/containers",
           "~helpers": "./client/helpers",
           "~services": "./client/services",
         },

client/containers/index.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 { component as WorkflowHistory } from './workflow-history';