[Ingest Pipelines] Add structure tree to details flyout

[ElenaStoeva]

Addresses #227405

Screen.Recording.2025-07-29.at.18.13.39.mov

Summary

This PR adds the Ingest pipeline structure tree to the ingest pipelines details flyout.

How to test:

1. Run the following requests in Console (you can run them all at once) to create a sample ingest pipeline tree:

Console requests:

PUT _ingest/pipeline/level-8-1
{
  "processors": []
}

PUT _ingest/pipeline/level-8-2
{
  "processors": []
}

PUT _ingest/pipeline/level-7-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-8-1"
      }
    },
    {
      "pipeline": {
        "name": "level-8-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-7-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-8-1"
      }
    },
    {
      "pipeline": {
        "name": "level-8-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-6-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-7-1"
      }
    },
    {
      "pipeline": {
        "name": "level-7-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-6-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-7-1"
      }
    },
    {
      "pipeline": {
        "name": "level-7-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-5-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-6-1"
      }
    },
    {
      "pipeline": {
        "name": "level-6-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-5-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-6-1"
      }
    },
    {
      "pipeline": {
        "name": "level-6-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-4-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-5-1"
      }
    },
    {
      "pipeline": {
        "name": "level-5-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-4-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-5-1"
      }
    },
    {
      "pipeline": {
        "name": "level-5-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-3-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-4-1"
      }
    },
    {
      "pipeline": {
        "name": "level-4-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-3-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-4-1"
      }
    },
    {
      "pipeline": {
        "name": "level-4-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-2-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-3-1"
      }
    },
    {
      "pipeline": {
        "name": "level-3-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-2-2
{
  "processors": [
    {
      "pipeline": {
        "name": "level-3-1"
      }
    },
    {
      "pipeline": {
        "name": "level-3-2"
      }
    }
  ]
}

PUT _ingest/pipeline/level-1
{
  "processors": [
    {
      "pipeline": {
        "name": "level-2-1"
      }
    },
    {
      "pipeline": {
        "name": "level-2-2"
      }
    },
    {
      "pipeline": {
        "name": "non-existing"
      }
    }
  ]
}

2. Go to Ingest pipelines and click on any of the created pipelines. Verify that the tree is working as expected. Verify that the footer action buttons also work as expected (edit/clone/delete)
3. Verify that tree view is only displayed if the root has children.
4. Verify that navigating to a non-existing pipeline through the URL opens the flyout with an error banner and without the tree.
5. Verify that when you open a non-exisisting pipeline by clicking on a tree node, a warning banner is displayed.
6. Verify that in smaller screens only one panel is displayed at a time.
7. To test in Streams, enable streams with POST kbn:/api/streams/_enable and create sample date with node scripts/synthtrace.js sample_logs --live --kibana=http://elastic:changeme@localhost:5601 --target=http://elastic:changeme@localhost:9200 --liveBucketSize=1000

[elasticmachine]

Pinging @elastic/kibana-management (Team:Kibana Management)

[ElenaStoeva]

Converting to a draft as there were some additional changes in the design mocks

[SoniaSanzV]

Hi @ElenaStoeva! Thank you for this, I did a first local review and in general looks great! But I found a problem in the Streams page. I ran the script and added to the logs@custom a pipeline processor pointing to the level-1 so I have more pipelines to test in the Streams page. It works well for the first levels, but when I click more pipelines the flyout closes and the UI goes back to the Streams list.

Screen.Recording.2025-07-31.at.10.35.52.mov

[ElenaStoeva]

Thanks for reviewing @SoniaSanzV and nice catch! I fixed this issue with the last commit. Please let me know if you see any other issues.

[SoniaSanzV]

tested locally, LGTM! I really appreciate the work for making the panel responsive!

[elasticmachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 2200d66

Failed CI Steps

• :pipeline:🪄 Run Dynamic Pipeline: .buildkite/scripts/pipelines/pull_request/pipeline.sh

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
ingestPipelines	334	349	+15

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
@kbn/ingest-pipelines-shared	7	6	-1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
ingestPipelines	361.5KB	366.9KB	+5.4KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
ingestPipelines	15.9KB	16.0KB	+144.0B

History

• 💔 Build #325321 failed 9d98e29
• 💔 Build #325183 failed 795bfbd
• 💔 Build #325066 failed cb4f69d
• 💚 Build #324615 succeeded 170ecaf
• 💔 Build #324535 failed 6804b83

cc @ElenaStoeva