[WIP] Job Output expand/collapse

[keithjgrant]

SUMMARY

Adds expand/collapse functionality to Job Output screen.

Addresses #6613

ISSUE TYPE

• Feature Pull Request

COMPONENT NAME

• UI

[tiagodread]

We found so far:

• Some lines were not been displayed when verbosity was set:

• The scrool bottom/up button was not scrooling way to bottom/top
• Production build (make ui-devel) is failing

src/screens/Job/JobOutput/loadJobEvents.js
  Line 23:10:  'normalizeEvents' is defined but never used  no-unused-vars

• Job events are not showing while the job is running, just refreshing the page after finish

[tiagodread]

This error occurred randomly while running the JT some times the job completes successfully, however, sometimes the page crash.

TypeError: Cannot read properties of undefined (reading 'children') at bN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1331817) at bN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1331938) at bN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1331938) at dN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1331644) at https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1326109 at https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1326189 at Object.na [as useReducer] (https://localhost:8043/static/js/2.e47e61fb.chunk.js:2:1371602) at t.useReducer (https://localhost:8043/static/js/2.e47e61fb.chunk.js:2:1311477) at iN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1329645) at xN (https://localhost:8043/static/js/main.a2426c28.chunk.js:1:1333400)

Screen.Recording.2021-10-07.at.10.49.39.mov

TypeError: Cannot read properties of undefined (reading 'eventIndex') at sN (https://localhost:8043/static/js/main.e585dd56.chunk.js:1:1331054) at oN

[AlexSCorey]

Concerns:

• Launch a chatty_tasks playbook with num_messages: 5000 Once event data begins to come in click to go all the way to the top of the page. sometimes It doesn't show all of the job data/go all the way to the top of the output.

• Some failing unit tests

• If I search the output I cannot expand/collapse.

• If all the tasks in a play are collapsed, and then I collapse and then expand the play should all the tasks also be expanded?

Nice to have:

• If you expand a task, play, etc. it means you want to see whats inside it so that expanded item should go to the top of the output.

• The task that owns the job data on the screen could be collapsible from any location within the task. This might be helpful if a task is really long (say 10000) lines, and the user decides that when they are on line 5000 they don't need to see this task any long and want to collapse it. I could be a pain to scroll 5000 lines in either direction. This would especially be useful in cases where the user has several really long tasks.

[keithjgrant]

Thanks @AlexSCorey! responses inline below:

Concerns:

* Launch a chatty_tasks playbook with `num_messages: 5000` Once event data begins to come in click to go all the way to the top of the page. sometimes It doesn't show all of the job data/go all the way to the top of the output.

This should work now

* Some failing unit tests

fixed

* If I search the output I cannot expand/collapse.

This is intentional. In order to only show lines that match the search query, I have to display all search results in "flat mode" (no hierarchy tree)... otherwise I would need to fetch parent/grandparent nodes, and they would get added to the display. This would mean it shows more logs beyond the search results.

* If all the tasks in a play are collapsed, and then I collapse and then expand the play should all the tasks also be expanded?

No, each node remembers its expanded/collapsed state independently

Nice to have:

* If you expand a task, play, etc. it means you want to see whats inside it so that expanded item should go to the top of the output.

* The task that owns the job data on the screen could be collapsible from any location within the task.  This might be helpful if a task is really long (say 10000) lines, and the user decides that when they are on line 5000 they don't need to see this task any long and want to collapse it. I could be a pain to scroll 5000 lines in either direction. This would especially be useful in cases where the user has several really long tasks.

Interesting ideas, and worth discussing with @trahman73, but I'm definitely going to punt on that for this PR :)

[keithjgrant]

@tiagodread This is ready for another once-over. I've smoothed over a lot of the rough edges (though I'm sure there's still more to find)

[tiagodread]

• I'm still not able to follow the output, it does follow initially though:

07-2021-10-13_17.24.40.mp4

• After making the basic search by "stdout" , the page shows the search results, however, keeps making a bunch of API requests and displaying the "fetch data state" lines:

07-2021-10-13_17.29.47.mp4

• Filtering by event "Hosts OK" is also making a several requests, when selecting and deselecting any event type like "verbose" clicking twice the page crashes :

Error: Cannot update node; Event UUID not found d51b27b3-f464-4277-8b91-34415e275e52 at pN

07-2021-10-13_17.39.17.mp4

[keithjgrant]

Closing in lieu of updated PR based on separate branch: #11312 11312