Add taskChanged API subscription and utilize it in UI

uselagoon · Dec 10, 2018 · 3597c24 · 3597c24
1 parent 8ab8b83
commit 3597c24
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 6 deletions.
diff --git a/services/api/src/resolvers.js b/services/api/src/resolvers.js
@@ -28,6 +28,7 @@ const {
   addTask,
   deleteTask,
   updateTask,
+  taskSubscriber,
 } = require('./resources/task/resolvers');
 
 const {
@@ -266,6 +267,7 @@ const resolvers /* : { [string]: ResolversObj | typeof GraphQLDate } */ = {
   Subscription: {
     backupChanged: backupSubscriber,
     deploymentChanged: deploymentSubscriber,
+    taskChanged: taskSubscriber,
   },
   Date: GraphQLDate,
 };

diff --git a/services/api/src/resources/task/events.js b/services/api/src/resources/task/events.js
@@ -0,0 +1,6 @@
+module.exports = {
+  TASK: {
+    ADDED: 'api.event.task.added',
+    UPDATED: 'api.event.task.updated',
+  }
+};
diff --git a/services/api/src/resources/task/resolvers.js b/services/api/src/resources/task/resolvers.js
@@ -3,6 +3,7 @@
 const R = require('ramda');
 const { sendToLagoonLogs } = require('@lagoon/commons/src/logs');
 const { createTaskTask } = require('@lagoon/commons/src/tasks');
+const { pubSub, createEnvironmentFilteredSubscriber } = require('../../clients/pubSub');
 const esClient = require('../../clients/esClient');
 const sqlClient = require('../../clients/sqlClient');
 const {
@@ -16,6 +17,7 @@ const {
 const Sql = require('./sql');
 const projectSql = require('../project/sql');
 const environmentSql = require('../environment/sql');
+const EVENTS = require('./events');
 
 /* ::
 
@@ -93,7 +95,9 @@ const getTasksByEnvironmentId = async (
 
   const rows = await query(sqlClient, prep({ eid }));
 
-  return rows.map(row => injectLogs(row));
+  const newestFirst = R.sort(R.descend(R.prop('created')), rows);
+
+  return newestFirst.map(row => injectLogs(row));
 };
 
 const getTaskByRemoteId = async (
@@ -190,11 +194,13 @@ const addTask = async (
   );
 
   let rows = await query(sqlClient, Sql.selectTask(insertId));
-  const taskData = R.prop(0, rows);
+  const taskData = await injectLogs(R.prop(0, rows));
+
+  pubSub.publish(EVENTS.TASK.ADDED, taskData);
 
   // Allow creating task data w/o executing the task
   if (role === 'admin' && execute === false) {
-    return injectLogs(taskData);
+    return taskData;
   }
 
   rows = await query(sqlClient, environmentSql.selectEnvironmentById(taskData.environment));
@@ -216,7 +222,7 @@ const addTask = async (
     );
   }
 
-  return injectLogs(taskData);
+  return taskData;
 };
 
 const deleteTask = async (
@@ -321,16 +327,27 @@ const updateTask = async (
   );
 
   const rows = await query(sqlClient, Sql.selectTask(id));
+  const taskData = await injectLogs(R.prop(0, rows));
 
-  return injectLogs(R.prop(0, rows));
+  pubSub.publish(EVENTS.TASK.UPDATED, taskData);
+
+  return taskData;
 };
 
+const taskSubscriber = createEnvironmentFilteredSubscriber(
+  [
+    EVENTS.TASK.ADDED,
+    EVENTS.TASK.UPDATED,
+  ]
+);
+
 const Resolvers /* : ResolversObj */ = {
   getTasksByEnvironmentId,
   getTaskByRemoteId,
   addTask,
   deleteTask,
   updateTask,
+  taskSubscriber,
 };
 
 module.exports = Resolvers;
diff --git a/services/api/src/typeDefs.js b/services/api/src/typeDefs.js
@@ -916,6 +916,7 @@ const typeDefs = gql`
   type Subscription {
     backupChanged(environment: Int!): Backup
     deploymentChanged(environment: Int!): Deployment
+    taskChanged(environment: Int!): Task
   }
 `;
 

diff --git a/services/ui/src/pages/tasks.js b/services/ui/src/pages/tasks.js
@@ -43,14 +43,31 @@ const query = gql`
   }
 `;
 
+const subscribe = gql`
+  subscription subscribeToTasks($environment: Int!) {
+    taskChanged(environment: $environment) {
+      id
+      name
+      status
+      created
+      started
+      completed
+      remoteId
+      command
+      service
+      logs
+    }
+  }
+`;
+
 const PageTasks = withRouter(props => {
   return (
     <Page>
       <Query
         query={query}
         variables={{ openshiftProjectName: props.router.query.name }}
       >
-        {({ loading, error, data }) => {
+        {({ loading, error, data, subscribeToMore }) => {
           if (loading) return null;
           if (error) return `Error!: ${error}`;
           const environment = data.environmentByOpenshiftProjectName;
@@ -69,6 +86,40 @@ const PageTasks = withRouter(props => {
             }
           ];
 
+          subscribeToMore({
+            document: subscribe,
+            variables: { environment: environment.id},
+            updateQuery: (prevStore, { subscriptionData }) => {
+              if (!subscriptionData.data) return prevStore;
+              const prevTasks = prevStore.environmentByOpenshiftProjectName.tasks;
+              const incomingTask = subscriptionData.data.taskChanged;
+              const existingIndex = prevTasks.findIndex(prevTask => prevTask.id === incomingTask.id);
+              let newTasks;
+
+              // New task.
+              if (existingIndex === -1) {
+                newTasks = [
+                  incomingTask,
+                  ...prevTasks,
+                ];
+              }
+              // Updated task
+              else {
+                newTasks = Object.assign([...prevTasks], {[existingIndex]: incomingTask});
+              }
+
+              const newStore = {
+                ...prevStore,
+                environmentByOpenshiftProjectName: {
+                  ...prevStore.environmentByOpenshiftProjectName,
+                  tasks: newTasks,
+                },
+              };
+
+              return newStore;
+            }
+          });
+
           const tasks = environment.tasks.map(task => {
 
             const taskStart = task.started || task.created;