Vue router for AI Agents

What does this MR do and why?

The AI Agents section was originally set up with separate Rails controller actions for each page, and separate Vue apps to load the UI on each page. This MR brings the interface together into a single Vue app that uses the Vue router to move between interfaces. See the gif below for a preview of the UI.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

How to set up and validate locally

1. Ensure you have an EE license activated

2. Enable the feature flag

   Feature.enable(:agent_registry)

3. Navigate to <project>/-/ml/agents and ensure that the empty state is loading correctly

4. Click on 'Create agent'

5. Create an agent (name cannot have spaces, prompt can be anything)

6. Navigate to <project>/-/ml/agents and ensure the agent list shows up with the item that was just created

assigned to @darbyfrey

added AI Agents Category:MLOps IncubationMLOps devopsmodelops featureaddition groupmlops sectiondata-science typefeature labels

added backend documentation frontend labels

	7 Warnings
	2b2cdb5a: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	f6a861bb: The commit subject must contain at least 3 words. For more information, take a look at our Commit message guidelines.
	bb3f32cb: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	0059ee27: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	35d5eef4: Commits that change 30 or more lines across at least 3 files should describe these changes in the commit body. For more information, take a look at our Commit message guidelines.
	This merge request does not refer to an existing milestone.
	This merge request contains lines with testid selectors. Please ensure e2e:package-and-test job is run.

	2 Messages
	CHANGELOG missing: If this merge request needs a changelog entry, add the Changelog trailer to the commit message you want to add to the changelog. If this merge request doesn't need a CHANGELOG entry, feel free to ignore this message.
	This merge request adds or changes documentation files. A review from the Technical Writing team before you merge is recommended. Reviews can happen after you merge.

Documentation review

The following files require a review from a technical writer:

• doc/api/graphql/reference/index.md (Link to current live version)

The review does not need to block merging this merge request. See the:

• Metadata for the *.md files that you've changed. The first few lines of each *.md file identify the stage and group most closely associated with your docs change.
• The Technical Writer assigned for that stage and group.
• Documentation workflows for information on when to assign a merge request for review.

Multiversion compatibility

This merge request updates GraphQL backend and frontend code.

To prevent an incident, ensure the updated frontend code is backwards compatible.

For more information, see the multiversion compatibility documentation.

testid selectors

The following changed lines in this MR contain testid selectors:

ee/app/assets/javascripts/ml/ai_agents/components/agent_list.vue

+          data-testid="agent-item"

ee/app/assets/javascripts/ml/ai_agents/views/create_agent.vue

+        <gl-form-input v-model="agentName" data-testid="agent-name" />

If the e2e:package-and-test job in the qa stage has run automatically, please ensure the tests are passing. If the job has not run, please start the trigger-omnibus-and-follow-up-e2e job in the qa stage and ensure the tests in follow-up-e2e:package-and-test-ee pipeline are passing.

For the list of known failures please refer to the latest pipeline triage issue.

If your changes are under a feature flag, please check our Testing with feature flags documentation for instructions.

Reviewer roulette

Category	Reviewer	Maintainer
backend	@dfrazao-gitlab (UTC+1)	@splattael (UTC+1)
frontend	@marina.mosti (UTC+1)	@arfedoro (UTC+1)
test for spec/features/*	@dfrazao-gitlab (UTC+1)	Maintainer review is optional for test for spec/features/*

Please check reviewer's status!

• Reviewer is available!
• Reviewer is unavailable!

Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

If needed, you can retry the danger-review job that generated this comment.

Generated by Danger

Bundle size analysis [beta]

This compares changes in bundle size for entry points between the commits 23feceee and 2b2cdb5a

Special assets

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
average	4.13 MB	4.14 MB	+3.52 KB	0.1 %
mainChunk	3.13 MB	3.13 MB	-	0.0 %

New entry points: 1

Expand

Entrypoint / Name	Size before	Size after	Diff	Diff in percent
pages.projects.ml.agents	0 Bytes	278.92 KB	+278.92 KB	100.0 %

---

Note: We do not have exact data for 23feceee. So we have used data from: f6b842a7.
The intended commit has no webpack pipeline, so we chose the last commit with one before it.

Please look at the full report for more details

---

Read more about how this report works.

Generated by Danger

E2E Test Result Summary

allure-report-publisher generated test report!

e2e-test-on-gdk: test report for 2b2cdb5a

expand test summary

+------------------------------------------------------------------+
|                          suites summary                          |
+-------------+--------+--------+---------+-------+-------+--------+
|             | passed | failed | skipped | flaky | total | result |
+-------------+--------+--------+---------+-------+-------+--------+
| Plan        | 53     | 0      | 0       | 0     | 53    | ✅     |
| Data Stores | 29     | 0      | 3       | 0     | 32    | ✅     |
| Create      | 53     | 0      | 12      | 0     | 65    | ✅     |
| Govern      | 65     | 0      | 1       | 0     | 66    | ✅     |
| Monitor     | 7      | 0      | 0       | 0     | 7     | ✅     |
| Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
| Package     | 24     | 0      | 2       | 0     | 26    | ✅     |
| Verify      | 31     | 0      | 0       | 0     | 31    | ✅     |
| Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
| Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+
| Total       | 269    | 0      | 19      | 0     | 288   | ✅     |
+-------------+--------+--------+---------+-------+-------+--------+

changed the description

added 1 commit

• 5f3769af - Vue router for AI Agents

Compare with previous version

@eduardobonet This MR is still in draft, but I wanted to share it to get any initial feedback. One question I had is if we still need links as part of the graphql type since we're not linking to other pages. I removed them here, but I can add them back if they're needed for some reason. Thanks!

requested review from @eduardobonet

removed review request for @eduardobonet

mentioned in commit 2624329d

added 1 commit

• 2624329d - Vue router for AI Agents

Compare with previous version

marked this merge request as ready

changed the description

added 1 commit

• c9fb6113 - Apply 1 suggestion(s) to 1 file(s)

Compare with previous version

Hi @alexbuijs, could you give this MR a backend and test review when you have a moment? Thanks!

Hi @fernando-c, could you give this MR a frontend review when you have a moment? Thanks!

requested review from @fernando-c and @alexbuijs

added 1 commit

• 791615fa - Updated translations and graphql docs

Compare with previous version

removed review request for @alexbuijs

added 1 commit

• 00070700 - Updated translations and graphql docs

Compare with previous version

added 2 commits

• bcddb349 - Reorganizing code, removed unused files
• f9bd23e2 - Updated javascript tests

Compare with previous version

added 1 commit

• c04c10fb - Updated ruby tests

Compare with previous version

added 1 commit

• d648588f - Updated externalizations

Compare with previous version

added 1 commit

• 8c15acbc - Fixing presenter test

Compare with previous version

mentioned in issue #438763 (closed)

requested review from @alexbuijs

approved this merge request

requested review from @splattael and removed review request for @alexbuijs

@alexbuijs, thanks for approving this merge request.

This is the first time the merge request has been approved. To ensure we don't only run predictive pipelines, and we don't break master, a new pipeline will be started shortly.

Please wait for the pipeline to start before resolving this discussion and set auto-merge for the new pipeline. See merging a merge request for more details.

added pipeline:mr-approved label

approved this merge request

added GraphQL label

@darbyfrey According to https://docs.gitlab.com/ee/development/feature_flags/#changelog feature additions behind a feature flag should not have a git trailer.

Do you mind removing it?

mentioned in issue #437540

added 10 commits

• 5298760d - Vue router for AI Agents
• 5b80d063 - Apply 1 suggestion(s) to 1 file(s)
• e267c69a - Updated translations and graphql docs
• 6b5c089c - Updated translations and graphql docs
• 183f14f1 - Reorganizing code, removed unused files
• dc1862cf - Updated javascript tests
• 37b5f0e7 - Updated ruby tests
• d840d262 - Updated externalizations
• 482fcd69 - Fixing presenter test
• 32fd855f - Update permissions and tests for AI Agents controller

Compare with previous version

reset approvals from @splattael by pushing to the branch

requested review from @splattael

@darbyfrey great work on unifying the seperate vue apps from seperate rails vue into one app that is client side routing enabled.

The code looked good to me, only had one question.

question (non-blocking)

Navigate to <project>/-/ml/agents and ensure that the empty state is loading correctly

How do we navigate to the page? Is there a nav menu item behind a feature flag? I couldn't find it so I had to manually enter the URL in the browser.

approved this merge request

approved this merge request

requested review from @arfedoro