mirror of
https://github.com/ansible/awx.git
synced 2026-01-18 13:11:19 -03:30
Render workflow results. Extensive refactors of workflow components in general.
This commit is contained in:
mabashian
parent
78ea643460
commit
ca478ac880
@ -11,6 +11,7 @@ module.exports = {
|
||||
'\\.(css|scss|less)$': '<rootDir>/__mocks__/styleMock.js',
|
||||
'^@api(.*)$': '<rootDir>/src/api$1',
|
||||
'^@components(.*)$': '<rootDir>/src/components$1',
|
||||
'@constants$': '<rootDir>/src/constants.js',
|
||||
'^@contexts(.*)$': '<rootDir>/src/contexts$1',
|
||||
'^@screens(.*)$': '<rootDir>/src/screens$1',
|
||||
'^@util(.*)$': '<rootDir>/src/util$1',
|
||||
|
||||
122
awx/ui_next/package-lock.json
generated
122
awx/ui_next/package-lock.json
generated
@ -7115,9 +7115,9 @@
|
||||
"integrity": "sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ=="
|
||||
},
|
||||
"d3-brush": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.3.tgz",
|
||||
"integrity": "sha512-v8bbYyCFKjyCzFk/tdWqXwDykY8YWqhXYjcYxfILIit085VZOpj4XJKOMccTsvWxgzSLMJQg5SiqHjslsipEDg==",
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.1.5.tgz",
|
||||
"integrity": "sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-drag": "1",
|
||||
@ -7141,9 +7141,9 @@
|
||||
"integrity": "sha512-ii0/r5f4sjKNTfh84Di+DpztYwqKhEyUlKoPrzUFfeSkWxjW49xU2QzO9qrPrNkpdI0XJkfzvmTu8V2Zylln6A=="
|
||||
},
|
||||
"d3-color": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.3.0.tgz",
|
||||
"integrity": "sha512-NHODMBlj59xPAwl2BDiO2Mog6V+PrGRtBfWKqKRrs9MCqlSkIEb0Z/SfY7jW29ReHTDC/j+vwXhnZcXI3+3fbg=="
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
|
||||
"integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
|
||||
},
|
||||
"d3-contour": {
|
||||
"version": "1.3.2",
|
||||
@ -7154,23 +7154,23 @@
|
||||
}
|
||||
},
|
||||
"d3-dispatch": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.5.tgz",
|
||||
"integrity": "sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g=="
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
|
||||
"integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA=="
|
||||
},
|
||||
"d3-drag": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.4.tgz",
|
||||
"integrity": "sha512-ICPurDETFAelF1CTHdIyiUM4PsyZLaM+7oIBhmyP+cuVjze5vDZ8V//LdOFjg0jGnFIZD/Sfmk0r95PSiu78rw==",
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.5.tgz",
|
||||
"integrity": "sha512-rD1ohlkKQwMZYkQlYVCrSFxsWPzI97+W+PaEIBNTMxRuxz9RF0Hi5nJWHGVJ3Om9d2fRTe1yOBINJyy/ahV95w==",
|
||||
"requires": {
|
||||
"d3-dispatch": "1",
|
||||
"d3-selection": "1"
|
||||
}
|
||||
},
|
||||
"d3-dsv": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.1.1.tgz",
|
||||
"integrity": "sha512-1EH1oRGSkeDUlDRbhsFytAXU6cAmXFzc52YUe6MRlPClmWb85MP1J5x+YJRzya4ynZWnbELdSAvATFW/MbxaXw==",
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.2.0.tgz",
|
||||
"integrity": "sha512-9yVlqvZcSOMhCYzniHE7EVUws7Fa1zgw+/EAV2BxJoG3ME19V6BQFBwI855XQDsxyOuG7NibqRMTtiF/Qup46g==",
|
||||
"requires": {
|
||||
"commander": "2",
|
||||
"iconv-lite": "0.4",
|
||||
@ -7178,9 +7178,9 @@
|
||||
}
|
||||
},
|
||||
"d3-ease": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz",
|
||||
"integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ=="
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.6.tgz",
|
||||
"integrity": "sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ=="
|
||||
},
|
||||
"d3-fetch": {
|
||||
"version": "1.1.2",
|
||||
@ -7202,45 +7202,45 @@
|
||||
}
|
||||
},
|
||||
"d3-format": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.1.tgz",
|
||||
"integrity": "sha512-TUswGe6hfguUX1CtKxyG2nymO+1lyThbkS1ifLX0Sr+dOQtAD5gkrffpHnx+yHNKUZ0Bmg5T4AjUQwugPDrm0g=="
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.2.tgz",
|
||||
"integrity": "sha512-gco1Ih54PgMsyIXgttLxEhNy/mXxq8+rLnCb5shQk+P5TsiySrwWU5gpB4zen626J4LIwBxHvDChyA8qDm57ww=="
|
||||
},
|
||||
"d3-geo": {
|
||||
"version": "1.11.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.6.tgz",
|
||||
"integrity": "sha512-z0J8InXR9e9wcgNtmVnPTj0TU8nhYT6lD/ak9may2PdKqXIeHUr8UbFLoCtrPYNsjv6YaLvSDQVl578k6nm7GA==",
|
||||
"version": "1.11.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.11.9.tgz",
|
||||
"integrity": "sha512-9edcH6J3s/Aa3KJITWqFJbyB/8q3mMlA9Fi7z6yy+FAYMnRaxmC7jBhUnsINxVWD14GmqX3DK8uk7nV6/Ekt4A==",
|
||||
"requires": {
|
||||
"d3-array": "1"
|
||||
}
|
||||
},
|
||||
"d3-hierarchy": {
|
||||
"version": "1.1.8",
|
||||
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.8.tgz",
|
||||
"integrity": "sha512-L+GHMSZNwTpiq4rt9GEsNcpLa4M96lXMR8M/nMG9p5hBE0jy6C+3hWtyZMenPQdwla249iJy7Nx0uKt3n+u9+w=="
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz",
|
||||
"integrity": "sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ=="
|
||||
},
|
||||
"d3-interpolate": {
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
|
||||
"integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.4.0.tgz",
|
||||
"integrity": "sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==",
|
||||
"requires": {
|
||||
"d3-color": "1"
|
||||
}
|
||||
},
|
||||
"d3-path": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.8.tgz",
|
||||
"integrity": "sha512-J6EfUNwcMQ+aM5YPOB8ZbgAZu6wc82f/0WFxrxwV6Ll8wBwLaHLKCqQ5Imub02JriCVVdPjgI+6P3a4EWJCxAg=="
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
|
||||
"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
|
||||
},
|
||||
"d3-polygon": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.5.tgz",
|
||||
"integrity": "sha512-RHhh1ZUJZfhgoqzWWuRhzQJvO7LavchhitSTHGu9oj6uuLFzYZVeBzaWTQ2qSO6bz2w55RMoOCf0MsLCDB6e0w=="
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.6.tgz",
|
||||
"integrity": "sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ=="
|
||||
},
|
||||
"d3-quadtree": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.6.tgz",
|
||||
"integrity": "sha512-NUgeo9G+ENQCQ1LsRr2qJg3MQ4DJvxcDNCiohdJGHt5gRhBW6orIB5m5FJ9kK3HNL8g9F4ERVoBzcEwQBfXWVA=="
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.7.tgz",
|
||||
"integrity": "sha512-RKPAeXnkC59IDGD0Wu5mANy0Q2V28L+fNe65pOCXVdVuTJS3WPKaJlFHer32Rbh9gIo9qMuJXio8ra4+YmIymA=="
|
||||
},
|
||||
"d3-random": {
|
||||
"version": "1.1.2",
|
||||
@ -7270,40 +7270,40 @@
|
||||
}
|
||||
},
|
||||
"d3-selection": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.0.tgz",
|
||||
"integrity": "sha512-EYVwBxQGEjLCKF2pJ4+yrErskDnz5v403qvAid96cNdCMr8rmCYfY5RGzWz24mdIbxmDf6/4EAH+K9xperD5jg=="
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.1.tgz",
|
||||
"integrity": "sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA=="
|
||||
},
|
||||
"d3-shape": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.5.tgz",
|
||||
"integrity": "sha512-VKazVR3phgD+MUCldapHD7P9kcrvPcexeX/PkMJmkUov4JM8IxsSg1DvbYoYich9AtdTsa5nNk2++ImPiDiSxg==",
|
||||
"version": "1.3.7",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
|
||||
"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
|
||||
"requires": {
|
||||
"d3-path": "1"
|
||||
}
|
||||
},
|
||||
"d3-time": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.11.tgz",
|
||||
"integrity": "sha512-Z3wpvhPLW4vEScGeIMUckDW7+3hWKOQfAWg/U7PlWBnQmeKQ00gCUsTtWSYulrKNA7ta8hJ+xXc6MHrMuITwEw=="
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
|
||||
"integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA=="
|
||||
},
|
||||
"d3-time-format": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.3.tgz",
|
||||
"integrity": "sha512-6k0a2rZryzGm5Ihx+aFMuO1GgelgIz+7HhB4PH4OEndD5q2zGn1mDfRdNrulspOfR6JXkb2sThhDK41CSK85QA==",
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.2.2.tgz",
|
||||
"integrity": "sha512-pweL2Ri2wqMY+wlW/wpkl8T3CUzKAha8S9nmiQlMABab8r5MJN0PD1V4YyRNVaKQfeh4Z0+VO70TLw6ESVOYzw==",
|
||||
"requires": {
|
||||
"d3-time": "1"
|
||||
}
|
||||
},
|
||||
"d3-timer": {
|
||||
"version": "1.0.9",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.9.tgz",
|
||||
"integrity": "sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg=="
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.10.tgz",
|
||||
"integrity": "sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw=="
|
||||
},
|
||||
"d3-transition": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.2.0.tgz",
|
||||
"integrity": "sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw==",
|
||||
"version": "1.3.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.3.2.tgz",
|
||||
"integrity": "sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==",
|
||||
"requires": {
|
||||
"d3-color": "1",
|
||||
"d3-dispatch": "1",
|
||||
@ -10090,11 +10090,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"graphlib": {
|
||||
"version": "2.1.7",
|
||||
"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.7.tgz",
|
||||
"integrity": "sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==",
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
|
||||
"integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
|
||||
"requires": {
|
||||
"lodash": "^4.17.5"
|
||||
"lodash": "^4.17.15"
|
||||
}
|
||||
},
|
||||
"growly": {
|
||||
|
||||
@ -6,6 +6,10 @@ class WorkflowJobs extends RelaunchMixin(Base) {
|
||||
super(http);
|
||||
this.baseUrl = '/api/v2/workflow_jobs/';
|
||||
}
|
||||
|
||||
readNodes(id, params) {
|
||||
return this.http.get(`${this.baseUrl}${id}/workflow_nodes/`, { params });
|
||||
}
|
||||
}
|
||||
|
||||
export default WorkflowJobs;
|
||||
|
||||
@ -7,7 +7,7 @@ import { Tooltip } from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import { t } from '@lingui/macro';
|
||||
import { formatDateString } from '@util/dates';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
/* eslint-disable react/jsx-pascal-case */
|
||||
const Link = styled(props => <_Link {...props} />)`
|
||||
|
||||
@ -0,0 +1,62 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const TooltipContents = styled.div`
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
const TooltipArrows = styled.div`
|
||||
width: 10px;
|
||||
`;
|
||||
|
||||
const TooltipArrowOuter = styled.div`
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid #c4c4c4;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
margin: auto;
|
||||
`;
|
||||
|
||||
const TooltipArrowInner = styled.div`
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
left: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid white;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
margin: auto;
|
||||
`;
|
||||
|
||||
const TooltipActions = styled.div`
|
||||
background-color: white;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
`;
|
||||
|
||||
function WorkflowActionTooltip({ actions, pointX, pointY }) {
|
||||
const tipHeight = 25 * actions.length + 5 * actions.length - 1 + 10;
|
||||
return (
|
||||
<foreignObject
|
||||
x={pointX}
|
||||
y={Number(pointY) - tipHeight / 2}
|
||||
width="52"
|
||||
height={tipHeight}
|
||||
>
|
||||
<TooltipContents>
|
||||
<TooltipArrows>
|
||||
<TooltipArrowOuter />
|
||||
<TooltipArrowInner />
|
||||
</TooltipArrows>
|
||||
<TooltipActions>{actions}</TooltipActions>
|
||||
</TooltipContents>
|
||||
</foreignObject>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowActionTooltip;
|
||||
@ -0,0 +1,41 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const TooltipItem = styled.div`
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
background-color: #c4c4c4;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
function WorkflowActionTooltip({
|
||||
children,
|
||||
onMouseEnter,
|
||||
onMouseLeave,
|
||||
onClick,
|
||||
}) {
|
||||
return (
|
||||
<TooltipItem
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</TooltipItem>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowActionTooltip;
|
||||
@ -1,9 +1,10 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Outer = styled.div`
|
||||
position: relative;
|
||||
height: 0;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const Inner = styled.div`
|
||||
@ -19,11 +20,9 @@ const Inner = styled.div`
|
||||
|
||||
function WorkflowHelp({ children }) {
|
||||
return (
|
||||
<Fragment>
|
||||
<Outer>
|
||||
<Inner>{children}</Inner>
|
||||
</Outer>
|
||||
</Fragment>
|
||||
<Outer>
|
||||
<Inner>{children}</Inner>
|
||||
</Outer>
|
||||
);
|
||||
}
|
||||
|
||||
45
awx/ui_next/src/components/Workflow/WorkflowLinkHelp.jsx
Normal file
45
awx/ui_next/src/components/Workflow/WorkflowLinkHelp.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const GridDL = styled.dl`
|
||||
display: grid;
|
||||
grid-template-columns: max-content;
|
||||
column-gap: 15px;
|
||||
row-gap: 0px;
|
||||
dt {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
dd {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
`;
|
||||
|
||||
function WorkflowLinkHelp({ link, i18n }) {
|
||||
let linkType;
|
||||
switch (link.edgeType) {
|
||||
case 'always':
|
||||
linkType = i18n._(t`Always`);
|
||||
break;
|
||||
case 'success':
|
||||
linkType = i18n._(t`On Success`);
|
||||
break;
|
||||
case 'failure':
|
||||
linkType = i18n._(t`On Failure`);
|
||||
break;
|
||||
default:
|
||||
linkType = '';
|
||||
}
|
||||
|
||||
return (
|
||||
<GridDL>
|
||||
<dt>
|
||||
<b>{i18n._(t`Run`)}</b>
|
||||
</dt>
|
||||
<dd>{linkType}</dd>
|
||||
</GridDL>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(WorkflowLinkHelp);
|
||||
130
awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx
Normal file
130
awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx
Normal file
@ -0,0 +1,130 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import { secondsToHHMMSS } from '@util/dates';
|
||||
|
||||
const GridDL = styled.dl`
|
||||
display: grid;
|
||||
grid-template-columns: max-content;
|
||||
column-gap: 15px;
|
||||
row-gap: 0px;
|
||||
dt {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
dd {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
`;
|
||||
|
||||
function WorkflowNodeHelp({ node, i18n }) {
|
||||
let nodeType;
|
||||
if (node.unifiedJobTemplate) {
|
||||
switch (node.unifiedJobTemplate.unified_job_type) {
|
||||
case 'job':
|
||||
nodeType = i18n._(t`Job Template`);
|
||||
break;
|
||||
case 'workflow_job':
|
||||
nodeType = i18n._(t`Workflow Job Template`);
|
||||
break;
|
||||
case 'project_update':
|
||||
nodeType = i18n._(t`Project Update`);
|
||||
break;
|
||||
case 'inventory_update':
|
||||
nodeType = i18n._(t`Inventory Update`);
|
||||
break;
|
||||
case 'workflow_approval':
|
||||
nodeType = i18n._(t`Workflow Approval`);
|
||||
break;
|
||||
default:
|
||||
nodeType = '';
|
||||
}
|
||||
}
|
||||
|
||||
let jobStatus;
|
||||
if (node.job) {
|
||||
switch (node.job.status) {
|
||||
case 'new':
|
||||
jobStatus = i18n._(t`New`);
|
||||
break;
|
||||
case 'pending':
|
||||
jobStatus = i18n._(t`Pending`);
|
||||
break;
|
||||
case 'waiting':
|
||||
jobStatus = i18n._(t`Waiting`);
|
||||
break;
|
||||
case 'running':
|
||||
jobStatus = i18n._(t`Running`);
|
||||
break;
|
||||
case 'successful':
|
||||
jobStatus = i18n._(t`Successful`);
|
||||
break;
|
||||
case 'failed':
|
||||
jobStatus = i18n._(t`Failed`);
|
||||
break;
|
||||
case 'error':
|
||||
jobStatus = i18n._(t`Error`);
|
||||
break;
|
||||
case 'canceled':
|
||||
jobStatus = i18n._(t`Canceled`);
|
||||
break;
|
||||
case 'never updated':
|
||||
jobStatus = i18n._(t`Never Updated`);
|
||||
break;
|
||||
case 'ok':
|
||||
jobStatus = i18n._(t`OK`);
|
||||
break;
|
||||
case 'missing':
|
||||
jobStatus = i18n._(t`Missing`);
|
||||
break;
|
||||
case 'none':
|
||||
jobStatus = i18n._(t`None`);
|
||||
break;
|
||||
case 'updating':
|
||||
jobStatus = i18n._(t`Updating`);
|
||||
break;
|
||||
default:
|
||||
jobStatus = '';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<GridDL>
|
||||
{node.unifiedJobTemplate && (
|
||||
<Fragment>
|
||||
<dt>
|
||||
<b>{i18n._(t`Name`)}</b>
|
||||
</dt>
|
||||
<dd>{node.unifiedJobTemplate.name}</dd>
|
||||
<dt>
|
||||
<b>{i18n._(t`Type`)}</b>
|
||||
</dt>
|
||||
<dd>{nodeType}</dd>
|
||||
</Fragment>
|
||||
)}
|
||||
{node.job && (
|
||||
<Fragment>
|
||||
<dt>
|
||||
<b>{i18n._(t`Job Status`)}</b>
|
||||
</dt>
|
||||
<dd>{jobStatus}</dd>
|
||||
{node.job.elapsed && (
|
||||
<Fragment>
|
||||
<dt>
|
||||
<b>{i18n._(t`Elapsed`)}</b>
|
||||
</dt>
|
||||
<dd>{secondsToHHMMSS(node.job.elapsed)}</dd>
|
||||
</Fragment>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</GridDL>
|
||||
{node.job && (
|
||||
<p css="margin-top: 10px">{i18n._(t`Click to view job details`)}</p>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(WorkflowNodeHelp);
|
||||
@ -0,0 +1,68 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { PauseIcon } from '@patternfly/react-icons';
|
||||
|
||||
const NodeTypeLetter = styled.foreignObject`
|
||||
font-size: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
background-color: #393f43;
|
||||
border-radius: 50%;
|
||||
`;
|
||||
|
||||
function WorkflowNodeTypeLetter({ node }) {
|
||||
let nodeTypeLetter;
|
||||
if (node.unifiedJobTemplate && node.unifiedJobTemplate.type) {
|
||||
switch (node.unifiedJobTemplate.type) {
|
||||
case 'job_template':
|
||||
nodeTypeLetter = 'JT';
|
||||
break;
|
||||
case 'project':
|
||||
nodeTypeLetter = 'P';
|
||||
break;
|
||||
case 'inventory_source':
|
||||
nodeTypeLetter = 'I';
|
||||
break;
|
||||
case 'workflow_job_template':
|
||||
nodeTypeLetter = 'W';
|
||||
break;
|
||||
case 'workflow_approval_template':
|
||||
nodeTypeLetter = <PauseIcon />;
|
||||
break;
|
||||
default:
|
||||
nodeTypeLetter = '';
|
||||
}
|
||||
} else if (
|
||||
node.unifiedJobTemplate &&
|
||||
node.unifiedJobTemplate.unified_job_type
|
||||
) {
|
||||
switch (node.unifiedJobTemplate.unified_job_type) {
|
||||
case 'job':
|
||||
nodeTypeLetter = 'JT';
|
||||
break;
|
||||
case 'project_update':
|
||||
nodeTypeLetter = 'P';
|
||||
break;
|
||||
case 'inventory_update':
|
||||
nodeTypeLetter = 'I';
|
||||
break;
|
||||
case 'workflow_job':
|
||||
nodeTypeLetter = 'W';
|
||||
break;
|
||||
case 'workflow_approval':
|
||||
nodeTypeLetter = <PauseIcon />;
|
||||
break;
|
||||
default:
|
||||
nodeTypeLetter = '';
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<NodeTypeLetter y="50" x="-10" height="20" width="20">
|
||||
{nodeTypeLetter}
|
||||
</NodeTypeLetter>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowNodeTypeLetter;
|
||||
8
awx/ui_next/src/components/Workflow/index.js
Normal file
8
awx/ui_next/src/components/Workflow/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
export { default as WorkflowHelp } from './WorkflowHelp';
|
||||
export { default as WorkflowLinkHelp } from './WorkflowLinkHelp';
|
||||
export { default as WorkflowNodeHelp } from './WorkflowNodeHelp';
|
||||
export { default as WorkflowNodeTypeLetter } from './WorkflowNodeTypeLetter';
|
||||
export { default as WorkflowActionTooltip } from './WorkflowActionTooltip';
|
||||
export {
|
||||
default as WorkflowActionTooltipItem,
|
||||
} from './WorkflowActionTooltipItem';
|
||||
@ -11,7 +11,9 @@ import RoutedTabs from '@components/RoutedTabs';
|
||||
|
||||
import JobDetail from './JobDetail';
|
||||
import JobOutput from './JobOutput';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
|
||||
import WorkflowDetail from './WorkflowDetail';
|
||||
import { WorkflowOutput } from './WorkflowOutput';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
class Job extends Component {
|
||||
constructor(props) {
|
||||
@ -124,12 +126,24 @@ class Job extends Component {
|
||||
<Route
|
||||
key="details"
|
||||
path="/jobs/:type/:id/details"
|
||||
render={() => <JobDetail type={match.params.type} job={job} />}
|
||||
render={() =>
|
||||
match.params.type === 'workflow' ? (
|
||||
<WorkflowDetail job={job} />
|
||||
) : (
|
||||
<JobDetail type={match.params.type} job={job} />
|
||||
)
|
||||
}
|
||||
/>,
|
||||
<Route
|
||||
key="output"
|
||||
path="/jobs/:type/:id/output"
|
||||
render={() => <JobOutput type={match.params.type} job={job} />}
|
||||
render={() =>
|
||||
match.params.type === 'workflow' ? (
|
||||
<WorkflowOutput job={job} />
|
||||
) : (
|
||||
<JobOutput type={match.params.type} job={job} />
|
||||
)
|
||||
}
|
||||
/>,
|
||||
<Route
|
||||
key="not-found"
|
||||
|
||||
@ -25,6 +25,16 @@ import {
|
||||
InventoriesAPI,
|
||||
AdHocCommandsAPI,
|
||||
} from '@api';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
const ActionButtonWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
& > :not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const VariablesInput = styled(_VariablesInput)`
|
||||
.pf-c-form__label {
|
||||
|
||||
@ -17,7 +17,7 @@ import LaunchButton from '@components/LaunchButton';
|
||||
import { StatusIcon } from '@components/Sparkline';
|
||||
import { toTitleCase } from '@util/strings';
|
||||
import { formatDateString } from '@util/dates';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '../../../constants';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
const PaddedIcon = styled(StatusIcon)`
|
||||
margin-right: 20px;
|
||||
|
||||
@ -4,7 +4,7 @@ import { PageSection, Card } from '@patternfly/react-core';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { UnifiedJobsAPI } from '@api';
|
||||
import ContentError from '@components/ContentError';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
const NOT_FOUND = 'not found';
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
|
||||
import Job from './Job';
|
||||
import JobTypeRedirect from './JobTypeRedirect';
|
||||
import JobList from './JobList/JobList';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '../../constants';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
|
||||
class Jobs extends Component {
|
||||
constructor(props) {
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
function WorkflowDetail() {
|
||||
return <div>Workflow Detail!</div>;
|
||||
}
|
||||
|
||||
export default WorkflowDetail;
|
||||
1
awx/ui_next/src/screens/Job/WorkflowDetail/index.js
Normal file
1
awx/ui_next/src/screens/Job/WorkflowDetail/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './WorkflowDetail';
|
||||
222
awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx
Normal file
222
awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutput.jsx
Normal file
@ -0,0 +1,222 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import { CardBody as PFCardBody } from '@patternfly/react-core';
|
||||
import { layoutGraph } from '@util/workflow';
|
||||
import ContentError from '@components/ContentError';
|
||||
import ContentLoading from '@components/ContentLoading';
|
||||
import { WorkflowJobsAPI } from '@api';
|
||||
import WorkflowOutputGraph from './WorkflowOutputGraph';
|
||||
|
||||
const CardBody = styled(PFCardBody)`
|
||||
height: calc(100vh - 240px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Toolbar = styled.div`
|
||||
height: 50px;
|
||||
background-color: grey;
|
||||
`;
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
const fetchWorkflowNodes = async (jobId, pageNo = 1, nodes = []) => {
|
||||
try {
|
||||
const { data } = await WorkflowJobsAPI.readNodes(jobId, {
|
||||
page_size: 200,
|
||||
page: pageNo,
|
||||
});
|
||||
if (data.next) {
|
||||
return await fetchWorkflowNodes(
|
||||
jobId,
|
||||
pageNo + 1,
|
||||
nodes.concat(data.results)
|
||||
);
|
||||
}
|
||||
return nodes.concat(data.results);
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
function WorkflowOutput({ job, i18n }) {
|
||||
const [contentError, setContentError] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [graphLinks, setGraphLinks] = useState([]);
|
||||
const [graphNodes, setGraphNodes] = useState([]);
|
||||
const [nodePositions, setNodePositions] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const buildGraphArrays = nodes => {
|
||||
const nonRootNodeIds = [];
|
||||
const allNodeIds = [];
|
||||
const arrayOfLinksForChart = [];
|
||||
const nodeIdToChartNodeIdMapping = {};
|
||||
const chartNodeIdToIndexMapping = {};
|
||||
const nodeRef = {};
|
||||
let nodeIdCounter = 1;
|
||||
const arrayOfNodesForChart = [
|
||||
{
|
||||
id: nodeIdCounter,
|
||||
unifiedJobTemplate: {
|
||||
name: i18n._(t`START`),
|
||||
},
|
||||
type: 'node',
|
||||
},
|
||||
];
|
||||
nodeIdCounter++;
|
||||
// Assign each node an ID - 0 is reserved for the start node. We need to
|
||||
// make sure that we have an ID on every node including new nodes so the
|
||||
// ID returned by the api won't do
|
||||
nodes.forEach(node => {
|
||||
node.workflowMakerNodeId = nodeIdCounter;
|
||||
nodeRef[nodeIdCounter] = {
|
||||
originalNodeObject: node,
|
||||
};
|
||||
|
||||
const nodeObj = {
|
||||
index: nodeIdCounter - 1,
|
||||
id: nodeIdCounter,
|
||||
type: 'node',
|
||||
};
|
||||
|
||||
if (node.summary_fields.job) {
|
||||
nodeObj.job = node.summary_fields.job;
|
||||
}
|
||||
if (node.summary_fields.unified_job_template) {
|
||||
nodeRef[nodeIdCounter].unifiedJobTemplate =
|
||||
node.summary_fields.unified_job_template;
|
||||
nodeObj.unifiedJobTemplate = node.summary_fields.unified_job_template;
|
||||
}
|
||||
|
||||
arrayOfNodesForChart.push(nodeObj);
|
||||
allNodeIds.push(node.id);
|
||||
nodeIdToChartNodeIdMapping[node.id] = node.workflowMakerNodeId;
|
||||
chartNodeIdToIndexMapping[nodeIdCounter] = nodeIdCounter - 1;
|
||||
nodeIdCounter++;
|
||||
});
|
||||
|
||||
nodes.forEach(node => {
|
||||
const sourceIndex = chartNodeIdToIndexMapping[node.workflowMakerNodeId];
|
||||
node.success_nodes.forEach(nodeId => {
|
||||
const targetIndex =
|
||||
chartNodeIdToIndexMapping[nodeIdToChartNodeIdMapping[nodeId]];
|
||||
arrayOfLinksForChart.push({
|
||||
source: arrayOfNodesForChart[sourceIndex],
|
||||
target: arrayOfNodesForChart[targetIndex],
|
||||
edgeType: 'success',
|
||||
type: 'link',
|
||||
});
|
||||
nonRootNodeIds.push(nodeId);
|
||||
});
|
||||
node.failure_nodes.forEach(nodeId => {
|
||||
const targetIndex =
|
||||
chartNodeIdToIndexMapping[nodeIdToChartNodeIdMapping[nodeId]];
|
||||
arrayOfLinksForChart.push({
|
||||
source: arrayOfNodesForChart[sourceIndex],
|
||||
target: arrayOfNodesForChart[targetIndex],
|
||||
edgeType: 'failure',
|
||||
type: 'link',
|
||||
});
|
||||
nonRootNodeIds.push(nodeId);
|
||||
});
|
||||
node.always_nodes.forEach(nodeId => {
|
||||
const targetIndex =
|
||||
chartNodeIdToIndexMapping[nodeIdToChartNodeIdMapping[nodeId]];
|
||||
arrayOfLinksForChart.push({
|
||||
source: arrayOfNodesForChart[sourceIndex],
|
||||
target: arrayOfNodesForChart[targetIndex],
|
||||
edgeType: 'always',
|
||||
type: 'link',
|
||||
});
|
||||
nonRootNodeIds.push(nodeId);
|
||||
});
|
||||
});
|
||||
|
||||
const uniqueNonRootNodeIds = Array.from(new Set(nonRootNodeIds));
|
||||
|
||||
const rootNodes = allNodeIds.filter(
|
||||
nodeId => !uniqueNonRootNodeIds.includes(nodeId)
|
||||
);
|
||||
|
||||
rootNodes.forEach(rootNodeId => {
|
||||
const targetIndex =
|
||||
chartNodeIdToIndexMapping[nodeIdToChartNodeIdMapping[rootNodeId]];
|
||||
arrayOfLinksForChart.push({
|
||||
source: arrayOfNodesForChart[0],
|
||||
target: arrayOfNodesForChart[targetIndex],
|
||||
edgeType: 'always',
|
||||
type: 'link',
|
||||
});
|
||||
});
|
||||
|
||||
setGraphNodes(arrayOfNodesForChart);
|
||||
setGraphLinks(arrayOfLinksForChart);
|
||||
};
|
||||
|
||||
async function fetchData() {
|
||||
try {
|
||||
const nodes = await fetchWorkflowNodes(job.id);
|
||||
buildGraphArrays(nodes);
|
||||
} catch (error) {
|
||||
setContentError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
}, [job.id, job.unified_job_template, i18n]);
|
||||
|
||||
// Update positions of nodes/links
|
||||
useEffect(() => {
|
||||
if (graphNodes) {
|
||||
const newNodePositions = {};
|
||||
const g = layoutGraph(graphNodes, graphLinks);
|
||||
|
||||
g.nodes().forEach(node => {
|
||||
newNodePositions[node] = g.node(node);
|
||||
});
|
||||
|
||||
setNodePositions(newNodePositions);
|
||||
}
|
||||
}, [graphLinks, graphNodes]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<CardBody>
|
||||
<ContentLoading />
|
||||
</CardBody>
|
||||
);
|
||||
}
|
||||
|
||||
if (contentError) {
|
||||
return (
|
||||
<CardBody>
|
||||
<ContentError error={contentError} />
|
||||
</CardBody>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CardBody>
|
||||
<Wrapper>
|
||||
<Toolbar>Toolbar</Toolbar>
|
||||
{nodePositions && (
|
||||
<WorkflowOutputGraph
|
||||
links={graphLinks}
|
||||
nodes={graphNodes}
|
||||
nodePositions={nodePositions}
|
||||
/>
|
||||
)}
|
||||
</Wrapper>
|
||||
</CardBody>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(WorkflowOutput);
|
||||
@ -0,0 +1,97 @@
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import * as d3 from 'd3';
|
||||
import { WorkflowHelp, WorkflowNodeHelp } from '@components/Workflow';
|
||||
import { calcZoomAndFit } from '@util/workflow';
|
||||
import {
|
||||
WorkflowOutputLink,
|
||||
WorkflowOutputNode,
|
||||
WorkflowOutputStartNode,
|
||||
} from '@screens/Job/WorkflowOutput';
|
||||
|
||||
function WorkflowOutputGraph({ links, nodes, nodePositions }) {
|
||||
const [nodeHelp, setNodeHelp] = useState();
|
||||
const svgRef = useRef(null);
|
||||
const gRef = useRef(null);
|
||||
|
||||
// This is the zoom function called by using the mousewheel/click and drag
|
||||
const zoom = () => {
|
||||
const translation = [d3.event.transform.x, d3.event.transform.y];
|
||||
d3.select(gRef.current).attr(
|
||||
'transform',
|
||||
`translate(${translation}) scale(${d3.event.transform.k})`
|
||||
);
|
||||
};
|
||||
|
||||
const zoomRef = d3
|
||||
.zoom()
|
||||
.scaleExtent([0.1, 2])
|
||||
.on('zoom', zoom);
|
||||
|
||||
// Initialize the zoom
|
||||
useEffect(() => {
|
||||
d3.select(svgRef.current).call(zoomRef);
|
||||
}, [zoomRef]);
|
||||
|
||||
// Attempt to zoom the graph to fit the available screen space
|
||||
useEffect(() => {
|
||||
const [scaleToFit, yTranslate] = calcZoomAndFit(gRef.current);
|
||||
|
||||
d3.select(svgRef.current).call(
|
||||
zoomRef.transform,
|
||||
d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit)
|
||||
);
|
||||
// We only want this to run once (when the component mounts)
|
||||
// Including zoomRef.transform in the deps array will cause this to
|
||||
// run very frequently.
|
||||
// Discussion: https://github.com/facebook/create-react-app/issues/6880
|
||||
// and https://github.com/facebook/react/issues/15865 amongst others
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{nodeHelp && (
|
||||
<WorkflowHelp>
|
||||
<WorkflowNodeHelp node={nodeHelp} />
|
||||
</WorkflowHelp>
|
||||
)}
|
||||
<svg
|
||||
id="workflow-svg"
|
||||
ref={svgRef}
|
||||
css="display: flex; height: 100%; background-color: #f6f6f6;"
|
||||
>
|
||||
<g id="workflow-g" ref={gRef}>
|
||||
{nodePositions && [
|
||||
<WorkflowOutputStartNode
|
||||
key="start"
|
||||
nodePositions={nodePositions}
|
||||
/>,
|
||||
links.map(link => (
|
||||
<WorkflowOutputLink
|
||||
key={`link-${link.source.id}-${link.target.id}`}
|
||||
link={link}
|
||||
nodePositions={nodePositions}
|
||||
/>
|
||||
)),
|
||||
nodes.map(node => {
|
||||
if (node.id > 1) {
|
||||
return (
|
||||
<WorkflowOutputNode
|
||||
key={`node-${node.id}`}
|
||||
node={node}
|
||||
nodePositions={nodePositions}
|
||||
mouseEnter={() => setNodeHelp(node)}
|
||||
mouseLeave={() => setNodeHelp(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
]}
|
||||
</g>
|
||||
</svg>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowOutputGraph;
|
||||
@ -0,0 +1,40 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { generateLine, getLinePoints } from '@util/workflow';
|
||||
|
||||
function WorkflowOutputLink({ link, nodePositions }) {
|
||||
const [pathD, setPathD] = useState();
|
||||
const [pathStroke, setPathStroke] = useState('#CCCCCC');
|
||||
|
||||
useEffect(() => {
|
||||
if (link.edgeType === 'failure') {
|
||||
setPathStroke('#d9534f');
|
||||
}
|
||||
if (link.edgeType === 'success') {
|
||||
setPathStroke('#5cb85c');
|
||||
}
|
||||
if (link.edgeType === 'always') {
|
||||
setPathStroke('#337ab7');
|
||||
}
|
||||
}, [link.edgeType]);
|
||||
|
||||
useEffect(() => {
|
||||
const linePoints = getLinePoints(link, nodePositions);
|
||||
setPathD(generateLine(linePoints));
|
||||
}, [link, nodePositions]);
|
||||
|
||||
return (
|
||||
<g
|
||||
className="WorkflowGraph-link"
|
||||
id={`link-${link.source.id}-${link.target.id}`}
|
||||
>
|
||||
<path
|
||||
className="WorkflowGraph-linkPath"
|
||||
d={pathD}
|
||||
stroke={pathStroke}
|
||||
strokeWidth="2px"
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowOutputLink;
|
||||
@ -0,0 +1,136 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import { StatusIcon } from '@components/Sparkline';
|
||||
import { WorkflowNodeTypeLetter } from '@components/Workflow';
|
||||
import { secondsToHHMMSS } from '@util/dates';
|
||||
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
|
||||
import { constants as wfConstants } from '@util/workflow';
|
||||
|
||||
const NodeG = styled.g`
|
||||
cursor: ${props => (props.job ? 'pointer' : 'default')};
|
||||
`;
|
||||
|
||||
const JobTopLine = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin-left: 10px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
`;
|
||||
|
||||
const Elapsed = styled.div`
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
background-color: #ededed;
|
||||
padding: 3px 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
const NodeContents = styled.foreignObject`
|
||||
font-size: 13px;
|
||||
padding: 0px 10px;
|
||||
`;
|
||||
|
||||
const NodeDefaultLabel = styled.p`
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
function WorkflowOutputNode({
|
||||
node,
|
||||
nodePositions,
|
||||
mouseEnter,
|
||||
mouseLeave,
|
||||
i18n,
|
||||
}) {
|
||||
let borderColor = '#93969A';
|
||||
|
||||
if (node.job) {
|
||||
if (
|
||||
node.job.status === 'failed' ||
|
||||
node.job.status === 'error' ||
|
||||
node.job.status === 'canceled'
|
||||
) {
|
||||
borderColor = '#d9534f';
|
||||
}
|
||||
if (node.job.status === 'successful' || node.job.status === 'ok') {
|
||||
borderColor = '#5cb85c';
|
||||
}
|
||||
}
|
||||
|
||||
const handleNodeClick = () => {
|
||||
if (node.job) {
|
||||
window.open(
|
||||
`/#/jobs/${JOB_TYPE_URL_SEGMENTS[node.job.type]}/${node.job.id}`,
|
||||
'_blank'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<NodeG
|
||||
id={`node-${node.id}`}
|
||||
transform={`translate(${nodePositions[node.id].x},${nodePositions[node.id]
|
||||
.y - nodePositions[1].y})`}
|
||||
job={node.job}
|
||||
onClick={handleNodeClick}
|
||||
onMouseEnter={mouseEnter}
|
||||
onMouseLeave={mouseLeave}
|
||||
>
|
||||
<rect
|
||||
width={wfConstants.nodeW}
|
||||
height={wfConstants.nodeH}
|
||||
rx="2"
|
||||
ry="2"
|
||||
stroke={borderColor}
|
||||
strokeWidth="2px"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<NodeContents height="60" width="180">
|
||||
{node.job ? (
|
||||
<Fragment>
|
||||
<JobTopLine>
|
||||
<StatusIcon status={node.job.status} />
|
||||
<p>
|
||||
{node.unifiedJobTemplate
|
||||
? node.unifiedJobTemplate.name
|
||||
: i18n._(t`DELETED`)}
|
||||
</p>
|
||||
</JobTopLine>
|
||||
<Elapsed>
|
||||
<span>{secondsToHHMMSS(node.job.elapsed)}</span>
|
||||
</Elapsed>
|
||||
</Fragment>
|
||||
) : (
|
||||
<NodeDefaultLabel>
|
||||
{node.unifiedJobTemplate
|
||||
? node.unifiedJobTemplate.name
|
||||
: i18n._(t`DELETED`)}
|
||||
</NodeDefaultLabel>
|
||||
)}
|
||||
</NodeContents>
|
||||
<circle cy="60" r="10" fill="#393F43" />
|
||||
{node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
|
||||
</NodeG>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(WorkflowOutputNode);
|
||||
@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import { constants as wfConstants } from '@util/workflow';
|
||||
|
||||
function WorkflowOutputStartNode({ nodePositions }) {
|
||||
return (
|
||||
<g id="node-1" transform={`translate(${nodePositions[1].x},0)`}>
|
||||
<rect
|
||||
width={wfConstants.rootW}
|
||||
height={wfConstants.rootH}
|
||||
y="10"
|
||||
rx="2"
|
||||
ry="2"
|
||||
fill="#0279BC"
|
||||
/>
|
||||
{/* TODO: Translate this...? */}
|
||||
<text x="13" y="30" dy=".35em" fill="white">
|
||||
START
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkflowOutputStartNode;
|
||||
5
awx/ui_next/src/screens/Job/WorkflowOutput/index.js
Normal file
5
awx/ui_next/src/screens/Job/WorkflowOutput/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
export { default as WorkflowOutput } from './WorkflowOutput';
|
||||
export { default as WorkflowOutputGraph } from './WorkflowOutputGraph';
|
||||
export { default as WorkflowOutputLink } from './WorkflowOutputLink';
|
||||
export { default as WorkflowOutputNode } from './WorkflowOutputNode';
|
||||
export { default as WorkflowOutputStartNode } from './WorkflowOutputStartNode';
|
||||
@ -1,767 +0,0 @@
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import * as d3 from 'd3';
|
||||
import * as dagre from 'dagre';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import WorkflowHelp from './WorkflowHelp';
|
||||
import WorkflowHelpDetails from './WorkflowHelpDetails';
|
||||
|
||||
const SVG = styled.svg`
|
||||
display: flex;
|
||||
height: 100%;
|
||||
background-color: #f6f6f6;
|
||||
|
||||
.WorkflowChart-tooltip {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.WorkflowChart-action {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.WorkflowChart-action:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.WorkflowChart-action:not(:last-of-type) {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.WorkflowChart-action--add:hover {
|
||||
background-color: #58b957;
|
||||
}
|
||||
|
||||
.WorkflowChart-action--edit:hover,
|
||||
.WorkflowChart-action--link:hover,
|
||||
.WorkflowChart-action--details:hover {
|
||||
background-color: #0279bc;
|
||||
}
|
||||
|
||||
.WorkflowChart-action--delete:hover {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
|
||||
.WorkflowChart-tooltipArrows {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.WorkflowChart-tooltipArrows--outer {
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid #c4c4c4;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.WorkflowChart-tooltipArrows--inner {
|
||||
position: absolute;
|
||||
top: calc(50% - 10px);
|
||||
left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 10px solid white;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.WorkflowChart-tooltipActions {
|
||||
background-color: white;
|
||||
border: 1px solid #c4c4c4;
|
||||
border-radius: 2px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.WorkflowChart-tooltipContents {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.WorkflowChart-nameText {
|
||||
font-size: 13px;
|
||||
padding: 0px 10px;
|
||||
text-align: center;
|
||||
p {
|
||||
margin-top: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function Graph({ links, nodes, readOnly, i18n }) {
|
||||
const [helpText, setHelpText] = useState();
|
||||
const svgRef = useRef(null);
|
||||
const gRef = useRef(null);
|
||||
const nodeW = 180;
|
||||
const nodeH = 60;
|
||||
// This needs to be dynamic bc the text can be different lengths in different languages
|
||||
const rootW = 72;
|
||||
const rootH = 40;
|
||||
let currentScale = 1;
|
||||
|
||||
// Dagre is going to shift the root node around as nodes are added/removed
|
||||
// This function ensures that the user doesn't experience that
|
||||
const normalizeY = (nodePositions, y) => {
|
||||
return y - nodePositions[1].y;
|
||||
};
|
||||
|
||||
// This is the zoom function called by using the mousewheel/click and drag
|
||||
const zoom = () => {
|
||||
const translation = [d3.event.transform.x, d3.event.transform.y];
|
||||
d3.select(gRef.current).attr(
|
||||
'transform',
|
||||
`translate(${translation}) scale(${d3.event.transform.k})`
|
||||
);
|
||||
currentScale = d3.event.transform.k;
|
||||
};
|
||||
|
||||
const zoomRef = d3
|
||||
.zoom()
|
||||
.scaleExtent([0.1, 2])
|
||||
.on('zoom', zoom);
|
||||
|
||||
// Initialize the zoom
|
||||
useEffect(() => {
|
||||
d3.select(svgRef.current).call(zoomRef);
|
||||
}, [zoomRef]);
|
||||
|
||||
// Draw the graph - this will get triggered whenever
|
||||
// nodes or links changes
|
||||
useEffect(() => {
|
||||
const nodePositions = {};
|
||||
const line = d3
|
||||
.line()
|
||||
.x(d => {
|
||||
return d.x;
|
||||
})
|
||||
.y(d => {
|
||||
return d.y;
|
||||
});
|
||||
const getLinkOverlayPoints = d => {
|
||||
const sourceX =
|
||||
nodePositions[d.source.id].x + nodePositions[d.source.id].width + 1;
|
||||
let sourceY =
|
||||
normalizeY(nodePositions, nodePositions[d.source.id].y) +
|
||||
nodePositions[d.source.id].height / 2;
|
||||
const targetX = nodePositions[d.target.id].x - 1;
|
||||
const targetY =
|
||||
normalizeY(nodePositions, nodePositions[d.target.id].y) +
|
||||
nodePositions[d.target.id].height / 2;
|
||||
|
||||
// There's something off with the math on the root node...
|
||||
if (d.source.id === 1) {
|
||||
sourceY += 10;
|
||||
}
|
||||
const slope = (targetY - sourceY) / (targetX - sourceX);
|
||||
const yIntercept = targetY - slope * targetX;
|
||||
const orthogonalDistance = 8;
|
||||
|
||||
const pt1 = [
|
||||
targetX,
|
||||
slope * targetX +
|
||||
yIntercept +
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt2 = [
|
||||
sourceX,
|
||||
slope * sourceX +
|
||||
yIntercept +
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt3 = [
|
||||
sourceX,
|
||||
slope * sourceX +
|
||||
yIntercept -
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt4 = [
|
||||
targetX,
|
||||
slope * targetX +
|
||||
yIntercept -
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
|
||||
return [pt1, pt2, pt3, pt4].join(' ');
|
||||
};
|
||||
const lineData = d => {
|
||||
const sourceX =
|
||||
nodePositions[d.source.id].x + nodePositions[d.source.id].width + 1;
|
||||
let sourceY =
|
||||
normalizeY(nodePositions, nodePositions[d.source.id].y) +
|
||||
nodePositions[d.source.id].height / 2;
|
||||
const targetX = nodePositions[d.target.id].x - 1;
|
||||
const targetY =
|
||||
normalizeY(nodePositions, nodePositions[d.target.id].y) +
|
||||
nodePositions[d.target.id].height / 2;
|
||||
|
||||
// There's something off with the math on the root node...
|
||||
if (d.source.id === 1) {
|
||||
sourceY += 10;
|
||||
}
|
||||
|
||||
return line([
|
||||
{
|
||||
x: sourceX,
|
||||
y: sourceY,
|
||||
},
|
||||
{
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
},
|
||||
]);
|
||||
};
|
||||
const svgGroup = d3.select(gRef.current);
|
||||
|
||||
const g = new dagre.graphlib.Graph();
|
||||
|
||||
g.setGraph({ rankdir: 'LR', nodesep: 30, ranksep: 120 });
|
||||
|
||||
// This is needed for Dagre
|
||||
g.setDefaultEdgeLabel(() => {
|
||||
return {};
|
||||
});
|
||||
|
||||
nodes.forEach(node => {
|
||||
if (node.id === 1) {
|
||||
g.setNode(node.id, { label: '', width: rootW, height: rootH });
|
||||
} else {
|
||||
g.setNode(node.id, { label: '', width: nodeW, height: nodeH });
|
||||
}
|
||||
});
|
||||
|
||||
links.forEach(link => {
|
||||
g.setEdge(link.source.id, link.target.id);
|
||||
});
|
||||
|
||||
dagre.layout(g);
|
||||
|
||||
g.nodes().forEach(node => {
|
||||
nodePositions[node] = g.node(node);
|
||||
});
|
||||
|
||||
const linkRefs = svgGroup
|
||||
.selectAll('.WorkflowChart-link')
|
||||
.data(links, d => {
|
||||
return `${d.source.id}-${d.target.id}`;
|
||||
});
|
||||
|
||||
// Remove any stale links
|
||||
linkRefs.exit().remove();
|
||||
|
||||
// Add any new links
|
||||
const linkEnter = linkRefs
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'WorkflowChart-link')
|
||||
.attr('id', d => `link-${d.source.id}-${d.target.id}`)
|
||||
.attr('stroke-width', '2px');
|
||||
|
||||
linkEnter
|
||||
.append('polygon', 'g')
|
||||
.attr('class', 'WorkflowChart-linkOverlay')
|
||||
.attr('fill', '#E1E1E1')
|
||||
.style('opacity', '0')
|
||||
.attr('id', d => `link-${d.source.id}-${d.target.id}-overlay`)
|
||||
.attr('points', d => getLinkOverlayPoints(d))
|
||||
.on('mouseenter', d => {
|
||||
setHelpText(d);
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
});
|
||||
|
||||
// Add entering links in the parent’s old position.
|
||||
linkEnter
|
||||
.insert('path', 'g')
|
||||
.attr('class', 'WorkflowChart-linkPath')
|
||||
.attr('d', d => lineData(d))
|
||||
.attr('stroke', d => {
|
||||
if (d.edgeType) {
|
||||
if (d.edgeType === 'failure') {
|
||||
return '#d9534f';
|
||||
}
|
||||
if (d.edgeType === 'success') {
|
||||
return '#5cb85c';
|
||||
}
|
||||
if (d.edgeType === 'always') {
|
||||
return '#337ab7';
|
||||
}
|
||||
}
|
||||
return '#D7D7D7';
|
||||
});
|
||||
|
||||
linkEnter
|
||||
.append('polygon', 'g')
|
||||
.style('opacity', '0')
|
||||
.attr('points', d => getLinkOverlayPoints(d))
|
||||
.on('mouseenter', d => {
|
||||
setHelpText(d);
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
});
|
||||
|
||||
linkEnter
|
||||
.on('mouseenter', d => {
|
||||
d3.select(`#link-${d.source.id}-${d.target.id}`).raise();
|
||||
d3.select(`#link-${d.source.id}-${d.target.id}-overlay`).style(
|
||||
'opacity',
|
||||
'1'
|
||||
);
|
||||
if (!readOnly) {
|
||||
d3
|
||||
.select(`#link-${d.source.id}-${d.target.id}`)
|
||||
.append('foreignObject')
|
||||
.attr('transform', () => {
|
||||
const normalizedSourceY = normalizeY(
|
||||
nodePositions,
|
||||
nodePositions[d.source.id].y
|
||||
);
|
||||
const halfSourceHeight = nodePositions[d.source.id].height / 2;
|
||||
const normalizedTargetY = normalizeY(
|
||||
nodePositions,
|
||||
nodePositions[d.target.id].y
|
||||
);
|
||||
const halfTargetHeight = nodePositions[d.target.id].height / 2;
|
||||
|
||||
let yPos =
|
||||
(normalizedSourceY +
|
||||
halfSourceHeight +
|
||||
normalizedTargetY +
|
||||
halfTargetHeight) /
|
||||
2;
|
||||
|
||||
if (d.source.id === 1) {
|
||||
yPos += 4;
|
||||
}
|
||||
|
||||
yPos -= 34;
|
||||
|
||||
return `translate(${(nodePositions[d.source.id].x +
|
||||
nodePositions[d.source.id].width +
|
||||
nodePositions[d.target.id].x) /
|
||||
2}, ${yPos})`;
|
||||
})
|
||||
.attr('width', 52)
|
||||
.attr('height', 68)
|
||||
.attr('class', 'WorkflowChart-tooltip').html(`
|
||||
<div class="WorkflowChart-tooltipContents">
|
||||
<div class="WorkflowChart-tooltipArrows">
|
||||
<div class="WorkflowChart-tooltipArrows--outer"></div>
|
||||
<div class="WorkflowChart-tooltipArrows--inner"></div>
|
||||
</div>
|
||||
<div class="WorkflowChart-tooltipActions">
|
||||
<div id="node-add-between" class="WorkflowChart-action WorkflowChart-action--add">
|
||||
<i class="pf-icon pf-icon-add-circle-o"></i>
|
||||
</div>
|
||||
<div id="link-edit" class="WorkflowChart-action WorkflowChart-action--edit">
|
||||
<i class="pf-icon pf-icon-edit"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
d3.select('#node-add-between')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Add a new node between these two nodes`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
d3.select('#link-edit')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Edit this link`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
}
|
||||
})
|
||||
.on('mouseleave', d => {
|
||||
d3.select(`#link-${d.source.id}-${d.target.id}`).lower();
|
||||
d3.select(`#link-${d.source.id}-${d.target.id}-overlay`).style(
|
||||
'opacity',
|
||||
'0'
|
||||
);
|
||||
if (!readOnly) {
|
||||
linkEnter.select('.WorkflowChart-tooltip').remove();
|
||||
}
|
||||
});
|
||||
|
||||
const nodeRefs = svgGroup
|
||||
.selectAll('.WorkflowChart-node')
|
||||
.data(nodes, d => {
|
||||
return d.id;
|
||||
});
|
||||
|
||||
// Remove any stale nodes
|
||||
nodeRefs.exit().remove();
|
||||
|
||||
// Add new nodes
|
||||
const nodeEnter = nodeRefs
|
||||
.enter()
|
||||
.append('g')
|
||||
.attr('class', 'WorkflowChart-node')
|
||||
.attr('id', d => `node-${d.id}`)
|
||||
.attr(
|
||||
'transform',
|
||||
d =>
|
||||
`translate(${nodePositions[d.id].x},${normalizeY(
|
||||
nodePositions,
|
||||
nodePositions[d.id].y
|
||||
)})`
|
||||
);
|
||||
|
||||
nodeEnter.each((node, i, nodesArray) => {
|
||||
const nodeRef = d3.select(nodesArray[i]);
|
||||
if (node.id === 1) {
|
||||
nodeRef
|
||||
.append('rect')
|
||||
.attr('width', rootW)
|
||||
.attr('height', rootH)
|
||||
.attr('y', 10)
|
||||
.attr('rx', 2)
|
||||
.attr('ry', 2)
|
||||
.attr('fill', '#0279BC')
|
||||
.attr('class', 'WorkflowChart-rootNode');
|
||||
nodeRef
|
||||
.append('text')
|
||||
.attr('x', 13)
|
||||
.attr('y', 30)
|
||||
.attr('dy', '.35em')
|
||||
.attr('fill', 'white')
|
||||
.attr('class', 'WorkflowChart-startText')
|
||||
.text('START');
|
||||
|
||||
if (!readOnly) {
|
||||
nodeRef
|
||||
.on('mouseenter', () => {
|
||||
nodeRef
|
||||
.append('foreignObject')
|
||||
.attr('x', rootW)
|
||||
.attr('y', 11)
|
||||
.attr('width', 52)
|
||||
.attr('height', 37)
|
||||
.attr('class', 'WorkflowChart-tooltip').html(`
|
||||
<div class="WorkflowChart-tooltipContents">
|
||||
<div class="WorkflowChart-tooltipArrows">
|
||||
<div class="WorkflowChart-tooltipArrows--outer"></div>
|
||||
<div class="WorkflowChart-tooltipArrows--inner"></div>
|
||||
</div>
|
||||
<div class="WorkflowChart-tooltipActions">
|
||||
<div id="node-add" class="WorkflowChart-action WorkflowChart-action--add">
|
||||
<i class="pf-icon pf-icon-add-circle-o"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
d3.select('#node-add')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Add a new node`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
nodeRef.select('.WorkflowChart-tooltip').remove();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
nodeRef
|
||||
.append('rect')
|
||||
.attr('width', nodeW)
|
||||
.attr('height', nodeH)
|
||||
.attr('rx', 2)
|
||||
.attr('ry', 2)
|
||||
.attr('stroke', '#93969A')
|
||||
.attr('stroke-width', '2px')
|
||||
.attr('fill', '#FFFFFF')
|
||||
.attr('class', d => {
|
||||
let classString = 'WorkflowChart-rect';
|
||||
classString += !(d.unifiedJobTemplate && d.unifiedJobTemplate.name)
|
||||
? ' WorkflowChart-dashedNode'
|
||||
: '';
|
||||
return classString;
|
||||
});
|
||||
|
||||
nodeRef
|
||||
.append('foreignObject')
|
||||
.attr('width', nodeW)
|
||||
.attr('height', nodeH)
|
||||
.attr('class', 'WorkflowChart-nameText')
|
||||
.html(
|
||||
d =>
|
||||
`<p>${
|
||||
d.unifiedJobTemplate
|
||||
? d.unifiedJobTemplate.name
|
||||
: i18n._(t`DELETED`)
|
||||
}</p>`
|
||||
);
|
||||
|
||||
nodeRef
|
||||
.append('rect')
|
||||
.attr('width', nodeW)
|
||||
.attr('height', nodeH)
|
||||
.style('opacity', '0')
|
||||
.on('mouseenter', d => {
|
||||
setHelpText(d);
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
});
|
||||
|
||||
nodeRef
|
||||
.append('circle')
|
||||
.attr('cy', nodeH)
|
||||
.attr('r', 10)
|
||||
.attr('class', 'WorkflowChart-nodeTypeCircle')
|
||||
.attr('fill', '#393F43')
|
||||
.style('display', d => (d.unifiedJobTemplate ? null : 'none'));
|
||||
|
||||
nodeRef
|
||||
.append('text')
|
||||
.attr('y', nodeH)
|
||||
.attr('dy', '.35em')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('fill', '#FFFFFF')
|
||||
.attr('class', 'WorkflowChart-nodeTypeLetter')
|
||||
.text(d => {
|
||||
let nodeTypeLetter;
|
||||
if (d.unifiedJobTemplate && d.unifiedJobTemplate.type) {
|
||||
switch (d.unifiedJobTemplate.type) {
|
||||
case 'job_template':
|
||||
nodeTypeLetter = 'JT';
|
||||
break;
|
||||
case 'project':
|
||||
nodeTypeLetter = 'P';
|
||||
break;
|
||||
case 'inventory_source':
|
||||
nodeTypeLetter = 'I';
|
||||
break;
|
||||
case 'workflow_job_template':
|
||||
nodeTypeLetter = 'W';
|
||||
break;
|
||||
default:
|
||||
nodeTypeLetter = '';
|
||||
}
|
||||
} else if (
|
||||
d.unifiedJobTemplate &&
|
||||
d.unifiedJobTemplate.unified_job_type
|
||||
) {
|
||||
switch (d.unifiedJobTemplate.unified_job_type) {
|
||||
case 'job':
|
||||
nodeTypeLetter = 'JT';
|
||||
break;
|
||||
case 'project_update':
|
||||
nodeTypeLetter = 'P';
|
||||
break;
|
||||
case 'inventory_update':
|
||||
nodeTypeLetter = 'I';
|
||||
break;
|
||||
case 'workflow_job':
|
||||
nodeTypeLetter = 'W';
|
||||
break;
|
||||
default:
|
||||
nodeTypeLetter = '';
|
||||
}
|
||||
}
|
||||
return nodeTypeLetter;
|
||||
})
|
||||
.style('font-size', '10px')
|
||||
.style('display', d => {
|
||||
return d.unifiedJobTemplate &&
|
||||
d.unifiedJobTemplate.type !== 'workflow_approval_template' &&
|
||||
d.unifiedJobTemplate.unified_job_type !== 'workflow_approval'
|
||||
? null
|
||||
: 'none';
|
||||
});
|
||||
|
||||
nodeRef
|
||||
.on('mouseenter', () => {
|
||||
nodeRef.select('.WorkflowChart-rect').attr('stroke', '#007ABC');
|
||||
nodeRef.raise();
|
||||
if (readOnly) {
|
||||
nodeRef
|
||||
.append('foreignObject')
|
||||
.attr('x', nodeW)
|
||||
.attr('y', 11)
|
||||
.attr('width', 52)
|
||||
.attr('height', 37)
|
||||
.attr('class', 'WorkflowChart-tooltip').html(`
|
||||
<div class="WorkflowChart-tooltipContents">
|
||||
<div class="WorkflowChart-tooltipArrows">
|
||||
<div class="WorkflowChart-tooltipArrows--outer"></div>
|
||||
<div class="WorkflowChart-tooltipArrows--inner"></div>
|
||||
</div>
|
||||
<div class="WorkflowChart-tooltipActions">
|
||||
<div id="node-details" class="WorkflowChart-action WorkflowChart-action--details">
|
||||
<i class="pf-icon pf-icon-info"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
} else {
|
||||
nodeRef
|
||||
.append('foreignObject')
|
||||
.attr('x', nodeW)
|
||||
.attr('y', -49)
|
||||
.attr('width', 52)
|
||||
.attr('height', 157)
|
||||
.attr('class', 'WorkflowChart-tooltip').html(`
|
||||
<div class="WorkflowChart-tooltipContents">
|
||||
<div class="WorkflowChart-tooltipArrows">
|
||||
<div class="WorkflowChart-tooltipArrows--outer"></div>
|
||||
<div class="WorkflowChart-tooltipArrows--inner"></div>
|
||||
</div>
|
||||
<div class="WorkflowChart-tooltipActions">
|
||||
<div id="node-add" class="WorkflowChart-action WorkflowChart-action--add">
|
||||
<i class="pf-icon pf-icon-add-circle-o"></i>
|
||||
</div>
|
||||
<div id="node-details" class="WorkflowChart-action WorkflowChart-action--details">
|
||||
<i class="pf-icon pf-icon-info"></i>
|
||||
</div>
|
||||
<div id="node-edit" class="WorkflowChart-action WorkflowChart-action--edit">
|
||||
<i class="pf-icon pf-icon-edit"></i>
|
||||
</div>
|
||||
<div id="node-link" class="WorkflowChart-action WorkflowChart-action--link">
|
||||
<i class="pf-icon pf-icon-automation"></i>
|
||||
</div>
|
||||
<div id="node-delete" class="WorkflowChart-action WorkflowChart-action--delete">
|
||||
<i class="pf-icon pf-icon-remove2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
d3.select('#node-add')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Add a new node`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
d3.select('#node-edit')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Edit this node`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
d3.select('#node-link')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Link to an available node`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
d3.select('#node-delete')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`Remove this node`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
}
|
||||
|
||||
d3.select('#node-details')
|
||||
.on('mouseenter', () => {
|
||||
setHelpText(i18n._(t`View node details`));
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
setHelpText(null);
|
||||
})
|
||||
.on('click', () => {});
|
||||
})
|
||||
.on('mouseleave', () => {
|
||||
nodeRef.select('.WorkflowChart-rect').attr('stroke', '#93969A');
|
||||
nodeRef.select('.WorkflowChart-tooltip').remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// This will make sure that all the link elements appear before the nodes in the dom
|
||||
svgGroup.selectAll('.WorkflowChart-node').order();
|
||||
}, [links, nodes, readOnly, i18n]);
|
||||
|
||||
// Attempt to zoom the graph to fit the available screen space
|
||||
useEffect(() => {
|
||||
// TODO: try to figure out this start node width thing...
|
||||
const startNodeWidth = 60;
|
||||
const gDimensions = d3
|
||||
.select(gRef.current)
|
||||
.node()
|
||||
.getBoundingClientRect();
|
||||
|
||||
const pageHeight = window.innerHeight - 50;
|
||||
const pageWidth = window.innerWidth;
|
||||
|
||||
// For some reason the start node isn't accounted for in the width... add it
|
||||
gDimensions.width += startNodeWidth * currentScale;
|
||||
|
||||
const scaleNeededForMaxHeight =
|
||||
pageHeight / (gDimensions.height / currentScale);
|
||||
const scaleNeededForMaxWidth =
|
||||
pageWidth / (gDimensions.width / currentScale);
|
||||
const lowerScale = Math.min(
|
||||
scaleNeededForMaxHeight,
|
||||
scaleNeededForMaxWidth
|
||||
);
|
||||
|
||||
let scaleToFit;
|
||||
if (lowerScale < 0.5 || lowerScale > 2) {
|
||||
scaleToFit = lowerScale;
|
||||
} else {
|
||||
scaleToFit = Math.floor(lowerScale * 1000) / 1000;
|
||||
}
|
||||
|
||||
d3.select(svgRef.current).call(
|
||||
zoomRef.transform,
|
||||
d3.zoomIdentity
|
||||
.translate(0, pageHeight / 2 - (nodeH * scaleToFit) / 2)
|
||||
.scale(scaleToFit)
|
||||
);
|
||||
// We only want this to run once (when the component mounts)
|
||||
// but this rule will throw a warning if we don't include
|
||||
// things like height, width, currentScale in the array
|
||||
// of deps. Including them will cause this hook to fire
|
||||
// as those deps change.
|
||||
// Discussion: https://github.com/facebook/create-react-app/issues/6880
|
||||
// and https://github.com/facebook/react/issues/15865 amongst others
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{helpText && helpText !== '' && (
|
||||
<WorkflowHelp>
|
||||
{typeof helpText === 'string' && <Fragment>{helpText}</Fragment>}
|
||||
{typeof helpText === 'object' && <WorkflowHelpDetails d={helpText} />}
|
||||
</WorkflowHelp>
|
||||
)}
|
||||
<SVG id="workflow-svg" ref={svgRef}>
|
||||
<g id="workflow-g" ref={gRef} />
|
||||
</SVG>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(Graph);
|
||||
@ -0,0 +1,48 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Button } from '@patternfly/react-core';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import AlertModal from '@components/AlertModal';
|
||||
|
||||
function NodeDeleteModal({ i18n, nodeToDelete, onConfirm, onCancel }) {
|
||||
return (
|
||||
<AlertModal
|
||||
variant="danger"
|
||||
title="Remove Node"
|
||||
isOpen={nodeToDelete}
|
||||
onClose={onCancel}
|
||||
actions={[
|
||||
<Button
|
||||
key="remove"
|
||||
variant="danger"
|
||||
aria-label={i18n._(t`Confirm node removal`)}
|
||||
onClick={() => onConfirm()}
|
||||
>
|
||||
{i18n._(t`Remove`)}
|
||||
</Button>,
|
||||
<Button
|
||||
key="cancel"
|
||||
variant="secondary"
|
||||
aria-label={i18n._(t`Cancel node removal`)}
|
||||
onClick={onCancel}
|
||||
>
|
||||
{i18n._(t`Cancel`)}
|
||||
</Button>,
|
||||
]}
|
||||
>
|
||||
{nodeToDelete && nodeToDelete.unifiedJobTemplate ? (
|
||||
<Fragment>
|
||||
<p>{i18n._(t`Are you sure you want to remove the node below:`)}</p>
|
||||
<br />
|
||||
<strong css="color: var(--pf-global--danger-color--100)">
|
||||
{nodeToDelete.unifiedJobTemplate.name}
|
||||
</strong>
|
||||
</Fragment>
|
||||
) : (
|
||||
<p>{i18n._(t`Are you sure you want to remove this node?`)}</p>
|
||||
)}
|
||||
</AlertModal>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(NodeDeleteModal);
|
||||
@ -1,12 +1,14 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { Fragment, useState, useEffect } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
import { layoutGraph } from '@util/workflow';
|
||||
import ContentError from '@components/ContentError';
|
||||
import ContentLoading from '@components/ContentLoading';
|
||||
import Graph from './Graph';
|
||||
import StartScreen from './StartScreen';
|
||||
import Toolbar from './Toolbar';
|
||||
import NodeDeleteModal from './Modals/NodeDeleteModal';
|
||||
import VisualizerGraph from './VisualizerGraph';
|
||||
import VisualizerStartScreen from './VisualizerStartScreen';
|
||||
import VisualizerToolbar from './VisualizerToolbar';
|
||||
import { WorkflowJobTemplatesAPI } from '@api';
|
||||
|
||||
const CenteredContent = styled.div`
|
||||
@ -17,7 +19,7 @@ const CenteredContent = styled.div`
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const VisualizerLayout = styled.div`
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
height: 100%;
|
||||
@ -48,6 +50,77 @@ function Visualizer({ template, i18n }) {
|
||||
const [graphLinks, setGraphLinks] = useState([]);
|
||||
// We'll also need to store the original set of nodes...
|
||||
const [graphNodes, setGraphNodes] = useState([]);
|
||||
const [nodePositions, setNodePositions] = useState(null);
|
||||
const [nodeToDelete, setNodeToDelete] = useState(null);
|
||||
|
||||
const deleteNode = () => {
|
||||
const nodeId = nodeToDelete.id;
|
||||
const newGraphNodes = [...graphNodes];
|
||||
const newGraphLinks = [...graphLinks];
|
||||
|
||||
// Remove the node from the array
|
||||
for (let i = newGraphNodes.length; i--; ) {
|
||||
if (newGraphNodes[i].id === nodeId) {
|
||||
newGraphNodes.splice(i, 1);
|
||||
i = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Update the links
|
||||
const parents = [];
|
||||
const children = [];
|
||||
const linkParentMapping = {};
|
||||
|
||||
// Remove any links that reference this node
|
||||
for (let i = newGraphLinks.length; i--; ) {
|
||||
const link = newGraphLinks[i];
|
||||
|
||||
if (!linkParentMapping[link.target.id]) {
|
||||
linkParentMapping[link.target.id] = [];
|
||||
}
|
||||
|
||||
linkParentMapping[link.target.id].push(link.source.id);
|
||||
|
||||
if (link.source.id === nodeId || link.target.id === nodeId) {
|
||||
if (link.source.id === nodeId) {
|
||||
children.push({ id: link.target.id, edgeType: link.edgeType });
|
||||
} else if (link.target.id === nodeId) {
|
||||
parents.push(link.source.id);
|
||||
}
|
||||
newGraphLinks.splice(i, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Add the new links
|
||||
parents.forEach(parentId => {
|
||||
children.forEach(child => {
|
||||
if (parentId === 1) {
|
||||
// We only want to create a link from the start node to this node if it
|
||||
// doesn't have any other parents
|
||||
if (linkParentMapping[child.id].length === 1) {
|
||||
newGraphLinks.push({
|
||||
source: { id: parentId },
|
||||
target: { id: child.id },
|
||||
edgeType: 'always',
|
||||
type: 'link',
|
||||
});
|
||||
}
|
||||
} else if (!linkParentMapping[child.id].includes(parentId)) {
|
||||
newGraphLinks.push({
|
||||
source: { id: parentId },
|
||||
target: { id: child.id },
|
||||
edgeType: child.edgeType,
|
||||
type: 'link',
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// need to track that this node has been deleted if it's not new
|
||||
|
||||
setNodeToDelete(null);
|
||||
setGraphNodes(newGraphNodes);
|
||||
setGraphLinks(newGraphLinks);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const buildGraphArrays = nodes => {
|
||||
@ -170,6 +243,20 @@ function Visualizer({ template, i18n }) {
|
||||
fetchData();
|
||||
}, [template.id, i18n]);
|
||||
|
||||
// Update positions of nodes/links
|
||||
useEffect(() => {
|
||||
if (graphNodes) {
|
||||
const newNodePositions = {};
|
||||
const g = layoutGraph(graphNodes, graphLinks);
|
||||
|
||||
g.nodes().forEach(node => {
|
||||
newNodePositions[node] = g.node(node);
|
||||
});
|
||||
|
||||
setNodePositions(newNodePositions);
|
||||
}
|
||||
}, [graphLinks, graphNodes]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<CenteredContent>
|
||||
@ -187,18 +274,27 @@ function Visualizer({ template, i18n }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<VisualizerLayout>
|
||||
<Toolbar template={template} />
|
||||
{graphLinks.length > 0 ? (
|
||||
<Graph
|
||||
links={graphLinks}
|
||||
nodes={graphNodes}
|
||||
readOnly={!template.summary_fields.user_capabilities.edit}
|
||||
/>
|
||||
) : (
|
||||
<StartScreen />
|
||||
)}
|
||||
</VisualizerLayout>
|
||||
<Fragment>
|
||||
<Wrapper>
|
||||
<VisualizerToolbar template={template} />
|
||||
{graphLinks.length > 0 ? (
|
||||
<VisualizerGraph
|
||||
links={graphLinks}
|
||||
nodes={graphNodes}
|
||||
nodePositions={nodePositions}
|
||||
readOnly={!template.summary_fields.user_capabilities.edit}
|
||||
onDeleteNodeClick={setNodeToDelete}
|
||||
/>
|
||||
) : (
|
||||
<VisualizerStartScreen />
|
||||
)}
|
||||
</Wrapper>
|
||||
<NodeDeleteModal
|
||||
nodeToDelete={nodeToDelete}
|
||||
onConfirm={deleteNode}
|
||||
onCancel={() => setNodeToDelete(null)}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,118 @@
|
||||
import React, { Fragment, useEffect, useRef, useState } from 'react';
|
||||
import * as d3 from 'd3';
|
||||
import { calcZoomAndFit } from '@util/workflow';
|
||||
import {
|
||||
WorkflowHelp,
|
||||
WorkflowLinkHelp,
|
||||
WorkflowNodeHelp,
|
||||
} from '@components/Workflow';
|
||||
import {
|
||||
VisualizerLink,
|
||||
VisualizerNode,
|
||||
VisualizerStartNode,
|
||||
} from '@screens/Template/WorkflowJobTemplateVisualizer';
|
||||
|
||||
function VizualizerGraph({
|
||||
links,
|
||||
nodes,
|
||||
readOnly,
|
||||
nodePositions,
|
||||
onDeleteNodeClick,
|
||||
}) {
|
||||
const [helpText, setHelpText] = useState(null);
|
||||
const [nodeHelp, setNodeHelp] = useState();
|
||||
const [linkHelp, setLinkHelp] = useState();
|
||||
const svgRef = useRef(null);
|
||||
const gRef = useRef(null);
|
||||
|
||||
// This is the zoom function called by using the mousewheel/click and drag
|
||||
const zoom = () => {
|
||||
const translation = [d3.event.transform.x, d3.event.transform.y];
|
||||
d3.select(gRef.current).attr(
|
||||
'transform',
|
||||
`translate(${translation}) scale(${d3.event.transform.k})`
|
||||
);
|
||||
};
|
||||
|
||||
const zoomRef = d3
|
||||
.zoom()
|
||||
.scaleExtent([0.1, 2])
|
||||
.on('zoom', zoom);
|
||||
|
||||
// Initialize the zoom
|
||||
useEffect(() => {
|
||||
d3.select(svgRef.current).call(zoomRef);
|
||||
}, [zoomRef]);
|
||||
|
||||
// Attempt to zoom the graph to fit the available screen space
|
||||
useEffect(() => {
|
||||
const [scaleToFit, yTranslate] = calcZoomAndFit(gRef.current);
|
||||
|
||||
d3.select(svgRef.current).call(
|
||||
zoomRef.transform,
|
||||
d3.zoomIdentity.translate(0, yTranslate).scale(scaleToFit)
|
||||
);
|
||||
// We only want this to run once (when the component mounts)
|
||||
// Including zoomRef.transform in the deps array will cause this to
|
||||
// run very frequently.
|
||||
// Discussion: https://github.com/facebook/create-react-app/issues/6880
|
||||
// and https://github.com/facebook/react/issues/15865 amongst others
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{(helpText || nodeHelp || linkHelp) && (
|
||||
<WorkflowHelp>
|
||||
{helpText && <p>{helpText}</p>}
|
||||
{nodeHelp && <WorkflowNodeHelp node={nodeHelp} />}
|
||||
{linkHelp && <WorkflowLinkHelp link={linkHelp} />}
|
||||
</WorkflowHelp>
|
||||
)}
|
||||
<svg
|
||||
id="workflow-svg"
|
||||
ref={svgRef}
|
||||
css="display: flex; height: 100%; background-color: #f6f6f6;"
|
||||
>
|
||||
<g id="workflow-g" ref={gRef}>
|
||||
{nodePositions && [
|
||||
<VisualizerStartNode
|
||||
key="start"
|
||||
nodePositions={nodePositions}
|
||||
readOnly={readOnly}
|
||||
updateHelpText={setHelpText}
|
||||
/>,
|
||||
links.map(link => (
|
||||
<VisualizerLink
|
||||
key={`link-${link.source.id}-${link.target.id}`}
|
||||
link={link}
|
||||
nodePositions={nodePositions}
|
||||
updateHelpText={setHelpText}
|
||||
updateLinkHelp={setLinkHelp}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
)),
|
||||
nodes.map(node => {
|
||||
if (node.id > 1) {
|
||||
return (
|
||||
<VisualizerNode
|
||||
key={`node-${node.id}`}
|
||||
node={node}
|
||||
nodePositions={nodePositions}
|
||||
updateHelpText={setHelpText}
|
||||
updateNodeHelp={setNodeHelp}
|
||||
readOnly={readOnly}
|
||||
onDeleteNodeClick={onDeleteNodeClick}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}),
|
||||
]}
|
||||
</g>
|
||||
</svg>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default VizualizerGraph;
|
||||
@ -0,0 +1,136 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { PencilAltIcon, PlusIcon, TrashAltIcon } from '@patternfly/react-icons';
|
||||
import {
|
||||
generateLine,
|
||||
getLinkOverlayPoints,
|
||||
getLinePoints,
|
||||
} from '@util/workflow';
|
||||
import {
|
||||
WorkflowActionTooltip,
|
||||
WorkflowActionTooltipItem,
|
||||
} from '@components/Workflow';
|
||||
|
||||
function VisualizerLink({
|
||||
link,
|
||||
nodePositions,
|
||||
readOnly,
|
||||
updateHelpText,
|
||||
updateLinkHelp,
|
||||
i18n,
|
||||
}) {
|
||||
const [hovering, setHovering] = useState(false);
|
||||
const [pathD, setPathD] = useState();
|
||||
const [pathStroke, setPathStroke] = useState('#CCCCCC');
|
||||
const [tooltipX, setTooltipX] = useState();
|
||||
const [tooltipY, setTooltipY] = useState();
|
||||
|
||||
const addNodeAction = (
|
||||
<WorkflowActionTooltipItem
|
||||
id="link-add-node"
|
||||
key="add"
|
||||
onMouseEnter={() =>
|
||||
updateHelpText(i18n._(t`Add a new node between these two nodes`))
|
||||
}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<PlusIcon />
|
||||
</WorkflowActionTooltipItem>
|
||||
);
|
||||
|
||||
const tooltipActions =
|
||||
link.source.id === 1
|
||||
? [addNodeAction]
|
||||
: [
|
||||
addNodeAction,
|
||||
<WorkflowActionTooltipItem
|
||||
id="link-edit"
|
||||
key="edit"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Edit this link`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
<WorkflowActionTooltipItem
|
||||
id="link-delete"
|
||||
key="delete"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Delete this link`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<TrashAltIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
];
|
||||
|
||||
const handleLinkMouseEnter = () => {
|
||||
const linkEl = document.getElementById(
|
||||
`link-${link.source.id}-${link.target.id}`
|
||||
);
|
||||
linkEl.parentNode.appendChild(linkEl);
|
||||
setHovering(true);
|
||||
};
|
||||
|
||||
const handleLinkMouseLeave = () => {
|
||||
const linkEl = document.getElementById(
|
||||
`link-${link.source.id}-${link.target.id}`
|
||||
);
|
||||
linkEl.parentNode.prepend(linkEl);
|
||||
setHovering(null);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (link.edgeType === 'failure') {
|
||||
setPathStroke('#d9534f');
|
||||
}
|
||||
if (link.edgeType === 'success') {
|
||||
setPathStroke('#5cb85c');
|
||||
}
|
||||
if (link.edgeType === 'always') {
|
||||
setPathStroke('#337ab7');
|
||||
}
|
||||
}, [link.edgeType]);
|
||||
|
||||
useEffect(() => {
|
||||
const linePoints = getLinePoints(link, nodePositions);
|
||||
setPathD(generateLine(linePoints));
|
||||
setTooltipX((linePoints[0].x + linePoints[1].x) / 2);
|
||||
setTooltipY((linePoints[0].y + linePoints[1].y) / 2);
|
||||
}, [link, nodePositions]);
|
||||
|
||||
return (
|
||||
<g
|
||||
className="WorkflowGraph-link"
|
||||
id={`link-${link.source.id}-${link.target.id}`}
|
||||
onMouseEnter={handleLinkMouseEnter}
|
||||
onMouseLeave={handleLinkMouseLeave}
|
||||
>
|
||||
<polygon
|
||||
id={`link-${link.source.id}-${link.target.id}-overlay`}
|
||||
fill="#E1E1E1"
|
||||
opacity={hovering ? '1' : '0'}
|
||||
points={getLinkOverlayPoints(link, nodePositions)}
|
||||
/>
|
||||
<path
|
||||
className="WorkflowGraph-linkPath"
|
||||
d={pathD}
|
||||
stroke={pathStroke}
|
||||
strokeWidth="2px"
|
||||
/>
|
||||
<polygon
|
||||
opacity="0"
|
||||
points={getLinkOverlayPoints(link, nodePositions)}
|
||||
onMouseEnter={() => updateLinkHelp(link)}
|
||||
onMouseLeave={() => updateLinkHelp(null)}
|
||||
/>
|
||||
{!readOnly && hovering && (
|
||||
<WorkflowActionTooltip
|
||||
pointX={tooltipX}
|
||||
pointY={tooltipY}
|
||||
actions={tooltipActions}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(VisualizerLink);
|
||||
@ -0,0 +1,148 @@
|
||||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
InfoIcon,
|
||||
LinkIcon,
|
||||
PencilAltIcon,
|
||||
PlusIcon,
|
||||
TrashAltIcon,
|
||||
} from '@patternfly/react-icons';
|
||||
import { constants as wfConstants } from '@util/workflow';
|
||||
import {
|
||||
WorkflowActionTooltip,
|
||||
WorkflowActionTooltipItem,
|
||||
WorkflowNodeTypeLetter,
|
||||
} from '@components/Workflow';
|
||||
|
||||
// dont need this in this component
|
||||
const NodeG = styled.g`
|
||||
cursor: ${props => (props.job ? 'pointer' : 'default')};
|
||||
`;
|
||||
|
||||
const NodeContents = styled.foreignObject`
|
||||
font-size: 13px;
|
||||
padding: 0px 10px;
|
||||
`;
|
||||
|
||||
const NodeDefaultLabel = styled.p`
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
function VisualizerNode({
|
||||
node,
|
||||
nodePositions,
|
||||
updateHelpText,
|
||||
updateNodeHelp,
|
||||
readOnly,
|
||||
i18n,
|
||||
onDeleteNodeClick,
|
||||
}) {
|
||||
const [hovering, setHovering] = useState(false);
|
||||
|
||||
const handleNodeMouseEnter = () => {
|
||||
const nodeEl = document.getElementById(`node-${node.id}`);
|
||||
nodeEl.parentNode.appendChild(nodeEl);
|
||||
setHovering(true);
|
||||
};
|
||||
|
||||
const viewDetailsAction = (
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-details"
|
||||
key="details"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`View node details`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<InfoIcon />
|
||||
</WorkflowActionTooltipItem>
|
||||
);
|
||||
|
||||
const tooltipActions = readOnly
|
||||
? [viewDetailsAction]
|
||||
: [
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-add"
|
||||
key="add"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Add a new node`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<PlusIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
viewDetailsAction,
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-edit"
|
||||
key="edit"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Edit this node`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-link"
|
||||
key="link"
|
||||
onMouseEnter={() =>
|
||||
updateHelpText(i18n._(t`Link to an available node`))
|
||||
}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<LinkIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-delete"
|
||||
key="delete"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Delete this node`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
onClick={() => onDeleteNodeClick(node)}
|
||||
>
|
||||
<TrashAltIcon />
|
||||
</WorkflowActionTooltipItem>,
|
||||
];
|
||||
|
||||
return (
|
||||
<NodeG
|
||||
id={`node-${node.id}`}
|
||||
transform={`translate(${nodePositions[node.id].x},${nodePositions[node.id]
|
||||
.y - nodePositions[1].y})`}
|
||||
job={node.job}
|
||||
onMouseEnter={handleNodeMouseEnter}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
>
|
||||
<rect
|
||||
width={wfConstants.nodeW}
|
||||
height={wfConstants.nodeH}
|
||||
rx="2"
|
||||
ry="2"
|
||||
stroke="#93969A"
|
||||
strokeWidth="2px"
|
||||
fill="#FFFFFF"
|
||||
/>
|
||||
<NodeContents
|
||||
height="60"
|
||||
width="180"
|
||||
onMouseEnter={() => updateNodeHelp(node)}
|
||||
onMouseLeave={() => updateNodeHelp(null)}
|
||||
>
|
||||
<NodeDefaultLabel>
|
||||
{node.unifiedJobTemplate
|
||||
? node.unifiedJobTemplate.name
|
||||
: i18n._(t`DELETED`)}
|
||||
</NodeDefaultLabel>
|
||||
</NodeContents>
|
||||
{node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
|
||||
{hovering && (
|
||||
<WorkflowActionTooltip
|
||||
pointX={wfConstants.nodeW}
|
||||
pointY={wfConstants.nodeH / 2}
|
||||
actions={tooltipActions}
|
||||
/>
|
||||
)}
|
||||
</NodeG>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(VisualizerNode);
|
||||
@ -0,0 +1,63 @@
|
||||
import React, { useState } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { constants as wfConstants } from '@util/workflow';
|
||||
import {
|
||||
WorkflowActionTooltip,
|
||||
WorkflowActionTooltipItem,
|
||||
} from '@components/Workflow';
|
||||
|
||||
function VisualizerStartNode({
|
||||
updateHelpText,
|
||||
nodePositions,
|
||||
readOnly,
|
||||
i18n,
|
||||
}) {
|
||||
const [hovering, setHovering] = useState(false);
|
||||
|
||||
const handleNodeMouseEnter = () => {
|
||||
const nodeEl = document.getElementById('node-1');
|
||||
nodeEl.parentNode.appendChild(nodeEl);
|
||||
setHovering(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<g
|
||||
id="node-1"
|
||||
transform={`translate(${nodePositions[1].x},0)`}
|
||||
onMouseEnter={handleNodeMouseEnter}
|
||||
onMouseLeave={() => setHovering(false)}
|
||||
>
|
||||
<rect
|
||||
width={wfConstants.rootW}
|
||||
height={wfConstants.rootH}
|
||||
y="10"
|
||||
rx="2"
|
||||
ry="2"
|
||||
fill="#0279BC"
|
||||
/>
|
||||
{/* TODO: We need to be able to handle translated text here */}
|
||||
<text x="13" y="30" dy=".35em" fill="white">
|
||||
START
|
||||
</text>
|
||||
{!readOnly && hovering && (
|
||||
<WorkflowActionTooltip
|
||||
pointX={wfConstants.rootW}
|
||||
pointY={wfConstants.rootH / 2 + 10}
|
||||
actions={[
|
||||
<WorkflowActionTooltipItem
|
||||
id="node-add"
|
||||
key="add"
|
||||
onMouseEnter={() => updateHelpText(i18n._(t`Add a new node`))}
|
||||
onMouseLeave={() => updateHelpText(null)}
|
||||
>
|
||||
<i className="pf-icon pf-icon-add-circle-o" />
|
||||
</WorkflowActionTooltipItem>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(VisualizerStartNode);
|
||||
@ -1,95 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const GridDL = styled.dl`
|
||||
display: grid;
|
||||
grid-template-columns: max-content;
|
||||
column-gap: 15px;
|
||||
row-gap: 0px;
|
||||
|
||||
dt {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
dd {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
`;
|
||||
|
||||
function WorkflowHelpDetails({ d, i18n }) {
|
||||
const rows = [];
|
||||
|
||||
if (d.type === 'link') {
|
||||
let linkType;
|
||||
switch (d.edgeType) {
|
||||
case 'always':
|
||||
linkType = i18n._(t`Always`);
|
||||
break;
|
||||
case 'success':
|
||||
linkType = i18n._(t`On Success`);
|
||||
break;
|
||||
case 'failure':
|
||||
linkType = i18n._(t`On Failure`);
|
||||
break;
|
||||
default:
|
||||
linkType = '';
|
||||
}
|
||||
|
||||
rows.push({
|
||||
label: i18n._(t`Run`),
|
||||
value: linkType,
|
||||
});
|
||||
} else if (d.type === 'node') {
|
||||
if (d.unifiedJobTemplate) {
|
||||
rows.push({
|
||||
label: i18n._(t`Name`),
|
||||
value: d.unifiedJobTemplate.name,
|
||||
});
|
||||
|
||||
let nodeType;
|
||||
switch (d.unifiedJobTemplate.unified_job_type) {
|
||||
case 'job':
|
||||
nodeType = i18n._(t`Job Template`);
|
||||
break;
|
||||
case 'workflow_job':
|
||||
nodeType = i18n._(t`Workflow Job Template`);
|
||||
break;
|
||||
case 'project_update':
|
||||
nodeType = i18n._(t`Project Update`);
|
||||
break;
|
||||
case 'inventory_update':
|
||||
nodeType = i18n._(t`Inventory Update`);
|
||||
break;
|
||||
case 'workflow_approval':
|
||||
nodeType = i18n._(t`Workflow Approval`);
|
||||
break;
|
||||
default:
|
||||
nodeType = '';
|
||||
}
|
||||
|
||||
rows.push({
|
||||
label: i18n._(t`Type`),
|
||||
value: nodeType,
|
||||
});
|
||||
} else {
|
||||
// todo: this scenario (deleted)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<GridDL>
|
||||
{rows.map(row => (
|
||||
<Fragment key={row.label}>
|
||||
<dt>
|
||||
<b>{row.label}</b>
|
||||
</dt>
|
||||
<dd>{row.value}</dd>
|
||||
</Fragment>
|
||||
))}
|
||||
</GridDL>
|
||||
);
|
||||
}
|
||||
|
||||
export default withI18n()(WorkflowHelpDetails);
|
||||
@ -1,6 +1,7 @@
|
||||
export { default as Visualizer } from './Visualizer';
|
||||
export { default as Toolbar } from './Toolbar';
|
||||
export { default as Graph } from './Graph';
|
||||
export { default as StartScreen } from './StartScreen';
|
||||
export { default as WorkflowHelp } from './WorkflowHelp';
|
||||
export { default as WorkflowHelpDetails } from './WorkflowHelpDetails';
|
||||
export { default as VisualizerToolbar } from './VisualizerToolbar';
|
||||
export { default as VisualizerGraph } from './VisualizerGraph';
|
||||
export { default as VisualizerStartScreen } from './VisualizerStartScreen';
|
||||
export { default as VisualizerStartNode } from './VisualizerStartNode';
|
||||
export { default as VisualizerLink } from './VisualizerLink';
|
||||
export { default as VisualizerNode } from './VisualizerNode';
|
||||
|
||||
@ -4,3 +4,7 @@ import { getLanguage } from './language';
|
||||
export function formatDateString(dateString, lang = getLanguage(navigator)) {
|
||||
return new Date(dateString).toLocaleString(lang);
|
||||
}
|
||||
|
||||
export function secondsToHHMMSS(seconds) {
|
||||
return new Date(seconds * 1000).toISOString().substr(11, 8);
|
||||
}
|
||||
|
||||
174
awx/ui_next/src/util/workflow.jsx
Normal file
174
awx/ui_next/src/util/workflow.jsx
Normal file
@ -0,0 +1,174 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
import * as d3 from 'd3';
|
||||
import * as dagre from 'dagre';
|
||||
|
||||
const normalizeY = (nodePositions, y) => y - nodePositions[1].y;
|
||||
|
||||
export const constants = {
|
||||
nodeW: 180,
|
||||
nodeH: 60,
|
||||
rootW: 72,
|
||||
rootH: 40,
|
||||
};
|
||||
|
||||
export function calcZoomAndFit(gRef) {
|
||||
const gBoundingClientRect = d3
|
||||
.select(gRef)
|
||||
.node()
|
||||
.getBoundingClientRect();
|
||||
|
||||
const gBBoxDimensions = d3
|
||||
.select(gRef)
|
||||
.node()
|
||||
.getBBox();
|
||||
|
||||
const svgElement = document.getElementById('workflow-svg');
|
||||
const svgBoundingClientRect = svgElement.getBoundingClientRect();
|
||||
|
||||
// For some reason the root width needs to be added?
|
||||
gBoundingClientRect.width += constants.rootW;
|
||||
|
||||
const scaleNeededForMaxHeight =
|
||||
svgBoundingClientRect.height / gBoundingClientRect.height;
|
||||
const scaleNeededForMaxWidth =
|
||||
svgBoundingClientRect.width / gBoundingClientRect.width;
|
||||
const lowerScale = Math.min(scaleNeededForMaxHeight, scaleNeededForMaxWidth);
|
||||
|
||||
let scaleToFit;
|
||||
let yTranslate;
|
||||
if (lowerScale < 0.1 || lowerScale > 2) {
|
||||
scaleToFit = lowerScale < 0.1 ? 0.1 : 2;
|
||||
yTranslate =
|
||||
svgBoundingClientRect.height / 2 - (constants.nodeH * scaleToFit) / 2;
|
||||
} else {
|
||||
scaleToFit = Math.floor(lowerScale * 1000) / 1000;
|
||||
yTranslate =
|
||||
(svgBoundingClientRect.height - gBoundingClientRect.height * scaleToFit) /
|
||||
2 -
|
||||
gBBoxDimensions.y * scaleToFit;
|
||||
}
|
||||
|
||||
return [scaleToFit, yTranslate];
|
||||
}
|
||||
|
||||
export function generateLine(points) {
|
||||
const line = d3
|
||||
.line()
|
||||
.x(d => {
|
||||
return d.x;
|
||||
})
|
||||
.y(d => {
|
||||
return d.y;
|
||||
});
|
||||
|
||||
return line(points);
|
||||
}
|
||||
|
||||
export function getLinePoints(link, nodePositions) {
|
||||
const sourceX =
|
||||
nodePositions[link.source.id].x + nodePositions[link.source.id].width + 1;
|
||||
let sourceY =
|
||||
normalizeY(nodePositions, nodePositions[link.source.id].y) +
|
||||
nodePositions[link.source.id].height / 2;
|
||||
const targetX = nodePositions[link.target.id].x - 1;
|
||||
const targetY =
|
||||
normalizeY(nodePositions, nodePositions[link.target.id].y) +
|
||||
nodePositions[link.target.id].height / 2;
|
||||
|
||||
// There's something off with the math on the root node...
|
||||
if (link.source.id === 1) {
|
||||
sourceY += 10;
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
x: sourceX,
|
||||
y: sourceY,
|
||||
},
|
||||
{
|
||||
x: targetX,
|
||||
y: targetY,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
export function getLinkOverlayPoints(d, nodePositions) {
|
||||
const sourceX =
|
||||
nodePositions[d.source.id].x + nodePositions[d.source.id].width + 1;
|
||||
let sourceY =
|
||||
normalizeY(nodePositions, nodePositions[d.source.id].y) +
|
||||
nodePositions[d.source.id].height / 2;
|
||||
const targetX = nodePositions[d.target.id].x - 1;
|
||||
const targetY =
|
||||
normalizeY(nodePositions, nodePositions[d.target.id].y) +
|
||||
nodePositions[d.target.id].height / 2;
|
||||
|
||||
// There's something off with the math on the root node...
|
||||
if (d.source.id === 1) {
|
||||
sourceY += 10;
|
||||
}
|
||||
const slope = (targetY - sourceY) / (targetX - sourceX);
|
||||
const yIntercept = targetY - slope * targetX;
|
||||
const orthogonalDistance = 8;
|
||||
|
||||
const pt1 = [
|
||||
targetX,
|
||||
slope * targetX +
|
||||
yIntercept +
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt2 = [
|
||||
sourceX,
|
||||
slope * sourceX +
|
||||
yIntercept +
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt3 = [
|
||||
sourceX,
|
||||
slope * sourceX +
|
||||
yIntercept -
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
const pt4 = [
|
||||
targetX,
|
||||
slope * targetX +
|
||||
yIntercept -
|
||||
orthogonalDistance * Math.sqrt(1 + slope * slope),
|
||||
].join(',');
|
||||
|
||||
return [pt1, pt2, pt3, pt4].join(' ');
|
||||
}
|
||||
|
||||
export function layoutGraph(nodes, links) {
|
||||
const g = new dagre.graphlib.Graph();
|
||||
g.setGraph({ rankdir: 'LR', nodesep: 30, ranksep: 120 });
|
||||
|
||||
// This is needed for Dagre
|
||||
g.setDefaultEdgeLabel(() => {
|
||||
return {};
|
||||
});
|
||||
|
||||
nodes.forEach(node => {
|
||||
if (node.id === 1) {
|
||||
g.setNode(node.id, {
|
||||
label: '',
|
||||
width: constants.rootW,
|
||||
height: constants.rootH,
|
||||
});
|
||||
} else {
|
||||
g.setNode(node.id, {
|
||||
label: '',
|
||||
width: constants.nodeW,
|
||||
height: constants.nodeH,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
links.forEach(link => {
|
||||
g.setEdge(link.source.id, link.target.id);
|
||||
});
|
||||
|
||||
dagre.layout(g);
|
||||
|
||||
return g;
|
||||
}
|
||||
@ -60,6 +60,7 @@ module.exports = {
|
||||
alias: {
|
||||
'@api': path.join(SRC_PATH, 'api'),
|
||||
'@components': path.join(SRC_PATH, 'components'),
|
||||
'@constants': path.join(SRC_PATH, 'constants.js'),
|
||||
'@contexts': path.join(SRC_PATH, 'contexts'),
|
||||
'@screens': path.join(SRC_PATH, 'screens'),
|
||||
'@types': path.join(SRC_PATH, 'types'),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user