All files / ee/app/assets/javascripts/geo_nodes/components/details/secondary_node geo_node_replication_status_mobile.vue

100% Statements 2/2
100% Branches 2/2
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48  5x                                       39x                                                    
<script>
import GeoNodeProgressBar from 'ee/geo_nodes/components/details/geo_node_progress_bar.vue';
 
export default {
  name: 'GeoNodeReplicationStatusMobile',
  components: {
    GeoNodeProgressBar,
  },
  props: {
    item: {
      type: Object,
      required: true,
    },
    translations: {
      type: Object,
      required: true,
    },
  },
};
</script>
 
<template>
  <div>
    <div class="gl-mb-5 gl-display-flex gl-flex-direction-column" data-testid="sync-status">
      <span class="gl-font-sm gl-mb-3">{{ translations.syncStatus }}</span>
      <geo-node-progress-bar
        v-if="item.syncValues"
        :title="sprintf(translations.progressBarSyncTitle, { component: item.component })"
        :target="`mobile-sync-progress-${item.component}`"
        :values="item.syncValues"
      />
      <span v-else class="gl-text-gray-400 gl-font-sm">{{ translations.nA }}</span>
    </div>
    <div class="gl-display-flex gl-flex-direction-column" data-testid="verification-status">
      <span class="gl-font-sm gl-mb-3">{{ translations.verifStatus }}</span>
      <geo-node-progress-bar
        v-if="item.verificationValues"
        :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>
  </div>
</template>