All files / app/assets/javascripts/vue_merge_request_widget/components/deployment deployment_info.vue

87.5% Statements 7/8
66.66% Branches 6/9
66.66% Functions 6/9
100% Lines 7/7

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                        7x                                                                           120x     156x     176x     176x     176x     176x                                                                              
<script>
import { GlLink, GlTooltipDirective, GlTruncate } from '@gitlab/ui';
import { __ } from '~/locale';
import timeagoMixin from '~/vue_shared/mixins/timeago';
import {
  MANUAL_DEPLOY,
  WILL_DEPLOY,
  RUNNING,
  SUCCESS,
  FAILED,
  CANCELED,
  SKIPPED,
} from './constants';
 
export default {
  name: 'DeploymentInfo',
  components: {
    GlLink,
    MemoryUsage: () => import('./memory_usage.vue'),
    GlTruncate,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  mixins: [timeagoMixin],
  props: {
    computedDeploymentStatus: {
      type: String,
      required: true,
    },
    deployment: {
      type: Object,
      required: true,
    },
    showMetrics: {
      type: Boolean,
      required: true,
    },
  },
  deployedTextMap: {
    [MANUAL_DEPLOY]: __('Can be manually deployed to'),
    [WILL_DEPLOY]: __('Will deploy to'),
    [RUNNING]: __('Deploying to'),
    [SUCCESS]: __('Deployed to'),
    [FAILED]: __('Failed to deploy to'),
    [CANCELED]: __('Canceled deployment to'),
    [SKIPPED]: __('Skipped deployment to'),
  },
  computed: {
    deployTimeago() {
      return this.timeFormatted(this.deployment.deployed_at);
    },
    deployedText() {
      return this.$options.deployedTextMap[this.computedDeploymentStatus];
    },
    hasDeploymentTime() {
      return Boolean(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
    },
    hasDeploymentMeta() {
      return Boolean(this.deployment.url && this.deployment.name);
    },
    hasMetrics() {
      return Boolean(this.deployment.metrics_url);
    },
    showMemoryUsage() {
      return this.hasMetrics && this.showMetrics;
    },
  },
};
</script>
 
<template>
  <div class="js-deployment-info deployment-info">
    <template v-if="hasDeploymentMeta">
      <span>{{ deployedText }}</span>
      <gl-link
        :href="deployment.url"
        target="_blank"
        rel="noopener noreferrer nofollow"
        class="js-deploy-meta gl-font-sm gl-pb-1"
      >
        <gl-truncate
          class="js-deploy-env-name"
          :text="deployment.name"
          position="middle"
          with-tooltip
        />
      </gl-link>
    </template>
    <span
      v-if="hasDeploymentTime"
      v-gl-tooltip
      :title="deployment.deployed_at_formatted"
      class="js-deploy-time"
    >
      {{ deployTimeago }}
    </span>
    <memory-usage
      v-if="showMemoryUsage"
      :metrics-url="deployment.metrics_url"
      :metrics-monitoring-url="deployment.metrics_monitoring_url"
    />
  </div>
</template>