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

100% Statements 9/9
100% Branches 8/8
100% Functions 6/6
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 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 109 110 111 112 113 114  9x   9x 9x                                                                                               10x     10x     10x     10x     10x           57x                                                                                      
<script>
import { GlPopover } from '@gitlab/ui';
import { toNumber } from 'lodash';
import { __, s__ } from '~/locale';
import StackedProgressBar from '~/vue_shared/components/stacked_progress_bar.vue';
 
export default {
  name: 'GeoNodeSyncProgress',
  i18n: {
    total: __('Total'),
  },
  components: {
    GlPopover,
    StackedProgressBar,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    values: {
      type: Object,
      required: true,
    },
    target: {
      type: String,
      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() {
      return this.totalCount - this.successCount - this.failureCount;
    },
    totalCount() {
      return toNumber(this.values.total) || 0;
    },
    failureCount() {
      return toNumber(this.values.failed) || 0;
    },
    successCount() {
      return toNumber(this.values.success) || 0;
    },
    popoverTarget() {
      return this.target ? this.target : `syncProgress-${this.title}`;
    },
  },
};
</script>
 
<template>
  <div>
    <stacked-progress-bar
      :id="popoverTarget"
      tabindex="0"
      hide-tooltips
      :unavailable-label="unavailableLabel"
      :success-count="successCount"
      :failure-count="failureCount"
      :total-count="totalCount"
    />
    <gl-popover
      :target="popoverTarget"
      placement="right"
      triggers="hover focus"
      :css-classes="['w-100']"
      :title="title"
    >
      <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>
          <span class="gl-flex-grow-1 gl-mr-4">{{ $options.i18n.total }}</span>
          <span class="gl-font-weight-bold">{{ totalCount.toLocaleString() }}</span>
        </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-grow-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-grow-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-grow-1 gl-mr-4">{{ failedLabel }}</span>
          <span class="gl-font-weight-bold">{{ failureCount.toLocaleString() }}</span>
        </div>
      </section>
    </gl-popover>
  </div>
</template>