Add Geo Name to Header

Move Node URL to body

https://gitlab.com/gitlab-org/gitlab/merge_requests/21876

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

@@ -70,7 +70,7 @@ export default {
     <div class="row">
       <div class="col-md-8 clearfix">
         <span class="d-flex align-items-center float-left append-right-10">
-          <strong class="node-url"> {{ node.url }} </strong>
+          <strong>{{ node.name }}</strong>
           <gl-loading-icon
             v-if="nodeDetailsLoading || node.nodeActionActive"
             class="node-details-loading prepend-left-10 inline"

ee/app/assets/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main.vue

@@ -48,14 +48,20 @@ export default {
 <template>
   <div class="row-fluid clearfix py-3 primary-section">
     <div class="col-md-8">
-      <div>
-        <div class="text-secondary-700 node-detail-title">{{ s__('GeoNodes|GitLab version') }}</div>
-        <div
+      <div class="d-flex flex-column">
+        <span class="text-secondary-700 js-node-url-title">{{ s__('GeoNodes|Node URL') }}</span>
+        <span class="mt-1 font-weight-bold js-node-url-value">{{ node.url }}</span>
+      </div>
+      <div class="d-flex flex-column mt-2">
+        <span class="text-secondary-700 js-node-version-title">{{
+          s__('GeoNodes|GitLab version')
+        }}</span>
+        <span
           :class="{ 'text-danger-500': versionMismatch }"
-          class="mt-1 font-weight-bold node-detail-value"
+          class="mt-1 font-weight-bold js-node-version-value"
         >
           {{ nodeVersion }}
-        </div>
+        </span>
       </div>
       <geo-node-health-status :status="nodeHealthStatus" />
     </div>

ee/app/assets/javascripts/geo_nodes/store/geo_nodes_store.js

@@ -41,9 +41,10 @@ export default class GeoNodesStore {
   }
 
   static formatNode(rawNode) {
-    const { id, url, primary, current, enabled } = rawNode;
+    const { id, name, url, primary, current, enabled } = rawNode;
     return {
       id,
+      name,
       url,
       primary,
       current,

ee/changelogs/unreleased/11326_01-node-name-on-card.yml

+---
+title: Show Geo node's name in admin page
+merge_request: 21876
+author:
+type: changed

ee/spec/javascripts/geo_nodes/components/geo_node_header_spec.js

@@ -92,4 +92,10 @@ describe('GeoNodeHeader', () => {
       });
     });
   });
+
+  describe('template', () => {
+    it('renders node name element', () => {
+      expect(vm.$el.innerText).toContain(vm.node.name);
+    });
+  });
 });

ee/spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_main_spec.js

@@ -4,6 +4,8 @@ import NodeDetailsSectionMainComponent from 'ee/geo_nodes/components/node_detail
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 import { mockNode, mockNodeDetails } from 'ee_spec/geo_nodes/mock_data';
 
+const MOCK_VERSION_TEXT = `${mockNodeDetails.version} (${mockNodeDetails.revision})`;
+
 const createComponent = ({
   node = Object.assign({}, mockNode),
   nodeDetails = Object.assign({}, mockNodeDetails),
@@ -47,7 +49,7 @@ describe('NodeDetailsSectionMain', () => {
       });
 
       it('returns version string', () => {
-        expect(vm.nodeVersion).toBe('10.4.0-pre (b93c51849b)');
+        expect(vm.nodeVersion).toBe(MOCK_VERSION_TEXT);
       });
     });
 
@@ -74,10 +76,18 @@ describe('NodeDetailsSectionMain', () => {
       expect(vm.$el.classList.contains('primary-section')).toBe(true);
     });
 
+    it('renders node url element', () => {
+      expect(vm.$el.querySelector('.js-node-url-title').innerText.trim()).toBe('Node URL');
+      expect(vm.$el.querySelector('.js-node-url-value').innerText.trim()).toBe(vm.node.url);
+    });
+
     it('renders node version element', () => {
-      expect(vm.$el.querySelector('.node-detail-title').innerText.trim()).toBe('GitLab version');
-      expect(vm.$el.querySelector('.node-detail-value').innerText.trim()).toBe(
-        '10.4.0-pre (b93c51849b)',
+      expect(vm.$el.querySelector('.js-node-version-title').innerText.trim()).toBe(
+        'GitLab version',
+      );
+
+      expect(vm.$el.querySelector('.js-node-version-value').innerText.trim()).toBe(
+        MOCK_VERSION_TEXT,
       );
     });
   });

ee/spec/javascripts/geo_nodes/mock_data.js

@@ -8,6 +8,7 @@ export const NODE_DETAILS_PATH = '/admin/geo/nodes';
 export const mockNodes = [
   {
     id: 1,
+    name: 'Test Node 1',
     url: 'http://127.0.0.1:3001/',
     primary: true,
     enabled: true,
@@ -26,6 +27,7 @@ export const mockNodes = [
   },
   {
     id: 2,
+    name: 'Test Node 2',
     url: 'http://127.0.0.1:3002/',
     primary: false,
     enabled: true,
@@ -47,6 +49,7 @@ export const mockNodes = [
 
 export const mockNode = {
   id: 1,
+  name: 'Test Node',
   url: 'http://127.0.0.1:3001/',
   internalUrl: 'http://127.0.0.1:3001/',
   primary: true,

locale/gitlab.pot

@@ -8288,6 +8288,9 @@ msgstr ""
 msgid "GeoNodes|Node Authentication was successfully repaired."
 msgstr ""
 
+msgid "GeoNodes|Node URL"
+msgstr ""
+
 msgid "GeoNodes|Node was successfully removed."
 msgstr ""