Add latest changes from gitlab-org/gitlab@master

5 files changed, 57 insertions, 93 deletions

diff --git a/app/assets/javascripts/environments/components/kubernetes_agent_info.vue b/app/assets/javascripts/environments/components/kubernetes_agent_info.vue
index 7660912f93a..03bde8d64ac 100644
--- a/app/assets/javascripts/environments/components/kubernetes_agent_info.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_agent_info.vue
@@ -1,68 +1,37 @@
 <script>
-import { GlIcon, GlLink, GlSprintf, GlLoadingIcon, GlAlert } from '@gitlab/ui';
+import { GlIcon, GlLink, GlSprintf } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { getAgentLastContact, getAgentStatus } from '~/clusters_list/clusters_util';
 import { AGENT_STATUSES } from '~/clusters_list/constants';
 import { s__ } from '~/locale';
-import getK8sClusterAgentQuery from '../graphql/queries/k8s_cluster_agent.query.graphql';
 
 export default {
   components: {
     GlIcon,
     GlLink,
     GlSprintf,
-    GlLoadingIcon,
     TimeAgoTooltip,
-    GlAlert,
   },
   props: {
-    agentName: {
-      required: true,
-      type: String,
-    },
-    agentId: {
-      required: true,
-      type: String,
-    },
-    agentProjectPath: {
-      required: true,
-      type: String,
-    },
-  },
-  apollo: {
     clusterAgent: {
-      query: getK8sClusterAgentQuery,
-      variables() {
-        return {
-          agentName: this.agentName,
-          projectPath: this.agentProjectPath,
-        };
-      },
-      update: (data) => data?.project?.clusterAgent,
-      error() {
-        this.clusterAgent = null;
-      },
+      required: true,
+      type: Object,
     },
   },
-  data() {
-    return {
-      clusterAgent: null,
-    };
-  },
   computed: {
-    isLoading() {
-      return this.$apollo.queries.clusterAgent.loading;
-    },
     agentLastContact() {
       return getAgentLastContact(this.clusterAgent.tokens.nodes);
     },
     agentStatus() {
       return getAgentStatus(this.agentLastContact);
     },
+    agentId() {
+      return getIdFromGraphQLId(this.clusterAgent.id);
+    },
   },
   methods: {},
   i18n: {
-    loadingError: s__('ClusterAgents|An error occurred while loading your agent'),
     agentId: s__('ClusterAgents|Agent ID #%{agentId}'),
     neverConnectedText: s__('ClusterAgents|Never'),
   },
@@ -70,8 +39,7 @@ export default {
 };
 </script>
 <template>
-  <gl-loading-icon v-if="isLoading" inline />
-  <div v-else-if="clusterAgent" class="gl-text-gray-900">
+  <div class="gl-text-gray-900">
     <gl-icon name="kubernetes-agent" class="gl-text-gray-500" />
     <gl-link :href="clusterAgent.webPath" class="gl-mr-3">
       <gl-sprintf :message="$options.i18n.agentId"
@@ -92,8 +60,4 @@ export default {
       <span v-else>{{ $options.i18n.neverConnectedText }}</span>
     </span>
   </div>
-
-  <gl-alert v-else variant="danger" :dismissible="false">
-    {{ $options.i18n.loadingError }}
-  </gl-alert>
 </template>
diff --git a/app/assets/javascripts/environments/components/kubernetes_overview.vue b/app/assets/javascripts/environments/components/kubernetes_overview.vue
index 1f15c4daa2f..a849adfc755 100644
--- a/app/assets/javascripts/environments/components/kubernetes_overview.vue
+++ b/app/assets/javascripts/environments/components/kubernetes_overview.vue
@@ -2,7 +2,7 @@
 import { GlCollapse, GlButton, GlAlert } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import csrf from '~/lib/utils/csrf';
-import { getIdFromGraphQLId, isGid } from '~/graphql_shared/utils';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import KubernetesAgentInfo from './kubernetes_agent_info.vue';
 import KubernetesPods from './kubernetes_pods.vue';
 import KubernetesTabs from './kubernetes_tabs.vue';
@@ -18,17 +18,9 @@ export default {
   },
   inject: ['kasTunnelUrl'],
   props: {
-    agentName: {
+    clusterAgent: {
       required: true,
-      type: String,
-    },
-    agentId: {
-      required: true,
-      type: String,
-    },
-    agentProjectPath: {
-      required: true,
-      type: String,
+      type: Object,
     },
     namespace: {
       required: false,
@@ -50,8 +42,7 @@ export default {
       return this.isVisible ? this.$options.i18n.collapse : this.$options.i18n.expand;
     },
     gitlabAgentId() {
-      const id = isGid(this.agentId) ? getIdFromGraphQLId(this.agentId) : this.agentId;
-      return id.toString();
+      return getIdFromGraphQLId(this.clusterAgent.id).toString();
     },
     k8sAccessConfiguration() {
       return {
@@ -91,11 +82,7 @@ export default {
     </p>
     <gl-collapse :visible="isVisible" class="gl-md-pl-7 gl-md-pr-5 gl-mt-4">
       <template v-if="isVisible">
-        <kubernetes-agent-info
-          :agent-name="agentName"
-          :agent-id="agentId"
-          :agent-project-path="agentProjectPath"
-          class="gl-mb-5" />
+        <kubernetes-agent-info :cluster-agent="clusterAgent" class="gl-mb-5" />
 
         <gl-alert v-if="error" variant="danger" :dismissible="false" class="gl-mb-5">
           {{ error }}
diff --git a/app/assets/javascripts/environments/components/new_environment_item.vue b/app/assets/javascripts/environments/components/new_environment_item.vue
index 9ad31688329..72323c0e43e 100644
--- a/app/assets/javascripts/environments/components/new_environment_item.vue
+++ b/app/assets/javascripts/environments/components/new_environment_item.vue
@@ -13,6 +13,7 @@ import { truncate } from '~/lib/utils/text_utility';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import isLastDeployment from '../graphql/queries/is_last_deployment.query.graphql';
+import getEnvironmentClusterAgent from '../graphql/queries/environment_cluster_agent.query.graphql';
 import ExternalUrl from './environment_external_url.vue';
 import Actions from './environment_actions.vue';
 import StopComponent from './environment_stop.vue';
@@ -51,7 +52,7 @@ export default {
     GlTooltip,
   },
   mixins: [glFeatureFlagsMixin()],
-  inject: ['helpPagePath'],
+  inject: ['helpPagePath', 'projectPath'],
   props: {
     environment: {
       required: true,
@@ -81,7 +82,7 @@ export default {
     tierTooltip: s__('Environment|Deployment tier'),
   },
   data() {
-    return { visible: false };
+    return { visible: false, clusterAgent: null };
   },
   computed: {
     icon() {
@@ -163,23 +164,33 @@ export default {
     rolloutStatus() {
       return this.environment?.rolloutStatus;
     },
-    agent() {
-      return this.environment?.agent || {};
-    },
     isKubernetesOverviewAvailable() {
       return this.glFeatures?.kasUserAccessProject;
     },
-    hasRequiredAgentData() {
-      const { project, id, name } = this.agent || {};
-      return project && id && name;
-    },
     showKubernetesOverview() {
-      return this.isKubernetesOverviewAvailable && this.hasRequiredAgentData;
+      return Boolean(this.isKubernetesOverviewAvailable && this.clusterAgent);
     },
   },
   methods: {
-    toggleCollapse() {
+    toggleEnvironmentCollapse() {
       this.visible = !this.visible;
+
+      if (this.visible) {
+        this.getClusterAgent();
+      }
+    },
+    getClusterAgent() {
+      if (!this.isKubernetesOverviewAvailable || this.clusterAgent) return;
+
+      this.$apollo.addSmartQuery('environmentClusterAgent', {
+        variables() {
+          return { environmentName: this.environment.name, projectFullPath: this.projectPath };
+        },
+        query: getEnvironmentClusterAgent,
+        update(data) {
+          this.clusterAgent = data?.project?.environment?.clusterAgent;
+        },
+      });
     },
   },
   deploymentClasses: [
@@ -222,7 +233,7 @@ export default {
           :aria-label="label"
           size="small"
           category="secondary"
-          @click="toggleCollapse"
+          @click="toggleEnvironmentCollapse"
         />
         <gl-link
           v-gl-tooltip
@@ -359,10 +370,8 @@ export default {
       </div>
       <div v-if="showKubernetesOverview" :class="$options.kubernetesOverviewClasses">
         <kubernetes-overview
-          :agent-project-path="agent.project"
-          :agent-name="agent.name"
-          :agent-id="agent.id"
-          :namespace="agent.kubernetesNamespace"
+          :cluster-agent="clusterAgent"
+          :namespace="environment.kubernetesNamespace"
         />
       </div>
       <div v-if="rolloutStatus" :class="$options.deployBoardClasses">
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
new file mode 100644
index 00000000000..760f1fba897
--- /dev/null
+++ b/app/assets/javascripts/environments/graphql/queries/environment_cluster_agent.query.graphql
@@ -0,0 +1,19 @@
+query getEnvironmentClusterAgent($projectFullPath: ID!, $environmentName: String) {
+  project(fullPath: $projectFullPath) {
+    id
+    environment(name: $environmentName) {
+      id
+      clusterAgent {
+        id
+        name
+        webPath
+        tokens {
+          nodes {
+            id
+            lastUsedAt
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/environments/graphql/queries/k8s_cluster_agent.query.graphql b/app/assets/javascripts/environments/graphql/queries/k8s_cluster_agent.query.graphql
deleted file mode 100644
index bd45d2dba2f..00000000000
--- a/app/assets/javascripts/environments/graphql/queries/k8s_cluster_agent.query.graphql
+++ /dev/null
@@ -1,15 +0,0 @@
-query getK8sClusterAgentQuery($projectPath: ID!, $agentName: String!) {
-  project(fullPath: $projectPath) {
-    id
-    clusterAgent(name: $agentName) {
-      id
-      webPath
-      tokens {
-        nodes {
-          id
-          lastUsedAt
-        }
-      }
-    }
-  }
-}