From a5ca23c5cf5b6d515865c1c5051d3cf92b49dfcb Mon Sep 17 00:00:00 2001
From: Anna Vovchenko <avovchenko@gitlab.com>
Date: Mon, 18 Mar 2024 22:02:27 +0000
Subject: [PATCH] Show deployment count
Update the deployments history tab title to show the count.
Changelog: changed
---
.../environments/environment_details/index.vue | 16 ++++++++++------
.../environment_cluster_agent.query.graphql | 1 +
app/presenters/environment_presenter.rb | 2 +-
.../environment_details/index_spec.js | 10 ++++++++--
spec/presenters/environment_presenter_spec.rb | 2 +-
5 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/app/assets/javascripts/environments/environment_details/index.vue b/app/assets/javascripts/environments/environment_details/index.vue
index 3a22e9c4eb938..ff08f9d22b665 100644
--- a/app/assets/javascripts/environments/environment_details/index.vue
+++ b/app/assets/javascripts/environments/environment_details/index.vue
@@ -1,6 +1,6 @@
<!-- eslint-disable vue/multi-word-component-names -->
<script>
-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
import { s__ } from '~/locale';
import { getParameterValues, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
import environmentClusterAgentQuery from '~/environments/graphql/queries/environment_cluster_agent.query.graphql';
@@ -12,6 +12,7 @@ export default {
GlLoadingIcon,
GlTabs,
GlTab,
+ GlBadge,
DeploymentHistory,
KubernetesOverview,
},
@@ -113,11 +114,14 @@ export default {
/>
</gl-tab>
- <gl-tab
- :title="$options.i18n.deploymentHistory"
- :query-param-value="$options.params.deployments"
- :title-link-class="linkClass(1)"
- >
+ <gl-tab :query-param-value="$options.params.deployments" :title-link-class="linkClass(1)">
+ <template #title>
+ {{ $options.i18n.deploymentHistory }}
+ <gl-badge size="sm" class="gl-tab-counter-badge">{{
+ environment.deploymentsDisplayCount
+ }}</gl-badge>
+ </template>
+
<deployment-history
:project-full-path="projectFullPath"
:environment-name="environmentName"
diff --git a/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql b/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
index 3f8874f2a8d88..04e919db54672 100644
--- a/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
+++ b/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
@@ -3,6 +3,7 @@ query getEnvironmentClusterAgent($projectFullPath: ID!, $environmentName: String
id
environment(name: $environmentName) {
id
+ deploymentsDisplayCount
fluxResourcePath
kubernetesNamespace
clusterAgent {
diff --git a/app/presenters/environment_presenter.rb b/app/presenters/environment_presenter.rb
index 4888dd15f0468..9b2a5993a347e 100644
--- a/app/presenters/environment_presenter.rb
+++ b/app/presenters/environment_presenter.rb
@@ -11,7 +11,7 @@ def path
end
def deployments_display_count
- count = deployments.limit(MAX_DEPLOYMENTS_COUNT).count
+ count = all_deployments.limit(MAX_DEPLOYMENTS_COUNT).count
count >= MAX_DEPLOYMENTS_COUNT ? MAX_DISPLAY_COUNT : count.to_s
end
end
diff --git a/spec/frontend/environments/environment_details/index_spec.js b/spec/frontend/environments/environment_details/index_spec.js
index 783dcac69e730..5e0a2a9a54342 100644
--- a/spec/frontend/environments/environment_details/index_spec.js
+++ b/spec/frontend/environments/environment_details/index_spec.js
@@ -1,4 +1,4 @@
-import { GlLoadingIcon, GlTabs, GlTab } from '@gitlab/ui';
+import { GlLoadingIcon, GlTabs, GlTab, GlBadge } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue, { nextTick } from 'vue';
import VueApollo from 'vue-apollo';
@@ -33,6 +33,7 @@ describe('~/environments/environment_details/index.vue', () => {
clusterAgent,
kubernetesNamespace,
fluxResourcePath: fluxResourcePathMock,
+ deploymentsDisplayCount: 3,
},
},
},
@@ -59,6 +60,7 @@ describe('~/environments/environment_details/index.vue', () => {
const findTabByIndex = (index) => findAllTabs().at(index);
const findDeploymentHistory = () => wrapper.findComponent(DeploymentsHistory);
const findKubernetesOverview = () => wrapper.findComponent(KubernetesOverview);
+ const findTabBadge = () => wrapper.findComponent(GlBadge);
describe('loading state', () => {
beforeEach(() => {
@@ -134,7 +136,11 @@ describe('~/environments/environment_details/index.vue', () => {
});
it('renders correct title', () => {
- expect(findTabByIndex(1).attributes('title')).toBe('Deployment history');
+ expect(findTabByIndex(1).text()).toContain('Deployment history');
+ });
+
+ it('renders a badge with the correct number of deployments', () => {
+ expect(findTabBadge().text()).toBe('3');
});
it('renders correct query param value', () => {
diff --git a/spec/presenters/environment_presenter_spec.rb b/spec/presenters/environment_presenter_spec.rb
index 31a7e5f939dc6..b24cae4fb178e 100644
--- a/spec/presenters/environment_presenter_spec.rb
+++ b/spec/presenters/environment_presenter_spec.rb
@@ -12,7 +12,7 @@
before do
stub_const("#{described_class}::MAX_DEPLOYMENTS_COUNT", 5)
- allow(environment).to receive_message_chain(:deployments,
+ allow(environment).to receive_message_chain(:all_deployments,
:limit).with(described_class::MAX_DEPLOYMENTS_COUNT).and_return(deployments_list)
end
--
GitLab