Merge pull request #1125 from PrefectHQ/ui-performance/query-subscrip…

…tions

Performance: More careful polling of graphql data

src/App.vue

@@ -91,6 +91,12 @@ export default {
       'user',
       'plan'
     ]),
+    ...mapGetters('polling', [
+      'shouldPollTenants',
+      'shouldPollAgents',
+      'shouldPollProjects',
+      'shouldPollFlows'
+    ]),
     notFoundPage() {
       return this.$route.name === 'not-found'
     },
@@ -227,7 +233,11 @@ export default {
       {
         query: require('@/graphql/Tenant/tenants.js').default(this.isCloud),
         skip() {
-          return (this.isCloud && !this.isAuthorized) || !this.connected
+          return (
+            (this.isCloud && !this.isAuthorized) ||
+            !this.connected ||
+            !this.shouldPollTenants
+          )
         },
         fetchPolicy: 'no-cache',
         pollInterval: 60000,
@@ -244,7 +254,11 @@ export default {
         return require('@/graphql/Agent/agents.js').default(this.isCloud)
       },
       skip() {
-        return (this.isCloud && !this.isAuthorized) || !this.connected
+        return (
+          (this.isCloud && !this.isAuthorized) ||
+          !this.connected ||
+          !this.shouldPollAgents
+        )
       },
       pollInterval: 1000,
       // Without this, server UI with no actual server shows results
@@ -263,7 +277,11 @@ export default {
           return require('@/graphql/Nav/projects.gql')
         },
         skip() {
-          return (this.isCloud && !this.isAuthorized) || !this.connected
+          return (
+            (this.isCloud && !this.isAuthorized) ||
+            !this.connected ||
+            !this.shouldPollProjects
+          )
         },
         pollInterval: 10000,
         update(data) {
@@ -279,7 +297,11 @@ export default {
         return require('@/graphql/Nav/flows.gql')
       },
       skip() {
-        return (this.isCloud && !this.isAuthorized) || !this.connected
+        return (
+          (this.isCloud && !this.isAuthorized) ||
+          !this.connected ||
+          !this.shouldPollFlows
+        )
       },
       pollInterval: 10000,
       update(data) {

src/components/Artifacts/Artifacts.vue

@@ -38,6 +38,9 @@ export default {
     },
     increment() {
       this.artifact++
+    },
+    onIntersect([entry]) {
+      this.$apollo.queries.artifacts.skip = !entry.isIntersecting
     }
   },
   apollo: {
@@ -80,7 +83,7 @@ export default {
 </script>
 
 <template>
-  <v-row no-gutters>
+  <v-row v-intersect="{ handler: onIntersect }" no-gutters>
     <v-col>
       <div
         v-if="artifacts && artifacts.length > 0"

src/components/ConcurrencyInfo.vue

@@ -13,6 +13,11 @@ export default {
       return this.license?.terms?.flow_concurrency
     }
   },
+  methods: {
+    onIntersect([entry]) {
+      this.$apollo.queries.concurrentRuns.skip = !entry.isIntersecting
+    }
+  },
   apollo: {
     concurrentRuns: {
       query: require('@/graphql/concurrent-runs.gql'),
@@ -28,7 +33,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="concurrentRuns && license">
+  <div v-if="concurrentRuns && license" v-intersect="{ handler: onIntersect }">
     {{ concurrentRuns.length
     }}{{ flowConcurrency ? `/${flowConcurrency}` : '' }} slot{{
       concurrentRuns.length === 1 || flowConcurrency === 1 ? '' : 's'

src/components/LabelWarning.vue

@@ -27,7 +27,9 @@ export default {
   data() {
     return {
       infoMessage: '',
-      noLabelInfo: false
+      noLabelInfo: false,
+      unsubscribeAgents: null,
+      show: false
     }
   },
   computed: {
@@ -102,6 +104,16 @@ export default {
   methods: {
     labelMessage(message) {
       this.infoMessage = message
+    },
+    async visibilityChanged(visible) {
+      if (visible) {
+        this.unsubscribeAgents = await this.$store.dispatch(
+          'polling/subscribe',
+          'agents'
+        )
+      } else {
+        this.unsubscribeAgents()
+      }
     }
   }
 }
@@ -110,9 +122,11 @@ export default {
 <template>
   <v-menu
     v-if="!labelsAlign"
+    v-model="show"
     :close-on-content-click="false"
     offset-y
     open-on-hover
+    @input="visibilityChanged"
   >
     <template #activator="{ on }">
       <div text class="super-imposed-icon-set cursor-pointer" v-on="on">

src/components/LastTenRuns.vue

@@ -151,6 +151,9 @@ export default {
         height: '1rem',
         width: '1rem'
       }
+    },
+    onIntersect([entry]) {
+      this.$apollo.queries.flowRuns.skip = !entry.isIntersecting
     }
   },
   apollo: {
@@ -174,6 +177,7 @@ export default {
 <template>
   <div>
     <BarChart
+      v-intersect="{ handler: onIntersect }"
       :items="preppedFlowRuns"
       :loading="loadingKey > 0"
       :height="50"

src/components/LogsCard/LogsCard.vue

@@ -192,6 +192,11 @@ export default {
       if (!this.logsQueryResultsTarget || !this.logsQueryResults) return
 
       this.scopeLogs()
+    },
+    onIntersect([entry]) {
+      this.$apollo.queries.logsQueryResults.skip = !entry.isIntersecting
+      this.$apollo.queries.logsQueryResultsOlder.skip = !entry.isIntersecting
+      this.$apollo.queries.logsQueryResultsNewer.skip = !entry.isIntersecting
     }
   },
   created() {
@@ -513,7 +518,7 @@ export default {
 </script>
 
 <template>
-  <div data-private>
+  <div v-intersect="{ handler: onIntersect }" data-private>
     <v-card class="logs-card" tile>
       <v-system-bar :color="entityState" :height="5" absolute>
         <!-- We should include a state icon here when we've got those -->

src/components/Nav/NotificationMenu.vue

@@ -10,6 +10,11 @@ export default {
       return this.notificationsCount
     }
   },
+  methods: {
+    onIntersect([entry]) {
+      this.$apollo.queries.notificationsCount.skip = !entry.isIntersecting
+    }
+  },
   apollo: {
     notificationsCount: {
       query: require('@/graphql/Notifications/notifications-count-unread.gql'),
@@ -27,6 +32,7 @@ export default {
 
 <template>
   <v-btn
+    v-intersect="{ handler: onIntersect }"
     :to="'/notifications'"
     class="navbar-icon mx-1"
     icon

src/components/Nav/TeamSideNav.vue

@@ -16,7 +16,6 @@ export default {
   },
   data() {
     return {
-      activateTimeout: null,
       items: [],
       newProjectDialog: false,
       types: {
@@ -25,8 +24,9 @@ export default {
         flow: 'pi-flow',
         task: 'pi-task'
       },
-      flowsUnWatch: null,
-      projectsUnWatch: null
+      unwatchFlows: null,
+      unwatchProjects: null,
+      unsubscribeData: null
     }
   },
 
@@ -80,20 +80,20 @@ export default {
     }
   },
   watch: {
-    isOpen(val) {
+    async isOpen(val) {
       if (val) {
-        clearTimeout(this.activateTimeout)
-        this.activateTimeout = setTimeout(() => {
-          this.$refs['drawer'].focus()
-        }, 250)
-
-        this.flowsUnWatch = this.$watch('flows', this.updateItems)
-        this.projectsUnWatch = this.$watch('projects', this.updateItems)
-
         this.updateItems()
+
+        this.unwatchFlows = this.$watch('flows', this.updateItems)
+        this.unwatchProjects = this.$watch('projects', this.updateItems)
+        this.unsubscribeData = await this.$store.dispatch('polling/subscribe', [
+          'flows',
+          'projects'
+        ])
       } else {
-        this.flowsUnWatch()
-        this.projectsUnWatch()
+        this.unwatchFlows()
+        this.unwatchProjects()
+        this.unsubscribeData()
       }
     }
   },
@@ -107,12 +107,15 @@ export default {
     // Removes the t search shortcut event listener when
     // the component is destroyed
     window.removeEventListener('keyup', this.handleKeyboardShortcut)
-
-    clearTimeout(this.activateTimeout)
   },
   methods: {
     ...mapMutations('sideNav', ['close', 'open']),
     ...mapMutations('data', ['addTasks']),
+    onIntersect([entry]) {
+      if (entry.isIntersecting) {
+        entry.target.focus()
+      }
+    },
     closeAll() {
       this.$refs['tree'].close()
     },
@@ -273,7 +276,7 @@ export default {
         </div>
 
         <div
-          ref="drawer"
+          v-intersect="{ handler: onIntersect }"
           class="focusable tree-view flex-grow-1 flex-shrink-1"
           tabindex="-1"
         >

src/components/Nav/TeamSwitcher.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapActions, mapGetters } from 'vuex'
 import { handleMembershipInvitations } from '@/mixins/membershipInvitationMixin'
+import { pollsTenantsMixin } from '@/mixins/polling/pollsTenantsMixin'
 import AcceptConfirmInputRow from '@/components/AcceptConfirmInputRow'
 import { clearCache } from '@/vue-apollo'
 
@@ -37,7 +38,7 @@ const tenantProtectedRoutes = [
 
 export default {
   components: { AcceptConfirmInputRow },
-  mixins: [handleMembershipInvitations],
+  mixins: [handleMembershipInvitations, pollsTenantsMixin],
   data() {
     return {
       loading: false,

src/components/Schematics/Preview-Dynamic.vue

@@ -59,6 +59,9 @@ export default {
         : ['white--text']
 
       return [state, ...textColor]
+    },
+    onIntersect([entry]) {
+      this.$apollo.queries.mappedChildren.skip = !entry.isIntersecting
     }
   },
   apollo: {
@@ -80,7 +83,10 @@ export default {
 </script>
 
 <template>
-  <v-card-text class="full-height position-relative pa-0 text-caption">
+  <v-card-text
+    v-intersect="{ handler: onIntersect }"
+    class="full-height position-relative pa-0 text-caption"
+  >
     <v-list-item
       class="py-2 pr-2 pl-3"
       dense

src/components/Schematics/Schematic-Node.vue

@@ -158,6 +158,9 @@ export default {
     },
     isFinished(state) {
       return FINISHED_STATES.includes(state)
+    },
+    onIntersect([entry]) {
+      this.$apollo.queries.mappedChildren.skip = !entry.isIntersecting
     }
   },
   apollo: {
@@ -183,6 +186,7 @@ export default {
 
 <template>
   <div
+    v-intersect="{ handler: onIntersect }"
     v-ripple
     class="utilGrayLight d-flex align-center node ripple"
     :class="showDetails ? 'elevation-3' : ''"

src/components/SetStateDialog.vue

@@ -15,6 +15,11 @@ export default {
       return !this.hasPermission('update', 'run')
     }
   },
+  methods: {
+    onIntersect([entry]) {
+      this.$apollo.queries.taskRunIds.skip = !entry.isIntersecting
+    }
+  },
   apollo: {
     taskRunIds: {
       query: require('@/graphql/FlowRun/task-run-ids.gql'),
@@ -36,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="activeButton">
+  <div v-if="activeButton" v-intersect="{ handler: onIntersect }">
     <v-dialog v-model="setStateDialog" max-width="600" @click:outside="reset">
       <template #activator="{ on: dialog }">
         <v-tooltip bottom>