Add GraphiQL view

CHANGES.md

@@ -53,6 +53,10 @@ component.
 [#446](https://github.com/cylc/cylc-ui/pull/446) - Allow users to
 increase, decrease, and reset UI font size.
 
+[#457](https://github.com/cylc/cylc-ui/pull/457) - Add a GraphiQL
+view using graphiql.js that sends queries to the backend graphiql
+endpoint.
+
 ### Fixes
 
 [#275](https://github.com/cylc/cylc-ui/pull/275) - Fix size of dashboard

package.json

@@ -34,10 +34,13 @@
     "dedent": "^0.7.0",
     "dotparser": "^0.4.0",
     "enumify": "^2.0.0",
+    "graphiql": "^0.17.5",
     "graphql": "^14.5.8",
     "graphql-tag": "^2.10.1",
     "jshint": "^2.10.2",
     "nprogress": "^0.2.0",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2",
     "tippy.js": "^4.3.5",
     "vue": "^2.6.10",
     "vue-i18n": "^8.14.1",

src/components/cylc/Drawer.vue

@@ -51,6 +51,16 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         </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"
+      >
+        <v-list-item-action>
+          <v-icon>mdi-graphql</v-icon>
+        </v-list-item-action>
+        <v-list-item-title>GraphiQL</v-list-item-title>
+      </v-list-item>
       <v-divider />
       <v-subheader>Workflows</v-subheader>
       <v-list-item

src/graphql/graphiql.js

@@ -0,0 +1,128 @@
+/**
+ * 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/>.
+ */
+
+// Code related to GraphiQL
+
+import { parse } from 'graphql'
+import { createGraphQLUrls } from '@/utils/graphql'
+
+// TODO: https://github.com/apollographql/GraphiQL-Subscriptions-Fetcher/issues/16
+//       the functions hasSubscriptionOperation and graphQLFetcher are both from
+//       the graphiql-subscriptions-fetcher. Unfortunately that project is archived
+//       on GitHub, and is using the old API for subscription-transport-ws, which
+//       is a dependency of Cylc UI. As we cannot use an older version, instead we
+//       have the two functions here, patched as per issue to work with newer API.
+
+/**
+ * Tell whether it is a query or subscription.
+ *
+ * @private
+ * @param {{
+ *   query: string
+ * }}graphQlParams
+ * @returns {boolean} true if the params contain a subscription, false otherwise
+ */
+const hasSubscriptionOperation = function (graphQlParams) {
+  const queryDoc = parse(graphQlParams.query)
+  for (let _i = 0, _a = queryDoc.definitions; _i < _a.length; _i++) {
+    const definition = _a[_i]
+    if (definition.kind === 'OperationDefinition') {
+      const operation = definition.operation
+      if (operation === 'subscription') {
+        return true
+      }
+    }
+  }
+  return false
+}
+
+/**
+ * The GraphQL fetcher function.
+ *
+ * @param {Object|null} subscriptionsClient
+ * @param {function} fallbackFetcher
+ * @param {{
+ *   subscription: Object
+ * }} component
+ * @returns {function(...[*]=)}
+ */
+const graphQLFetcher = function (subscriptionsClient, fallbackFetcher, component) {
+  component.subscription = null
+  return function (graphQLParams) {
+    if (subscriptionsClient && component.subscription !== null) {
+      subscriptionsClient.unsubscribe(component.subscription)
+    }
+    if (subscriptionsClient && hasSubscriptionOperation(graphQLParams)) {
+      return {
+        subscribe: function (observer) {
+          observer.next('Your subscription data will appear here after server publication!')
+          const subscription = subscriptionsClient.request({
+            query: graphQLParams.query,
+            variables: graphQLParams.variables
+          }, function (error, result) {
+            if (error) {
+              observer.error(error)
+            } else {
+              observer.next(result)
+            }
+          })
+          component.subscription = subscription.subscribe((result, err) => {
+            if (err) {
+              observer.error(err)
+            } else {
+              observer.next(result)
+            }
+          })
+          return component.subscription
+        }
+      }
+    } else {
+      return fallbackFetcher(graphQLParams)
+    }
+  }
+}
+
+/**
+ * Fallback GraphQL fetcher.
+ *
+ * @param {*} graphQLParams
+ * @returns {Promise<any | string>}
+ */
+function fallbackGraphQLFetcher (graphQLParams) {
+  // re-using same method UI uses to create GraphQL URL's used by its client with createGraphQLUrls()
+  return fetch(
+    createGraphQLUrls().httpUrl,
+    {
+      method: 'post',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(graphQLParams),
+      credentials: 'include'
+    }
+  ).then(function (response) {
+    return response.json().catch(function () {
+      return response.text()
+    })
+  })
+}
+
+export {
+  graphQLFetcher,
+  fallbackGraphQLFetcher
+}

src/router/paths.js

@@ -94,6 +94,13 @@ export default [
       layout: 'default'
     }
   },
+  {
+    path: '/graphiql',
+    view: 'GraphiQL',
+    meta: {
+      layout: 'empty'
+    }
+  },
   {
     path: '*',
     view: 'NotFound',

src/services/workflow.service.js

@@ -54,6 +54,7 @@ class SubscriptionWorkflowService extends GQuery {
    */
   constructor (httpUrl, subscriptionClient) {
     super()
+    this.subscriptionClient = subscriptionClient
     this.apolloClient = createApolloClient(httpUrl, subscriptionClient)
     this.observable = null
   }

src/views/GraphiQL.vue

@@ -0,0 +1,84 @@
+<!--
+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>
+  <div id="graphiql" ref="graphiql">Loading...</div>
+</template>
+
+<script>
+import { mixin } from '@/mixins'
+import ReactDOM from 'react-dom'
+import React from 'react'
+import GraphiQL from 'graphiql'
+import { graphQLFetcher, fallbackGraphQLFetcher } from '@/graphql/graphiql'
+
+export default {
+  mixins: [mixin],
+  metaInfo () {
+    return {
+      title: 'GraphiQL'
+    }
+  },
+  data () {
+    return {
+      fetcher: null,
+      subscription: null
+    }
+  },
+  mounted () {
+    this.fetcher = this.createFetcher()
+    ReactDOM.render(
+      React.createElement(GraphiQL, {
+        fetcher: this.fetcher,
+        defaultVariableEditorOpen: false
+      }),
+      this.$refs.graphiql
+    )
+  },
+  beforeRouteLeave (to, from, next) {
+    // Important to remember to unsubscribe, otherwise a user may accidentally create several
+    // subscriptions/observers, causing performance issues on both frontend and backend.
+    if (this.subscription !== null) {
+      this.subscription.unsubscribe()
+      this.subscription = null
+    }
+    next()
+  },
+  methods: {
+    createFetcher () {
+      const subscriptionClient = this.$workflowService.subscriptionClient
+      return subscriptionClient !== null
+        ? graphQLFetcher(subscriptionClient, fallbackGraphQLFetcher, this) : fallbackGraphQLFetcher
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import '~graphiql/graphiql.min.css';
+
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+#graphiql {
+  height: 100vh;
+}
+</style>