Add logs for errors (airbytehq#8064)

* Add logs for errors * Use ErrorLogs component * Create common component for ServiceForm with logs * Fix import Co-authored-by: Artem Astapenko <jamakase@Artems-MacBook-Pro.local>
roelsadza · Dec 20, 2021 · b3b0dce · b3b0dce
1 parent 2c7f239
commit b3b0dce
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 165 deletions.
diff --git a/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx b/airbyte-webapp/src/components/CreateConnectionContent/CreateConnectionContent.tsx
@@ -18,6 +18,7 @@ import SourceDefinitionResource from "core/resources/SourceDefinition";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 import { IDataItem } from "components/base/DropDown/components/Option";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
+import { LogsRequestError } from "core/request/LogsRequestError";
 import { Destination, Source } from "core/domain/connector";
 
 const SkipButton = styled.div`
@@ -102,7 +103,9 @@ const CreateConnectionContent: React.FC<IProps> = ({
           onClick={onDiscoverSchema}
           additionControl={<SkipButton>{additionBottomControls}</SkipButton>}
         />
-        <JobsLogItem jobInfo={schemaErrorStatus?.response} />
+        <JobsLogItem
+          jobInfo={LogsRequestError.extractJobInfo(schemaErrorStatus)}
+        />
       </ContentCard>
     );
   }

diff --git a/airbyte-webapp/src/core/request/LogsRequestError.ts b/airbyte-webapp/src/core/request/LogsRequestError.ts
@@ -0,0 +1,23 @@
+import { CommonRequestError } from "./CommonRequestError";
+
+export class LogsRequestError extends CommonRequestError {
+  __type = "common.errorWithLogs";
+  jobInfo: any;
+
+  constructor(jobInfo: any, response: Response, msg?: string) {
+    super(response, msg);
+    this.jobInfo = jobInfo;
+    this._status = 400;
+  }
+
+  static extractJobInfo(error: any): any {
+    if (!error) {
+      return false;
+    }
+    return isLogsRequestError(error) ? error.jobInfo : null;
+  }
+}
+
+export function isLogsRequestError(error: any): error is LogsRequestError {
+  return error.__type === "common.errorWithLogs";
+}
diff --git a/airbyte-webapp/src/core/resources/Scheduler.ts b/airbyte-webapp/src/core/resources/Scheduler.ts
@@ -1,9 +1,10 @@
 import { ReadShape, Resource, SchemaDetail } from "rest-hooks";
+
 import BaseResource from "./BaseResource";
 import Status from "core/statuses";
-import { CommonRequestError } from "core/request/CommonRequestError";
 import { ConnectionSpecification } from "core/domain/connection";
-import { Logs, JobItem } from "core/resources/Job";
+import { JobItem, Logs } from "core/resources/Job";
+import { LogsRequestError } from "core/request/LogsRequestError";
 
 export type JobInfo = JobItem & {
   logs: Logs;
@@ -55,12 +56,7 @@ export default class SchedulerResource
             status: result.status,
           };
 
-          const e = new CommonRequestError(result, result.message || "");
-          // Generate error with failed status and received logs
-          e._status = 400;
-          e.response = jobInfo;
-
-          throw e;
+          throw new LogsRequestError(jobInfo, jobInfo, result.message);
         }
 
         return result;
@@ -96,12 +92,7 @@ export default class SchedulerResource
             status: result.status,
           };
 
-          const e = new CommonRequestError(result, result.message || "");
-          // Generate error with failed status and received logs
-          e._status = 400;
-          e.response = jobInfo;
-
-          throw e;
+          throw new LogsRequestError(jobInfo, jobInfo, result.message);
         }
 
         return result;

diff --git a/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
@@ -67,7 +67,6 @@ const CreateDestinationPage: React.FC = () => {
           destinationDefinitions={destinationDefinitions}
           hasSuccess={successRequest}
           error={errorStatusRequest}
-          jobInfo={errorStatusRequest?.response}
         />
       </FormPageContent>
     </>

diff --git a/...bapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx b/...bapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx
@@ -1,15 +1,12 @@
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
-
-import ContentCard from "components/ContentCard";
-import ServiceForm from "views/Connector/ServiceForm";
 import useRouter from "hooks/useRouter";
 import { useDestinationDefinitionSpecificationLoad } from "hooks/services/useDestinationHook";
-import { JobInfo } from "core/resources/Scheduler";
-import { JobsLogItem } from "components/JobItem";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
 import { ConnectionConfiguration } from "core/domain/connection";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
+import { LogsRequestError } from "core/request/LogsRequestError";
+import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { DestinationDefinition } from "core/domain/connector";
 
 type IProps = {
@@ -22,7 +19,6 @@ type IProps = {
   destinationDefinitions: DestinationDefinition[];
   hasSuccess?: boolean;
   error?: { message?: string; status?: number } | null;
-  jobInfo?: JobInfo;
   afterSelectConnector?: () => void;
 };
 
@@ -31,7 +27,6 @@ const DestinationForm: React.FC<IProps> = ({
   destinationDefinitions,
   error,
   hasSuccess,
-  jobInfo,
   afterSelectConnector,
 }) => {
   const { location } = useRouter();
@@ -77,30 +72,25 @@ const DestinationForm: React.FC<IProps> = ({
   const errorMessage = error ? createFormErrorMessage(error) : null;
 
   return (
-    <>
-      <ContentCard
-        title={<FormattedMessage id="onboarding.destinationSetUp" />}
-      >
-        <ServiceForm
-          onServiceSelect={onDropDownSelect}
-          fetchingConnectorError={sourceDefinitionError}
-          onSubmit={onSubmitForm}
-          formType="destination"
-          availableServices={destinationDefinitions}
-          selectedConnector={destinationDefinitionSpecification}
-          hasSuccess={hasSuccess}
-          errorMessage={errorMessage}
-          isLoading={isLoading}
-          formValues={
-            destinationDefinitionId
-              ? { serviceType: destinationDefinitionId }
-              : undefined
-          }
-          allowChangeConnector
-        />
-        <JobsLogItem jobInfo={jobInfo} />
-      </ContentCard>
-    </>
+    <ConnectorCard
+      onServiceSelect={onDropDownSelect}
+      fetchingConnectorError={sourceDefinitionError}
+      onSubmit={onSubmitForm}
+      formType="destination"
+      availableServices={destinationDefinitions}
+      selectedConnector={destinationDefinitionSpecification}
+      hasSuccess={hasSuccess}
+      errorMessage={errorMessage}
+      isLoading={isLoading}
+      formValues={
+        destinationDefinitionId
+          ? { serviceType: destinationDefinitionId }
+          : undefined
+      }
+      allowChangeConnector
+      title={<FormattedMessage id="onboarding.destinationSetUp" />}
+      jobInfo={LogsRequestError.extractJobInfo(error)}
+    />
   );
 };
 

diff --git a/...pp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.tsx b/...pp/src/pages/DestinationPage/pages/DestinationItemPage/components/DestinationSettings.tsx
@@ -3,11 +3,7 @@ import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 import { useResource } from "rest-hooks";
 
-import { ContentCard } from "components";
-import { JobsLogItem } from "components/JobItem";
 import DeleteBlock from "components/DeleteBlock";
-
-import ServiceForm from "views/Connector/ServiceForm";
 import useDestination, {
   useDestinationDefinitionSpecificationLoadAsync,
 } from "hooks/services/useDestinationHook";
@@ -17,6 +13,8 @@ import { ConnectionConfiguration } from "core/domain/connection";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 
 import { createFormErrorMessage } from "utils/errorStatusMessage";
+import { LogsRequestError } from "core/request/LogsRequestError";
+import { ConnectorCard } from "views/Connector/ConnectorCard";
 import { Destination } from "core/domain/connector";
 
 const Content = styled.div`
@@ -105,25 +103,22 @@ const DestinationsSettings: React.FC<IProps> = ({
 
   return (
     <Content>
-      <ContentCard
+      <ConnectorCard
+        onRetest={onRetest}
+        isEditMode
+        onSubmit={onSubmitForm}
+        formType="destination"
+        availableServices={[destinationDefinition]}
+        formValues={{
+          ...currentDestination,
+          serviceType: currentDestination.destinationDefinitionId,
+        }}
+        selectedConnector={destinationSpecification}
+        successMessage={saved && <FormattedMessage id="form.changesSaved" />}
+        errorMessage={errorStatusRequest?.statusMessage}
         title={<FormattedMessage id="destination.destinationSettings" />}
-      >
-        <ServiceForm
-          onRetest={onRetest}
-          isEditMode
-          onSubmit={onSubmitForm}
-          formType="destination"
-          availableServices={[destinationDefinition]}
-          formValues={{
-            ...currentDestination,
-            serviceType: currentDestination.destinationDefinitionId,
-          }}
-          selectedConnector={destinationSpecification}
-          successMessage={saved && <FormattedMessage id="form.changesSaved" />}
-          errorMessage={errorStatusRequest?.statusMessage}
-        />
-        <JobsLogItem jobInfo={errorStatusRequest?.response} />
-      </ContentCard>
+        jobInfo={LogsRequestError.extractJobInfo(errorStatusRequest)}
+      />
       <DeleteBlock type="destination" onDelete={onDelete} />
     </Content>
   );

diff --git a/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx b/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx
@@ -1,6 +1,7 @@
 import React, { Suspense, useEffect, useState } from "react";
 import styled from "styled-components";
 import { useResource } from "rest-hooks";
+import { FormattedMessage } from "react-intl";
 
 import { Button } from "components";
 import HeadTitle from "components/HeadTitle";
@@ -29,7 +30,6 @@ import LoadingPage from "components/LoadingPage";
 import useWorkspace from "hooks/services/useWorkspace";
 import useRouterHook from "hooks/useRouter";
 import { RoutePaths } from "pages/routes";
-import { FormattedMessage } from "react-intl";
 
 const Content = styled.div<{ big?: boolean; medium?: boolean }>`
   width: 100%;
@@ -152,7 +152,6 @@ const OnboardingPage: React.FC = () => {
       return (
         <SourceStep
           afterSelectConnector={() => setErrorStatusRequest(null)}
-          jobInfo={errorStatusRequest?.response}
           onSubmit={onSubmitSourceStep}
           availableServices={sourceDefinitions}
           hasSuccess={successRequest}
@@ -198,7 +197,6 @@ const OnboardingPage: React.FC = () => {
       return (
         <DestinationStep
           afterSelectConnector={() => setErrorStatusRequest(null)}
-          jobInfo={errorStatusRequest?.response}
           onSubmit={onSubmitDestinationStep}
           availableServices={destinationDefinitions}
           hasSuccess={successRequest}

diff --git a/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx b/airbyte-webapp/src/pages/OnboardingPage/components/DestinationStep.tsx
@@ -1,19 +1,17 @@
 import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-import ContentCard from "components/ContentCard";
-import ServiceForm from "views/Connector/ServiceForm";
-import { JobsLogItem } from "components/JobItem";
+import { LogsRequestError } from "core/request/LogsRequestError";
 
 import { useDestinationDefinitionSpecificationLoad } from "hooks/services/useDestinationHook";
 import { createFormErrorMessage } from "utils/errorStatusMessage";
-import { JobInfo } from "core/resources/Scheduler";
 import { ConnectionConfiguration } from "core/domain/connection";
+import { DestinationDefinition } from "core/domain/connector";
 
+import { ConnectorCard } from "views/Connector/ConnectorCard";
 import TitlesBlock from "./TitlesBlock";
 import HighlightedText from "./HighlightedText";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
-import { DestinationDefinition } from "core/domain/connector";
 
 type IProps = {
   availableServices: DestinationDefinition[];
@@ -25,7 +23,6 @@ type IProps = {
   }) => void;
   hasSuccess?: boolean;
   error?: null | { message?: string; status?: number };
-  jobInfo?: JobInfo;
   afterSelectConnector?: () => void;
 };
 
@@ -34,7 +31,6 @@ const DestinationStep: React.FC<IProps> = ({
   availableServices,
   hasSuccess,
   error,
-  jobInfo,
   afterSelectConnector,
 }) => {
   const [destinationDefinitionId, setDestinationDefinitionId] = useState("");
@@ -91,20 +87,19 @@ const DestinationStep: React.FC<IProps> = ({
       >
         <FormattedMessage id="onboarding.createFirstDestination.text" />
       </TitlesBlock>
-      <ContentCard full>
-        <ServiceForm
-          formType="destination"
-          allowChangeConnector
-          onServiceSelect={onDropDownSelect}
-          onSubmit={onSubmitForm}
-          hasSuccess={hasSuccess}
-          availableServices={availableServices}
-          errorMessage={errorMessage}
-          selectedConnector={destinationDefinitionSpecification}
-          isLoading={isLoading}
-        />
-        <JobsLogItem jobInfo={jobInfo} />
-      </ContentCard>
+      <ConnectorCard
+        full
+        jobInfo={LogsRequestError.extractJobInfo(error)}
+        formType="destination"
+        allowChangeConnector
+        onServiceSelect={onDropDownSelect}
+        onSubmit={onSubmitForm}
+        hasSuccess={hasSuccess}
+        availableServices={availableServices}
+        errorMessage={errorMessage}
+        selectedConnector={destinationDefinitionSpecification}
+        isLoading={isLoading}
+      />
     </>
   );
 };