Fix some styling discrepancies between Chrome and Firefox in the workflow viz/output graphs.

Cleans up deleted job/job template use cases. Show message indicating that the ujt associated with a node has been deleted.
2026-01-13 02:50:02 -03:30 · 2020-01-28 16:01:46 -05:00 · 2020-01-28 16:01:46 -05:00 · fc3f19bd2b
commit fc3f19bd2b
parent 2bbcd2d663
6 changed files with 122 additions and 85 deletions
--- a/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.jsx
@ -1,7 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import styled from 'styled-components';
+import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { shape } from 'prop-types';
 import { secondsToHHMMSS } from '@util/dates';

@ -18,11 +19,23 @@ const GridDL = styled.dl`
  }
 `;

+const ResourceDeleted = styled.p`
+  margin-bottom: ${props => (props.job ? '10px' : '0px')};
+`;
+
+const StyledExclamationTriangleIcon = styled(ExclamationTriangleIcon)`
+  color: #f0ad4d;
+  height: 20px;
+  margin-right: 10px;
+  width: 20px;
+`;
+
 function WorkflowNodeHelp({ node, i18n }) {
  let nodeType;
-  if (node.unifiedJobTemplate) {
-    const type =
-      node.unifiedJobTemplate.unified_job_type || node.unifiedJobTemplate.type;
+  if (node.unifiedJobTemplate || node.job) {
+    const type = node.unifiedJobTemplate
+      ? node.unifiedJobTemplate.unified_job_type || node.unifiedJobTemplate.type
+      : node.job.type;
    switch (type) {
      case 'job_template':
      case 'job':
@ -97,43 +110,59 @@ function WorkflowNodeHelp({ node, i18n }) {
  }

  return (
-    <Fragment>
-      <GridDL>
-        {node.unifiedJobTemplate && (
-          <Fragment>
-            <dt>
-              <b>{i18n._(t`Name`)}</b>
-            </dt>
-            <dd id="workflow-node-help-name">{node.unifiedJobTemplate.name}</dd>
-            <dt>
-              <b>{i18n._(t`Type`)}</b>
-            </dt>
-            <dd id="workflow-node-help-type">{nodeType}</dd>
-          </Fragment>
-        )}
-        {node.job && (
-          <Fragment>
-            <dt>
-              <b>{i18n._(t`Job Status`)}</b>
-            </dt>
-            <dd id="workflow-node-help-status">{jobStatus}</dd>
-            {node.job.elapsed && (
-              <Fragment>
-                <dt>
-                  <b>{i18n._(t`Elapsed`)}</b>
-                </dt>
-                <dd id="workflow-node-help-elapsed">
-                  {secondsToHHMMSS(node.job.elapsed)}
-                </dd>
-              </Fragment>
-            )}
-          </Fragment>
-        )}
-      </GridDL>
+    <>
+      {!node.unifiedJobTemplate && (
+        <>
+          <ResourceDeleted job={node.job}>
+            <StyledExclamationTriangleIcon />
+            <Trans>
+              The resource associated with this node has been deleted.
+            </Trans>
+          </ResourceDeleted>
+        </>
+      )}
+      {node.job && (
+        <GridDL>
+          <dt>
+            <b>{i18n._(t`Name`)}</b>
+          </dt>
+          <dd id="workflow-node-help-name">{node.job.name}</dd>
+          <dt>
+            <b>{i18n._(t`Type`)}</b>
+          </dt>
+          <dd id="workflow-node-help-type">{nodeType}</dd>
+          <dt>
+            <b>{i18n._(t`Job Status`)}</b>
+          </dt>
+          <dd id="workflow-node-help-status">{jobStatus}</dd>
+          {node.job.elapsed && (
+            <>
+              <dt>
+                <b>{i18n._(t`Elapsed`)}</b>
+              </dt>
+              <dd id="workflow-node-help-elapsed">
+                {secondsToHHMMSS(node.job.elapsed)}
+              </dd>
+            </>
+          )}
+        </GridDL>
+      )}
+      {node.unifiedJobTemplate && !node.job && (
+        <GridDL>
+          <dt>
+            <b>{i18n._(t`Name`)}</b>
+          </dt>
+          <dd id="workflow-node-help-name">{node.unifiedJobTemplate.name}</dd>
+          <dt>
+            <b>{i18n._(t`Type`)}</b>
+          </dt>
+          <dd id="workflow-node-help-type">{nodeType}</dd>
+        </GridDL>
+      )}
      {node.job && (
        <p css="margin-top: 10px">{i18n._(t`Click to view job details`)}</p>
      )}
-    </Fragment>
+    </>
  );
 }

--- a/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowNodeHelp.test.jsx
@ -10,6 +10,7 @@ describe('WorkflowNodeHelp', () => {
  test('renders the expected content for a completed job template job', () => {
    const node = {
      job: {
+        name: 'Foo Job Template',
        elapsed: 9000,
        status: 'successful',
      },
--- a/awx/ui_next/src/components/Workflow/WorkflowNodeTypeLetter.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowNodeTypeLetter.jsx
@ -3,13 +3,15 @@ import styled from 'styled-components';
 import { shape } from 'prop-types';
 import { PauseIcon } from '@patternfly/react-icons';

-const NodeTypeLetter = styled.foreignObject`
+const NodeTypeLetter = styled.div`
  background-color: #393f43;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
+  height: 20px;
+  width: 20px;
 `;

 const CenteredPauseIcon = styled(PauseIcon)`
@ -19,11 +21,14 @@ const CenteredPauseIcon = styled(PauseIcon)`
 function WorkflowNodeTypeLetter({ node }) {
  let nodeTypeLetter;
  if (
-    node.unifiedJobTemplate &&
-    (node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type)
+    (node.unifiedJobTemplate &&
+      (node.unifiedJobTemplate.type ||
+        node.unifiedJobTemplate.unified_job_type)) ||
+    (node.job && node.job.type)
  ) {
-    const ujtType =
-      node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type;
+    const ujtType = node.unifiedJobTemplate
+      ? node.unifiedJobTemplate.type || node.unifiedJobTemplate.unified_job_type
+      : node.job.type;
    switch (ujtType) {
      case 'job_template':
      case 'job':
@ -51,9 +56,9 @@ function WorkflowNodeTypeLetter({ node }) {
  }

  return (
-    <NodeTypeLetter y="50" x="-10" height="20" width="20">
-      {nodeTypeLetter}
-    </NodeTypeLetter>
+    <foreignObject y="50" x="-10" height="20" width="20">
+      <NodeTypeLetter>{nodeTypeLetter}</NodeTypeLetter>
+    </foreignObject>
  );
 }

--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.jsx
@ -43,7 +43,7 @@ const Elapsed = styled.div`
  }
 `;

-const NodeContents = styled.foreignObject`
+const NodeContents = styled.div`
  font-size: 13px;
  padding: 0px 10px;
 `;
@ -98,29 +98,28 @@ function WorkflowOutputNode({ history, i18n, mouseEnter, mouseLeave, node }) {
        strokeWidth="2px"
        width={wfConstants.nodeW}
      />
-      <NodeContents height="60" width="180">
-        {node.job ? (
-          <>
-            <JobTopLine>
-              <StatusIcon status={node.job.status} />
-              <p>
-                {node.unifiedJobTemplate
-                  ? node.unifiedJobTemplate.name
-                  : i18n._(t`DELETED`)}
-              </p>
-            </JobTopLine>
-            <Elapsed>{secondsToHHMMSS(node.job.elapsed)}</Elapsed>
-          </>
-        ) : (
-          <NodeDefaultLabel>
-            {node.unifiedJobTemplate
-              ? node.unifiedJobTemplate.name
-              : i18n._(t`DELETED`)}
-          </NodeDefaultLabel>
-        )}
-      </NodeContents>
-      <circle cy="60" r="10" fill="#393F43" />
-      {node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
+      <foreignObject height="58" width="178" x="1" y="1">
+        <NodeContents>
+          {node.job ? (
+            <>
+              <JobTopLine>
+                <StatusIcon status={node.job.status} />
+                <p>{node.job.name}</p>
+              </JobTopLine>
+              <Elapsed>{secondsToHHMMSS(node.job.elapsed)}</Elapsed>
+            </>
+          ) : (
+            <NodeDefaultLabel>
+              {node.unifiedJobTemplate
+                ? node.unifiedJobTemplate.name
+                : i18n._(t`DELETED`)}
+            </NodeDefaultLabel>
+          )}
+        </NodeContents>
+      </foreignObject>
+      {(node.unifiedJobTemplate || node.job) && (
+        <WorkflowNodeTypeLetter node={node} />
+      )}
    </NodeG>
  );
 }
--- a/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.test.jsx
+++ b/awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputNode.test.jsx
@ -24,7 +24,7 @@ const nodeWithoutJT = {
  job: {
    elapsed: 7,
    id: 9000,
-    name: 'Automation JT',
+    name: 'Automation JT 2',
    status: 'successful',
    type: 'job',
  },
@ -87,7 +87,7 @@ describe('WorkflowOutputNode', () => {
        </WorkflowStateContext.Provider>
      </svg>
    );
-    expect(wrapper.contains(<p>DELETED</p>)).toEqual(true);
+    expect(wrapper.contains(<p>Automation JT 2</p>)).toEqual(true);
    expect(wrapper.find('WorkflowOutputNode__Elapsed').text()).toBe('00:00:07');
  });
  test('node contents displayed correctly when Job deleted', () => {
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.jsx
@ -26,7 +26,7 @@ const NodeG = styled.g`
  cursor: ${props => (props.job ? 'pointer' : 'default')};
 `;

-const NodeContents = styled.foreignObject`
+const NodeContents = styled.div`
  font-size: 13px;
  padding: 0px 10px;
  background-color: ${props =>
@ -183,25 +183,28 @@ function VisualizerNode({
            ? '#007ABC'
            : '#93969A'
        }
-        strokeWidth="4px"
+        strokeWidth="2px"
        width={wfConstants.nodeW}
      />
-      <NodeContents
-        height="60"
-        isInvalidLinkTarget={node.isInvalidLinkTarget}
+      <foreignObject
+        height="58"
        {...(!addingLink && {
          onMouseEnter: () => updateNodeHelp(node),
          onMouseLeave: () => updateNodeHelp(null),
        })}
        onClick={() => handleNodeClick()}
-        width="180"
+        width="178"
+        x="1"
+        y="1"
      >
-        <NodeDefaultLabel>
-          {node.unifiedJobTemplate
-            ? node.unifiedJobTemplate.name
-            : i18n._(t`DELETED`)}
-        </NodeDefaultLabel>
-      </NodeContents>
+        <NodeContents isInvalidLinkTarget={node.isInvalidLinkTarget}>
+          <NodeDefaultLabel>
+            {node.unifiedJobTemplate
+              ? node.unifiedJobTemplate.name
+              : i18n._(t`DELETED`)}
+          </NodeDefaultLabel>
+        </NodeContents>
+      </foreignObject>
      {node.unifiedJobTemplate && <WorkflowNodeTypeLetter node={node} />}
      {hovering && !addingLink && (
        <WorkflowActionTooltip