Merge pull request #1008 from amazeeio/987-better-ui-api-error-handling

Better UI/API error handling

services/api/src/resources/task/helpers.js

@@ -20,48 +20,57 @@ const injectLogs = async (task /* : Object */) => {
     };
   }
 
-  const result = await esClient.search({
-    index: 'lagoon-logs-*',
-    sort: '@timestamp:desc',
-    body: {
-      query: {
-        bool: {
-          must: [
-            { match_phrase: { 'meta.remoteId': task.remoteId } },
-            { match_phrase: { 'meta.jobStatus': task.status } },
-          ],
+  try {
+    const result = await esClient.search({
+      index: 'lagoon-logs-*',
+      sort: '@timestamp:desc',
+      body: {
+        query: {
+          bool: {
+            must: [
+              { match_phrase: { 'meta.remoteId': task.remoteId } },
+              { match_phrase: { 'meta.jobStatus': task.status } },
+            ],
+          },
         },
       },
-    },
-  });
+    });
+
+    if (!result.hits.total) {
+      return {
+        ...task,
+        logs: null,
+      };
+    }
 
-  if (!result.hits.total) {
     return {
       ...task,
-      logs: null,
+      logs: R.path(['hits', 'hits', 0, '_source', 'message'], result),
+    };
+  } catch (e) {
+    return {
+      ...task,
+      logs: `There was an error loading the logs: ${e.message}`,
     };
   }
-
-  return {
-    ...task,
-    logs: R.path(['hits', 'hits', 0, '_source', 'message'], result),
-  };
 };
 
 const Helpers = {
-  addTask: async ({
-    id,
-    name,
-    status,
-    created,
-    started,
-    completed,
-    environment,
-    service,
-    command,
-    remoteId,
-    execute,
-  } /* : { id?: number, name: string, status?: string, created?: string, started?: string, completed?: string, environment: number, service: string, command: string, remoteId?: string, execute: boolean } */) => {
+  addTask: async (
+    {
+      id,
+      name,
+      status,
+      created,
+      started,
+      completed,
+      environment,
+      service,
+      command,
+      remoteId,
+      execute,
+    } /* : { id?: number, name: string, status?: string, created?: string, started?: string, completed?: string, environment: number, service: string, command: string, remoteId?: string, execute: boolean } */,
+  ) => {
     const {
       info: { insertId },
     } = await query(
@@ -90,14 +99,24 @@ const Helpers = {
       return taskData;
     }
 
-    rows = await query(sqlClient, environmentSql.selectEnvironmentById(taskData.environment));
+    rows = await query(
+      sqlClient,
+      environmentSql.selectEnvironmentById(taskData.environment),
+    );
     const environmentData = R.prop(0, rows);
 
-    rows = await query(sqlClient, projectSql.selectProject(environmentData.project));
+    rows = await query(
+      sqlClient,
+      projectSql.selectProject(environmentData.project),
+    );
     const projectData = R.prop(0, rows);
 
     try {
-      await createTaskTask({ task: taskData, project: projectData, environment: environmentData });
+      await createTaskTask({
+        task: taskData,
+        project: projectData,
+        environment: environmentData,
+      });
     } catch (error) {
       sendToLagoonLogs(
         'error',

services/ui/src/components/errors/DeploymentNotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Deployment "${variables.deploymentName}" not found`}
+  />
+);

services/ui/src/components/errors/EnvironmentNotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Environment "${variables.openshiftProjectName}" not found`}
+  />
+);

services/ui/src/components/errors/ProjectNotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Project "${variables.name}" not found`}
+  />
+);

services/ui/src/components/errors/QueryError.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ error }) => (
+  <ErrorPage statusCode={500} errorMessage={error.toString()} />
+);

services/ui/src/components/errors/TaskNotFound.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ErrorPage from 'pages/_error';
+
+export default ({ variables }) => (
+  <ErrorPage
+    statusCode={404}
+    errorMessage={`Task "${variables.taskId}" not found`}
+  />
+);

services/ui/src/lib/query/EnvironmentByOpenshiftProjectName.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/EnvironmentWithBackups.js

@@ -3,7 +3,7 @@ import BackupsFragment from 'lib/fragment/Backup';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/EnvironmentWithDeployment.js

@@ -3,7 +3,7 @@ import DeploymentFragment from 'lib/fragment/Deployment';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!, $deploymentName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/EnvironmentWithDeployments.js

@@ -3,7 +3,7 @@ import DeploymentFragment from 'lib/fragment/Deployment';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/EnvironmentWithTask.js

@@ -3,7 +3,7 @@ import TaskFragment from 'lib/fragment/Task';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!, $taskId: Int!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/EnvironmentWithTasks.js

@@ -3,7 +3,7 @@ import TaskFragment from 'lib/fragment/Task';
 
 export default gql`
   query getEnvironment($openshiftProjectName: String!) {
-    environmentByOpenshiftProjectName(
+    environment: environmentByOpenshiftProjectName(
       openshiftProjectName: $openshiftProjectName
     ) {
       id

services/ui/src/lib/query/ProjectByName.js

@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 
 export default gql`
   query getProject($name: String!){
-    projectByName (name: $name){
+    project: projectByName (name: $name){
       id
       name
       branches

services/ui/src/lib/renderWhile.js

@@ -0,0 +1,6 @@
+import * as R from 'ramda';
+import branch from 'recompose/branch';
+import renderComponent from 'recompose/renderComponent';
+
+export default (predicate, component) =>
+  branch(props => predicate(props), renderComponent(component));

services/ui/src/lib/withDataRequired.js

@@ -0,0 +1,30 @@
+import * as R from 'ramda';
+import EnvironmentNotFound from 'components/errors/EnvironmentNotFound';
+import TaskNotFound from 'components/errors/TaskNotFound';
+import DeploymentNotFound from 'components/errors/DeploymentNotFound';
+import ProjectNotFound from 'components/errors/ProjectNotFound';
+import renderWhile from 'lib/renderWhile';
+
+const noProp = R.complement(R.prop);
+const noEnvironmentData = noProp('environment');
+const noProjectData = noProp('project');
+
+export const withEnvironmentRequired = renderWhile(
+  ({ data }) => noEnvironmentData(data),
+  EnvironmentNotFound
+);
+
+export const withTaskRequired = renderWhile(
+  ({ data: { environment } }) => !environment.tasks.length,
+  TaskNotFound
+);
+
+export const withDeploymentRequired = renderWhile(
+  ({ data: { environment } }) => !environment.deployments.length,
+  DeploymentNotFound
+);
+
+export const withProjectRequired = renderWhile(
+  ({ data }) => noProjectData(data),
+  ProjectNotFound
+);

services/ui/src/lib/withQueryError.js

@@ -0,0 +1,7 @@
+import QueryError from 'components/errors/QueryError';
+import renderWhile from 'lib/renderWhile';
+
+export default renderWhile(
+  ({ error }) => error,
+  QueryError
+);

services/ui/src/lib/withQueryLoading.js

@@ -0,0 +1,7 @@
+import LoadingPage from 'pages/_loading';
+import renderWhile from 'lib/renderWhile';
+
+export default renderWhile(
+  ({ loading }) => loading,
+  LoadingPage
+);

services/ui/src/pages/backups.js

@@ -6,13 +6,14 @@ import { Query } from 'react-apollo';
 import MainLayout from 'layouts/main';
 import EnvironmentWithBackupsQuery from 'lib/query/EnvironmentWithBackups';
 import BackupsSubscription from 'lib/subscription/Backups';
-import LoadingPage from 'pages/_loading';
-import ErrorPage from 'pages/_error';
 import Breadcrumbs from 'components/Breadcrumbs';
 import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
 import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
 import NavTabs from 'components/NavTabs';
 import Backups from 'components/Backups';
+import withQueryLoading from 'lib/withQueryLoading';
+import withQueryError from 'lib/withQueryError';
+import { withEnvironmentRequired } from 'lib/withDataRequired';
 import { bp, color } from 'lib/variables';
 
 const PageBackups = ({ router }) => (
@@ -24,31 +25,11 @@ const PageBackups = ({ router }) => (
       query={EnvironmentWithBackupsQuery}
       variables={{ openshiftProjectName: router.query.openshiftProjectName }}
     >
-      {({
-        loading,
-        error,
-        data: { environmentByOpenshiftProjectName: environment },
-        subscribeToMore
-      }) => {
-        if (loading) {
-          return <LoadingPage />;
-        }
-
-        if (error) {
-          return <ErrorPage statusCode={500} errorMessage={error.toString()} />;
-        }
-
-        if (!environment) {
-          return (
-            <ErrorPage
-              statusCode={404}
-              errorMessage={`Environment "${
-                router.query.openshiftProjectName
-              }" not found`}
-            />
-          );
-        }
-
+      {R.compose(
+        withQueryLoading,
+        withQueryError,
+        withEnvironmentRequired
+      )(({ data: { environment }, subscribeToMore }) => {
         subscribeToMore({
           document: BackupsSubscription,
           variables: { environment: environment.id },
@@ -138,7 +119,7 @@ const PageBackups = ({ router }) => (
             `}</style>
           </MainLayout>
         );
-      }}
+      })}
     </Query>
   </>
 );