Filter out inactive environments in monitoring dropdown

  - add 'states' filter to environments graphQL query
  - use 'available' value to filter environments

app/assets/javascripts/monitoring/constants.js

@@ -109,3 +109,9 @@ export const initialStateKeys = [...endpointKeys, 'currentEnvironmentName'];
  * Constant to indicate if a metric exists in the database
  */
 export const NOT_IN_DB_PREFIX = 'NO_DB';
+
+/**
+ * graphQL environments API value for active environments.
+ * Used as a value for the 'states' query filter
+ */
+export const ENVIRONMENT_AVAILABLE_STATE = 'available';

app/assets/javascripts/monitoring/queries/getEnvironments.query.graphql

-query getEnvironments($projectPath: ID!, $search: String) {
+query getEnvironments($projectPath: ID!, $search: String, $states: [String!]) {
   project(fullPath: $projectPath) {
-    data: environments(search: $search) {
+    data: environments(search: $search, states: $states) {
       environments: nodes {
         name
         id

app/assets/javascripts/monitoring/stores/actions.js

@@ -10,7 +10,7 @@ import statusCodes from '../../lib/utils/http_status';
 import { backOff, convertObjectPropsToCamelCase } from '../../lib/utils/common_utils';
 import { s__, sprintf } from '../../locale';
 
-import { PROMETHEUS_TIMEOUT } from '../constants';
+import { PROMETHEUS_TIMEOUT, ENVIRONMENT_AVAILABLE_STATE } from '../constants';
 
 function prometheusMetricQueryParams(timeRange) {
   const { start, end } = convertToFixedRange(timeRange);
@@ -238,6 +238,7 @@ export const fetchEnvironmentsData = ({ state, dispatch }) => {
       variables: {
         projectPath: removeLeadingSlash(state.projectPath),
         search: state.environmentsSearchTerm,
+        states: [ENVIRONMENT_AVAILABLE_STATE],
       },
     })
     .then(resp =>

changelogs/unreleased/36162-monitoring-dashboard-should-list-only-active-environments-in-dropdo.yml

+---
+title: Show only active environments in monitoring dropdown
+merge_request: 28456
+author:
+type: changed

spec/frontend/monitoring/store/actions_spec.js

@@ -6,6 +6,7 @@ import statusCodes from '~/lib/utils/http_status';
 import * as commonUtils from '~/lib/utils/common_utils';
 import createFlash from '~/flash';
 import { defaultTimeRange } from '~/vue_shared/constants';
+import { ENVIRONMENT_AVAILABLE_STATE } from '~/monitoring/constants';
 
 import store from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
@@ -157,17 +158,21 @@ describe('Monitoring store actions', () => {
         variables: {
           projectPath: state.projectPath,
           search: searchTerm,
+          states: [ENVIRONMENT_AVAILABLE_STATE],
         },
       };
       state.environmentsSearchTerm = searchTerm;
-      mockMutate.mockReturnValue(Promise.resolve());
+      mockMutate.mockResolvedValue({});
 
       return testAction(
         fetchEnvironmentsData,
         null,
         state,
         [],
-        [{ type: 'requestEnvironmentsData' }, { type: 'receiveEnvironmentsDataFailure' }],
+        [
+          { type: 'requestEnvironmentsData' },
+          { type: 'receiveEnvironmentsDataSuccess', payload: [] },
+        ],
         () => {
           expect(mockMutate).toHaveBeenCalledWith(mutationVariables);
         },