All files / app/assets/javascripts/monitoring/components/embeds embed_group.vue

95.83% Statements 23/24
87.5% Branches 7/8
100% Functions 13/13
95.83% Lines 23/24

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  1x 1x 1x 1x 1x 1x                         14x       14x               5x     15x     5x         14x     14x     14x     14x     14x 14x 17x 17x 17x           35x     1x         76x                                                            
<script>
import { GlButton, GlCard, GlIcon } from '@gitlab/ui';
import sum from 'lodash/sum';
import { mapState, mapActions, mapGetters } from 'vuex';
import { n__ } from '~/locale';
import { monitoringDashboard } from '~/monitoring/stores';
import MetricEmbed from './metric_embed.vue';
 
export default {
  components: {
    GlButton,
    GlCard,
    GlIcon,
    MetricEmbed,
  },
  props: {
    urls: {
      type: Array,
      required: true,
      validator: (urls) => urls.length > 0,
    },
  },
  data() {
    return {
      isCollapsed: false,
    };
  },
  computed: {
    ...mapState('embedGroup', ['module']),
    ...mapGetters('embedGroup', ['metricsWithData']),
    arrowIconName() {
      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
    },
    bodyClass() {
      return ['border-top', 'pl-3', 'pt-3', { 'd-none': this.isCollapsed }];
    },
    buttonLabel() {
      return this.isCollapsed
        ? n__('View chart', 'View charts', this.numCharts)
        : n__('Hide chart', 'Hide charts', this.numCharts);
    },
    containerClass() {
      return this.isSingleChart ? 'col-lg-12' : 'col-lg-6';
    },
    numCharts() {
I      if (this.metricsWithData === null) {
        return 0;
      }
      return sum(this.metricsWithData);
    },
    isSingleChart() {
      return this.numCharts === 1;
    },
  },
  created() {
    this.urls.forEach((url, index) => {
      const name = this.getNamespace(index);
      this.$store.registerModule(name, monitoringDashboard);
      this.addModule(name);
    });
  },
  methods: {
    ...mapActions('embedGroup', ['addModule']),
    getNamespace(id) {
      return `monitoringDashboard/${id}`;
    },
    toggleCollapsed() {
      this.isCollapsed = !this.isCollapsed;
    },
  },
};
</script>
<template>
  <gl-card
    v-show="numCharts > 0"
    class="collapsible-card border p-0 gl-mb-5"
    header-class="d-flex align-items-center border-bottom-0 py-2"
    :body-class="bodyClass"
  >
    <template #header>
      <gl-button
        class="collapsible-card-btn gl-display-flex gl-text-decoration-none gl-reset-color! gl-hover-text-blue-800! gl-shadow-none!"
        :aria-label="buttonLabel"
        variant="link"
        category="tertiary"
        @click="toggleCollapsed"
      >
        <gl-icon class="mr-1" :name="arrowIconName" />
        {{ buttonLabel }}
      </gl-button>
    </template>
    <div class="d-flex flex-wrap">
      <metric-embed
        v-for="(url, index) in urls"
        :key="`${index}/${url}`"
        :dashboard-url="url"
        :namespace="getNamespace(index)"
        :container-class="containerClass"
      />
    </div>
  </gl-card>
</template>