Add missing ui parts (#257)

* Add jobs resource. Add simple test view for sync list * Add schema to onboarding and create source * Show logs for sync history * Add jobList polling. Small ui fixes * Add log time * Fix style config * code style Co-authored-by: cgardens <giardina.charles@gmail.com>
airbytehq · Sep 15, 2020 · be1fc79 · be1fc79
1 parent a176c71
commit be1fc79
Show file tree

Hide file tree

Showing 30 changed files with 748 additions and 101 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -402,8 +402,11 @@ ij_xml_space_inside_empty_tag = false
 ij_xml_text_wrap = normal
 ij_xml_use_custom_settings = false
 
-[{*.ats,*.ts}]
-ij_continuation_indent_size = 4
+[{*.ats,*.ts,*.tsx}]
+max_line_length = off
+indent_size = 2
+tab_width = 2
+ij_continuation_indent_size = 2
 ij_typescript_align_imports = false
 ij_typescript_align_multiline_array_initializer_expression = false
 ij_typescript_align_multiline_binary_operation = false

diff --git a/dataline-webapp/package-lock.json b/dataline-webapp/package-lock.json
diff --git a/dataline-webapp/package.json b/dataline-webapp/package.json
@@ -14,6 +14,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.14.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.8",
+    "dayjs": "^1.8.35",
     "formik": "2.1.5",
     "query-string": "^6.13.1",
     "react": "^16.12.0",

diff --git a/dataline-webapp/src/components/FrequencyForm/FrequencyForm.tsx b/dataline-webapp/src/components/FrequencyForm/FrequencyForm.tsx
@@ -1,17 +1,21 @@
-import React from "react";
-import { useIntl } from "react-intl";
+import React, { useState } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 import { Field, FieldProps, Form, Formik } from "formik";
 
 import LabeledDropDown from "../LabeledDropDown";
 import FrequencyConfig from "../../data/FrequencyConfig.json";
 import BottomBlock from "./components/BottomBlock";
+import Label from "../Label";
+import TreeView, { INode } from "../TreeView/TreeView";
 
 type IProps = {
   className?: string;
+  schema: INode[];
   errorMessage?: React.ReactNode;
-  onSubmit: (values: { frequency: string }) => void;
+  onSubmit: (values: { frequency: string }, checkedState: string[]) => void;
+  initialCheckedSchema: Array<string>;
 };
 
 const SmallLabeledDropDown = styled(LabeledDropDown)`
@@ -22,14 +26,24 @@ const FormContainer = styled(Form)`
   padding: 22px 27px 23px 24px;
 `;
 
+const TreeViewContainer = styled.div`
+  width: 100%;
+  background: ${({ theme }) => theme.greyColor0};
+  margin-bottom: 29px;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
 const connectionValidationSchema = yup.object().shape({
   frequency: yup.string().required("form.empty.error")
 });
 
 const FrequencyForm: React.FC<IProps> = ({
   onSubmit,
   className,
-  errorMessage
+  errorMessage,
+  schema,
+  initialCheckedSchema
 }) => {
   const formatMessage = useIntl().formatMessage;
   const dropdownData = React.useMemo(
@@ -51,6 +65,9 @@ const FrequencyForm: React.FC<IProps> = ({
     [formatMessage]
   );
 
+  const [checkedState, setCheckedState] = useState(initialCheckedSchema);
+  const onCheckAction = (data: Array<string>) => setCheckedState(data);
+
   return (
     <Formik
       initialValues={{
@@ -60,13 +77,23 @@ const FrequencyForm: React.FC<IProps> = ({
       validateOnChange={true}
       validationSchema={connectionValidationSchema}
       onSubmit={async (values, { setSubmitting }) => {
-        await onSubmit(values);
+        await onSubmit(values, checkedState);
         setSubmitting(false);
       }}
     >
       {({ isSubmitting, setFieldValue, isValid, dirty }) => (
         <FormContainer className={className}>
-          <Field name="serviceType">
+          <Label message={<FormattedMessage id="form.dataSync.message" />}>
+            <FormattedMessage id="form.dataSync" />
+          </Label>
+          <TreeViewContainer>
+            <TreeView
+              nodes={schema}
+              onCheck={onCheckAction}
+              checked={checkedState}
+            />
+          </TreeViewContainer>
+          <Field name="frequency">
             {({ field }: FieldProps<string>) => (
               <SmallLabeledDropDown
                 {...field}

diff --git a/dataline-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx b/dataline-webapp/src/components/SimpleTableComponents/SimpleTableComponents.tsx
@@ -6,6 +6,7 @@ export const Row = styled.div`
   justify-content: flex-start;
   align-items: center;
   height: 32px;
+  position: relative;
 
   font-size: 14px;
   line-height: 17px;

diff --git a/dataline-webapp/src/components/StatusIcon/StatusIcon.tsx b/dataline-webapp/src/components/StatusIcon/StatusIcon.tsx
@@ -16,9 +16,10 @@ const Badge = styled.div<IProps>`
   box-shadow: 0 1px 2px ${({ theme }) => theme.shadowColor};
   border-radius: 50%;
   margin-right: 10px;
-  padding-top: 1px;
+  padding-top: 4px;
   color: ${({ theme }) => theme.whiteColor};
   font-size: 12px;
+  line-height: 12px;
   text-align: center;
   display: inline-block;
 `;

diff --git a/dataline-webapp/src/components/TreeView/TreeView.tsx b/dataline-webapp/src/components/TreeView/TreeView.tsx
@@ -6,7 +6,7 @@ import { faChevronRight, faCheck } from "@fortawesome/free-solid-svg-icons";
 
 import "react-checkbox-tree/lib/react-checkbox-tree.css";
 
-type INode = {
+export type INode = {
   value: string;
   label: string;
   children?: Array<INode>;

diff --git a/dataline-webapp/src/config/index.ts b/dataline-webapp/src/config/index.ts
@@ -1,13 +1,15 @@
 const config: {
-    ui: { helpLink: string; docsLink: string; workspaceId: string };
-    apiUrl: string;
+  ui: { helpLink: string; docsLink: string; workspaceId: string };
+  apiUrl: string;
 } = {
-    ui: {
-        helpLink: "https://dataline.io/",
-        docsLink: "https://docs.dataline.io",
-        workspaceId: "5ae6b09b-fdec-41af-aaf7-7d94cfc33ef6"
-    },
-    apiUrl: process.env.REACT_APP_API_URL || `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`
+  ui: {
+    helpLink: "https://dataline.io/",
+    docsLink: "https://docs.dataline.io",
+    workspaceId: "5ae6b09b-fdec-41af-aaf7-7d94cfc33ef6"
+  },
+  apiUrl:
+    process.env.REACT_APP_API_URL ||
+    `${window.location.protocol}//${window.location.hostname}:8001/api/v1/`
 };
 
 export default config;
diff --git a/dataline-webapp/src/core/helpers.tsx b/dataline-webapp/src/core/helpers.tsx
@@ -0,0 +1,43 @@
+import { SyncSchema } from "./resources/Schema";
+
+export const constructInitialSchemaState = (syncSchema: SyncSchema) => {
+  const initialChecked: Array<string> = [];
+  syncSchema.tables.map(item =>
+    item.columns.forEach(column =>
+      column.selected
+        ? initialChecked.push(`${item.name}_${column.name}`)
+        : null
+    )
+  );
+
+  const formSyncSchema = syncSchema.tables.map((item: any) => ({
+    value: item.name,
+    label: item.name,
+    children: item.columns.map((column: any) => ({
+      value: `${item.name}_${column.name}`,
+      label: column.name
+    }))
+  }));
+
+  return {
+    formSyncSchema,
+    initialChecked
+  };
+};
+
+export const constructNewSchema = (
+  syncSchema: SyncSchema,
+  checkedState: string[]
+) => {
+  const newSyncSchema = {
+    tables: syncSchema.tables.map(item => ({
+      ...item,
+      columns: item.columns.map(column => ({
+        ...column,
+        selected: checkedState.includes(`${item.name}_${column.name}`)
+      }))
+    }))
+  };
+
+  return newSyncSchema;
+};
diff --git a/dataline-webapp/src/core/resources/Connection.ts b/dataline-webapp/src/core/resources/Connection.ts
@@ -8,7 +8,7 @@ export type ScheduleProperties = {
 
 export type SyncSchemaColumn = {
   name: string;
-  selected: string;
+  selected: boolean;
   type: string;
 };
 
@@ -142,4 +142,20 @@ export default class ConnectionResource extends BaseResource
       }
     };
   }
+
+  static syncShape<T extends typeof Resource>(this: T) {
+    return {
+      ...super.detailShape(),
+      getFetchKey: (params: any) =>
+        "POST " + this.url(params) + "/sync" + JSON.stringify(params),
+      fetch: async (
+        params: Readonly<Record<string, string | number>>
+      ): Promise<any> => {
+        await this.fetch("post", `${this.url(params)}/sync`, params);
+        return {
+          connectionId: params.connectionId
+        };
+      }
+    };
+  }
 }
diff --git a/dataline-webapp/src/core/resources/Job.ts b/dataline-webapp/src/core/resources/Job.ts
@@ -0,0 +1,52 @@
+import { Resource, FetchOptions } from "rest-hooks";
+import BaseResource from "./BaseResource";
+import JobLogsResource from "./JobLogs";
+
+export interface Job {
+  id: number;
+  configType: string;
+  configId: string;
+  createdAt: number;
+  startedAt: number;
+  updatedAt: number;
+  status: string;
+}
+
+export default class JobResource extends BaseResource implements Job {
+  readonly id: number = 0;
+  readonly configType: string = "";
+  readonly configId: string = "";
+  readonly createdAt: number = 0;
+  readonly startedAt: number = 0;
+  readonly updatedAt: number = 0;
+  readonly status: string = "";
+
+  pk() {
+    return this.id?.toString();
+  }
+
+  static urlRoot = "jobs";
+
+  static getFetchOptions(): FetchOptions {
+    return {
+      pollFrequency: 2500 // every 2,5 seconds
+    };
+  }
+
+  static listShape<T extends typeof Resource>(this: T) {
+    return {
+      ...super.listShape(),
+      schema: { jobs: [this.asSchema()] }
+    };
+  }
+
+  static detailShape<T extends typeof Resource>(this: T) {
+    return {
+      ...super.detailShape(),
+      schema: {
+        job: this.asSchema(),
+        logs: JobLogsResource.asSchema()
+      }
+    };
+  }
+}
diff --git a/dataline-webapp/src/core/resources/JobLogs.ts b/dataline-webapp/src/core/resources/JobLogs.ts
@@ -0,0 +1,17 @@
+import BaseResource from "./BaseResource";
+
+export interface JobLogs {
+  stdout: string[];
+  stderr: string[];
+}
+
+export default class JobLogsResource extends BaseResource implements JobLogs {
+  readonly stdout: string[] = [];
+  readonly stderr: string[] = [];
+
+  pk() {
+    return "";
+  }
+
+  static urlRoot = "jobs";
+}