BigW Consortium Gitlab

deployments.js 4.71 KB
Newer Older
Phil Hughes committed
1
/* global Flash */
2
import d3 from 'd3';
Phil Hughes committed
3 4 5 6
import {
  dateFormat,
  timeFormat,
} from './constants';
7 8

export default class Deployments {
Phil Hughes committed
9
  constructor(width, height) {
10
    this.width = width;
Phil Hughes committed
11 12 13
    this.height = height;

    this.endpoint = document.getElementById('js-metrics').dataset.deploymentEndpoint;
Phil Hughes committed
14

15
    this.createGradientDef();
16 17 18 19 20 21 22 23
  }

  init(chartData) {
    this.chartData = chartData;

    this.x = d3.time.scale().range([0, this.width]);
    this.x.domain(d3.extent(this.chartData, d => d.time));

24
    this.charts = d3.selectAll('.prometheus-graph');
Phil Hughes committed
25

26 27 28 29 30
    this.getData();
  }

  getData() {
    $.ajax({
Phil Hughes committed
31
      url: this.endpoint,
32 33
      dataType: 'JSON',
    })
Phil Hughes committed
34
    .fail(() => new Flash('Error getting deployment information.'))
35
    .done((data) => {
Phil Hughes committed
36
      this.data = data.deployments.reduce((deploymentDataArray, deployment) => {
37
        const time = new Date(deployment.created_at);
38
        const xPos = Math.floor(this.x(time));
39

40 41
        time.setSeconds(this.chartData[0].time.getSeconds());

42
        if (xPos >= 0) {
Phil Hughes committed
43
          deploymentDataArray.push({
44
            id: deployment.id,
45
            time,
46
            sha: deployment.sha,
Phil Hughes committed
47 48
            tag: deployment.tag,
            ref: deployment.ref.name,
49
            xPos,
50 51
          });
        }
Phil Hughes committed
52 53 54

        return deploymentDataArray;
      }, []);
55 56 57 58 59 60

      this.plotData();
    });
  }

  plotData() {
Phil Hughes committed
61
    this.charts.each((d, i) => {
62 63 64
      const svg = d3.select(this.charts[0][i]);
      const chart = svg.select('.graph-container');
      const key = svg.node().getAttribute('graph-type');
65

66 67
      this.createLine(chart, key);
      this.createDeployInfoBox(chart, key);
Phil Hughes committed
68
    });
69 70
  }

71
  createGradientDef() {
Phil Hughes committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
    const defs = d3.select('body')
      .append('svg')
      .attr({
        height: 0,
        width: 0,
      })
      .append('defs');

    defs.append('linearGradient')
      .attr({
        id: 'shadow-gradient',
      })
      .append('stop')
      .attr({
        offset: '0%',
        'stop-color': '#000',
        'stop-opacity': 0.4,
      })
90
      .select(this.selectParentNode)
Phil Hughes committed
91 92 93 94 95 96 97 98
      .append('stop')
      .attr({
        offset: '100%',
        'stop-color': '#000',
        'stop-opacity': 0,
      });
  }

99
  createLine(chart, key) {
100
    chart.append('g')
Phil Hughes committed
101 102 103
      .attr({
        class: 'deploy-info',
      })
104 105 106 107
      .selectAll('.deploy-info')
      .data(this.data)
      .enter()
      .append('g')
Phil Hughes committed
108
      .attr({
109
        class: d => `deploy-info-${d.id}-${key}`,
110
        transform: d => `translate(${Math.floor(d.xPos) + 1}, 0)`,
Phil Hughes committed
111
      })
Phil Hughes committed
112 113 114 115
      .append('rect')
      .attr({
        x: 1,
        y: 0,
116
        height: this.height + 1,
Phil Hughes committed
117 118 119
        width: 3,
        fill: 'url(#shadow-gradient)',
      })
120
      .select(this.selectParentNode)
121 122
      .append('line')
      .attr({
Phil Hughes committed
123
        class: 'deployment-line',
124 125 126
        x1: 0,
        x2: 0,
        y1: 0,
127
        y2: this.height + 1,
128 129 130
      });
  }

131
  createDeployInfoBox(chart, key) {
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
    chart.selectAll('.deploy-info')
      .selectAll('.js-deploy-info-box')
      .data(this.data)
      .enter()
      .select(d => document.querySelector(`.deploy-info-${d.id}-${key}`))
      .append('svg')
      .attr({
        class: 'js-deploy-info-box hidden',
        x: 3,
        y: 0,
        width: 92,
        height: 60,
      })
      .append('rect')
      .attr({
        class: 'rect-text-metric deploy-info-rect rect-metric',
        x: 1,
        y: 1,
        rx: 2,
        width: 90,
        height: 58,
      })
      .select(this.selectParentNode)
      .append('g')
      .attr({
        transform: 'translate(5, 2)',
      })
      .append('text')
      .attr({
        class: 'deploy-info-text text-metric-bold',
      })
      .text(Deployments.refText)
      .select(this.selectParentNode)
      .append('text')
      .attr({
        class: 'deploy-info-text',
        y: 18,
      })
Phil Hughes committed
170
      .text(d => dateFormat(d.time))
171 172 173 174 175 176
      .select(this.selectParentNode)
      .append('text')
      .attr({
        class: 'deploy-info-text text-metric-bold',
        y: 38,
      })
Phil Hughes committed
177
      .text(d => timeFormat(d.time));
178
  }
179

180 181
  static toggleDeployTextbox(deploy, key, showInfoBox) {
    d3.selectAll(`.deploy-info-${deploy.id}-${key} .js-deploy-info-box`)
182 183 184
      .classed('hidden', !showInfoBox);
  }

185
  mouseOverDeployInfo(mouseXPos, key) {
186 187 188 189 190 191
    if (!this.data) return false;

    let dataFound = false;

    this.data.forEach((d) => {
      if (d.xPos >= mouseXPos - 10 && d.xPos <= mouseXPos + 10 && !dataFound) {
Phil Hughes committed
192
        dataFound = d.xPos + 1;
193

194
        Deployments.toggleDeployTextbox(d, key, true);
195
      } else {
196
        Deployments.toggleDeployTextbox(d, key, false);
197 198 199 200 201
      }
    });

    return dataFound;
  }
202 203 204 205 206 207 208

  /* `this` is bound to the D3 node */
  selectParentNode() {
    return this.parentNode;
  }

  static refText(d) {
Phil Hughes committed
209
    return d.tag ? d.ref : d.sha.slice(0, 6);
210
  }
211
}