Show services with Kubernetes integration

What does this MR do and why?

This MR adds the services data to the Environments page (Kubernetes integration section) according to the design.

This MR provides the feature overview.

Screenshots or screen recordings

Desktop	Mobile	Pagination

How to set up and validate locally

1. Enable KAS on your GDK (steps 1-2 from the guide).

2. Visit the Project -> Infrastructure -> Kubernetes clusters page and create an agent following the instruction from the modal.

   • Select the "Connect a cluster" button
   • The modal should pop up
   • In the modal select "Select an agent or enter a name to create new"
   • You probably won't have any configured agents to show up in the list, create a new one by typing the name of your choice
   • The button should appear at the bottom of the list saying "Create agent: <your-agent-name>"
   • Select the button and click "Register" in the next view.
   • Save the token to use it in the next point.

3. Please follow points 3-8 from the guide and then the (Optional) Deploy the GitLab Agent (agentk) with k3d section to create a local cluster and connect your agent with the cluster.

4. Visit Deployments -> Environments and create an environment.

5. The feature is currently behind a feature flag. Enable it by running:

   Feature.enable(:kas_user_access)

   and

   Feature.enable(:kas_user_access_project, Project.find(<your-project-id>))

6. Add a following configuration files inside your project, commit the following on the default branch:

   1. .gitlab/agents/<your-agent-name>/config.yaml:

      gitops:
        manifest_projects:
        - id: <your-group>/<your-project>
      user_access:
        access_as: 
          agent: {}
        projects:
        - id: <your-group>/<your-project>

   2. namespace.yaml

      apiVersion: v1
      kind: Namespace
      metadata:
        name: demo-k8s-app

   3. app.yaml

      apiVersion: apps/v1
      kind: Deployment
      metadata:
        name: app
        namespace: demo-k8s-app
      spec:
        replicas: 2
        selector:
          matchLabels:
            name: app
        template:
          metadata:
            labels:
              name: app
          spec:
            containers:
              - name: app
                image: learnk8s/first-k8s-app:1.0.0
                ports:
                  - containerPort: 80
                imagePullPolicy: Always
      ---
      apiVersion: v1
      kind: Service
      metadata:
        name: app
      spec:
        selector:
          name: app
        ports:
          - port: 8080
            targetPort: 80
      ---
      apiVersion: networking.k8s.io/v1
      kind: Ingress
      metadata:
        name: app
        annotations:
          nginx.ingress.kubernetes.io/rewrite-target: /
      spec:
        rules:
          - http:
              paths:
                - path: /second
                  pathType: Prefix
                  backend:
                    service:
                      name: app
                      port:
                        number: 8080

7. Visit your agent page to obtain the authentication cookie. Navigate to Infrastructure -> Kubernetes clusters -> Your agent name.

8. Note that the backend isn't ready yet, in order to see the changes, please use the mock agent data in the agent computed of new_environment_item.vue and change it to the relevant data for your created agent:

   return {
      project: '<your-group>/<your-project>',
      id: '<agent-id>',
      name: '<agent-name>',
    };
   

9. Navigate to the Environments page and verify that services are showing

10. To verify the error state, skip the 6th point

MR acceptance checklist

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

• I have evaluated the MR acceptance checklist for this MR.

Review progress:

• frontend developer review
• frontend maintainer review

Related to #390769 (closed)