Move out the replication slots items to the other information section

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

@@ -75,8 +75,8 @@
       :node-type-primary="node.primary"
     />
     <node-details-section-other
-      v-if="!node.primary"
       :node-details="nodeDetails"
+      :node-type-primary="node.primary"
     />
     <div
       v-if="hasError || hasVersionMismatch"

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

 <script>
   import { s__, __ } from '~/locale';
+  import { numberToHumanSize } from '~/lib/utils/number_utils';
 
   import { VALUE_TYPE } from '../../constants';
 
@@ -17,13 +18,24 @@
         type: Object,
         required: true,
       },
+      nodeTypePrimary: {
+        type: Boolean,
+        required: true,
+      },
     },
     data() {
       return {
         showSectionItems: false,
+        primaryNodeDetailItems: this.getPrimaryNodeDetailItems(),
+        secondaryNodeDetailItems: this.getSecondaryNodeDetailItems(),
       };
     },
     computed: {
+      nodeDetailItems() {
+        return this.nodeTypePrimary ?
+          this.getPrimaryNodeDetailItems() :
+          this.getSecondaryNodeDetailItems();
+      },
       storageShardsStatus() {
         if (this.nodeDetails.storageShardsMatch == null) {
           return __('Unknown');
@@ -36,6 +48,42 @@
       },
     },
     methods: {
+      getPrimaryNodeDetailItems() {
+        const primaryNodeDetailItems = [
+          {
+            itemTitle: s__('GeoNodes|Replication slots'),
+            itemValue: this.nodeDetails.replicationSlots,
+            itemValueType: VALUE_TYPE.GRAPH,
+            successLabel: s__('GeoNodes|Used slots'),
+            neutraLabel: s__('GeoNodes|Unused slots'),
+          },
+        ];
+
+        if (this.nodeDetails.replicationSlots.totalCount) {
+          primaryNodeDetailItems.push(
+            {
+              itemTitle: s__('GeoNodes|Replication slot WAL'),
+              itemValue: numberToHumanSize(this.nodeDetails.replicationSlotWAL),
+              itemValueType: VALUE_TYPE.PLAIN,
+              cssClass: 'node-detail-value-bold',
+            },
+          );
+        }
+
+        return primaryNodeDetailItems;
+      },
+      getSecondaryNodeDetailItems() {
+        const secondaryNodeDetailItems = [
+          {
+            itemTitle: s__('GeoNodes|Storage config'),
+            itemValue: this.storageShardsStatus,
+            itemValueType: VALUE_TYPE.PLAIN,
+            cssClass: this.storageShardsCssClass,
+          },
+        ];
+
+        return secondaryNodeDetailItems;
+      },
       handleSectionToggle(toggleState) {
         this.showSectionItems = toggleState;
       },
@@ -56,10 +104,14 @@
       class="col-md-6 prepend-left-15 prepend-top-10 section-items-container"
     >
       <geo-node-detail-item
-        :item-title="s__('GeoNodes|Storage config')"
-        :item-value="storageShardsStatus"
-        :item-value-type="$options.valueType.PLAIN"
-        :css-class="storageShardsCssClass"
+        v-for="(nodeDetailItem, index) in nodeDetailItems"
+        :key="index"
+        :css-class="nodeDetailItem.cssClass"
+        :item-title="nodeDetailItem.itemTitle"
+        :item-value="nodeDetailItem.itemValue"
+        :item-value-type="nodeDetailItem.itemValueType"
+        :success-label="nodeDetailItem.successLabel"
+        :neutral-label="nodeDetailItem.neutraLabel"
       />
     </div>
   </div>

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

 <script>
   import { s__ } from '~/locale';
-  import { numberToHumanSize } from '~/lib/utils/number_utils';
 
   import { VALUE_TYPE, HELP_INFO_URL } from '../../constants';
 
@@ -77,27 +76,6 @@
           );
         }
 
-        primaryNodeDetailItems.push(
-          {
-            itemTitle: s__('GeoNodes|Replication slots'),
-            itemValue: this.nodeDetails.replicationSlots,
-            itemValueType: VALUE_TYPE.GRAPH,
-            successLabel: s__('GeoNodes|Used slots'),
-            neutraLabel: s__('GeoNodes|Unused slots'),
-          },
-        );
-
-        if (this.nodeDetails.replicationSlots.totalCount) {
-          primaryNodeDetailItems.push(
-            {
-              itemTitle: s__('GeoNodes|Replication slot WAL'),
-              itemValue: numberToHumanSize(this.nodeDetails.replicationSlotWAL),
-              itemValueType: VALUE_TYPE.PLAIN,
-              cssClass: 'node-detail-value-bold',
-            },
-          );
-        }
-
         return primaryNodeDetailItems;
       },
       getSecondaryNodeDetailItems() {

spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_other_spec.js

@@ -2,15 +2,18 @@ import Vue from 'vue';
 
 import NodeDetailsSectionOtherComponent from 'ee/geo_nodes/components/node_detail_sections/node_details_section_other.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { mockNodeDetails } from '../../mock_data';
 
 const createComponent = (
   nodeDetails = Object.assign({}, mockNodeDetails),
+  nodeTypePrimary = false,
 ) => {
   const Component = Vue.extend(NodeDetailsSectionOtherComponent);
 
   return mountComponent(Component, {
     nodeDetails,
+    nodeTypePrimary,
   });
 };
 
@@ -28,6 +31,10 @@ describe('NodeDetailsSectionOther', () => {
   describe('data', () => {
     it('returns default data props', () => {
       expect(vm.showSectionItems).toBe(false);
+      expect(Array.isArray(vm.primaryNodeDetailItems)).toBe(true);
+      expect(Array.isArray(vm.secondaryNodeDetailItems)).toBe(true);
+      expect(vm.primaryNodeDetailItems.length > 0).toBe(true);
+      expect(vm.secondaryNodeDetailItems.length > 0).toBe(true);
     });
   });
 
@@ -75,6 +82,32 @@ describe('NodeDetailsSectionOther', () => {
     });
   });
 
+  describe('methods', () => {
+    describe('getPrimaryNodeDetailItems', () => {
+      it('returns array containing items to show under primary node', () => {
+        const items = vm.getPrimaryNodeDetailItems();
+
+        expect(items.length).toBe(2);
+        expect(items[0].itemTitle).toBe('Replication slots');
+        expect(items[0].itemValue).toBe(mockNodeDetails.replicationSlots);
+        expect(items[1].itemTitle).toBe('Replication slot WAL');
+        expect(items[1].itemValue).toBe(numberToHumanSize(mockNodeDetails.replicationSlotWAL));
+      });
+    });
+
+    describe('getSecondaryNodeDetailItems', () => {
+      it('returns array containing items to show under secondary node', () => {
+        vm.nodeDetails.storageShardsMatch = true;
+
+        const items = vm.getSecondaryNodeDetailItems();
+
+        expect(items.length).toBe(1);
+        expect(items[0].itemTitle).toBe('Storage config');
+        expect(items[0].itemValue).toBe('OK');
+      });
+    });
+  });
+
   describe('template', () => {
     it('renders component container element', () => {
       expect(vm.$el.classList.contains('other-section')).toBe(true);

spec/javascripts/geo_nodes/components/node_detail_sections/node_details_section_verification_spec.js

@@ -66,10 +66,6 @@ describe('NodeDetailsSectionVerification', () => {
           title: 'Wiki checksum progress',
           valueProp: 'wikisChecksummed',
         },
-        {
-          title: 'Replication slots',
-          valueProp: 'replicationSlots',
-        },
       ];
 
       it('returns array containing items to show under primary node', () => {

spec/javascripts/geo_nodes/mock_data.js

@@ -153,8 +153,8 @@ export const mockNodeDetails = {
   storageShardsMatch: false,
   repositoryVerificationEnabled: true,
   replicationSlots: {
-    totalCount: null,
-    successCount: null,
+    totalCount: 1,
+    successCount: 1,
     failureCount: 0,
   },
   repositories: {