Pipeline Wizard는 사용자가 입력 필드로 파이프라인을 만들도록 돕는 Vue 프론트엔드 컴포넌트입니다. 입력 필드의 유형과 최종 파이프라인의 형태는 YAML 템플릿으로 구성합니다.

Pipeline Wizard는 사용자 흐름을 구성하는 템플릿 파일 하나를 받습니다. 이 위저드는 파일의 내용과 독립적이므로 다양한 흐름을 표시하는 데 사용할 수 있습니다. 예를 들어 정적 사이트용 템플릿 파일, Docker 이미지용 템플릿 파일, 모바일 앱용 템플릿 파일을 각각 둘 수 있습니다. 첫 번째 이터레이션에서는 이러한 템플릿이 GitLab 소스 코드의 일부입니다.

템플릿 파일은 여러 단계를 정의합니다. 사용자에게 마지막으로 표시되는 단계는 항상 커밋 단계이며 템플릿 정의에 포함되지 않습니다. 이상적인 사용자 경험은 23단계로 구성되어, 사용자에게 보이는 단계는 총 34개입니다.

사용 예시#

Vue 컴포넌트#

<!-- ~/my_feature/my_component.vue -->

<script>
  import PipelineWizard from '~/pipeline_wizard/pipeline_wizard.vue'
  import template from '~/pipeline_wizard/templates/my_template.yml';

  export default {
    name: "MyComponent",
    components: { PipelineWizard },
    data() {
      return { template }
    },
    methods: {
      onDone() {
        // redirect
      }
     }
  }
</script>

<template>
  <pipeline-wizard :template="template"
                   project-path="foo/bar"
                   default-branch="main"
                   @done="onDone" />
</template>

템플릿#

# ~/pipeline_wizard/templates/my_template.yml
id: gitlab/my-template
title: Set up my specific tech pipeline
description: Here are two or three introductory sentences that help the user understand what this wizard is going to set up.
steps:
  # Step 1
  - inputs:
      # First input widget
      - label: Select your build image
        description: A Docker image that we can use to build your image
        placeholder: node:lts
        widget: text
        target: $BUILD_IMAGE
        required: true
        pattern: '^(?:(?=[^:\/]{1,253})(?!-)[a-zA-Z0-9-]{1,63}(?<!-)(?:\.(?!-)[a-zA-Z0-9-]{1,63}(?<!-))*(?::[0-9]{1,5})?\/)?((?![._-])(?:[a-z0-9._-]*)(?<![._-])(?:\/(?![._-])[a-z0-9._-]*(?<![._-]))*)(?::(?![.-])[a-zA-Z0-9_.-]{1,128})?$'
        invalid-feedback: Please enter a valid docker image

      # Second input widget
      - label: Installation Steps
        description: "Enter the steps that need to run to set up a local build
          environment, for example installing dependencies."
        placeholder: npm ci
        widget: list
        target: $INSTALLATION_STEPS

    # This is the template to copy to the final pipeline file and updated with
    # the values input by the user. Comments are copied as-is.
    template:
      my-job:
        # The Docker image that will be used to build your app
        image: $BUILD_IMAGE

        before_script: $INSTALLATION_STEPS

        artifacts:
          paths:
            - foo

  # Step 2
  - inputs:
      # This is the only input widget for this step
      - label: Installation Steps
        description: "Enter the steps that need to run to set up a local build
          environment, for example installing dependencies."
        placeholder: npm ci
        widget: list
        target: $INSTALLATION_STEPS

    template:
      # Functions that should be executed before the build script runs
      before_script: $INSTALLATION_STEPS

결과#

1. 
2. 
3. 

커밋 단계#

위저드의 마지막 단계는 항상 커밋 단계입니다. 사용자는 위저드의 props로 정의된 리포지터리에 새로 생성된 파일을 커밋할 수 있습니다. 사용자는 커밋할 브랜치를 변경할 수 있습니다. 여기에서 MR을 생성하는 기능은 향후 이터레이션에서 추가할 예정입니다.

컴포넌트 API 레퍼런스#

Props#

• template(필수): 파싱되지 않은 문자열 형태의 템플릿 내용입니다. 자세한 내용은 템플릿 파일 위치를 참고합니다.
• project-path(필수): 최종 파일이 커밋될 프로젝트의 전체 경로입니다.
• default-branch(필수): 커밋 단계에서 미리 선택되는 브랜치입니다. 사용자가 변경할 수 있습니다.
• default-filename(선택 사항, 기본값: .gitlab-ci.yml): 파일에 사용할 파일 이름입니다. 템플릿 파일에서 재정의할 수 있습니다.

이벤트#

• done - 파일이 커밋된 뒤에 발생합니다. 예를 들어 사용자를 파이프라인으로 리다이렉트하는 데 사용합니다.

템플릿 파일 위치#

템플릿 파일은 보통 ~/pipeline_wizard/templates/에 YAML 파일로 저장합니다.

PipelineWizard 컴포넌트는 template 속성을 파싱되지 않은 String으로 받으며, Webpack은 위 폴더의 .yml 파일을 문자열로 로드하도록 구성되어 있습니다. 다른 위치에서 파일을 로드해야 한다면 Webpack 이 이를 Object로 파싱하지 않도록 합니다.

템플릿 레퍼런스#

템플릿#

템플릿 파일의 루트 요소에서는 다음 속성을 정의할 수 있습니다.

step 레퍼런스#

step은 여러 단계(또는 페이지)로 이루어진 과정에서 한 페이지를 구성합니다. 최종 .gitlab-ci.yml의 일부를 만드는, 서로 관련된 입력 필드 하나 이상으로 구성됩니다.

step에는 두 가지 속성이 있습니다.

input 레퍼런스#

각 step에는 하나 이상의 inputs를 넣을 수 있습니다. 사용자 경험을 고려하면 세 개를 넘지 않는 것이 좋습니다.

입력의 형태와 입력이 만들어 내는 YAML 타입(문자열, 리스트 등)은 사용하는 widget에 따라 달라집니다. widget: text는 텍스트 입력을 표시하고 사용자의 입력을 문자열로 템플릿에 삽입합니다. widget: list는 입력 필드를 하나 이상 표시하고 리스트를 삽입합니다.

모든 inputs에는 label과 widget 이 있어야 하고 target은 선택 사항이지만, 대부분의 속성은 사용하는 위젯에 따라 달라집니다.

위젯#

텍스트#

widget: text로 사용합니다. YAML 파일에 string을 삽입합니다.

리스트#

widget: list로 사용합니다. YAML 파일에 list를 삽입합니다.

체크리스트#

widget: checklist로 사용합니다. 다음 단계로 진행하기 전에 체크해야 하는 체크박스 목록을 삽입합니다.

체크리스트 항목#