Skip to content

Add Pages Deployments to Pages UI

Janis Altherr requested to merge janis-add-deployments-to-pages-ui into master

What does this MR do and why?

This MR adds the PagesDeployments (plural) component that will display a list of primary and environment-scoped PagesDeployments within the Pages UI.

The actual PagesDeployment component is added in another MR: !156180 (merged), so this MR only contains a placeholder component.

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

Screenshot_2024-06-13_at_15.43.26

How to set up and validate locally

  1. Set up your GDK to support Runners and Pages
  2. Enable the multi version feature flag with echo "Feature.enable(\"pages_multiple_versions_setting\")" | rails c
  3. Enable the ui feature flag with echo "Feature.enable(\"new_pages_ui\")" | rails c
  4. Apply the below patch to be able to view data for the deployments:
Subject: [PATCH] display some data for PagesDeployment
---
Index: app/assets/javascripts/gitlab_pages/components/deployment.vue
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/assets/javascripts/gitlab_pages/components/deployment.vue b/app/assets/javascripts/gitlab_pages/components/deployment.vue
--- a/app/assets/javascripts/gitlab_pages/components/deployment.vue	(revision 13b29d0c1282f0230cd9d5c590669cc7cb530956)
+++ b/app/assets/javascripts/gitlab_pages/components/deployment.vue	(date 1718285656293)
@@ -1,9 +1,15 @@
 <script>
 export default {
   name: 'PagesDeployment',
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+  },
 };
 </script>
 
 <template>
-  <div></div>
+  <pre>{{ deployment }}</pre>
 </template>
  1. Create a Pages project, by creating a new project with the "pages/Plain HTML" template.
  2. Replace the below config in the .gitlab-ci.yml:
# This file is a template, and might need editing before it works on your project.
# Full project: https://gitlab.com/pages/plain-html

image: busybox

pages:
  stage: deploy
  script:
    - echo "Pages accessible through ${CI_PAGES_URL}/${PAGES_PREFIX}"
  variables:
    PAGES_PREFIX: "" # no prefix by default (master)
  pages:
    path_prefix: "$PAGES_PREFIX"
  artifacts:
    paths:
    - public
  rules:
    - if: $CI_COMMIT_BRANCH == "master" # ensure to run on master (with default PAGES_PREFIX)
      variables:
        PAGES_PREFIX: '' # prefix with _stg for the staging branch
    - if: $CI_PIPELINE_SOURCE == "merge_request_event" # conditionally change the prefix on Merge Requests
      variables:
        PAGES_PREFIX: 'mr$CI_MERGE_REQUEST_IID' # prefix with the mr<iid>, like `mr123`
  1. Ensure the pipeline runs successfully and you have a pages deployment
  2. Create an MR in the project. Ensure the MR's pipeline creates a Pages deployment.
  3. Go to "Deploy > Pages". You should now see the deployments as JSON objects (the actual interface is being added in !156180 (merged))

closes #454476 (closed)

Edited by Janis Altherr

Merge request reports