1 files changed, 8 insertions, 44 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>