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

100% Statements 17/17
100% Branches 8/8
100% Functions 8/8
100% Lines 17/17

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 115 116 117 118 119 120 121 122 123 124 125  4x 4x 4x 4x 4x 4x                                               18x               18x 18x   18x 52x   48x 4x     48x                 21x         3x             255x                                                                                                              
<script>
import { GlIcon, GlPopover, GlLink, GlButton } from '@gitlab/ui';
import { mapGetters, mapState } from 'vuex';
import { GEO_REPLICATION_TYPES_URL } from 'ee/geo_nodes/constants';
import { s__, __ } from '~/locale';
import GeoNodeReplicationDetailsResponsive from './geo_node_replication_details_responsive.vue';
import GeoNodeReplicationStatusMobile from './geo_node_replication_status_mobile.vue';
 
export default {
  name: 'GeoNodeReplicationDetails',
  i18n: {
    replicationDetails: s__('Geo|Replication Details'),
    popoverText: s__('Geo|Geo supports replication of many data types.'),
    learnMore: __('Learn more'),
  },
  components: {
    GlIcon,
    GlPopover,
    GlLink,
    GlButton,
    GeoNodeReplicationDetailsResponsive,
    GeoNodeReplicationStatusMobile,
  },
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      collapsed: false,
    };
  },
  computed: {
    ...mapState(['replicableTypes']),
    ...mapGetters(['verificationInfo', 'syncInfo']),
    replicationItems() {
      const syncInfoData = this.syncInfo(this.node.id);
      const verificationInfoData = this.verificationInfo(this.node.id);
 
      return this.replicableTypes.map((replicable) => {
        const replicableSyncInfo = syncInfoData.find((r) => r.title === replicable.titlePlural);
 
        const replicableVerificationInfo = verificationInfoData.find(
          (r) => r.title === replicable.titlePlural,
        );
 
        return {
          dataTypeTitle: replicable.dataTypeTitle,
          component: replicable.titlePlural,
          syncValues: replicableSyncInfo ? replicableSyncInfo.values : null,
          verificationValues: replicableVerificationInfo ? replicableVerificationInfo.values : null,
        };
      });
    },
    chevronIcon() {
      return this.collapsed ? 'chevron-right' : 'chevron-down';
    },
  },
  methods: {
    collapseSection() {
      this.collapsed = !this.collapsed;
    },
  },
  GEO_REPLICATION_TYPES_URL,
};
</script>
 
<template>
  <div>
    <div
      class="gl-display-flex gl-align-items-center gl-cursor-pointer gl-py-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100 gl-border-t-1 gl-border-t-solid gl-border-t-gray-100"
    >
      <gl-button
        class="gl-mr-1 gl-p-0!"
        category="tertiary"
        variant="confirm"
        :icon="chevronIcon"
        @click="collapseSection"
      >
        {{ $options.i18n.replicationDetails }}
      </gl-button>
      <gl-icon
        ref="replicationDetails"
        name="question"
        class="gl-text-blue-500 gl-cursor-pointer gl-ml-2"
      />
      <gl-popover
        :target="() => $refs.replicationDetails.$el"
        placement="top"
        triggers="hover focus"
      >
        <p class="gl-font-base">
          {{ $options.i18n.popoverText }}
        </p>
        <gl-link :href="$options.GEO_REPLICATION_TYPES_URL" target="_blank">{{
          $options.i18n.learnMore
        }}</gl-link>
      </gl-popover>
    </div>
    <div v-if="!collapsed">
      <geo-node-replication-details-responsive
        class="gl-display-none gl-md-display-block"
        :replication-items="replicationItems"
        data-testid="geo-replication-details-desktop"
      />
      <geo-node-replication-details-responsive
        class="gl-md-display-none!"
        :replication-items="replicationItems"
        data-testid="geo-replication-details-mobile"
      >
        <template #title="{ translations }">
          <span class="gl-font-weight-bold">{{ translations.component }}</span>
          <span class="gl-font-weight-bold">{{ translations.status }}</span>
        </template>
        <template #default="{ item, translations }">
          <span class="gl-mr-5">{{ item.component }}</span>
          <geo-node-replication-status-mobile :item="item" :translations="translations" />
        </template>
      </geo-node-replication-details-responsive>
    </div>
  </div>
</template>