Merge pull request #1143 from PrefectHQ/performance/audit-watchers

Performance: Removed watchers and/or increased watchers specificity

src/App.vue

@@ -177,13 +177,9 @@ export default {
         this.$apollo.queries.flows.refresh()
       }
     },
-    async $route(new_route, old_route) {
-      if (
-        new_route?.params?.tenant &&
-        new_route?.params?.tenant !== old_route?.params?.tenant &&
-        this.tenant?.slug !== new_route.params.tenant
-      ) {
-        await this.setCurrentTenant(new_route.params.tenant)
+    '$route.params.tenant'(value, previous) {
+      if (value !== previous && value !== this.tenant?.slug) {
+        this.setCurrentTenant(value)
       }
     },
     isAuthorized(value) {

src/components/ConfirmDialog.vue

@@ -74,15 +74,14 @@ export default {
       default: ''
     }
   },
-  data() {
-    return {
-      internalValue: this.value
-    }
-  },
-  watch: {
-    value(val) {
-      // Keep the internal state of the alert on par with the value prop.
-      this.internalValue = val
+  computed: {
+    internalValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('input', value)
+      }
     }
   },
   methods: {
@@ -92,16 +91,9 @@ export default {
     handleCancel() {
       this.internalValue = false
       this.$emit('cancel')
-      this.emitInternalValue()
     },
     handleConfirm() {
       this.$emit('confirm')
-      this.emitInternalValue()
-    },
-    // Propagate the internal value to the component's parent.
-    // This method is what allows us to set v-model on this component.
-    handleInput() {
-      this.emitInternalValue()
     }
   }
 }
@@ -112,7 +104,6 @@ export default {
     :value="internalValue"
     v-bind="dialogProps"
     :width="width"
-    @input="handleInput"
     @click:outside="handleCancel"
     @keydown.esc="handleCancel"
   >

src/components/NavTabBar.vue

@@ -23,7 +23,6 @@ export default {
   },
   data() {
     return {
-      tab: this.getTab(),
       pageScrolled: false
     }
   },
@@ -33,45 +32,35 @@ export default {
     },
     secondaryTabs() {
       return this.tabs.filter(tab => !tab.hidden && tab.align === 'right')
-    }
-  },
-  watch: {
-    tab(val) {
-      if (this.paths) return
-      let query = {}
-      if (val) {
-        if (this.$route.params.id) {
-          query[val] = this.$route.params.id // schematic uses this
+    },
+    tab: {
+      get() {
+        const route = this.tabs.find(
+          t => t.to?.path == this.$route.path || t.to?.name == this.$route.name
+        )
+
+        if (Object.keys(this.$route.query).length != 0) {
+          return Object.keys(this.$route.query)[0]
+        } else if (route) {
+          return route.to.path || route.to.name
         }
-        if (this.$route.query.version) {
+
+        return 'overview'
+      },
+      set(value) {
+        if (this.paths) return
+
+        const query = { [value]: null }
+
+        if (value && this.$route.query.version) {
           query.version = this.$route.query.version
         }
-        query[val] = ''
+
+        this.$router.replace({ query }).catch()
       }
-      this.$router
-        .replace({
-          query: query
-        })
-        .catch(e => e)
-    },
-    $route() {
-      this.tab = this.getTab()
     }
   },
   methods: {
-    getTab() {
-      const route = this.tabs.find(
-        t => t.to?.path == this.$route.path || t.to?.name == this.$route.name
-      )
-
-      if (Object.keys(this.$route.query).length != 0) {
-        return Object.keys(this.$route.query)[0]
-      } else if (route) {
-        return route.to.path || route.to.name
-      }
-
-      return 'overview'
-    },
     scrolled() {
       this.pageScrolled = window.scrollY > 30
     }

src/components/Plans/PlanSelectionForm.vue

@@ -56,13 +56,6 @@ export default {
       return title
     }
   },
-  watch: {
-    step(val) {
-      if (val == 'select-card') {
-        this.getTenants()
-      }
-    }
-  },
   mounted() {
     this.getTenants()
   },
@@ -100,24 +93,33 @@ export default {
     },
     handleConfirm(sourceId) {
       this.paymentSource = sourceId
-      this.step = 'confirm'
+      this.setStep('confirm')
     },
     handleNext() {
       if (this.paymentSource == 'new') {
-        this.step = 'add-card'
+        this.setStep('add-card')
       } else {
-        this.step = 'confirm'
+        this.setStep('confirm')
       }
     },
     selectPayment(id) {
       this.paymentSource = id
     },
+    setStep(step) {
+      this.step = step
+
+      if (step == 'select-card') {
+        this.getTenants()
+      }
+    },
     async handleSubmit() {
       await this.updatePlan()
       if (!this.error) {
         this.$emit('complete')
-        this.step = 'complete'
-      } else this.step = 'error'
+        this.setStep('complete')
+      } else {
+        this.setStep('error')
+      }
     }
   }
 }
@@ -140,7 +142,7 @@ export default {
         >
           <div
             class="d-inline-block text-subtitle-1 font-weight-light mx-auto cursor-pointer mt-4 h-auto"
-            @click="step = 'select-card'"
+            @click="setStep('select-card')"
           >
             <v-icon color="blue-grey">chevron_left</v-icon>
             Choose an existing method instead
@@ -327,7 +329,7 @@ export default {
         >
           <div
             class="d-inline-block text-subtitle-1 font-weight-light cursor-pointer mt-4 h-auto"
-            @click="step = 'select-card'"
+            @click="setStep('select-card')"
           >
             <v-icon color="blue-grey">chevron_left</v-icon>
             Change payment method

src/components/Schematics/Preview-Tile.vue

@@ -37,22 +37,24 @@ export default {
     }
   },
   watch: {
-    $route(val) {
-      // this.search = val.query.schematic
-      if (!val.query.schematic) {
+    '$route.query.schematic'(val) {
+      if (!val) {
         this.task = null
         this.searchInput = null
-        return
+      } else {
+        this.updatePreview()
       }
-      this.updatePreview()
     },
     searchInput(val) {
       let selected = this.options.find(opt => opt.name == val)
       if (selected) this.handleSelect(selected)
     },
     tasks() {
-      if (!this.$route.query.schematic) return (this.task = null)
-      this.updatePreview()
+      if (!this.$route.query.schematic) {
+        this.task = null
+      } else {
+        this.updatePreview()
+      }
     }
   },
   mounted() {

src/layouts/ManagementLayout.vue

@@ -16,14 +16,14 @@ export default {
       required: false
     }
   },
-  data() {
-    return {
-      showPage: this.show || false
-    }
-  },
-  watch: {
-    show(val) {
-      this.showPage = val
+  computed: {
+    showPage: {
+      get() {
+        return this.show
+      },
+      set(value) {
+        this.$emit('update:show', value)
+      }
     }
   },
   mounted() {

src/mixins/flowRunHistoryMixin.js

@@ -7,7 +7,8 @@ export const flowRunHistoryMixin = {
       flowRuns: [],
       scheduledFlowRuns: [],
       tooltip: null,
-      tooltipLoading: false
+      tooltipLoading: false,
+      unwatchFlowRuns: null
     }
   },
   computed: {
@@ -166,44 +167,29 @@ export const flowRunHistoryMixin = {
   },
   methods: {
     _barMouseout() {
-      this.tooltip = null
+      this.setTooltip(null)
       this.tooltipLoading = false
     },
-    async _barMouseover(d) {
-      this.tooltipLoading = !!d.data.flow_id
+    async _barMouseover(tooltipData) {
+      this.setTooltip(tooltipData)
+      this.checkFormatTime(tooltipData, 'end_time')
+      this.checkFormatTime(tooltipData, 'start_time')
+      this.checkFormatTime(tooltipData, 'scheduled_start_time')
 
-      const tooltipData = d
+      tooltipData.status_style = this.statusStyle(tooltipData.data.state)
 
-      this.tooltip = tooltipData
-
-      if (d.data.end_time) {
-        d.data.display_end_time = this.formatTime(d.data.end_time)
-      }
-
-      if (d.data.start_time) {
-        d.data.display_start_time = this.formatTime(d.data.start_time)
-      }
-
-      if (d.data.scheduled_start_time) {
-        d.data.display_scheduled_start_time = this.formatTime(
-          d.data.scheduled_start_time
-        )
-      }
-
-      d.status_style = this.statusStyle(d.data.state)
-
-      if (!d.data.flow_id) {
-        this.tooltip = d
+      const flowId = tooltipData.data.flow_id
+      if (!flowId) {
+        this.setTooltip(tooltipData)
         return
       }
 
-      const flow_id = d.data.flow_id
       try {
+        this.tooltipLoading = true
+
         const { data } = await this.$apollo.query({
           query: require('@/graphql/Dashboard/timeline-flow.gql'),
-          variables: {
-            flowId: d.data.flow_id
-          }
+          variables: { flowId }
         })
 
         tooltipData.data.flow = data.flow_by_pk
@@ -213,8 +199,8 @@ export const flowRunHistoryMixin = {
         // We check this to make sure we're not showing the tooltip
         // when _barMouseout has already run or a different
         // bar has been hovered
-        if (this.tooltip && this.tooltip.data.flow_id == flow_id)
-          this.tooltip = tooltipData
+        if (this.tooltip && this.tooltip.data.flow_id == flowId)
+          this.setTooltip(tooltipData)
       }
     },
     _barClick(d) {
@@ -227,7 +213,7 @@ export const flowRunHistoryMixin = {
       })
     },
     formatTime(timestamp) {
-      if (!timestamp) throw new Error('Did not recieve a timestamp')
+      if (!timestamp) throw new Error('Did not receive a timestamp')
 
       let t = moment(timestamp).tz(this.timezone),
         shortenedTz = moment()
@@ -283,6 +269,34 @@ export const flowRunHistoryMixin = {
         height: '1rem',
         width: '1rem'
       }
+    },
+    setTooltip(tooltip) {
+      if (this.unwatchFlowRuns) {
+        this.unwatchFlowRuns()
+      }
+
+      if (tooltip) {
+        this.unwatchFlowRuns = this.$watch(
+          'flowRuns',
+          this.validateTooltipIdStillPresent
+        )
+      }
+
+      this.tooltip = tooltip
+    },
+    validateTooltipIdStillPresent() {
+      const exists = this.flowRuns.some(f => f.id == this.tooltip.data.id)
+
+      if (!exists) {
+        this.setTooltip(null)
+      }
+    },
+    checkFormatTime(tooltipData, property) {
+      if (tooltipData.data[property]) {
+        const formatted = this.formatTime(tooltipData.data[property])
+
+        tooltipData.data[`display_${property}`] = formatted
+      }
     }
   }
 }