Merge branch 'fix/49388' into 'master'

Fix metrics graphs environments dropdown

Closes #49388

See merge request gitlab-org/gitlab-ce!24441

6 files changed, 22 insertions, 20 deletions

diff --git a/app/assets/javascripts/environments/mixins/environments_mixin.js b/app/assets/javascripts/environments/mixins/environments_mixin.js
index 96dc1f07cb9..e81a1525df0 100644
--- a/app/assets/javascripts/environments/mixins/environments_mixin.js
+++ b/app/assets/javascripts/environments/mixins/environments_mixin.js
@@ -143,7 +143,7 @@ export default {
    */
   created() {
     this.service = new EnvironmentsService(this.endpoint);
-    this.requestData = { page: this.page, scope: this.scope };
+    this.requestData = { page: this.page, scope: this.scope, nested: true };
 
     this.poll = new Poll({
       resource: this.service,
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
index 4e07ccba91a..cb4ff6856db 100644
--- a/app/assets/javascripts/environments/services/environments_service.js
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -7,8 +7,8 @@ export default class EnvironmentsService {
   }
 
   fetchEnvironments(options = {}) {
-    const { scope, page } = options;
-    return axios.get(this.environmentsEndpoint, { params: { scope, page } });
+    const { scope, page, nested } = options;
+    return axios.get(this.environmentsEndpoint, { params: { scope, page, nested } });
   }
 
   // eslint-disable-next-line class-methods-use-this
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
index 5808a2d4afa..ac9a31c202c 100644
--- a/app/assets/javascripts/environments/stores/environments_store.js
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -20,7 +20,8 @@ export default class EnvironmentsStore {
    *
    * Stores the received environments.
    *
-   * In the main environments endpoint, each environment has the following schema
+   * In the main environments endpoint (with { nested: true } in params), each folder
+   * has the following schema:
    * { name: String, size: Number, latest: Object }
    * In the endpoint to retrieve environments from each folder, the environment does
    * not have the `latest` key and the data is all in the root level.
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index cea5c1a56ca..973fc8e10c9 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -196,13 +196,13 @@ export default {
           class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"
         >
           <ul>
-            <li v-for="environment in store.environmentsData" :key="environment.latest.id">
+            <li v-for="environment in store.environmentsData" :key="environment.id">
               <a
-                :href="environment.latest.metrics_path"
-                :class="{ 'is-active': environment.latest.name == currentEnvironmentName }"
+                :href="environment.metrics_path"
+                :class="{ 'is-active': environment.name == currentEnvironmentName }"
                 class="dropdown-item"
               >
-                {{ environment.latest.name }}
+                {{ environment.name }}
               </a>
             </li>
           </ul>
diff --git a/app/assets/javascripts/monitoring/stores/monitoring_store.js b/app/assets/javascripts/monitoring/stores/monitoring_store.js
index 8692c873a41..96ecc5ab8a8 100644
--- a/app/assets/javascripts/monitoring/stores/monitoring_store.js
+++ b/app/assets/javascripts/monitoring/stores/monitoring_store.js
@@ -66,9 +66,7 @@ export default class MonitoringStore {
   }
 
   storeEnvironmentsData(environmentsData = []) {
-    this.environmentsData = environmentsData.filter(
-      environment => !!environment.latest.last_deployment,
-    );
+    this.environmentsData = environmentsData.filter(environment => !!environment.last_deployment);
   }
 
   getMetricsCount() {
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index a63eea0ca0e..1a1b024d766 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -15,6 +15,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     push_frontend_feature_flag(:area_chart, project)
   end
 
+  # Returns all environments or all folders based on the :nested param
   def index
     @environments = project.environments
       .with_state(params[:scope] || :available)
@@ -25,11 +26,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
         Gitlab::PollingInterval.set_header(response, interval: 3_000)
 
         render json: {
-          environments: EnvironmentSerializer
-            .new(project: @project, current_user: @current_user)
-            .with_pagination(request, response)
-            .within_folders
-            .represent(@environments),
+          environments: serialize_environments(request, response, params[:nested]),
           available_count: project.environments.available.count,
           stopped_count: project.environments.stopped.count
         }
@@ -37,6 +34,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     end
   end
 
+  # Returns all environments for a given folder
   # rubocop: disable CodeReuse/ActiveRecord
   def folder
     folder_environments = project.environments.where(environment_type: params[:id])
@@ -48,10 +46,7 @@ class Projects::EnvironmentsController < Projects::ApplicationController
       format.html
       format.json do
         render json: {
-          environments: EnvironmentSerializer
-            .new(project: @project, current_user: @current_user)
-            .with_pagination(request, response)
-            .represent(@environments),
+          environments: serialize_environments(request, response),
           available_count: folder_environments.available.count,
           stopped_count: folder_environments.stopped.count
         }
@@ -186,6 +181,14 @@ class Projects::EnvironmentsController < Projects::ApplicationController
     @environment ||= project.environments.find(params[:id])
   end
 
+  def serialize_environments(request, response, nested = false)
+    serializer = EnvironmentSerializer
+      .new(project: @project, current_user: @current_user)
+      .with_pagination(request, response)
+    serializer = serializer.within_folders if nested
+    serializer.represent(@environments)
+  end
+
   def authorize_stop_environment!
     access_denied! unless can?(current_user, :stop_environment, environment)
   end