Pipeline Graph Structural Update: SVG Bugfix

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -86,11 +86,11 @@ export default {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   mounted() {
-    this.measurements = this.getMeasurements();
+    this.getMeasurements();
   },
   methods: {
     getMeasurements() {
-      return {
+      this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,
         height: this.$refs[this.containerId].scrollHeight,
       };
@@ -161,6 +161,7 @@ export default {
                 :pipeline-id="pipeline.id"
                 @refreshPipelineGraph="$emit('refreshPipelineGraph')"
                 @jobHover="setJob"
+                @updateMeasurements="getMeasurements"
               />
             </links-layer>
           </div>

app/assets/javascripts/pipelines/components/graph/stage_column_component.vue

@@ -67,6 +67,9 @@ export default {
   errorCaptured(err, _vm, info) {
     reportToSentry('stage_column_component', `error: ${err}, info: ${info}`);
   },
+  mounted() {
+    this.$emit('updateMeasurements');
+  },
   methods: {
     getGroupId(group) {
       return accessValue(GRAPHQL, 'groupId', group);

spec/frontend/pipelines/graph/stage_column_component_spec.js

@@ -68,6 +68,10 @@ describe('stage column component', () => {
     it('should render the provided groups', () => {
       expect(findAllStageColumnGroups().length).toBe(mockGroups.length);
     });
+
+    it('should emit updateMeasurements event on mount', () => {
+      expect(wrapper.emitted().updateMeasurements).toHaveLength(1);
+    });
   });
 
   describe('when job notifies action is complete', () => {