Skip to content

Convert artifacts management page to vue and graphql

Miranda Fluharty requested to merge 33418-artifacts-view-minimal into master

What does this MR do and why?

This MR replaces the haml-based artifacts management page with a vue-and-graphql-based artifacts management page.

This MR attempts to lay the foundation for the artifacts management by including the core functions the user needs to be able to perform on this page. We will build on this foundation in future small iterations (such as adding functionality to some buttons which are disabled for now, keeping the job row expanded when an artifact is deleted, adding sorting and filtering to the table, improving the responsiveness of the table, etc.).

This page is behind the artifacts_management_page feature flag.

Screenshots or screen recordings

before: haml-based artifacts management page after: vue-and-graphql-based artifacts management page
Screen_Shot_2022-09-29_at_00.02.42 Screen_Shot_2022-09-28_at_23.59.10

How to set up and validate locally

setup: run a pipeline that generates artifacts 🛠

  1. set up a local runner for GDK or enable runners in gitpod
  2. find/make a project in your chosen environment where you can run a pipeline that generates artifacts
use this CI yaml to generate some sample artifacts to manage:
# .gitlab-ci.yml

potato:
  stage: build
  script:
    - echo 'potato' >> potato.txt
  artifacts:
    expose_as: 'potato'
    paths: ['potato.txt']

tomato:
  stage: build
  script:
    - echo 'tomato' >> tomato.txt
  artifacts:
    expose_as: 'tomato'
    paths: ['tomato.txt']

pineapple:
  stage: build
  script:
    - echo 'pineapple' >> pineapple.txt
  artifacts:
    expose_as: 'pineapple'
    paths: ['pineapple.txt']

apple:
  stage: build
  script:
    - echo 'apple' >> apple.txt
  artifacts:
    expose_as: 'apple'
    paths: ['apple.txt']

toblerone:
  stage: build
  script:
    - echo 'toblerone' >> toblerone.txt
  artifacts:
    expose_as: 'toblerone'
    paths: ['toblerone.txt']
  1. run some pipelines in the project

see the old artifacts management page 👀

  1. git checkout master
  2. echo "Feature.enable(:artifacts_management_page)" | bundle exec rails console
  3. navigate to the project, then in the sidebar select CI/CD => Artifacts

see the new artifacts management page

  1. git checkout 33418-artifacts-view-minimal
  2. refresh the artifacts page

teardown: undo changes from testing 🛠

  1. echo "Feature.disable(:artifacts_management_page)" | bundle exec rails console

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 #33418 (closed)

Edited by Miranda Fluharty

Merge request reports