Skip to content

Convert Self-Hosted Models List into Vue Component

Julie Huang requested to merge 463134-list-custom-models-in-vue-app into master

What does this MR do and why?

This work will re-implement the existing page for displaying self-hosted models from the Admin dashboard. The goal is to re-write the existing HAML page and convert it to VueJS. The feature is behind a FF custom_models_vue_app.

What this MR does:

  • Extends the SelfHostedModelsApp component to display self-hosted models data if models are present
  • Uses Pyjamas components for UI
  • Invokes aiSelfHostedModels query for data

Out of scope: Deleting a self hosted model from the models table. The button has been added in this MR, but the functionality which requires a new endpoint will be implemented in this issue

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

Web

Before After
Screenshot_2024-06-17_at_11.57.12_AM Screenshot_2024-06-17_at_12.09.43_PM

Mobile

Before After
Screenshot_2024-06-17_at_11.57.39_AM Screenshot_2024-06-17_at_12.16.00_PM Screenshot_2024-06-17_at_12.15.36_PM

Note: When selecting the new CodeGemma model type, the longer characters breaks styling as seen in second screenshot. I don't think this should matter too much as it's still usable and the feature is getting limited use behind a flag. Plus this page will likely be re-dseigned in future with the AI Settings Unification work

How to set up and validate locally

Prequisites

You will need:

  • An active GitLab ultimate license
  • Disable SAAS mode when running GDK
    • echo $GITLAB_SIMULATE_SAAS should return 0
    • See the docs for more information
  • Run the following commands in your terminal
add_on = GitlabSubscriptions::AddOn.find_or_create_by!(name: "code_suggestions") {|e| e.description = "Test"}
add_on_purchase = GitlabSubscriptions::AddOnPurchase.create!(add_on: add_on, expires_on: 1.month.from_now, quantity: 5, purchase_xid: 'A-S0001')
Feature.enable(:self_managed_code_suggestions)
Feature.enable(:ai_custom_model)
Feature.enable(:custom_models_vue_app)
ApplicationSetting.first.update(duo_features_enabled: true)
  1. Navigate to your GDK instance in browser
  2. Click on "Admin" button at the bottom of the left sidebar
  3. Open the "AI powered Features" drop down in the admin area sidebar
  4. Click on "Models"
  5. You may may be asked to accept some terms and conditions with usage (accept them)
  6. If you do not have any models set up, you will see an empty state where you will be prompted to create a new one
  7. Create new models. You should see a list of models now.

Related to #463134 (closed)

Edited by Julie Huang

Merge request reports