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

93.33% Statements 14/15
100% Branches 14/14
83.33% Functions 5/6
93.33% Lines 14/15

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  6x 6x                               14x 4x     24x 24x   10x 10x   2x       8x     14x 6x     8x           60x                
<script>
import { roundDownFloat } from '~/lib/utils/common_utils';
import { __ } from '~/locale';
 
export default {
  name: 'GeoNodeReplicationSyncPercentage',
  i18n: {
    nA: __('N/A'),
  },
  props: {
    values: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    percent() {
      if (!this.values.length) {
        return null;
      }
 
      const total = this.values.map((v) => v.total).reduce((a, b) => a + b);
      const success = this.values.map((v) => v.success).reduce((a, b) => a + b);
 
      const percent = roundDownFloat((success / total) * 100, 1);
      if (percent > 0 && percent < 1) {
        // Special case for very small numbers
        return '< 1';
      }
 
      // If total/success has any null values it will return NaN, lets render N/A for this case too.
      return Number.isNaN(percent) ? null : percent;
    },
    percentColor() {
      if (this.percent === null) {
        return 'gl-bg-gray-200';
      }
 
      return this.percent === 100 ? 'gl-bg-green-500' : 'gl-bg-red-500';
    },
  },
};
</script>
 
<template>
  <div class="gl-display-flex gl-align-items-center gl-flex-grow-1 gl-flex-basis-0">
    <div :class="percentColor" class="gl-rounded-full gl-w-3 gl-h-3 gl-mr-2"></div>
    <span class="gl-font-weight-bold">
      {{ percent === null ? $options.i18n.nA : `${percent}%` }}
    </span>
  </div>
</template>