[NODE] New Job GUI shows blank screen, if there is a cycle in the task list graph in the TOML

[elbombardi]

Description When creating a new job and writing the graph that defines the order of execution of tasks, if a cycle is introduced in the graph definition, the GUI turns blank, and the blank page persists even after refreshing. Which makes creating new jobs impossible.

Basic Information Example of an erroneous job description (with a cycle in it's task graph) :

type = "directrequest"
schemaVersion = 1
name = "Get > Uint256-2"
contractAddress = "0x**************************"
maxTaskDuration = "0s"
observationSource = """
    decode_log   [type=ethabidecodelog
                  abi="OracleRequest(bytes32 indexed specId, address requester, bytes32 requestId, uint256 payment, address callbackAddr, bytes4 callbackFunctionId, uint256 cancelExpiration, uint256 dataVersion, bytes data)"
                  data="$(jobRun.logData)"
                  topics="$(jobRun.logTopics)"]

    decode_cbor  [type=cborparse data="$(decode_log.data)"]
    fetch        [type=http method=GET url="$(decode_cbor.get)"]
    parse        [type=jsonparse path="$(decode_cbor.path)" data="$(fetch)"]
    multiply     [type=multiply input="$(parse)" times=100]     
    encode_data  [type=ethabiencode abi="(uint256 value)" data=<{ "value": $(multiply) }>]
    encode_tx    [type=ethabiencode
                  abi="fulfillOracleRequest(bytes32 requestId, uint256 payment, address callbackAddress, bytes4 callbackFunctionId, uint256 expiration, bytes32 data)"
                  data=<{"requestId": $(decode_log.requestId), "payment": $(decode_log.payment), "callbackAddress": $(decode_log.callbackAddr), "callbackFunctionId": $(decode_log.callbackFunctionId), "expiration": $(decode_log.cancelExpiration), "data": $(encode_data)}>
                 ]
    submit_tx    [type=ethtx to="0x**************************" data="$(encode_tx)"]

    decode_log -> decode_cbor -> fetch -> fetch -> parse -> multiply -> encode_data -> encode_tx -> submit_tx
"""

Notice the cycle at the fetch task followed by itself :

decode_log -> decode_cbor -> fetch -> fetch -> parse -> multiply -> encode_data -> encode_tx -> submit_tx

Immediatly after the cycle is introduced in the job editor, the GUI turns blank. The browser console shows the following error :

main.425188c38ba1e33e4d2b.js:2 Error: dag contained a cycle: fetch -> fetch
    at main.425188c38ba1e33e4d2b.js:2
    at r (main.425188c38ba1e33e4d2b.js:2)
    at Zp (main.425188c38ba1e33e4d2b.js:2)
    at e (main.425188c38ba1e33e4d2b.js:2)
    at main.425188c38ba1e33e4d2b.js:2
    at ys (main.425188c38ba1e33e4d2b.js:2)
    at xl (main.425188c38ba1e33e4d2b.js:2)
    at t.unstable_runWithPriority (main.425188c38ba1e33e4d2b.js:2)
    at Va (main.425188c38ba1e33e4d2b.js:2)
    at Tl (main.425188c38ba1e33e4d2b.js:2)

When I launched operator_ui in development mode I got the follwing error in the console

Uncaught Error: dag contained a cycle: fetch -> fetch
    at verifyDag (main.cddd2792c01cb4c4a8f8.js:63870)
    at stratify (main.cddd2792c01cb4c4a8f8.js:63917)
    at createDag (main.cddd2792c01cb4c4a8f8.js:46413)
    at handleResize (main.cddd2792c01cb4c4a8f8.js:46478)
    at main.cddd2792c01cb4c4a8f8.js:46487
    at commitHookEffectList (main.cddd2792c01cb4c4a8f8.js:220095)
    at commitPassiveHookEffects (main.cddd2792c01cb4c4a8f8.js:220129)
    at HTMLUnknownElement.callCallback (main.cddd2792c01cb4c4a8f8.js:198401)
    at Object.invokeGuardedCallbackDev (main.cddd2792c01cb4c4a8f8.js:198450)
    at invokeGuardedCallback (main.cddd2792c01cb4c4a8f8.js:198505)

• Browser : Chrome v93.0.4577.63
• Network: Kovan
• Blockchain Client: Alchemy.io
• Go Version: v1.17
• Operating System: Fedora 32
• Commit: Chainlink Node 1.0.0 at commit bbc471860883f302ea90425346c7a51a0e867a24 cmd/local_client.go:55 SHA=bbc471860883f302ea90425346c7a51a0e867a24 Version=1.0.0 logger=boot
• Hosting Provider: local
• Startup Command: chainlink node start

Environment Variables

LOG_LEVEL=info
ETH_CHAIN_ID=42
MIN_OUTGOING_CONFIRMATIONS=2
LINK_CONTRACT_ADDRESS=0xa36085F69e2889c224210F603D836748e7dC0088
CHAINLINK_TLS_PORT=0
SECURE_COOKIES=false
GAS_UPDATER_ENABLED=true
ALLOW_ORIGINS=http://localhost:3000
ETH_URL=wss://eth-kovan.alchemyapi.io/v2/*****
DATABASE_URL=postgresql://localhost:5432/database?sslmode=disable
DATABASE_TIMEOUT=0
FEATURE_FLUX_MONITOR=true
MINIMUM_CONTRACT_PAYMENT_LINK_JUELS=100000000000000000
CHAINLINK_DEV=true
FEATURE_OFFCHAIN_REPORTING=true

Steps to Reproduce

• Log in Chainlink Operator UI
• Create a new job
• Write a job description with a cycle in the graph definition.

[elbombardi]

• I think this is due to an unhandled error from d3-dag liberary (used in TaskListDag.tsx)
• What makes the problem persistent is the fact that the page will save and reload the last job specification each time the page is loaded.

[elbombardi]

Here's a workaround to unblock the New Job screen (Using Chrome dev tools):

• Right click on the blank page
• Click on "Inspect" to open Dev Tools.
• Choose the Application tab
• Go to Storage > Local Storage
• Delete "chainlink.persistSpec." entry (or modify it by removing the cycle).
• Refresh the page

[andrejrakic]

Thanks for making this issue!

[PatrickAlphaC]

Closing, this has been fixed in newer versions.