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

100% Statements 9/9
100% Branches 0/0
100% Functions 4/4
100% Lines 9/9

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  5x 5x 5x 5x                                             6x 6x   6x                               78x           45x                                          
<script>
import { mapGetters } from 'vuex';
import { REPOSITORY, BLOB } from 'ee/geo_nodes/constants';
import { __, s__ } from '~/locale';
import GeoNodeReplicationSyncPercentage from './geo_node_replication_sync_percentage.vue';
 
export default {
  name: 'GeoNodeReplicationCounts',
  i18n: {
    dataType: s__('Geo|Data type'),
    synchronization: s__('Geo|Synchronization'),
    verification: s__('Geo|Verification'),
    git: __('Git'),
    file: __('File'),
  },
  components: {
    GeoNodeReplicationSyncPercentage,
  },
  props: {
    nodeId: {
      type: Number,
      required: true,
    },
  },
  computed: {
    ...mapGetters(['verificationInfo', 'syncInfo']),
    replicationOverview() {
      const syncInfoData = this.syncInfo(this.nodeId);
      const verificationInfoData = this.verificationInfo(this.nodeId);
 
      return [
        {
          title: this.$options.i18n.git,
          sync: this.filterByDataType(syncInfoData, REPOSITORY),
          verification: this.filterByDataType(verificationInfoData, REPOSITORY),
        },
        {
          title: this.$options.i18n.file,
          sync: this.filterByDataType(syncInfoData, BLOB),
          verification: this.filterByDataType(verificationInfoData, BLOB),
        },
      ];
    },
  },
  methods: {
    filterByDataType(data, type) {
      return data.filter((replicable) => replicable.dataType === type).map((d) => d.values);
    },
  },
};
</script>
 
<template>
  <div>
    <div class="gl-display-flex gl-align-items-center gl-mb-3">
      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.dataType }}</span>
      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.synchronization }}</span>
      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.verification }}</span>
    </div>
    <div
      v-for="type in replicationOverview"
      :key="type.title"
      class="gl-display-flex gl-align-items-center gl-mb-3"
      data-testid="replication-type"
    >
      <span class="gl-flex-grow-1 gl-flex-basis-0" data-testid="replicable-title">{{
        type.title
      }}</span>
      <geo-node-replication-sync-percentage :values="type.sync" />
      <geo-node-replication-sync-percentage :values="type.verification" />
    </div>
  </div>
</template>