deployment.vue 4.55 KB
Newer Older
1
<script>
2 3
  import { dateFormatWithName, timeFormat } from '../../utils/date_time_formatters';
  import Icon from '../../../vue_shared/components/icon.vue';
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  export default {
    props: {
      showDeployInfo: {
        type: Boolean,
        required: true,
      },
      deploymentData: {
        type: Array,
        required: true,
      },
      graphHeight: {
        type: Number,
        required: true,
      },
      graphHeightOffset: {
        type: Number,
        required: true,
      },
23 24 25 26
      graphWidth: {
        type: Number,
        required: true,
      },
27 28
    },

29 30 31 32
    components: {
      Icon,
    },

33 34 35 36 37 38 39 40
    computed: {
      calculatedHeight() {
        return this.graphHeight - this.graphHeightOffset;
      },
    },

    methods: {
      refText(d) {
41
        return d.tag ? d.ref : d.sha.slice(0, 8);
42 43 44 45 46 47 48
      },

      formatTime(deploymentTime) {
        return timeFormat(deploymentTime);
      },

      formatDate(deploymentTime) {
49
        return dateFormatWithName(deploymentTime);
50 51 52 53 54 55 56 57 58
      },

      nameDeploymentClass(deployment) {
        return `deploy-info-${deployment.id}`;
      },

      transformDeploymentGroup(deployment) {
        return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
      },
59 60 61

      positionFlag(deployment) {
        let xPosition = 3;
62 63
        if (deployment.xPos > (this.graphWidth - 225)) {
          xPosition = -142;
64 65 66
        }
        return xPosition;
      },
67 68 69 70 71 72 73 74

      svgContainerHeight(tag) {
        let svgHeight = 80;
        if (!tag) {
          svgHeight -= 20;
        }
        return svgHeight;
      },
75 76 77 78 79 80 81 82
    },
  };
</script>
<template>
  <g
    class="deploy-info"
    v-if="showDeployInfo">
    <g
83
      v-for="(deployment, index) in deploymentData"
84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104
      :key="index"
      :class="nameDeploymentClass(deployment)"
      :transform="transformDeploymentGroup(deployment)">
      <rect
        x="0"
        y="0"
        :height="calculatedHeight"
        width="3"
        fill="url(#shadow-gradient)">
      </rect>
      <line
        class="deployment-line"
        x1="0"
        y1="0"
        x2="0"
        :y2="calculatedHeight"
        stroke="#000">
      </line>
      <svg
        v-if="deployment.showDeploymentFlag"
        class="js-deploy-info-box"
105
        :x="positionFlag(deployment)"
106
        y="0"
107
        width="134"
108
        :height="svgContainerHeight(deployment.tag)">
109 110 111 112 113
        <rect
          class="rect-text-metric deploy-info-rect rect-metric"
          x="1"
          y="1"
          rx="2"
114
          width="132"
115
          :height="svgContainerHeight(deployment.tag) - 2">
116 117 118 119
        </rect>
        <text
          class="deploy-info-text text-metric-bold"
          transform="translate(5, 2)">
120
          Deployed
121
        </text>
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
        <!--The date info-->
        <g transform="translate(5, 20)">
          <text class="deploy-info-text">
            {{formatDate(deployment.time)}}
          </text>
          <text 
            class="deploy-info-text text-metric-bold"
            x="62">
            {{formatTime(deployment.time)}}
          </text>
        </g>
        <line
          class="divider-line"
          x1="0"
          y1="38"
          x2="132"
          :y2="38"
          stroke="#000">
        </line>
        <!--Commit information-->
        <g transform="translate(5, 40)">
          <icon
            name="commit"
            :width="12"
            :height="12"
147
            :y="3">
148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
          </icon>
          <a :xlink:href="deployment.commitUrl">
            <text
              class="deploy-info-text deploy-info-text-link"
              transform="translate(20, 2)">
              {{refText(deployment)}}
            </text>
          </a>
        </g>
        <!--Tag information-->
        <g
          transform="translate(5, 55)" 
          v-if="deployment.tag">
          <icon
            name="label"
            :width="12"
            :height="12"
            :y="5">
          </icon>
          <a :xlink:href="deployment.tagUrl">
            <text
              class="deploy-info-text deploy-info-text-link"
              transform="translate(20, 2)"
              y="2">
              {{deployment.tag}}
            </text>
          </a>
        </g>
176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198
      </svg>
    </g>
    <svg
      height="0"
      width="0">
      <defs>
        <linearGradient
          id="shadow-gradient">
          <stop
            offset="0%"
            stop-color="#000"
            stop-opacity="0.4">
          </stop>
          <stop
            offset="100%"
            stop-color="#000"
            stop-opacity="0">
          </stop>
        </linearGradient>
      </defs>
    </svg>
  </g>
</template>