351

CHANGES.md

@@ -10,14 +10,16 @@ release.
 
 ### Enhancements
 
-[#656](https://github.com/cylc/cylc-ui/pull/656) - Show runhead-limited tasks.
+[#656](https://github.com/cylc/cylc-ui/pull/656) - Show runahead-limited tasks.
 
 [#657](https://github.com/cylc/cylc-ui/pull/657) - Display a different icon, with
 a shadow underneath, for the Job component.
 
 [#658](https://github.com/cylc/cylc-ui/pull/658) - Allow user to set the order
 of cycle points.
 
+[#543](https://github.com/cylc/cylc-ui/pull/543) - Use deltas in GScan.
+
 ### Fixes
 
 [#691](https://github.com/cylc/cylc-ui/pull/691) -

src/components/core/Alert.vue

@@ -27,15 +27,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       light
       colored-border
     >
+      <template v-slot:close="props">
+        <v-icon @click="closeAlert(props.toggle)">{{ svgPaths.close }}</v-icon>
+      </template>
       {{ alert.getText() }}
     </v-alert>
   </div>
 </template>
 
 <script>
-import {
-  mapState
-} from 'vuex'
+import { mdiClose } from '@mdi/js'
+import { mapActions, mapState } from 'vuex'
 
 export default {
   name: 'Alert',
@@ -47,7 +49,10 @@ export default {
         ['error', 'red'],
         ['success', 'green'],
         ['warning', 'amber']
-      ])
+      ]),
+      svgPaths: {
+        close: mdiClose
+      }
     }
   },
 
@@ -56,8 +61,19 @@ export default {
   },
 
   methods: {
+    ...mapActions(['setAlert']),
     getColor (type) {
       return this.colors.get(type) || ''
+    },
+    /**
+     * Dismisses the alert from the UI, also removing it from the Vuex store.
+     *
+     * @param {Function} toggleFunction - the original Vuetify toggle function
+     * @see https://vuetifyjs.com/en/api/v-alert/
+     */
+    closeAlert (toggleFunction) {
+      this.setAlert(null)
+      toggleFunction()
     }
   }
 }

src/components/cylc/Drawer.vue

@@ -40,19 +40,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-list-item>
 
       <v-list-item
-          to="/"
-          active-class="primary grey--text text--darken-3"
-          class="v-list-item"
+        to="/"
+        active-class="primary grey--text text--darken-3"
+        class="v-list-item"
       >
         <v-list-item-action>
           <v-icon>{{ svgPaths.home }}</v-icon>
         </v-list-item-action>
         <v-list-item-title>Dashboard</v-list-item-title>
       </v-list-item>
       <v-list-item
-          to="/graphiql"
-          active-class="primary grey--text text--darken-3"
-          class="v-list-item"
+        to="/graphiql"
+        active-class="primary grey--text text--darken-3"
+        class="v-list-item"
       >
         <v-list-item-action>
           <v-icon>{{ svgPaths.graphql }}</v-icon>
@@ -61,15 +61,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </v-list-item>
       <v-divider />
       <v-subheader>Workflows</v-subheader>
-      <g-scan
-        :workflows="workflows"
-      />
+      <g-scan />
     </v-list>
     <template v-slot:append>
       <div class="px-4 py-2 d-flex justify-center">
         <span class="grey--text text--darken-2">
-            <strong v-if="environment !== 'PRODUCTION'">{{ environment }}</strong> {{ $t('App.name') }} {{ version }}
-          </span>
+          <strong v-if="environment !== 'PRODUCTION'">{{ environment }}</strong> {{ $t('App.name') }} {{ version }}
+        </span>
       </div>
     </template>
   </v-navigation-drawer>
@@ -101,7 +99,6 @@ export default {
     }
   },
   computed: {
-    ...mapState('workflows', ['workflows']),
     ...mapState('user', ['user']),
     drawer: {
       get: function () {

src/components/cylc/Subscriptions.vue

@@ -0,0 +1,95 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <v-container>
+    <h3>Subscriptions</h3>
+    <v-expansion-panels
+      v-for="subscription in subscriptions"
+      :key="subscription.name"
+    >
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          {{ subscription.name }}
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <pre>{{ subscription.query }}</pre>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <h3>Subscribers</h3>
+    <ul
+      v-for="(subscriptionNames, subscriberID) in subscribers"
+      :key="subscriberID"
+    >
+      <li>
+        {{ subscriberID }}
+        <ul
+          v-for="subscriptionName in subscriptionNames"
+          :key="subscriptionName"
+        >
+          <li>{{ subscriptionName }}</li>
+        </ul>
+      </li>
+    </ul>
+  </v-container>
+</template>
+
+<script>
+import subscriptionViewMixin from '@/mixins/subscriptionView'
+
+export default {
+  name: 'Subscriptions',
+  mixins: [subscriptionViewMixin],
+  computed: {
+    raw () {
+      return this.$workflowService.subscriptions
+    },
+    subscriptions () {
+      const subs = this.$workflowService.subscriptions
+      // const subscribers = {}
+      let sub = null
+      let query = null
+      const ret = []
+      for (const subName in subs) {
+        sub = subs[subName]
+        query = sub.query.query.loc.source.body
+        ret.push({ name: subName, query })
+      }
+      return ret
+    },
+    subscribers () {
+      const subs = this.$workflowService.subscriptions
+      const subscribers = {}
+      let sub = null
+      for (const subName in subs) {
+        sub = subs[subName]
+        for (const subscriberID in sub.subscribers) {
+          if (!subscribers[subscriberID]) {
+            subscribers[subscriberID] = []
+          }
+          console.log(
+            sub.subscribers[subscriberID]
+          )
+          subscribers[subscriberID].push(subName)
+        }
+      }
+      return subscribers
+    }
+  }
+}
+</script>

src/components/cylc/common/deltas.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * @typedef {Object} GraphQLResponseData
+ * @property {Deltas} deltas
+ */
+
+/**
+ * @typedef {Object} Deltas
+ * @property {string} id
+ * @property {boolean} shutdown
+ * @property {?DeltasAdded} added
+ * @property {?DeltasUpdated} updated
+ * @property {?DeltasPruned} pruned
+ */
+
+/**
+ * @typedef {Object} WorkflowGraphQLData
+ * @property {string} id
+ */
+
+/**
+ * @typedef {Object} DeltasAdded
+ * @property {WorkflowGraphQLData} workflow
+ * @property {Array<Object>} cyclePoints
+ * @property {Array<Object>} familyProxies
+ * @property {Array<Object>} taskProxies
+ * @property {Array<Object>} jobs
+ */
+
+/**
+ * @typedef {Object} DeltasUpdated
+ * @property {Object} workflow
+ * @property {Array<Object>} familyProxies
+ * @property {Array<Object>} taskProxies
+ * @property {Array<Object>} jobs
+ */
+
+/**
+ * @typedef {Object} DeltasPruned
+ * @property {Array<string>} workflows
+ * @property {Array<string>} taskProxies - IDs of task proxies removed
+ * @property {Array<string>} familyProxies - IDs of family proxies removed
+ * @property {Array<string>} jobs - IDs of jobs removed
+ */

src/components/cylc/common/merge.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import Vue from 'vue'
+
+/**
+ * Only effectively used if we return something. Otherwise Lodash will use its default merge
+ * function. We use it here not to mutate objects, but to check that we are not losing
+ * reactivity in Vue by adding a non-reactive property into an existing object (which should
+ * be reactive and used in the node tree component).
+ *
+ * @see https://docs-lodash.com/v4/merge-with/
+ * @param {?*} objValue - destination value in the existing object (same as object[key])
+ * @param {?*} srcValue - source value from the object with new values to be merged
+ * @param {string} key - name of the property being merged (used to access object[key])
+ * @param {*} object - the object being mutated (original, destination, the value is retrieved with object[key])
+ * @param {*} source - the source object
+ */
+function mergeWithCustomizer (objValue, srcValue, key, object, source) {
+  if (srcValue !== undefined) {
+    // 1. object[key], or objValue, is undefined
+    //    meaning the destination object does not have the property
+    //    so let's add it with reactivity!
+    if (objValue === undefined) {
+      Vue.set(object, `${key}`, srcValue)
+    }
+    // 2. object[key], or objValue, is defined but without reactivity
+    //    this means somehow the object got a new property that is not reactive
+    //    so let's now make it reactive with the new value!
+    if (object[key] && !object[key].__ob__) {
+      Vue.set(object, `${key}`, srcValue)
+    }
+  }
+}
+
+export {
+  mergeWithCustomizer
+}