Skip to content

Updates UI for /-/ml/experiments/show/

What does this MR do and why?

Updates UI for /-/ml/experiments/show

  • Table now scrolls horizontally on overflow
  • Removes tooltips
  • Uses GlTableLite instead of GlTable
  • Uses GlEmptyState

Screenshots or screen recordings

Before After
Empty State image image
Regular State image image
Small image image

Regular state changes:

  1. Removed unnecessary title
  2. Candidate name is now clickable, leads to candidate detail
  3. No more tooltip
  4. Renamed 'User' to 'Author'
  5. Removed 'Detail column'
  6. Adds 'Artifacts' column

Small state changes:

  1. No column wrapping
  2. No more tooltips
  3. Tables scrolls horizontally on shrink

How to set up and validate locally

How to set up and validate locally

  1. Enable the feature flag

    echo "Feature.enable(:ml_experiment_tracking)" | bundle exec rails c
  2. Create an Experiment and 10 candidates

    # Added variables
    user_id = 1
    project_id = 1
    
    exp = Ml::Experiment.create!(name: "Awesome Gitlab Experiment", user_id: user_id, project_id: project_id)
    10.times.each { |i| exp.candidates.create!(user_id: user_id, start_time: 0, name: "candidate_#{i}") }
    exp.candidates.each_with_index { |c, i| c.metrics.create!(name: "auc", value: i*0.1 , tracked_at: Time.zone.now, step: 1)} 
    exp.candidates.each_with_index { |c, i| c.metrics.create!(name: "accuracy", value: i* 0.1+0.1 , tracked_at: Time.zone.now, step: 1)} 
    exp.candidates.each { |c| c.params.create!(name: "algorithm", value: ["LogisticRegression", "DecisionTree"].sample )}
  3. Navigate to <your project>/-/ml/experiments and click on "Awesome Gitlab Experiment". It should show the new UI.

  4. Setting the query to 'balh' should show the empty state

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #388207 (closed)

Edited by Eduardo Bonet

Merge request reports

Loading