Display the tier of the environment on page

Environments fall into one of 5 tiers:

- production
- staging
- development
- testing
- other

Displaying the tier helps a user to categorize their environments at a
glance.

Changelog: added

app/assets/javascripts/environments/components/new_environment_item.vue

@@ -2,6 +2,7 @@
 import {
   GlCollapse,
   GlDropdown,
+  GlBadge,
   GlButton,
   GlLink,
   GlSprintf,
@@ -26,6 +27,7 @@ export default {
   components: {
     GlCollapse,
     GlDropdown,
+    GlBadge,
     GlButton,
     GlLink,
     GlSprintf,
@@ -74,6 +76,7 @@ export default {
       'Environments|There are no deployments for this environment yet. %{linkStart}Learn more about setting up deployments.%{linkEnd}',
     ),
     autoStopIn: s__('Environment|Auto stop %{time}'),
+    tierTooltip: s__('Environment|Deployment tier'),
   },
   data() {
     return { visible: false };
@@ -100,6 +103,9 @@ export default {
     hasDeployment() {
       return Boolean(this.environment?.upcomingDeployment || this.environment?.lastDeployment);
     },
+    tier() {
+      return this.lastDeployment?.tierInYaml;
+    },
     hasOpenedAlert() {
       return this.environment?.hasOpenedAlert;
     },
@@ -206,6 +212,13 @@ export default {
         >
           {{ displayName }}
         </gl-link>
+        <gl-badge
+          v-if="tier"
+          v-gl-tooltip
+          :title="$options.i18n.tierTooltip"
+          class="gl-ml-3 gl-font-monospace"
+          >{{ tier }}</gl-badge
+        >
       </div>
       <div class="gl-display-flex gl-align-items-center">
         <p v-if="canShowAutoStopDate" class="gl-font-sm gl-text-gray-700 gl-mr-5 gl-mb-0">

app/assets/javascripts/environments/graphql/resolvers.js

@@ -24,7 +24,7 @@ const mapNestedEnvironment = (env) => ({
   __typename: 'NestedLocalEnvironment',
 });
 const mapEnvironment = (env) => ({
-  ...convertObjectPropsToCamelCase(env),
+  ...convertObjectPropsToCamelCase(env, { deep: true }),
   __typename: 'LocalEnvironment',
 });
 

app/models/deployment.rb

@@ -380,6 +380,12 @@ class Deployment < ApplicationRecord
       status == params[:status]
   end
 
+  def tier_in_yaml
+    return unless deployable
+
+    deployable.environment_deployment_tier
+  end
+
   private
 
   def update_status!(status)

app/serializers/deployment_entity.rb

@@ -23,6 +23,7 @@ class DeploymentEntity < Grape::Entity
   expose :tag
   expose :last?
   expose :last?, as: :is_last
+  expose :tier_in_yaml
 
   expose :deployed_by, as: :user, using: UserEntity
 

locale/gitlab.pot

@@ -14395,6 +14395,9 @@ msgstr ""
 msgid "Environment|Auto stop %{time}"
 msgstr ""
 
+msgid "Environment|Deployment tier"
+msgstr ""
+
 msgid "Epic"
 msgstr ""
 

spec/frontend/environments/graphql/mock_data.js

@@ -543,6 +543,7 @@ export const resolvedEnvironment = {
   externalUrl: 'https://example.org',
   environmentType: 'review',
   nameWithoutType: 'hello',
+  tier: 'development',
   lastDeployment: {
     id: 78,
     iid: 24,
@@ -551,6 +552,7 @@ export const resolvedEnvironment = {
     status: 'success',
     createdAt: '2022-01-07T15:47:27.415Z',
     deployedAt: '2022-01-07T15:47:32.450Z',
+    tierInYaml: 'staging',
     tag: false,
     isLast: true,
     user: {

spec/frontend/environments/new_environment_item_spec.js

@@ -73,6 +73,34 @@ describe('~/environments/components/new_environment_item.vue', () => {
     expect(name.text()).toHaveLength(80);
   });
 
+  describe('tier', () => {
+    it('displays the tier of the environment when defined in yaml', () => {
+      wrapper = createWrapper({ apolloProvider: createApolloProvider() });
+
+      const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));
+
+      expect(tier.text()).toBe(resolvedEnvironment.lastDeployment.tierInYaml);
+    });
+
+    it('does not display the tier if not defined in yaml', () => {
+      const environment = {
+        ...resolvedEnvironment,
+        lastDeployment: {
+          ...resolvedEnvironment.lastDeployment,
+          tierInYaml: null,
+        },
+      };
+      wrapper = createWrapper({
+        propsData: { environment },
+        apolloProvider: createApolloProvider(),
+      });
+
+      const tier = wrapper.findByTitle(s__('Environment|Deployment tier'));
+
+      expect(tier.exists()).toBe(false);
+    });
+  });
+
   describe('url', () => {
     it('shows a link for the url if one is present', () => {
       wrapper = createWrapper({ apolloProvider: createApolloProvider() });

spec/models/deployment_spec.rb

@@ -1055,6 +1055,40 @@ RSpec.describe Deployment do
     end
   end
 
+  describe '#tier_in_yaml' do
+    context 'when deployable is nil' do
+      before do
+        subject.deployable = nil
+      end
+
+      it 'returns nil' do
+        expect(subject.tier_in_yaml).to be_nil
+      end
+    end
+
+    context 'when deployable is present' do
+      context 'when tier is specified' do
+        let(:deployable) { create(:ci_build, :success, :environment_with_deployment_tier) }
+
+        before do
+          subject.deployable = deployable
+        end
+
+        it 'returns the tier' do
+          expect(subject.tier_in_yaml).to eq('testing')
+        end
+
+        context 'when tier is not specified' do
+          let(:deployable) { create(:ci_build, :success) }
+
+          it 'returns nil' do
+            expect(subject.tier_in_yaml).to be_nil
+          end
+        end
+      end
+    end
+  end
+
   describe '.fast_destroy_all' do
     it 'cleans path_refs for destroyed environments' do
       project = create(:project, :repository)

spec/serializers/deployment_entity_spec.rb

@@ -9,7 +9,7 @@ RSpec.describe DeploymentEntity do
   let(:project) { create(:project, :repository) }
   let(:request) { double('request') }
   let(:deployment) { create(:deployment, deployable: build, project: project) }
-  let(:build) { create(:ci_build, :manual, pipeline: pipeline) }
+  let(:build) { create(:ci_build, :manual, :environment_with_deployment_tier, pipeline: pipeline) }
   let(:pipeline) { create(:ci_pipeline, project: project, user: user) }
   let(:entity) { described_class.new(deployment, request: request) }
 
@@ -46,6 +46,10 @@ RSpec.describe DeploymentEntity do
     expect(subject).to include(:is_last)
   end
 
+  it 'exposes deployment tier in yaml' do
+    expect(subject).to include(:tier_in_yaml)
+  end
+
   context 'when deployable is nil' do
     let(:entity) { described_class.new(deployment, request: request, deployment_details: false) }
     let(:deployment) { create(:deployment, deployable: nil, project: project) }