Geo Node Status - Refactor Popovers

The Geo Node Progress Bars showed
some incorrect infomation based
on what data they were representing.

This change adds some custom props
to allow us to control the popover
labels.

ee/app/assets/javascripts/geo_nodes_beta/components/details/geo_node_progress_bar.vue

 <script>
-import { GlPopover, GlSprintf } from '@gitlab/ui';
+import { GlPopover } from '@gitlab/ui';
 import { toNumber } from 'lodash';
 import { __, s__ } from '~/locale';
 import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
@@ -7,16 +7,10 @@ import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue
 export default {
   name: 'GeoNodeSyncProgress',
   i18n: {
-    unavailableLabel: s__('Geo|Nothing to synchronize'),
-    popoverTitle: s__('Geo|Number of %{title}'),
     total: __('Total'),
-    synced: s__('Geo|Synced'),
-    queued: s__('Geo|Queued'),
-    failed: __('Failed'),
   },
   components: {
     GlPopover,
-    GlSprintf,
     StackedProgressBar,
   },
   props: {
@@ -33,6 +27,26 @@ export default {
       required: false,
       default: null,
     },
+    successLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Synced'),
+    },
+    queuedLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Queued'),
+    },
+    failedLabel: {
+      type: String,
+      required: false,
+      default: __('Failed'),
+    },
+    unavailableLabel: {
+      type: String,
+      required: false,
+      default: s__('Geo|Nothing to synchronize'),
+    },
   },
   computed: {
     queuedCount() {
@@ -60,7 +74,7 @@ export default {
       :id="popoverTarget"
       tabindex="0"
       hide-tooltips
-      :unavailable-label="$options.i18n.unavailableLabel"
+      :unavailable-label="unavailableLabel"
       :success-count="successCount"
       :failure-count="failureCount"
       :total-count="totalCount"
@@ -70,14 +84,8 @@ export default {
       placement="right"
       triggers="hover focus"
       :css-classes="['w-100']"
+      :title="title"
     >
-      <template #title>
-        <gl-sprintf :message="$options.i18n.popoverTitle">
-          <template #title>
-            {{ title }}
-          </template>
-        </gl-sprintf>
-      </template>
       <section>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-transparent gl-w-5 gl-h-2"></div>
@@ -86,17 +94,17 @@ export default {
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-green-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.synced }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ successLabel }}</span>
           <span class="gl-font-weight-bold">{{ successCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-gray-200 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.queued }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ queuedLabel }}</span>
           <span class="gl-font-weight-bold">{{ queuedCount.toLocaleString() }}</span>
         </div>
         <div class="gl-display-flex gl-align-items-center gl-my-3">
           <div class="gl-mr-3 gl-bg-red-500 gl-w-5 gl-h-2"></div>
-          <span class="gl-flex-fill-1 gl-mr-4">{{ $options.i18n.failed }}</span>
+          <span class="gl-flex-fill-1 gl-mr-4">{{ failedLabel }}</span>
           <span class="gl-font-weight-bold">{{ failureCount.toLocaleString() }}</span>
         </div>
       </section>

ee/app/assets/javascripts/geo_nodes_beta/components/details/primary_node/geo_node_primary_other_info.vue

@@ -11,6 +11,9 @@ export default {
     replicationSlotWAL: s__('Geo|Replication slot WAL'),
     replicationSlots: s__('Geo|Replication slots'),
     unknown: __('Unknown'),
+    used: __('Used'),
+    unused: __('Unused'),
+    noAvailableSlots: s__('Geo|No available replication slots'),
   },
   components: {
     GlCard,
@@ -52,6 +55,9 @@ export default {
         class="gl-mt-3"
         :title="replicationSlots.title"
         :values="replicationSlots.values"
+        :success-label="$options.i18n.used"
+        :queued-label="$options.i18n.unused"
+        :unavailable-label="$options.i18n.noAvailableSlots"
       />
     </div>
     <div class="gl-display-flex gl-flex-direction-column gl-mb-5">

ee/app/assets/javascripts/geo_nodes_beta/components/details/primary_node/geo_node_verification_info.vue

@@ -14,6 +14,8 @@ export default {
     ),
     learnMore: __('Learn more'),
     progressBarTitle: s__('Geo|%{title} checksum progress'),
+    checksummed: s__('Geo|Checksummed'),
+    nothingToChecksum: s__('Geo|Nothing to checksum'),
   },
   components: {
     GlCard,
@@ -64,6 +66,8 @@ export default {
         class="gl-mt-3"
         :title="sprintf($options.i18n.progressBarTitle, { title: bar.title })"
         :values="bar.values"
+        :success-label="$options.i18n.checksummed"
+        :unavailable-label="$options.i18n.nothingToChecksum"
       />
     </div>
   </gl-card>

ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_replication_details_responsive.vue

@@ -19,6 +19,8 @@ export default {
     nA: __('N/A'),
     progressBarSyncTitle: s__('Geo|%{component} synced'),
     progressBarVerifTitle: s__('Geo|%{component} verified'),
+    verified: s__('Geo|Verified'),
+    nothingToVerify: s__('Geo|Nothing to verify'),
   },
   components: {
     GlIcon,
@@ -94,6 +96,8 @@ export default {
             :title="sprintf($options.i18n.progressBarVerifTitle, { component: item.component })"
             :target="`verification-progress-${item.component}`"
             :values="item.verificationValues"
+            :success-label="$options.i18n.verified"
+            :unavailable-label="$options.i18n.nothingToVerify"
           />
           <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>
         </div>

ee/app/assets/javascripts/geo_nodes_beta/components/details/secondary_node/geo_node_replication_status_mobile.vue

@@ -38,6 +38,8 @@ export default {
         :title="sprintf(translations.progressBarVerifTitle, { component: item.component })"
         :target="`mobile-verification-progress-${item.component}`"
         :values="item.verificationValues"
+        :success-label="translations.verified"
+        :unavailable-label="translations.nothingToVerify"
       />
       <span v-else class="gl-text-gray-400 gl-font-sm">{{ translations.nA }}</span>
     </div>

ee/spec/frontend/geo_nodes_beta/components/details/geo_node_progress_bar_spec.js

@@ -66,6 +66,24 @@ describe('GeoNodeProgressBar', () => {
       });
     });
 
+    describe('when status counts labels are over written', () => {
+      const expectedUiCounts = ['Total 0', 'label1 0', 'label2 0', 'label3 0'];
+      const values = { success: 0, failed: 0, total: 0 };
+
+      beforeEach(() => {
+        createComponent({
+          successLabel: 'label1',
+          queuedLabel: 'label2',
+          failedLabel: 'label3',
+          values,
+        });
+      });
+
+      it('uses the custom labels instead of the default', () => {
+        expect(findCounts().wrappers.map((w) => w.text())).toStrictEqual(expectedUiCounts);
+      });
+    });
+
     describe('popoverTarget', () => {
       describe('when target prop is null', () => {
         beforeEach(() => {

locale/gitlab.pot

@@ -14726,6 +14726,9 @@ msgstr ""
 msgid "Geo|Allowed Geo IP should contain valid IP addresses"
 msgstr ""
 
+msgid "Geo|Checksummed"
+msgstr ""
+
 msgid "Geo|Connection timeout can't be blank"
 msgstr ""
 
@@ -14828,6 +14831,9 @@ msgstr ""
 msgid "Geo|Next sync scheduled at"
 msgstr ""
 
+msgid "Geo|No available replication slots"
+msgstr ""
+
 msgid "Geo|Node name can't be blank"
 msgstr ""
 
@@ -14840,10 +14846,13 @@ msgstr ""
 msgid "Geo|Not synced yet"
 msgstr ""
 
+msgid "Geo|Nothing to checksum"
+msgstr ""
+
 msgid "Geo|Nothing to synchronize"
 msgstr ""
 
-msgid "Geo|Number of %{title}"
+msgid "Geo|Nothing to verify"
 msgstr ""
 
 msgid "Geo|Offline"
@@ -15035,6 +15044,9 @@ msgstr ""
 msgid "Geo|Verification status"
 msgstr ""
 
+msgid "Geo|Verified"
+msgstr ""
+
 msgid "Geo|Waiting for scheduler"
 msgstr ""
 
@@ -34915,6 +34927,9 @@ msgstr ""
 msgid "Until"
 msgstr ""
 
+msgid "Unused"
+msgstr ""
+
 msgid "Unused, previous indices: %{index_names} will be deleted after %{time} automatically."
 msgstr ""
 
@@ -35398,6 +35413,9 @@ msgstr ""
 msgid "Use your smart card to authenticate with the LDAP server."
 msgstr ""
 
+msgid "Used"
+msgstr ""
+
 msgid "Used by members to sign in to your group in GitLab"
 msgstr ""