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

83.33% Statements 5/6
100% Branches 2/2
50% Functions 1/2
83.33% Lines 5/6

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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108  5x 5x 5x 5x                                                                         283x                                                                                                                                    
<script>
import { GlIcon, GlPopover, GlLink } from '@gitlab/ui';
import GeoNodeProgressBar from 'ee/geo_nodes/components/details/geo_node_progress_bar.vue';
import { HELP_INFO_URL } from 'ee/geo_nodes/constants';
import { s__, __ } from '~/locale';
 
export default {
  name: 'GeoNodeReplicationDetailsResponsive',
  i18n: {
    dataType: __('Data type'),
    component: __('Component'),
    status: __('Status'),
    syncStatus: s__('Geo|Synchronization status'),
    verifStatus: s__('Geo|Verification status'),
    popoverHelpText: s__(
      'Geo|Replicated data is verified with the secondary site(s) using checksums',
    ),
    learnMore: __('Learn more'),
    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,
    GlPopover,
    GlLink,
    GeoNodeProgressBar,
  },
  props: {
    replicationItems: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  HELP_INFO_URL,
};
</script>
 
<template>
  <div>
    <div
      class="gl-display-grid geo-node-replication-details-grid-columns gl-bg-gray-10 gl-p-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
      data-testid="replication-details-header"
    >
      <slot name="title" :translations="$options.i18n">
        <span class="gl-font-weight-bold">{{ $options.i18n.dataType }}</span>
        <span class="gl-font-weight-bold">{{ $options.i18n.component }}</span>
        <span class="gl-font-weight-bold">{{ $options.i18n.syncStatus }}</span>
        <div class="gl-display-flex gl-align-items-center">
          <span class="gl-font-weight-bold">{{ $options.i18n.verifStatus }}</span>
          <gl-icon
            ref="verificationStatus"
            tabindex="0"
            name="question"
            class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
          />
          <gl-popover
            :target="() => $refs.verificationStatus.$el"
            placement="top"
            triggers="hover focus"
          >
            <p class="gl-font-base">
              {{ $options.i18n.popoverHelpText }}
            </p>
            <gl-link :href="$options.HELP_INFO_URL" target="_blank">{{
              $options.i18n.learnMore
            }}</gl-link>
          </gl-popover>
        </div>
      </slot>
    </div>
    <div
      v-for="item in replicationItems"
      :key="item.component"
      class="gl-display-grid geo-node-replication-details-grid-columns gl-p-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100"
      data-testid="replication-details-item"
    >
      <slot :item="item" :translations="$options.i18n">
        <span class="gl-mr-5">{{ item.dataTypeTitle }}</span>
        <span class="gl-mr-5">{{ item.component }}</span>
        <div class="gl-mr-5" data-testid="sync-status">
          <geo-node-progress-bar
            v-if="item.syncValues"
            :title="sprintf($options.i18n.progressBarSyncTitle, { component: item.component })"
            :target="`sync-progress-${item.component}`"
            :values="item.syncValues"
          />
          <span v-else class="gl-text-gray-400 gl-font-sm">{{ $options.i18n.nA }}</span>
        </div>
        <div data-testid="verification-status">
          <geo-node-progress-bar
            v-if="item.verificationValues"
            :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>
      </slot>
    </div>
  </div>
</template>